javascriptでプログラミングを始めるためのNode.js入門
ラリホー！ 継続の錬金術士なおキーヌです。
Node.jsをご存知でしょうか？名前からしてjavascriptの仲間かな？と思った方は正解です。
大雑把にいうとサーバーサイド用のjavascriptと言いましょうか。
サーバーサイドとはなんぞや？と思う方もいらっしゃるので簡単に説明すると
普段Webブラウザで動いているjavascriptがフロントサイドで動くjavascript。
Node.jsはサーバーサイドで動くjavascript。
今まではサーバー用の言語といえばPHPでしたが今は
RubyでもPythonでもJavascriptでもサーバーで動かせることができます。
フロントとサーバー側で同じ名前にすると混乱するので
一般的にはNode.jsと呼ばれるので覚えておくといいでしょう。
これからNode.jsをインストールしていくのですが、WindowsとMacで方法が違うので
分けて導入方法の説明をしていきます。
Windowsはインストーラー、Macはbrewというパッケージ管理ソフトを用います。
個人的にプログラミング全般はMacでやった方が後々楽になるのですが
私自身がWindowsをメインで使っているので、Windowsの方でも安心してNode.jsが使えます。
Linuxの各種ディストリビューションをお使いの方は説明するまでもないですね。自分でやってください。
Node.jsのインストール Windows編
それでは早速Node.jsをインストールしましょう。
Windowsの場合はインストーラーを起動してインストールを進めるだけで簡単にインストールできます。
Node.js公式からインストーラーをダウンロードしてください。
Node.jsは2019/03/23の時点で2つのバージョンが表示されています。
- 10.15.3 LTS
- 11.12.0 Current
もちろん数字が高いほうが新しいのですが、プログラミングの世界では最新バージョンというものは
ネトゲのβテストと似たようなものだと思ってください。
つまり新しい機能によるバグがあったり、過去に使えてた機能が使えなくなったりすることもあります。
なので LTS版をインストールしてください。
(LTSとはLong term Supoprtの略でサポート期間が長いということです。)
ダウンロードが終わったら、インストーラーを起動して指示通りに進めてください。
最初のうちは特に気にせず、何も変更せずにインストールで大丈夫です。
慣れてきたらインストールするディレクトリを違うドライブに変更したり、
パーティションを分けた方のドライブに変更したほうがいいですが、判らない内は気にせず進めても大丈夫です。
インストールが終わったら、タスクバーの左下にあるWindowsマークを右クリックして
「コマンドプロンプト（管理者）」で開いてください。
起動するかどうかの確認ダイアログが表示されるかもしれませんがOKで大丈夫です。
問題なく開けると、真っ黒な画面が出てくると思います。
よく映画とかに出てくるハッカーが使ってそうな画面ですよね。
そうです。あなたも今日からハッカーの卵になりました。おめでとうございます！
というのは置いといて、黒い画面になったらまずはキーボードで「node -v」と打ち込んでください。
nodeと-vの間は半角スペースにしてください。
全角スペースだとエラーがでちゃうので気を付けてください。
打ち込んだら、エンターを押すと、インストールしたNode.jsのバージョンが表示されます。
>node -v
vX.X.XvX.X.X のところはバージョンの数値が入ります。
ついでに、「npm -v」と打ち込んでエンターを押してください。
今度はnpmというプログラムのバージョンが表示されます。
npmとはnode package managerの略で読んで字のごとく
Node.jsのパッケージを管理するソフトです。詳しくは後程。
>npm -v
X.X.X次はMac版のNode.jsインストール説明です。
Windowsで既にインストールした方はMac編のインストールて順を飛ばして次に進んでください。
Node.jsのインストール Mac編
Macでは最初からターミナルという黒い画面で作業を進めていきます。
Launcherを開いて「term」辺りまでキーボードで打ち込むとターミナルが出てきます。
Node.jsを入れる前にまずはHomebrewというMacOSのパッケージ管理ソフトを最初に入れなければいけません。
以下のコマンドを打ち込むかコピペをするなどして実行してください。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"インストールに結構時間がかかるかと思うので気長に待ちましょう。
berwのインストールが終わったら、ちゃんとインストールできているか
「brew -v」と打ち込んでバージョンを確認してみましょう。
$ brew -v
Homebrew X.X.X
Homebrew/homebrew-core (git revision XXXX; last commit 20XX-XX-XX)Node.jsのバージョンを管理するnodebrewを導入
次に、Node.jsを管理するnodebrewのインストールをします。
パッケージを管理するソフトにnodeを管理するソフトとかまどろっこしいな！
と思うかもしれませんが、Node.jsのをすぐに変更することが出来るのでやっておきましょう。
先ほどインストールしたHomebrewを使ってインストールします。
$ brew install nodebrewインストールが終わったら一応「nodebrew -v」でバージョン確認をしてインストールできているか確認しましょう。
$ nodebrew -v
nodebrew X.X.Xnodebrewに環境パスを通す
環境パスの意味が分からない人は今は気にしなくても大丈夫なので後でググってください。
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profileと打ち込むと特に何もなく完了します。
その後にターミナルを再起動したいので一回閉じてもう一度開いてください。
Node.jsのインストール
これでやっとNode.jsのインストールに取り掛かれます。
先ほど導入したnodebrewを使って描きのコマンドを入力してください。
$ nodebrew ls-remote実行すると、インストール可能なNode.jsのバージョンが表記されます。
この中から好きなものを選んでいいのですが、2019/03/23時点でのLTS版を入れてみましょう。
$ nodebrew install-binary 10.15.3ちなみに下記のコマンドにすると最新バージョンがインストールされます。
$ nodebrew install-binary latestですが、今回は10.15.3を導入してください。
インストールが終わったら、恒例のバージョン確認をしてみましょう。
$ node -v
v10.15.3もし、インストールする際に下記のようなエラーが出てしまった場合の対策を書いておきます。
Fetching: https://nodejs.org/dist/v10.15.3/node-v10.15.3-darwin-x64.tar.gz
Warning: Failed to create the file
Warning: /Users/whoami/.nodebrew/src/v10.15.3/node-v10.15.3-darwin-x64.ta
Warning: r.gz: No such file or directory
curl: (23) Failed writing body (0 != 941)
download failed: https://nodejs.org/dist/v10.15.3/node-v10.15.3-darwin-x64.tar.gzこのような表記が出た場合、下記のコマンドでディレクトリを作成します。
$ mkdir -p ~/.nodebrew/srcディレクトリを作成したら、もう一度インストールを試してみてください。
Node.jsでjavascriptを動かしてみよう
Mac版の人はここまで準備が少し長かったですね。おつかれさまです。
WindowsとMacともにNode.jsをインストールした後はここから進めてください。
いよいよNode.jsを使うときがきました。
黒い画面でnodeと打ち込んでエンターを押して見てください。
node
>すると、javascript実行の対話形式モードに切り替わります。
試しに「1+1」と打ち込んでみると「2」と表示されます。
もちろん、javascriptなので変数や条件分岐などもかけちゃいます。
実際の開発で、この対話形式をあまり使うことはないのですが、javascriptの挙動をすぐに見たいときなどには
とても便利なので、何かを試したかったり配列の中に何が入っているのか確認したいときに使いましょう。
それではこの対話形式を使ってjavascriptを実際に書いて見ましょう。
Node.jsのHello World
まずはプログラミング言語お決まりの入門であるハローワールドをやって見ましょう。
javascriptでは画面に文字を出すときはconsole.logという命令を使います。
console.logは変数の中身を表示したりできますので、開発していると頻繁に使用します。
それでは実際に打ち込んで見ましょう。
console.log("Hello World!");
Hello World!
undefinedはい、これで貴方はNode.jsに入門しました！
undefinedは気にしなくても大丈夫です。
もしJavaScriptを触ったことがある人は色々打ち込んで見ても面白いかもしれません。
しかしこれだけだと普通のjavascriptとなんら変わりないので、早速Node.jsらしさを味わって見ましょう。
対話形式モードを終了させるには
「Ctrl+C」を2回打ち込むと終了します。
Macもコマンドキーではなく、コントロールキーを押しながらCキーを2回です。
npmによるパッケージのインストール
npmとは最初にも言いましたが、「Node Package Manager」の略で、
Node.jsの様々なパッケージを管理するソフトです。
Node.jsをインストールすると基本的に自動でインストールされています。
まずは定番のパッケージを入れてみようとおもうのですが、
その前に作業用ディレクトリ(フォルダ)を作ってください。
プログラミングでは基本的にファイル名やディレクトリ名に２バイト文字、
つまり日本語や中国語、韓国語などは使わないでください。
半角英数が基本になりますので、気をつけましょう。
作成する場所はお任せしますが、ここではわかりやすいように
WindowsではCドライブ直下にディレクトリを作成します。
Macの場合は、「書類」の中にでも作ってもらえれば大丈夫です。
ディレクトリ名は「node_test」でもつけましょうか。
準備ができたら、コマンドプロンプトもしくはターミナルを開いて
先ほど作成しディレクトリに移動しましょう。
Winの場合は
cd c¥:node_testMacの場合は
$ cd ~/Documents/node_testと打ち込んでエンターを押すとディレクトリ移動ができます。
ここまで完了したら次へ進んでください。
npmの初期化によるpackage.jsonの作成
まずはnpmの初期化コマンドを打ってみましょう。
理解のある人は独自でpackage.jsonファイルを作っても構いませんが、
これを見ている方は完全初心者の方だと想定していますので、下記のコマンドで初期化してpackage.jsonを作成しましょう。
npm init色々質問事項が出てきますが、今は気にしなくても大丈夫なので
エンターキーを連打して進めてください。
完了すると、package.jsonというファイルが出来上がっています。
これでNode.jsを使用する準備が整いました。
文字にすると長くなりましたが、やることは一瞬で終わると思います。
Node.jsでReactをお試し入門してみる
Reactとは、Facebook社が作成したフロントエンド用のライブラリです。
特徴としては画面の切り替えがないWebページを作ったりすることができます。
最近流行りvue.jsとよく比較されますが、それぞれに特徴があります。
私はどっちも触って見ましたがReactの方がしっくりきましたので今回はReactプロジェクトを
全自動で作ってくれるNode.jsのパッケージを利用して見ましょう。
下記のコマンドを入力してパッケージを導入してください。
npm install create-react-appインストールが終わったら、次に下記のコマンドを入力してください。
[Windowsはこっち]
node_modules\.bin\create-react-app myapp
[Macはこっち]
node_modules/.bin/create-react-app myapp文字がだーっと流れた後に「Happy hacking!」と出れば導入成功です。
cd myapp
npm startと打ち込むと、ブラウザが立ち上がりReactのスタートアップ画面が表示されます。
仮想開発サーバーが立ち上がっているので、ファイルを編集して保存をすると
ブラウザが自動で更新してくれるので開発効率がかなりアップします。
試しにmyappディレクトリの中のsrcディレクトリにある「App.js」に記載されている
「Edit src/App.js and save to reload」を適当に文字を変えて保存してみましょう。
すると、自動的に画面が更新されて変更した文字に切り替わっています。
なにがなんだかわからない……
って人に説明すると、Reactプロジェクトを作成するための
簡易パッケージがcreate-react-appによって作成されるので自分で準備する必要はないということですね。
これを1から構築しようとすると、js以外の知識を持っていないと厳しいのです。
プログラミングは環境構築で挫折してしまう人が多いので
こういった環境をコマンド１行で作れてしまうのも、Node.jsの魅力の一つです。
開発環境作りに時間をかけるのではなく、クリエイティブなことに時間を使えという感じですね。
今回はNode.jsの説明のためreactの解説はしませんが、今後React系の記事は増やしていこうと思います。
node.sは凄まじい可能性を秘めている
ここまでNode.jsのインストールから実際の使い方まで説明しましたが
Node.jsは他にもたくさんのライブラリが存在します。
先ほど軽く説明したvue.jsもNode.jsを利用して開発ができますし
仮装開発サーバーを立てられて本番と同じような環境を作って実験することもできます。
開発用サーバーが便利すぎる理由
例えばWordpressのテーマをデザインしようとしているとき
ブラウザ側でもスマートフォンのデザインは確認できるのですができれば実機で確認したいですよね？
そんな時にもNode.jsが立ててくれる仮装開発サーバーを使えば
ローカルエリアネットワーク内ならスマートフォンからでもパソコン側で立てたサーバーに
IPアドレスとポートナンバーを入力するだけでアクセスできます。
これでいちいちPC側はスマートフォン用に画面を切り替えなくても実機でリアルタイムで更新確認できるので
開発スピードが段違いにアップします。
私はNode.jsを覚える前はいちいちFTPにアップしてスマートフォンからサイトにアクセスしてデザイン確認してを繰り返していました。
Node.jsを覚えてからはもう過去には絶対に戻れないですね……
Node.jsの入門は以上となります。
画像圧縮もNode.jsでできちゃう
余談ですが、ブログにアップする画像の圧縮ってしてますか？
画像編集ソフトでいちいち読み込んでファイルサイズを圧縮するってやっていると時間がもったいないです。
Node.jsのgulpというパッケージを使えば画像をまとめて圧縮することが可能です。
圧縮率も自由に設定できますので一度使ってしまうと便利すぎてやめられなくなってしまいます。
──ブログ毎日更新は82日目。
技術系の解説記事はどうしても単調になりますし、その人の環境によってエラーが出たりするので
一般的なことしか書けないんですよね。そしてダラダラと長くなってしまいます。
これは動画にした方が分かりやすくていいんじゃないですかね。
私もyoutuberデビューはしてみたいのですがまずはこういった技術系解説をメインにしようと思います。
その為にも、私自身が教えられるぐらい覚えないといけませんね。
それでは。
