フロントエンド

【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』とか。

参考記事

ややクセのある『JavaScript』を書きやすくしようと、『AltJS(オルトジェイエス)』も誕生。

『AltJS』の代表的な言語

  • TypeScript・・マイクロソフトが開発した型指定・・1番人気
  • CoffeeScript・・PythonやRubyっぽくかける
  • Dart・・グーグルが開発

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

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

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

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

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

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

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

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

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

JavaScriptの環境構築 2大ツール

令和世代の最新版『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』ファイルを作った後に、

npm i -D @babel/core @babel/preset-env @babel/polyfill babel-loader webpack webpack-cli

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

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 側に記載されます。

参考コード

{
  "name": "threejs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode=development",
    "build": "webpack --mode=production",
    "watch": "webpack --watch",
    "start": "webpack-dev-server"
  },
  "dependencies": {
    "webpack-glsl-loader": "^1.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.4.3",
    "@babel/preset-env": "^7.4.3",
    "babel-loader": "^8.0.5",
    "glslify-loader": "^2.0.0",
    "raw-loader": "^3.1.0",
    "webpack": "^4.30.0",
    "webpack-cli": "^3.3.1",
    "webpack-dev-server": "^3.8.0"
  },
  "private": true
}

参考コードの元記事

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

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

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

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

  • mode ・・開発用(development)か公開用(production)か
  • エントリーファイルとバンドルファイル(出力ファイル)
  • トランスパイル設定(javascript, css など)

『webpack.config.js』の参考コード。

const path = require('path');

module.exports = (env, argv) => ({
  // モードが production だと最適化された状態で、
  // development だとソースマップ有効でJSファイルが出力される

  // メインとなるJavaScriptファイル(エントリーポイント)
  entry: './src/index.js',
  // ファイルの出力設定
  output: {
    // 出力ファイル名
    filename: 'bundle.js',
    //  出力ファイルのディレクトリ名
    path: path.resolve(__dirname, 'dist')

  },
  //監視有効
  watch: true,
  //開発用サーバー
  devServer:{
    contentBase: path.resolve(__dirname, 'dist'),
    watchContentBase: true,
    //ポート指定
    port: 3000,
  },

  module: {
    rules: [
      {
        // 拡張子 .js の場合
        test: /\.js$/,
        // node_modulesは対象外にしておく
        exclude: /node_modules/,
        use: 
          {
            // Babel を利用する
            loader: 'babel-loader',
            // Babel のオプションを指定する
            options: {
              presets: [
                // プリセットを指定することで、ES2019 を ES5 に変換
                '@babel/preset-env',
              ]
            }
          }
      },
      { // 拡張子 .glsl .vert .frag の場合
        test: /\.(glsl|vert|frag)$/,
        // webpack向けglsl-loaderを利用する
        loader: [ 'raw-loader', 'webpack-glsl-loader' ]
      }
    ]

  }
});

参考コードの元記事

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

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

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

Sponsored link

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

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

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

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

参考文献

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

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

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

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

1. 【Vue.js】初心者向けの動画をリリースしました【Udemy】

2. 【JavaScript】初心者向けの動画をリリースしました【Udemy】

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

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

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

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

7. 【アロー関数】とは わかりやすくまとめてみた【JavaScript】

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

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

 

アオキ
ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m

アオキのツイッターアカウント


関連記事一覧 (一部広告あり)

コメント

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

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

CAPTCHA


最近の記事

アーカイブ

  1. バックエンド

    【Laravel第4弾】Vue.js3(CompositionAPI+Scrip…
  2. オンライン教材

    【ChatGPT】エンジニア編をリリースしました
  3. オンライン教材

    【React】初心者向け講座をリリースしました【MUI】【Udemy】
  4. オンライン教材

    【AWS】【初心者向け】インフラの基礎からわかる講座をリリースしました【Udem…
  5. 生成AI

    Dify講座をリリースしました【非エンジニア向け】
PAGE TOP
Ads Blocker Image Powered by Code Help Pro

広告ブロックを摘出しました!!

ブラウザ拡張を使用して広告をブロックしていることが摘出されました。

ブラウザの広告ブロッカーの機能を無効にするか、
当サイトのドメインをホワイトリストに追加し、「更新」をクリックして下さい。

あなたが広告をブロックする権利があるように、
当方も広告をブロックしている人にコンテンツを提供しない権利と自由があります。

Powered By
Best Wordpress Adblock Detecting Plugin | CHP Adblock