JavaScriptをMacで始めるための環境構築を初心者向け解説！！

みなさんこんにちは、学園教頭の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のインストールについてはこちらに記事を参考にしてください。

2021年版！Macで Homebrewの環境構築をわかりやすく解説！！

皆さんこんにちは、学園教頭のA.K.と申します。さて、みなさんがプログラミングを行うときは大方Macになるかと思います。Macを買ったら最初は環境構築をしますが、それを劇的にやりやすくしてくれるシステムがあります。今回は、Macユ...

www.s-gakuenblog.com

インストールできている方、インストール出来たら次に進みましょう。

nodebrew のインストール

では続いてnodebrewのインストールに入ります。nodebrewとは、nodeのバージョンを管理するパッケージです。バージョン切り替えなどが出来る便利なツールなので先にいれます。nodebrewのインストールはターミナルを利用します。ターミナルの起動して以下のコマンドを実行しましょう。

brew install nodebrew

ターミナル上での処理が終了したら、確認のためにバージョンを見てみましょう。

nodebrew -v

画像のような結果が帰ってきたら、オッケーです！！

node のインストール

さてここまで来たら、あと少しです。
nodebrewでインストールできるnodeは様々なバージョンが存在します。ここでは、２種類の方法を紹介します。

一つ目は安定版のインストールです。安定版とは今現在でエラーが少なく、安定して動作してくれるバージョン、という認識で大丈夫です。安定版がいい、という方は以下のコマンドを実行してください。

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の勉強が開始できます！！

今回はここまでとなります。お疲れさまでした。

参考文献

MacにNode.jsをインストール - Qiita

MacにNode.jsの環境を構築するメモ。その前に※以下の方法もオススメです！MacにNode.jsをインストール（anyenv + nodenv編）上記の場合はプロジェクト毎（フォルダ毎…

qiita.com

Mac に Node.js 環境をさくっと整えるための最短ルート - Qiita

Mac を買った新しい MacBook Pro を買ったというわけでアプリとか作ってみたいし JavaScript とかをガンガンやっていきたいいろいろ調べたところ・・・アプリ開発にあたって…

qiita.com