カテゴリー
サインイン 新規登録

間違いや改善の指摘

内容の技術的な誤り・誤字脱字やミスのご報告・解説やトピックの追記/改善のご要望は教材をさらに良くしていく上でとても貴重なご意見になります。

少しでも気になった点があれば、ご遠慮なく投稿いただけると幸いです🙏

実際には誤りではなく勘違いであっても、ご報告いただけることで教材のブラッシュアップにつながります。

質問ポリシー①

教材受講者みなさんのスムーズな問題解決のために、心がけていただきたいことがあります。

教材の内容に関する質問を投稿しましょう

教材の内容に関係のない質問や教材とは異なる環境・バージョンで進めている場合のエラーなど、教材に関係しない質問は推奨していないため回答できない場合がございます。

その場合、teratailなどの外部サイトを利用して質問することをおすすめします。教材の誤字脱字や追記・改善の要望は「文章の間違いや改善点の指摘」からお願いします。

0-2

環境構築(Mac)

環境構築(Mac)

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 になります。

完成例のコードはこちら

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

Xcode のインストール

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

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

console
Copied!
$ xcode-select --install

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

console
Copied!
$ xcode-select -v xcode-select version 2373.

Homebrew のインストール

Homebrew 公式

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/

nodebrew のインストール

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

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

昨今のフロントエンド開発において 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" }

Parcel のインストール

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

console
Copied!
$ npm i -D parcel-bundler@1.12.5

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

json
123
Copied!
"devDependencies": { "parcel-bundler": "^1.12.5" }

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

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

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

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

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

index.html を作成しよう

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

html
1234567891011
Copied!
<!DOCTYPE html> <html lang="ja"> <head> <script src="js/index.js" defer></script> </head> <body> <main> <div id="app"></div> </main> </body> </html>

js/index.js を作成しよう

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

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

ブラウザに表示させよう

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

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

json
123
Copied!
"scripts": { "start": "parcel src/index.html --open" },

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

json
123456789101112131415
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!」と表示されていれば環境構築は完了です。

http://localhost:1234/

image

現在のパート (1)
全パート (5)
みんなで助け合おう!
現在のパートのディスカッション 全1件
0-2
toshow 2021-03-13
【解決済】エラー:Build Error /Users/st/Documents/myproject/src/js/index.js: Invalid Version: undefined

タイトルのエラーが出てつまづきましたので、他の方が同じエラーになったときのために
こちらで共有します。

最新バージョンのParcelで発生する問題のため、バージョン1.12.3に戻す必要があるそうです。
https://stackoverflow.com/questions/66459081/parcel-semver-bug

発生している問題

npm start をすると、以下のエラーが出る。

Build Error
/myproject/src/js/index.js: Invalid Version: undefined

エラー画面をスクショで添付してください

スクリーンショット 2021-03-13 22.56.01.png

試したこと

以下のコマンドを実行したところ、エラーが解消され、正常にHelloworldが表示されました。

npm uninstall parcel-bundler
npm i -save-dev parcel-bundler@1.12.3

補足情報(フレームワークのバージョン・OS)