Progate WEB系転職 スキルアップ プログラミング ホームページ制作・WordPress

【勉強ノート】Progate⑧ JavaScript学習コース「ES6の開発環境を整えよう」(有料コース)学習で、できる事、調べた事 まとめ

レッスン内容

① 環境構築の準備

② 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)用のパッケージマネージャー)

-Progate, WEB系転職, スキルアップ, プログラミング, ホームページ制作・WordPress

© 2021 中堅サラリーマン・コツコツ頑張るブログ