プログラミングの歴史において、
『JavaScript(ジャバスクリプト)』ほど、
栄光と挫折を味わった言語はないんじゃないかと思ったりします。
こちらの記事に面白おかしく書いてありますが、
1995年生まれで、
ポケモン赤・緑とタメというポケモン世代な言語で、
- 戦国時代
- 暗黒時代
- 新時代の幕開け
- そしてもはやJavaScriptではない世界
まで駆け抜けた『JavaScript』。
例えるならビリギャルのように、
偏差値35でグレた時代から慶応ボーイに成り上がり、
さらには『イーロン・マスク』よろしく宇宙に飛び出すような勢いで進化し続け、
もはや誰もついてこれないといわんばかりの言語が『JavaScript』。
そんな『JavaScript』は、2015年以前と以降で大転換がありました。
そりゃあもう革命と言わんばかりの大転換が。
大転換を迎えた昭和な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フレームワーク』も誕生。
参考記事
ややクセのある『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』をまるっとインストールできたりします。
もちろん、『Laravel Mix』や『Vue-cli』を使わず、
直接『babel』と『webpack』をインストールすることもできます。
JavaScriptの環境構築 webpackとbabel
『babel』『webpack』それぞれいくつかのファイルをインストールする必要があります。
『babel』インストールに必要なファイル
- @babel/core ・・メインのファイル
- @babel/preset-env ・・環境にあわせて令和->昭和に変換できる
- @babel/polyfill ・・令和なJavaScriptも変換できるようにする
- babel-loader ・・webpackでも使えるようにする
『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のサンプル付き）
JavaScript の環境構築 webpackとbabel まとめ
『クリエイティブコーディング』しかり、
個人で楽しむ分には『昭和なJavaScript』でもまったく問題はないのですが、
モダンな企業で最先端フロントエンジニアになりたいとすれば、
『ES6』以降の『令和なJavaScript』は必須になってきますので、
このブログでは、どちらもいい塩梅で(気分次第で)使い分けつつ記事を書いていければと思います。
参考文献
最新JavaScriptでのレシピが豊富に掲載されています。
『JavaScript』ならかかせない一冊です。ES6の記載もたっぷりあります。
『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冊】ホームページを作れるようになるためのおすすめ本【初心者向け】
アオキのツイッターアカウント。
この記事へのコメントはありません。