Javaエンジニアのフロントエンド入門

僕は（おそらく僕の周りの人も）、仕事ではJavaでサーバーサイドの開発をすることが多い。JavaScriptはお飾り程度に使っていただけだった。

少し前に、React.jsを中心にフロントエンドの流行りの技術を勉強した。開発環境として実に様々なツールが使われており、普段使っているJavaScriptとはあまりにも世界が違った。 ここに特徴的な点を書き留めておきたい。

あくまで概論だが、サーバーサイド中心のJavaエンジニアに、最近のフロントエンドの雰囲気がなんとなく伝わればいいなと思う。

SPA

最近は、SPA（Single Page Application）とよばれるアーキテクチャが注目されている。ひとつのWebページで完結するアプリケーションだ。ページ遷移をしないことで流れるようなUXが実現できる。

SPAでは、クライアント側のロジックの記述が多くなる。そのため、通常Backbone.js、AngularJS、Reactなどのフレームワーク（Reactは厳密にはライブラリ）が使用される。

「フロントエンド」は、本来単にUI部分を指す言葉であるが、本記事ではSPAを開発する場合を想定する（世間的にそんな雰囲気だし）。

npm

Node.jsといえばサーバサイドのJavaScript実行環境だ。 npm（Node Package Manager）は、そのNode.jsのパッケージマネージャである。

普通に考えると、サーバーサイド開発のための色々なモジュールをインストールするもの、ということになるのだろう。 しかし、実のところサーバーサイドをNode.jsで作らなくても、フロントエンドのためだけにnpmは使われる。主な役割はプロジェクトの定義と、開発ツールを含めたコンポーネントの依存性管理だ。

Javaでいうと、Mavenによるプロジェクト定義と依存性管理に近い。

JavaScriptで"ビルド"

フロントエンドの開発環境が重厚化している理由として、開発のプロセスでビルドが必要になっていることが挙げられる。

JavaScriptでビルドと言われてもピンとこない人もいるかもしれない。 以下のような処理を行う。

• minify（ミニファイ・圧縮） - JavaScriptやCSSから余分な空白文字を削除したり、変数名を短くして、サイズを小さくする

• altJS、CSSメタ言語といった簡略記法を、実際のJavaScript、CSSに変換する

• モジュール化したJavaScriptの依存性解決（詳しくは別記事webpackで説明予定）

下の2つについては、要するに作業の軽減や保守性UPのために仮の書き方でコードを書いておいて、最終的に正式な（=ブラウザが解釈できる）コードに変換するということだ。

ビルドを行うツールとしては Grunt や Gulp が有名だ（正確にはビルドツールというよりタスクランナー）。 Javaの人的にはAntやMavenのビルド機能・タスク実行機能のイメージでいいと思う。

モジュール化

Javaでは基本的に、1ファイルに1クラスを定義し、あるクラスから別のクラスを使うときは、あらかじめimport文でインポートする。 このようにコードをモジュール化し、必要なときに取り込んで使う機能が、JavaScriptには長らく存在しなかった。 そのため、JavaScriptをモジュール化するためにRequireJSやBrowserify、webpackが使用される。 （話がややこしくなるのだが、2015年6月にリリースされた ECMAScript 6 からimport文が規定された）

RequireJSは実行時に依存性を解決し、Browserify・webpackは先に述べたGruntやGulpを使って事前にビルドする。詳しい使い方はここでは述べないが、前述の通りJavaのimport文を実現するイメージだ。

最後に

さて、最近のフロントエンドの開発環境について、Javaの場合に例えるなどして簡単にまとめてみた。ただ、あくまで一部の内容であるし、具体的なコード等にもまだ触れていない。

正直、イマドキのフロントエンドの開発は学習コストが高いように思う。けれども僕自身触ってみてすごく面白いと思ったので、普段触る機会がない人に紹介するつもりで書いた。

ぜひ仲間のJavaエンジニアにも触ってみていただきたい。