「React，Angular，Vue.js，React Nativeを使って学ぶはじめてのフロントエンド開発」を写経してみる（１）「第3章　フロントエンドJavaScript開発のための環境構築」

2018年5月27日

久しぶりにJavascriptで遊んでみたくて、以下の本を衝動買い！

本当は、GraphQLというものに興味がある(ページの読み込みが早くなる？)が、まあ、この本を読んでから、、、

React，Angular，Vue.js，React Nativeを使って学ぶはじめてのフロントエンド開発
原一浩 (著), taisa (著), 小松大輔 (著), 永井孝 (著), & 4 その他
技術評論社 (2018/5/9)
紙の本の価格：￥ 2,462
Kindle 価格: ￥ 2,280

JavascriptによるUI/UX（User Interface/ User Experience）開発用フレームワークのReact, Angular, Vue.jsを用いたTodoアプリのソースコードと解説が載っているとのことで、買っちゃいました。

第1章、第2章でその他のいろいろなJavaScriptのフレームワークが紹介されているのですが、Angularとほぼ同じIonicは紹介されていませんでした。

写経していきます。

ソースコードは、https://github.com/okachijs/jsframeworkbook

に掲載されている。非常にありがたい！

（0）第3章　フロントエンドJavaScript開発のための環境構築

はっきりいって、Webpackとなんとか、とにかく、開発環境構築が難しすぎて、アプリ（WEBページ）作成までたどりつけない感が半端ないのは、嫌なところです。

開設されている内容は、2018年3月版　とのことです。

（開発環境）
Windows 8.1 Pro

（構築する環境）
VisualStudioCode 1.23.1
node v8.11.2
npm v6.1.0
webpack-cli 2.0.11
webpack 4.4.1
npx v10.2.0
webpack-dev-server 3.1.1

babel-loader@7.1.4 style-loader@0.20.3 css-loader@0.28.11 babel-core@6.26.0 babel-preset-env@1.6.1 babel-preset-react@6.24.1

eslint@4.19.1

（１）VisualStudioCodeのインストール

https://code.visualstudio.com/download

上記からダウンロードしてインストール

（２）Node.jsのインストール

https://nodejs.org/ja/

上記からダウンロードしてインストール

写経元はnode v8.10.0 であったが、2018年5月現在、v8.11.2をインストールしてみた。

（３）nodeのバージョン確認

C:/react-sample/ フォルダを作成し、そこで、右クリック　＞　Open with Code

ターミナル（cmd.exe）を出すために、Ctrl + @ を押す。

node -v
npm -v

node v 8.11.2 　なのに、 npm v 3.10.10 のまま。npm update npm してもうまくいかない。Windowsでは、以下のようにする？

https://stackoverflow.com/questions/18412129/how-can-i-update-npm-on-windows

npm install -g npm-windows-upgrade
npm-windows-upgrade

6.1.0 が選択された状態で　Enter を押す。

Powershellで、管理者権限が必要らしい。

Powershell.exe　を右クリックして、管理者権限で実行　をクリック。

npm-windows-upgrade

6.1.0　のところでEnter

数分待つと、npm v6.1.0 がインストールされた

VisualStudioCodeに戻って、npm -v 　でnpmのバージョンを確認。

（４）react , react-dom のインストール

npm init -y
npm i react@16.2.0
react-dom@16.2.0

（５）フロントエンドビルドツール

詳しいことは分かりませんが、とりあえず、Webpackなるものをインストールするらしいです。

Windowsのcmd.exeでは以下のようなコマンドを受け付けてくれない（Windows 10からは、使えるようになるのかもしれません。）ので、VisualStudioCodeでポチポチ手動でフォルダやファイルを作成していきます。

mkdir -p src/js src/css dist/js dist/css

touch src/js/app.js src/js/hello.js src/css/style.css index.html webpack.config.js

index.html　に以下を記述

ソースコードは、https://github.com/okachijs/jsframeworkbook　に掲載されている。ありがたい。。。

