みなさんこんにちは、学園教頭のA.K.です。
この記事を見ている皆さんはいざ、JavaScriptを始めようとしている方が多いと思います。
ですが、プログラミングを始めるためには環境構築をする必要があります。
そこで、今回は初心者向けにJavaScriptの環境構築について徹底的にわかりやすく解説していきます。
JavaScriptの環境構築
前提条件
まず、例に倣って前提条件のお話です。
- OS:Mac OS Catalina
- terminal:zshell
- homebrewインストール済み
この記事はMacを使っている方に向けての環境構築についてのものです。よって、Mac以外のOSや環境を使っている方は同じようにやってもエラーが出る、または環境構築をすることができない可能性があります。
自分の環境をご確認ください。
Node jsのインストール
では、始めていきます。
まず最初にNode jsをインストールしていきます。
JavaScriptはメモ帳さえあれば一応は勉強することが出来ます。しかし、その方法だとその都度HTMLファイルを開いたりする必要があります。それでは、本質であるプログラミングそのものの勉強の効率が悪くなってしまいます。
そこで、ターミナルで実行できるようにするためにこのNode jsを利用します。Nodeは今後、様々なJavaScriptの開発に関わってくるので、最初に入れておきましょう!
Homebrewの確認
ここでは、Homebrewを利用します。もし、homebrewがインストールされていなかったら、homebrewをまず先にインストールしましょう。
brew -v
このコマンドでhomebrewのバージョンが出ない場合はインストールされていません。homebrewのインストールについてはこちらに記事を参考にしてください。
インストールできている方、インストール出来たら次に進みましょう。
nodebrew のインストール
では続いてnodebrewのインストールに入ります。nodebrewとは、nodeのバージョンを管理するパッケージです。バージョン切り替えなどが出来る便利なツールなので先にいれます。nodebrewのインストールはターミナルを利用します。ターミナルの起動して以下のコマンドを実行しましょう。
brew install nodebrew
ターミナル上での処理が終了したら、確認のためにバージョンを見てみましょう。
nodebrew -v
画像のような結果が帰ってきたら、オッケーです!!
node のインストール
さてここまで来たら、あと少しです。
nodebrewでインストールできるnodeは様々なバージョンが存在します。ここでは、2種類の方法を紹介します。
一つ目は安定版のインストールです。安定版とは今現在でエラーが少なく、安定して動作してくれるバージョン、という認識で大丈夫です。安定版がいい、という方は以下のコマンドを実行してください。
nodebrew install-binary stable
二つ目は最新版のインストールです。これは文字通り、最も新しいnodeのバージョンとなっています。
nodebrew install-binary latest
この二つのうちのどちらかをインストールしてください。
nodeの有効化
nodeをインストールしたら、次のコマンドを実行してみてください。インストールしたnodeのバージョンが一覧できます。
nodebrew ls
画像は一例ですが、このように複数個のバージョンをインストールすることもできます。
では続いて、インストールしたnodeを有効化していきます。ターミナルでインストールしたnodeのバージョンを有効化するコマンドを実行してください。
nodebrew use v14.15.4
//nodebrew lsで表示されているバージョンのどれかを入れる
こうすることで、nodeが使えるようになります。また、バージョンの切り替えも可能です。
環境パスを通す
最後に、環境パスというものを通す作業を行います。これがないと、他のディレクトリで作業や開発を行うことができません。
さっそく、次のコマンドをターミナルで実行しましょう。
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshrc
ちなみに、このファイルを編集する場合は以下のコマンドを実行すると編集できるようになります。ただ、ここではスルーしてもかまいません。
ls -a //すべてのファイルを参照する
vim ~/.zshrc //vimというエディタで.zshrcファイルを開く
実行できましたら、ターミナルを一回閉じて、再起動してみましょう。
.zshrcを作成して再起動が出来たら最後に、以下のコマンドを実行しましょう。
source ~/.zshrc
nodeバージョン確認
最後に、nodeがしっかりとインストール出来ているかを確認するため、以下のコマンドを実行してみましょう!
node -v
コマンドを実行して自分が適用したバージョンが返ってきたら、JavaScriptの基礎の環境構築が完了しました!お疲れ様です!!
まとめ
さて今回のまとめに入りましょう。
JavaScriptの環境構築のまとめです。
これらが出来ていれば、すぐにJavaScriptの勉強が開始できます!!
今回はここまでとなります。お疲れさまでした。
参考文献
にほんブログ村