前のパートに戻る 完了して次のパートへ  

  0-2 環境構築(Mac)

JavaScript での開発をするための環境を構築します。

現在のモダンなフロントエンドの現場では、ES2015 以降の構文を使うことがほとんどです。例えば、アロー関数や ES Modules などです。

しかし、ES2015 以降の構文はブラウザーによっては対応していないこともあるため、コードを変換する必要があります。

トランスパイル(コードの変換)をしたりバンドル(複数のファイルをひとつにまとまること)にwebpackを使うことがデファクトスタンダードになっているのですが、設定ファイルが必要になります。

しかし、その設定ファイルの作成が学習コストが高めです。

なので、今回はParcelという設定ファイル不要でトランスパイルをできるバンドラーを使いましょう。

また npm パッケージを使用しますので、node のインストールが必要になります。

npm とは
Node Package Manager の略です。このnpmを使ってパッケージである例えば ReactやVueをインストールして開発をします。フロントエンド開発において必要不可欠なツールです。

もし既にお手元の PC に node と npm の環境があれば、このパートは読み飛ばしても大丈夫です。 私の PC に入っている各ツールのバージョンを記載しますので、参考にしてみてください。

Mac:Catalina v10.15.3
homebrew:v2.2.17
nodebrew:v1.0.1
node:v13.5.0
npm:v6.13.4

注意)今回のパートで環境構築する対応の PC は Mac になります。

完成例のコードはこちら

それでは開発環境を構築しましょう。


Xcode のインストール


Homebrew のインストールには Xcode が必要です。こちらのコマンドで、Command Line Tool for Xcode をインストールします。

ポップアップが表示されるのでそれに従ってインストールしていけば大丈夫です。

$ xcode-select --install

下記のコマンドを実行してバージョンが表示(私の PC では 2373)されていればインストールができています。

$ xcode-select -v
xcode-select version 2373.


Homebrew のインストール


Homebrew 公式

Homebrew は Mac のパッケージ管理ツールです。今回は Node.js のバージョン管理のために nodebrew をインストールするので先に Homebrew をインストールします。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

インストールの確認をします。

$ brew doctor
Your system is ready to brew.

brew doctor を実行すると警告が表示されることがあります。もし警告が表示されてしまった場合は下記リンクを参考にご対応ください。

(参考)Homebrewの問題を確認する"brew doctor"コマンドとWarning対策集[macOS]

次に下記のコマンドでバージョンが表示されていれば大丈夫です。

$ brew --version
Homebrew 2.2.13
Homebrew/homebrew-core (git revision 43181; last commit 2020-04-15)


もしもインストールができない、失敗した場合

下記のサイトに詳しく記載されているので失敗した場合はご確認ください。

https://awesome-linus.com/2019/08/17/mac-homebrew-install/


nodebrew のインストール


brew コマンドで nodebrew をインストールします。

$ brew install nodebrew

次のコマンドを実行してバージョンが表示されていれば大丈夫です。

$ nodebrew -v
nodebrew 1.0.1

バージョンが確認できたら次に環境変数を追加します。

$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
$ source .bash_profile

** 注意)mac Catalina OS 10.15.x の場合は ** 下記のコマンドを実行してください。

$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshenv
$ source .zshenv
$ nodebrew setup


nodebrew を使ってバージョンを指定して node.js をインストール


昨今のフロントエンド開発において node.js/npm は必要不可欠なツールとなっています。ただ、プロジェクトによって node のバージョンが違うケースが多々あります。そうするとバージョンが違う node をインストールしていると不具合が出てしまったりします。その都度 node.js を入れ直すのはとても面倒ですよね。nodebrew を使うことで Node.js のバージョンを切り替えることができます。

下記のコマンドを実行するとインストールが可能なバージョン一覧が表示されます。

今回は数あるバージョンの中から私の環境と同じものをインストールしていただきます。

$ nodebrew ls-remote

node の v13.5.0 をインストールします。

$ nodebrew install-binary v13.5.0

下記コマンドを実行するとインストールされているバージョンが一覧でみれます。また、 current のところが none になっていると思います。

これはインストール済みのバージョンから使いたいバージョンを指定すると current にバージョンが表示されるようになります。

$ nodebrew ls
v13.5.0

current: none

下記コマンドで使うバージョンを指定します。

$ nodebrew use v13.5.0

下記コマンドを実行して current: v13.5.0 になっていれば大丈夫です。

$ nodebrew ls
v13.5.0

current: v13.5.0

最後に Node のバージョンを確認して同じように v13.5.0 と表示されていればインストール完了です。

$ node -v
v13.5.0


ビルド環境を構築しよう


npm パッケージである Parcel をインストールする準備ができたので、やっと本題であるビルド環境の構築(トランスパイルやバンドルをして ES2015 以降の JS でブラウザで実行できる環境を構築すること)をします。


プロジェクトディレクトリの作成

プロジェクトを作成するディレクトリを作成します。任意のディレクトリでプロジェクトディレクトリを作成し、そのディレクトリに移動をします。

$ mkdir myproject
$ cd myproject


プロジェクトの初期化

次に npm コマンドでプロジェクトの初期化を行います。

ちなみに、-y はダイアログなしにプロジェクトを初期化するためのオプションです。

$ npm init -y

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}


Parcel のインストール

※ i は install、-D は--save-dev の省略形

$ npm i -D parcel

package.json 内に以下の内容が書き込まれていれば、parcel に開発環境ができでいます。

"devDependencies": {
  "parcel": "^1.12.4"
}

また、 myproject ディレクトリ内は下記のようになっています。

├── node_modules
├── package-lock.json
└── package.json


ブラウザに Hello World を表示させよう


まずディレクトリ構成は下記のようにします。src ディレクトリを作成しそこに index.html と js/index.js を作成します。

├── node_modules
├── package-lock.json
├── package.json
└── src
    ├── index.html
    └── js
        └── index.js


index.html を作成しよう

head 内で js を呼び出しています。また、今回は <div id="app"></div> に 「Hello World」 が表示されるようにします。

js/index.js を作成しよう

<div id="app"></div> の中に <p>Hello World!</p> を追加します。

const app = document.getElementById("app");
const p = document.createElement("p");
p.innerText = "Hello World!";

app.appendChild(p);


ブラウザに表示させよう

ここまで設定ができましたら、次に npm コマンドで parcel が実行できるようにしましょう。

packge.json の中身に下記の内容を追記します。

"scripts": {
  "start": "parcel src/index.html --open"
},

下記のようになっていれば大丈夫です。

{
  "name": "myproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "parcel src/index.html --open"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^1.12.4"
  }
}

では、最後に parcel を起動してブラウザに Hello World が表示されるか確認しましょう。下記のコマンドを実行します。

$ npm start

Server running at http://localhost:1234
✨  Built in 563ms.

下記の URL でブラウザで確認をし画像のように「Hello World!」と表示されていれば環境構築は完了です。

http://localhost:1234/

議論

0 質問

このコースの評価は?