フロントエンド

【JavaScript】の環境構築の仕方 webpackとbabel【昭和と令和なJavaScript】

プログラミングの歴史において、

『JavaScript(ジャバスクリプト)』ほど、

栄光と挫折を味わった言語はないんじゃないかと思ったりします。

こちらの記事に面白おかしく書いてありますが、

JavaScriptの歴史をざっくりまとめたよ!

1995年生まれで、

ポケモン赤・緑とタメというポケモン世代な言語で、

戦国時代、暗黒時代、新時代の幕開け、そしてもはやJavaScriptではない世界まで駆け抜けた『JavaScript』

例えるならビリギャルのように、

偏差値35でグレた時代から慶応ボーイに成り上がり、

さらには『イーロン・マスク』よろしく宇宙に飛び出すような勢いで進化し続け、

もはや誰もついてこれないといわんばかりの言語が『JavaScript』

そんな『JavaScript』は、2015年以前と以降で大転換がありました。

そりゃあもう革命と言わんばかりの大転換が。

Sponsored link

大転換を迎えた昭和なJSと令和なJS

  • 2015年以前・・昔ながらの昭和っぽいJavaScript
  • 2015年以降・・いっきに平成後期で令和も見すえたJavaScript

2015年以前のJavaScriptをES5、
2015年以降のJavaScriptをES6、もしくはES2015と表記され、

