できらぁ！
面白法人カヤックのエンジニアのごんです。
昨今のフロントエンドといえば、
Todo アプリを作るにも Webpack やら Babel やら必要だと脅され、
始める前にうんざりしてしまうと話題ですが、
実は、最新のブラウザに限って言えば、そんなことはなく、
ECMAScript の新しい構文や JavaScript Modules など、
多くの機能がネイティブの状態でも使えます。
もちろん、古いブラウザのサポートや、通信パフォーマンスのことを考えると、
ビルドツールを使ったほうが良いのは間違いないのですが、
JavaScript の新しい機能に触れてみたり、自分用のツールを作るぶんには十分でしょう。
そんなわけで、今回はビルドツールなしでウェブアプリを作ってみました。
ECMAScript に関するクイズゲームです。
最新版の Google Chrome や iOS Safari で動作します。
プリコンパイラなどは、一切使用していません。
以下、利用した新しい構文や機能を紹介します。
import, export (JavaScript Modules)
import Vue from './vue.esm.browser.js'; import shuffled from './shuffled.js';
グローバルを汚染することなく、別ファイルを読み込める機能です。
かつては require.js などもありましたが、import の場合は、実行前に全てのモジュールが読み込まれます。
ライブラリによっては、JavaScript Modules 形式のビルドを提供しているものもあるので、そのまま使えます。
今回は Vue.js も利用しました！
Async / Await
async mounted() { const res = await fetch("data/quizzes.json"); this.originalQuizzes = await res.json(); this.changeView('title'); }
JS をコールバック地獄から救う救世主です。
関数宣言で async という修飾子をつけると、関数内部で await 演算子を使うことができます。
Promise オブジェクトに対して await 演算子をつけることで、
新たなコールバックを作ることなく、平易な形で非同期処理を扱うことができます。
今回は fetch（これも割と新しいメソッド）と組み合わせることで、非常に簡単に通信処理を書くことができました。
分割代入
const { correctChoices, id } = quiz;
分割代入は、オブジェクトから値を取り出すときに便利です。
今回は使いませんでしたが、Spread Operator なども多くのブラウザで使えます。
const foo = { ...bar };
アロー演算子
return shuffled(this.originalQuizzes).map(quiz => { return Object.assign({}, quiz, { choices: shuffled(quiz.choices) }); });
this の扱いが格段に楽になるアロー演算子ももちろん使えます。
テンプレートリテラル
resultMessage() { return `${this.quizzes.length}問中${this.score}問でした！`; }
なぜ今までなかったのか不思議なテンプレートリテラルも使えます。
map, forEach, reduce, includes など……
if(correctChoices.includes(this.answers.get(id))) { return score + 1; }
配列の各種便利メソッドも使えます。
注意点
良いことばかりではないので、注意点も書いておきます。
- JavaScript Modules が読み込み時に解決されるため、通信回数が増える
- npm モジュールはそのまま使えない
- JSX や TypeScript のようなトランスコンパイルはできない
おわりに
いかがでしたでしょうか。
これならメモ帳でも開発できますね。
いざビルドしたくなったときも、percel などを使えば（たぶん）手軽にできます。
より本格的なビルドツールに移行したくなったとしても、
ECMAScript ベースで書かれていれば、移行はそれほど難しくないはずです。
環境構築を恐れず、どんどん新しい技術に挑戦しましょうლ(´ڡ`ლ)
採用募集中です！
面白法人カヤックでは、
React とか Vue とか最新の ECMAScript とか使って
ガンガン開発したいエンジニアを大募集中です。
興味のある方は下記リンクからどうぞ！
