レッスン内容
① 環境構築の準備
② Homebrewのインストール
③ node.jsのインストール
④ babelのインストール
⑤ babelを簡単に呼び出そう
⑥ うまくいかない時のチェックリスト
Progate ES6の開発環境を整えよう より
身につくスキル（これが出来る）
- ターミナルとコマンドを使ってファイルを操作できる
- nodebrewを使ってnode.jsのバージョンを切り替えられる
- 現在使っているシェルが何か、確認できる（echoコマンド：echo $SHELL）
- ディレクトリを移動できる（cdコマンド：cd 移動先ディレクトリのパス）
- babelを使ってコンパイルできる（ES6→ES5などの古い規格へ）
- nodeコマンドでファイルを実行できる（node 実行したいファイルのパス）
- よく使うコマンドにタスク名をつけて、簡潔なコマンドで実行できる（npm run タスク名）
勉強になったこと
① 環境構築の準備より
| ローカル環境とは | 自分のPCで開発をする環境のこと |
| 環境構築とは | 開発する環境を用意すること |
| ES6をローカル環境で開発するために使うツール | テキストエディタ、ターミナル |
| テキストエディタ | Progateの本レッスンではAtomのインストールになっているが 私はVScodeを使っているので、VScodeで代用する |
| ターミナル（Spotlightを起動） | Command+スペース |
| Spotlightからターミナル起動 | Spotlightにターミナルと打ち込む |
| ホームディレクトリの開き方 | Command+Shift+H |
② Homebrewのインストール より
具体的なインストール手順は割愛。
Homebrewをインストールしてから、nodebrewをインストールする。
| Homebrewとは | macOS（またはLinux）用のパッケージマネージャー |
| nodebrewとは | node.jsのバージョン管理ツールのこと |
Homebrewではアップル（またはLinuxシステム）が提供していないあなたの必要なものをインストールできます
Homebrewは自身のディレクトリにパッケージをインストールし、それらへのシンボリックリンクを/usr/localに作成します
Homebrewはプレフィックスの外部にはファイルをインストールしないため、Homebrewを好きな場所にインストールすることもできます
自作のHomebrewパッケージも簡単に作成できます
すべてGitとRubyで動作しているため、あなたが既に持っている知識で簡単に変更を戻したりマージしたりできます
HomebrewのformulaはシンプルなRubyスクリプトです
HomebrewはmacOS（またはあなたのLinuxシステム）の機能を補完します
gemでRubyGemsを、そしてbrewで依存パッケージをインストールします
”アイコンをドラッグしてインストール…”のようなことをする必要はありません
brew caskではmacOSアプリケーション、フォント、プラグイン、そしてオープンソースではないソフトウェアもインストールできます
caskの作成はfomulaの作成と同じくらい簡単です
Homebrew公式HPより
公式HPの説明を見ただけでは分かりませんね。ここは「パッケージマネージャーであり、nodebrewというnode.jsのバージョン管理ツールが使えるようになる」程度に理解しておくことにします。
ターミナルコマンド：brew -v
・Homebrewのバージョンを確認できる
・Homebrewのgit改版を確認できる
③ node.jsのインストール
ここもインストール手順は割愛。
| node.jsとは | サーバーサイドのJavaScript実行環境のこと ローカル環境でES6を実行できるようになる インストールはnodebrew経由で実行する |
| nodebrewとは | node.jsのバージョン管理ツールのこと 複数のnode.jsのバージョンを簡単に切り替えることができる |
| npmとは | node.jsのパッケージ管理アプリ chalkやreadline-syncも管理できる |
| ターミナルコマンド：echo $SHELL | 現在使用しているシェルを確認する |
| ターミナルコマンド：cd es6_sample | ディレクトリes6_sampleに移動する 上層ディレクトリは「../」と学んだので 「cd ../」を実行してみたら 上層ディレクトリに移動できた |
④ babelのインストール
インストール手順は割愛。
| babelとは | 新しい規格で記述されたコードをES5などの古い企画に書き換える便利なパッケージ node.jsはES6の文法に完全に対応しておらず、ES5に変換する必要がある |
| コンパイラとは | 書き換えをするツールのこと コンパイラはnode.jsに限らずES6に完全に対応していないブラウザに対して使うこともある |
| babelでファイルをコンパイルする | コマンド： ./node_modules/.bin/babel src --out-dir dist コマンドの意味： ./node_modules/.bin/babel （babelを呼び出す） src （srcディレクトリ内のファイルをコンパイル元として指定） --out-dir dist （コンパイルしたファイルの出力先ディレクトリをdistに指定） |
| コンパイル後のファイルを実行する | node dist/first.js （distディレクトリ内にあるfirst.jsファイルを実行する、という命令） |
⑤ babelを簡単に呼び出そう より
| よく使うコマンドを登録する | package.jsonのファイル内に記述されているscript内によく使うコードを記述する ”タスク名": コマンド （例） "build": "./node_modules/.bin/babel src --out-dir dist" |
| よく使うコマンドを実行する | コマンド：npm run タスク名 （例）：npm run build |
// コマンド：nodebrew -v 実行結果 // nodebrewで使えるコマンド一覧とその内容が表示されました // node.jsのバージョン管理やバージョン変更関係が扱えることが分かりますね nodebrew help Show this message nodebrew install <version> Download and install <version> (from binary) nodebrew compile <version> Download and install <version> (from source) nodebrew install-binary <version> Alias of `install` (For backward compatibility) nodebrew uninstall <version> Uninstall <version> nodebrew use <version> Use <version> nodebrew list List installed versions nodebrew ls Alias for `list` nodebrew ls-remote List remote versions nodebrew ls-all List remote and installed versions nodebrew alias <key> <value> Set alias nodebrew unalias <key> Remove alias nodebrew clean <version> | all Remove source file nodebrew selfupdate Update nodebrew nodebrew migrate-package <version> Install global NPM packages contained in <version> to current version nodebrew exec <version> -- <command> Execute <command> using specified <version>
勉強不足だと思ったこと、調べたこと、感想
ターミナルが出てきて、シェルが出てきて、コマンド内容も知らないことだらけで難しく感じるところですね。
Unix /Linuxを操作したことがない人は特に馴染み深いところでしょうか。
YouTubeでプログラミング学習のススメ的な動画をよく見るんですけど、学習としてProgateがおすすめな理由に「ブラウザ上だけで基礎が学べる」、「実際に手を動かして経験しながら学べる」、「プログラミングは環境構築で挫折する人が多いのでプログラミングを学ぶ前に挫折してしまう」という話をよく聞きます。
正直私もシェルってなんだっけな？という感覚だったのでネットで調べ直したのですが、深みにハマりそうだったのでやめました（とほほ）。
今回学んだことを「これは、こういうものだ」と要点だけ押さえてしまって、基本的な使い方だけ覚えれば良いと思います。
ターミナル上での操作を重ねていって理解を深めていけばいいので、ここで学習を止めないようにしていきましょう！
関連リンク
・Progate公式サイト（プログラミング基礎文法をブラウザ上で手を動かしながらサクサク学ぼう）
・ドットインストール公式サイト（動画レッスンに従って、開発しながらプログラミングを学ぼう）
・Homebrew公式サイト（macOS（またはLinux）用のパッケージマネージャー）