2015年から毎年のようにバージョンアップが繰り返されています。

  • ES6 (ES2015)・・大幅変更。クラス、モジュール化、アロー関数、Promiseなど
  • ES7 (ES2016)・・ちょっとの変更
  • ES8 (ES2017)・・async/await (非同期関数)
  • ES9 (ES2018)・・Observable(まだよく知りません・・

さらに最近では『JavaScriptフレームワーク』も誕生。

アオキ
『React.js』とか『Vue.js』とか。

これらのフレームワークではES6以降の『JavaScript』を使うことが当たり前のようになっています。

毎年のようにパワーアップしている『JavaScript』ですが、

進化のスピードが速すぎて、

昭和世代
『インターネットエクスプローラー』じゃあうまく表示できないよ・・

という問題も起こるようになってきました。

なので、最新の書き方をしつつも、

昭和世代
『インターネットエクスプローラー』でも動くようにしてよ〜

というリクエストが多数寄せられ、それを実現するべく登場したのが、

『babel(バベル)』『webpack(ウェブパック)』というツールになります。

アオキ
ドラえもんでいったら翻訳こんにゃく的な

JavaScriptのフルパワーを引き出す最近の状況

令和世代の最新版『JavaScript』を動かすための2大ツールはそれぞれ、

  • 『babel(バベル)』・・・新しい書き方を古い構文に変換
  • 『webpack(ウェブパック』・・JSファイルを依存関係を調べつつ一つのファイルにまとめる

という用途になります。

これらのツールをインストールするには、『Node.js(ノードジェイエス)』も必要になります。

  • 『Node.js(ノードジェイエス)』・・JavaScriptをサーバー側でも使えるようにしたツール。

『Node.js』がインストールされている状態で、

例えば最近だと、『PHP』の全部乗せフルスタックフレームワーク『Laravel(ララベル)』だと、
『Laravel Mix(ララベルミックス)』という機能を使うことで、『babel』『webpack』をどっちもカバーしていたりします。

参考記事

また、令和世代な『JavaScript』でおなじみの『Vue.js(ビュージェイエス)』では、

『vue-cli(ビューシーエルアイ)』というツールを使うことで、

これまた『babel』『webpack』をまるっとインストールできたりします。

Vue-cli(webpack)解剖 ーディレクトリ構成ー

もちろん、『Laravel Mix』や『Vue-cli』を使わず、

直接『babel』と『webpack』をインストールすることもできます。

Sponsored link

JavaScriptの環境構築 webpackとbabel

『babel』『webpack』それぞれいくつかのファイルをインストールする必要があります。

『babel』インストールに必要なファイル

  • @babel/core ・・メインのファイル
  • @babel/preset-env ・・環境にあわせて令和->昭和に変換できる
  • @babel/polyfill ・・令和なJavaScriptも変換できるようにする
  • babel-loader ・・webpackでも使えるようにする
アオキ
『Babel7』からアットマークがついたそうです。

『webpack』インストールに必要なファイル

  • webpack ・・ webpack本体
  • webpack-cli ・・webpackをコマンドで使えるようにする

ひとつづつインストールしてもいいけれど結構時間がかかるので、

npm init とうって『package.json』ファイルを作った後に、

的なコマンドでまるっとまとめてインストールすることが多いです。

JavaScriptの環境構築 package.jsonファイルについて

npmでインストールするともれなく、

『package.json』というファイルが生成されます。
また、『package-lock.json』 というファイルが生成される場合もあります。

  • package.json・・インストールするライブラリ(バージョン固定ではない)や短縮コマンド
  • package-lock.json ・・依存ライブラリのバージョンを固定する

基本的には『package.json』の編集をすることになるかなと思います。

『package.json』の中にはいくつか設定項目があって、よく使うものを抜粋すると、

  • script ・・ 短縮コマンドを明記できる
  • dependencies ・・サービスを動かすのに必要なライブラリ情報
  • devDependencies ・・開発時にあると便利なライブラリを記述

npm install 時に -D オプションをつけることで、devDependencies 側に記載されます。

参考記事
package-lock.jsonの役割とは?【Node.js】
npmでライブラリをインストールする方法【Node.JS】

JavaScriptの環境構築 webpack 設定ファイルについて

『webpack』の設定ファイルは自動生成されないので自分で作成する必要があります。

ファイル名を『webpack.config.js』として保存します。

記載内容はいくつかあるのですが、代表的なものは以下。

  • mode ・・開発用(development)か公開用(production)か

developmentは非圧縮でビルドされ、productionは圧縮されて(ファイルがっちゃんこして1行にまとまって)ビルドされます。

  • エントリーファイルとバンドルファイル

エントリーファイル側が開発用ファイル。圧縮後がバンドルファイルです。

  • トランスパイル設定(javascript, css など)

『babel』を使う場合はここに設定が必要になります。(上記コマンドでインストールすれば自動で記載されていると思います。)

アオキ
短縮コマンドや設定ファイルの書き方はいろいろありますので下記記事も参考にしてみてください。

最新版で学ぶwebpack 4入門 – Babel 7でES2018環境の構築(React, Vue, Three.js, jQueryのサンプル付き)

【2019年版】webpack 4 個人的設定まとめ

Sponsored link

JavaScript の環境構築 webpackとbabel まとめ

『クリエイティブコーディング』しかり、
個人で楽しむ分には『昭和なJavaScript』でもまったく問題はないのですが、

モダンな企業で最先端フロントエンジニアになりたいとすれば、
『ES6』以降の『令和なJavaScript』は必須になってきますので、

このブログでは、どちらもいい塩梅で(気分次第で)使い分けつつ記事を書いていければと思います。

参考文献

最新JavaScriptでのレシピが豊富に掲載されています。

created by Rinker
¥3,218 (2019/08/21 03:00:11時点 Amazon調べ-詳細)

『JavaScript』ならかかせない一冊です。ES6の記載もたっぷりあります。

アオキ
ところで令和なJavaScriptってなんやねん。 ←長めなノリツッコミ

『JavaScript関連』ではこんな記事も読まれています。

1. プログラミング入門おすすめの言語はJavaScriptで決まり〜分かりやすさ第一で説明してみる〜

2. 【P5.js】遊ぶようにプログラミングできるクリエイティブコーディング〜はじめのいっぽ〜(1)

3. 3Dプログラミングの基本を【Three.js】でまとめてみた【初心者向け】

4. 【JavaScript ES6】をフル活用するためのwebpackとbabel【昭和と令和なJavaScript】

5. 【Vue.js】かっこいいフォトギャラリーを発見したのでソースを読んでみた。カテゴリーで選べてなめらかに動くんです

6. 【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】

 

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


関連記事

  1. フロントエンド

    プログラミングで色や大きさをランダムにして遊んでみる(8)【P5.js】

    遊ぶようにプログラミングができる『クリエイティブコーディング』。『…

  2. バックエンド

    【Webアプリ実践記】JSすら怪しい37歳おっさんが独学でVue.js+Laravelでwebアプリ…

    本業Webマーケッターと育児をしながら独学でwebアプリをつくってみる…

  3. フロントエンド

    Vue.js+Vue-router+BulmaでさくっとSPAをつくってみた【初心者向け】

    最近徐々に増えつつある『SPA(エスピーエー)』。『SPA』とは、…

  4. フロントエンド

    【CSS】色の設定は『RGB』より『HSL』の方が使いやすい件〜ランダムに使いたい(3)【P5.js…

    遊ぶようにプログラミングができる『クリエイティブコーディング』はもちろ…

  5. バックエンド

    【Vue.js】と【Firebase】で作るミニWebサービス を試してみた〜Googleログインま…

    プログラミングにどっぷり取り組むようになってからというもの、いわゆ…

  6. バックエンド

    【Vue.js/Laravel】Webアプリ実践記 37歳おっさんが独学でVue.js+Larave…

    webアプリ実践記 0日目~10日目webアプリ実践記 11…

Sponsored link

最近の記事

  1. 学び・教育

    『ニュータイプの時代』〜リベラルアーツとテクノロジーの融合〜
  2. バックエンド

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
  3. バックエンド

    【Laravel(PHP)】初心者向け アプリのつくり方 をリリースしました【t…
  4. バックエンド

    【検索システム】をつくってみた【実際にログインしてさわれます】
  5. 学び・教育

    『プログラミング教育』より大事な事を考えてみる~AI時代を見据えて~
PAGE TOP
//記事ページのみに構造化データを出力 //サムネイルを取得 //ここから構造化データの記述