webpackのインストール

npm i -D webpack@4.4.1
webpack-cli@2.0.11

これで下準備が出来たらしい。。。（？？？）

webpackの大きな特徴として、

Entry

Output

Loader

Plugins

があるらしい。（？？？）

（６）webpack.config.js の編集

ソースコードは、https://github.com/okachijs/jsframeworkbook　に掲載されている。

●Entry

●Output

src/js/app.js

src/js/hello.js

npx webpack --mode development

はい、いきなりうまくいきません。

Windowsではnpxできないんでしょうか？ググっても英語ではよく分からない。

http://paradox-tm.hateblo.jp/entry/2018/04/25/115243

npm install -g npx

上記サイトの通りに、npxをインストールすると

気を取り直して、以下をtry

npx webpack --mode development

ちゃんと、dist/js/bundle.js が生成されている。index.htmlをChromeで開く。

上図のように、その他のツール　＞　デベロッパーツール　をクリックすると、以下のように、console　のところに、Hello Frontend Engineer! と表示されていることが分かる。

ここまでで十分疲れた。

（７）”npx webpack ….　”　を簡単に再実行できるようにする

npm scripts を利用する。

package.json の"scripts"フィールドにスクリプトを記述することにより、コマンドのエイリアスを作ることができる。次回以降は、

npm run build:dev

のコマンドで実行する。

package.json

(変更前)

(変更後)

(8)　Loader

ECMAScript 2015以降のJavascriptコードや、Sassのコードなどを、自動的に以前のJavascriptやcssのコードに自動的に変換してくれるパッケージ群のことをLoaderと言うらしい。。。（間違っているかも。）

とりあえず、以下のコマンドで必要なパッケージをインストールすればよいらしい。

npm i -D babel-loader@7.1.4 style-loader@0.20.3 css-loader@0.28.11 babel-core@6.26.0 babel-preset-env@1.6.1 babel-preset-react@6.24.1

src/css/style.css に記述

webpack.config.js

(変更前)

(変更後)

長くてややこしいし、ミスしそう、、、

次に、app.js をReactのコードを変更し、style.cssをimportする。

src/js/app.js

(変更前)

(変更後)

以下を実行。

npm run build:dev

index.html　をChromeで開き、Ctrl + Shift + I

（９）Plugins

よく分からないが、Pluginsを利用するには、

モジュールをrequireしてから、new演算子を使ってインスタンス化する

らしい。ここは飛ばす。

（１０）開発用サーバを立てる

webpack-dev-serverをインストール

npm i -D webpack-dev-server@3.1.1

webpack.config.js

(変更前)

(変更後)

このようにすると、

npx webpack-dev-server --mode development --hot --inline --open

で開発サーバを起動できるらしい。。。（長すぎる！）

これを短くしたい場合、、、

package.json

(変更前)

(変更後)

npm start すると、自動的にChromeが開く

これでようやく、ionic での、”ionic start”　っぽくなってきた。

Reactって2018年現在、まだこんなに初期設定が難しいのだろうか？？？（他にもっと簡単な環境構築方法などありそうだけど、、、）

Ctrl + C => y + Enter で終了。

（１１）ESLint

Lintはソースコードを分析して、実行する前に警告する機能らしい。。。

npm i -D eslint@4.19.1

VSCodeの拡張機能ビュー　で、 eslint

インストールしてから、再読み込み

表示　＞　コマンドパレット　（Ctrl + Shift + P）

ESLint: Create で出てくるものを選択すると、コンソールのところに質問が出てくるので適当に答えて進む。

.eslintrc.json ファイルが作成された。

(変更前)

(変更後)
難しいのでやめました。

以上で、以下の本の第3章をWindows8.1である程度写経してみたが、まだ面白いところに行けていない。

次は、第5章「フロントエンドJavaScript開発のためのサーバ構築」を写経してみたい

Javascript

Posted by twosquirrel