JavaScript(ES2015（ES6）) 〜Progate🦍（コラム【ES6の開発環境を用意しよう！（macOS）】）〜

チュートリアルで、追加学習（ラスボス）に挑みます🦹‍♂️🦸‍♀️✨

【ES6の開発環境を用意しよう！（macOS）】
🌸自身のPCで開発する環境→ローカル環境
　開発環境を用意すること　→環境構築
　
🌸環境構築
　ES6をローカル環境で開発するために必要なもの
　→テキストエディタ
　　ターミナル（※標準装備⭐️）
　　→⚠️「The default interactive shell is now zsh.」の警告文
　　　　　bachをzshにせよ！という警告文を消す方法？！
　　　　　↓↓↓
$ echo "export BASH_SILENCE_DEPRECATION_WARNING=1" >> .bash_profile

MacOS Catalinaでbashをzshにせよという警告文を消す方法 - Qiita

Macで「デフォルトシェルはzshになったよ」と表示されるときの対処法

ざっと確認したところ、ぶっちゃけ難しかったので、これも見てみた。

今さら聞けない！ターミナルの使い方【初心者向け】今さら聞けない！ターミナルの使い方【初心者向け】 | TechAcademyマガジン

Mac ターミナルの基本的な使い方・操作方法（１） / Web Design Leaves

🌸Homebrew
「nodebrew」というnode.jsのバージョン管理ツールをインストールする
ために！
「Homebrew」というツールを先にインストールする
（「Homebrew」を用いて「nodebrew」をインストールする）

Homebrew

　最初は、「The default interactive shell is now zsh.」ですぅ〜表示できませぇ〜ん、みたいな感じだったのに、Homebrewのインストール指示をした途端にガンガン頑張ってくれてて… ってか、コンピューターってすげーなぁと改めて思ったりして… 見入ってしまった。

Homebrew 2.4.9
Homebrew/homebrew-core (git revision 8a79e1;

の違いはあるけど… 今は置いとこうかしらね…😕

🌸node.js
　→サーバーサイドのJavaScript実行環境
　→macOSにインストールすることで、ローカル環境にてES6を実行できる
　→バージョン管理ツールをつかうことで、複数のnode.jsのバージョンを簡単に切り替えられる（😕）

インストールに10分以上かかることもある、というので籠しておりましたが、10秒程で終わりました😀⭐️

インストール、大丈夫なようです。
今更ですが、今日の気分は「緑」ちゃんです🌱✨

→nodebrew経由でnode.jsをインストール

2018年11月時点の安定版(stable)はv 10.14.1（Progate様）
→2020年7月現在　　　　　　　　 v 14.6.0

また、インストールの際にbashとzshの対応を分けて、ちゃんと指示してくれるあたり…神っ✨

🌸npm
　→node.jsのパッケージ管理アプリ
　　（chalkやreadline-sync）

　→最初に、
　　npmパッケージの管理ファイルである「package.json」を作成
→「es6_sample」ディレクトリ直下に移動
　⚠️cd → ターミナルで作業するディレクトリを変更する
　　「cd es6_sample」を実行

成功しました🥺✨
次の「Atom」からの確認でつまずきがあったので、これも解消↓

Mac - Finder のホームフォルダに「ライブラリ」フォルダを表示 - PC設定のカルマ

Atomで「es6_sample」ディレクトリの中に「package.json」ファイルができていることまで確認⭐️

🌸babelのインストール
　→新しい規格で記述されたコードをES5などの古い規格に書き換える便利なパッケージのこと
　→書き換えをするツール　＝　コンパイラ
　→このインストールに15分程時間がかかった…⏰

　→babelの設定用ファイルの作成
　→node.jsでimportをつかうためにはbabelなどでコンパイルする必要がある。
　→node.jsでファイルを実行する際は、ターミナルに「node ファイル名」と入力する。
　　　　　　　　　エラ〜メッセージ↓↓↓

　→babelでファイルをコンパイルする
　🔥./node_modules/.bin/babel src --out-dir dist🔥
　　./node_modules/.bin/babel 　　　　→ babelを呼び出す
　　　　　　　　　　　　　　　　　src　→ 「src」ディレクトリの中のファイルをコンパイル元として指定
                                                                --out-dir dist
                                                                 → コンパイルしたファイルの出力先のディレクトリを「dist」に指定

　→🔥node dist/first.js🔥
　　ファイルが出力されたら成功！


🌸babelを簡単に呼び出す
　→babelを使ってコードを変換するコマンド
　　./node_modules/.bin/babel src --out-dir dist
　→package.jsonに、よくつかうコマンドを登録する❗️

　→「test」というタスクに、
　　『 "build": "./node_modules/.bin/babel src --out-dir dist"』を置き換える。
　→ターミナルで、「build」を実行
　　🔥npm run build🔥
　→正常にコンパイル

　→コンパイルされたファイルを実行
　　node dist/first.js

　→ES6のファイルをbabelを使ってコンパイルができた！
　　

【うまくいかない時のチェックリスト】
🔥記事で指定したコードが貼り付けられていない
🔥入力したファイル名やソースコードなどに誤字脱字がある
🔥ファイルが保存されていない
🔥記事で指定している箇所にフォルダが配置されていない
🔥コマンドの内容や実行している場所が違う

【まとめ】
ラスボス、つ、強えぇー…
何がやばいって、魔王は軽く一振りしただけなのに🦹‍♂️気付いたらめっちゃ切られてたぁぁぁ🔪 ば、ばかな… って感じのシチュエーションです。剣の太刀筋が全く見えない恐怖…　と、　 Progate様の神ナビゲーションに沿って強くなった気でいた自分はコピペの技術しか身についていないんじゃあなかろうか？？！という不安が重なります…(ToT)2時間以上かかった気がするし…

ま、初めはこんなもんだろ！
魔王、またな！！って感じで、もう一つのコラムやります★
（逃げてない、逃げてない、逃げてない…）