教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。
その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。
JavaScript での開発をするための環境を構築します。
現在のモダンなフロントエンドの現場では、ES2015 以降の構文を使うことがほとんどです。例えば、アロー関数や ES Modules などです。
しかし、ES2015 以降の構文はブラウザーによっては対応していないこともあるため、コードを変換する必要があります。
トランスパイル(コードの変換)をしたりバンドル(複数のファイルをひとつにまとまること)にwebpackを使うことがデファクトスタンダードになっているのですが、設定ファイルが必要になります。
しかし、その設定ファイルの作成が学習コストが高めです。
なので、今回はParcelという設定ファイル不要でトランスパイルをできるバンドラーを使いましょう。
また npm パッケージを使用しますので、node のインストールが必要になります。
npm とは
Node Package Manager の略です。このnpmを使ってパッケージである例えば ReactやVueをインストールして開発をします。フロントエンド開発において必要不可欠なツールです。
もし既にお手元の PC に node と npm の環境があれば、このパートは読み飛ばしても大丈夫です。
私の PC に入っている各ツールのバージョンを記載しますので、参考にしてみてください。
Copied!Mac:Catalina v10.15.3
homebrew:v2.2.17
nodebrew:v1.0.1
node:v13.5.0
npm:v6.13.4
注意)今回のパートで環境構築する対応の PC は Mac になります。
それでは開発環境を構築しましょう。
Homebrew のインストールには Xcode が必要です。こちらのコマンドで、Command Line Tool for Xcode をインストールします。
ポップアップが表示されるのでそれに従ってインストールしていけば大丈夫です。
console Copied!$ xcode-select --install
下記のコマンドを実行してバージョンが表示(私の PC では 2373
)されていればインストールができています。
console Copied!$ xcode-select -v
xcode-select version 2373.
Homebrew は Mac のパッケージ管理ツールです。今回は Node.js のバージョン管理のために nodebrew をインストールするので先に Homebrew をインストールします。
console Copied!/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
インストールの確認をします。
console Copied!$ brew doctor
Your system is ready to brew.
brew doctor
を実行すると警告が表示されることがあります。もし警告が表示されてしまった場合は下記リンクを参考にご対応ください。
(参考)Homebrewの問題を確認する"brew doctor"コマンドとWarning対策集[macOS]
次に下記のコマンドでバージョンが表示されていれば大丈夫です。
console Copied!$ 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/
brew コマンドで nodebrew をインストールします。
console Copied!$ brew install nodebrew
次のコマンドを実行してバージョンが表示されていれば大丈夫です。
console Copied!$ nodebrew -v
nodebrew 1.0.1
バージョンが確認できたら次に環境変数を追加します。
console Copied!$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile
$ source .bash_profile
** 注意)mac Catalina OS 10.15.x の場合は ** 下記のコマンドを実行してください。
console Copied!$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zshenv
$ source .zshenv
console Copied!$ nodebrew setup
昨今のフロントエンド開発において node.js/npm は必要不可欠なツールとなっています。ただ、プロジェクトによって node のバージョンが違うケースが多々あります。そうするとバージョンが違う node をインストールしていると不具合が出てしまったりします。その都度 node.js を入れ直すのはとても面倒ですよね。nodebrew を使うことで Node.js のバージョンを切り替えることができます。
下記のコマンドを実行するとインストールが可能なバージョン一覧が表示されます。
今回は数あるバージョンの中から私の環境と同じものをインストールしていただきます。
console Copied!$ nodebrew ls-remote
node の v13.5.0
をインストールします。
console Copied!$ nodebrew install-binary v13.5.0
下記コマンドを実行するとインストールされているバージョンが一覧でみれます。また、 current
のところが none
になっていると思います。
これはインストール済みのバージョンから使いたいバージョンを指定すると current
にバージョンが表示されるようになります。
console Copied!$ nodebrew ls
v13.5.0
current: none
下記コマンドで使うバージョンを指定します。
console Copied!$ nodebrew use v13.5.0
下記コマンドを実行して current: v13.5.0
になっていれば大丈夫です。
console Copied!$ nodebrew ls
v13.5.0
current: v13.5.0
最後に Node のバージョンを確認して同じように v13.5.0
と表示されていればインストール完了です。
console Copied!$ node -v
v13.5.0
npm パッケージである Parcel をインストールする準備ができたので、やっと本題であるビルド環境の構築(トランスパイルやバンドルをして ES2015 以降の JS でブラウザで実行できる環境を構築すること)をします。
プロジェクトを作成するディレクトリを作成します。任意のディレクトリでプロジェクトディレクトリを作成し、そのディレクトリに移動をします。
console Copied!$ mkdir myproject
$ cd myproject
次に npm コマンドでプロジェクトの初期化を行います。
ちなみに、-y はダイアログなしにプロジェクトを初期化するためのオプションです。
console Copied!$ 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"
}
※ i は install、-D は--save-dev の省略形
console Copied!$ npm i -D parcel-bundler@1.12.5
package.json 内に以下の内容が書き込まれていれば、parcel に開発環境ができでいます。
json123 Copied!"devDependencies": {
"parcel-bundler": "^1.12.5"
}
また、 myproject
ディレクトリ内は下記のようになっています。
Copied!├── node_modules
├── package-lock.json
└── package.json
まずディレクトリ構成は下記のようにします。src ディレクトリを作成しそこに index.html
と js/index.js
を作成します。
Copied!├── node_modules
├── package-lock.json
├── package.json
└── src
├── index.html
└── js
└── index.js
head 内で js を呼び出しています。また、今回は <div id="app"></div>
に 「Hello World」 が表示されるようにします。
html1234567891011 Copied!<!DOCTYPE html>
<html lang="ja">
<head>
<script src="js/index.js" defer></script>
</head>
<body>
<main>
<div id="app"></div>
</main>
</body>
</html>
<div id="app"></div>
の中に <p>Hello World!</p>
を追加します。
javascript12345 Copied!const app = document.getElementById("app");
const p = document.createElement("p");
p.innerText = "Hello World!";
app.appendChild(p);
ここまで設定ができましたら、次に npm コマンドで parcel が実行できるようにしましょう。
packge.json の中身に下記の内容を追記します。
json123 Copied!"scripts": {
"start": "parcel src/index.html --open"
},
下記のようになっていれば大丈夫です。
json123456789101112131415 Copied!{
"name": "myproject",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "parcel src/index.html --open"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"parcel-bundler": "^1.12.5"
}
}
では、最後に parcel を起動してブラウザに Hello World
が表示されるか確認しましょう。下記のコマンドを実行します。
console Copied!$ npm start
Server running at http://localhost:1234
✨ Built in 563ms.
下記の URL でブラウザで確認をし画像のように「Hello World!」と表示されていれば環境構築は完了です。
タイトルのエラーが出てつまづきましたので、他の方が同じエラーになったときのために
こちらで共有します。
最新バージョンのParcelで発生する問題のため、バージョン1.12.3に戻す必要があるそうです。
https://stackoverflow.com/questions/66459081/parcel-semver-bug
npm start をすると、以下のエラーが出る。
Build Error
/myproject/src/js/index.js: Invalid Version: undefined
以下のコマンドを実行したところ、エラーが解消され、正常にHelloworldが表示されました。
npm uninstall parcel-bundler
npm i -save-dev parcel-bundler@1.12.3