フロントエンド未経験エンジニアがフロントエンドをちょっといじってみた（1）
普段が忙しすぎてなかなか最新鋭のsomethingを触る機会がないので、お正月ですがコツコツ作ってみました。まだ動くレベルにまではいっていませんが、ひとまず感想を書いておきます（今年のJJUGでアウトプット大事って言ってたし）。
まず、私は普段Javaしか使いません。たまにWebアプリに配属されて、ちょっとフロントエンド周りを触って（元々Webデザイナーなので、HTMLとCSSとjQueryとかなら爆速で書ける）プロジェクトを離脱、なんてことはありましたが、基本的にはJavaでずっと書いています。
Java好きなのでJavaで問題ないんですけど、AngularとかReactとかカッコイイ言葉使ってみたいじゃん？という不純な動機でフロントエンド系のいろいろなものに手を出してみよう、という勝手な企画です。
今回手を出してみたのが下記です。
Materialize.css
bootstrapは昔これでもか！というくらい使ったので、今回はちょっと話題になってたMaterializeを使ってCSS書きました。とりあえずbootstrapより使える色の数が多い感じ。あと、各コンポーネントがいちいちオシャレ。しかし、若干bootstrapよりやれることが少ない（独自実装が必要）な気がする。ポップアップでYes/No選べるやつ（名前がわからない）とか、多分自分で作らなきゃいけないような…
Vue.js
AngularかReactかVueかで迷って、結局Vueにしました。サイトのデザインが好きだったから、というのが選んだ理由です。でも、ReactかVueかで比較すると、速さの点で少しVueの方が勝るみたいです。それ以外の違いはあまりないかもしれません。Angularとそれ以外というくくりなのかなと理解しました。
昔のプロジェクトで使い慣れたknockoutとVueの実装を比較したページもあって、こちらでもVueの良さが伝わるかなと思います。まあべつに使いやすいやつを使ったらいいと思います。
個人的には、.vueファイルにコンポーネントの処理を記述して、.jsにビジネスロジックとかを記述する感じが好きですね。ほかのjsライブラリを知らない（knockoutとかdurandalとかしか知らない…）ので、他のやつにあったらごめんなさい。
Spring Boot
https://projects.spring.io/spring-boot/
Javaのフレームワークです。最近だと、とりあえずこれ使いますか、という感じになります。セキュリティ周りまで充実してますしね。私も、以前使って使い慣れているので今回もこれを使いました。
Vue.jsを使おうとしたらインストールの必要が出てきたツールたち
しかし、これだけでは済みませんでした。思った以上にフロントエンド界隈って複雑でした。1つにならないんですか？と思うんですが、よく考えたらJavaも別に1つになっていたわけではありませんでした。とりあえず、フロント界隈に初めて触れる方向けに、覚えておいたらいい用語をメモします。
npm
Node Packaged Modules(npm)のことです。npmをJavaで言うと、Mavenですね。ライブラリの管理をやってくれるものです。npm install XXXと打つだけで、jsのライブラリを勝手に該当のディレクトリに入れてくれます。便利なので、これを使ってjsライブラリの管理をするととても楽です。
実装の際には、package.jsonなるファイル（Javaでいうと、Mavenのpom.xmlとかbuild.gradleとは）に依存関係とかを書き込んでおいて、あとは適当なビルドツール（後述）を用いてビルドすれば完成。JavaScriptにビルドの機能がついたなんて、jQueryで遊ぶ程度だった私は知りませんでした…。
browserify
あまりよくわかっていないのですが、require('vue')とかすると、vue.jsを読み込める、みたいな機能を持たせるものらしいです。npmで取り込んだjsを呼び出して使えるものらしい。（知らず知らずのうちにrequire('hoge')してた）。
私の理解としては次のとおりです。jsには長いことJavaで言うところのimport文がなく、お互いの依存関係は一旦HTMLにscriptファイルを書いて記述する必要がありました。そこで、そんなめんどくさいことをする必要がないように、js同士で依存関係を解決できるようにしたのがこの「require」文なのでしょう。便利ですね。
gulp
ビルドツール。他に、gruntとかいうのもあるらしいです。よくわからずとりあえず参考したチュートリアルがgulpを使っていたのでgulpを使いました。どこがいい、とかそういう話はできません。ただ、Node.jsのAPIを使ってビルドするみたいなので、先述したnpmと相性がいいとかあるのかもしれません。
Babel
jsにもいろいろあるらしくて、これはそのうちの「ES6」なる構文で.jsファイル内では書いて、コンパイルするとどんなブラウザでも認識できる古いjsの構文に直してくれる、というツールです。
ところでES6なのですが、
- クラスが使える
- スコープがまともなletとか、定数constが使える
- Arrow関数（Java8で言うと.forEach(v -> {})の「->」）を使える
等々、あんなにわかりづらかったjsがめちゃめちゃわかりやすく書けるじゃん！という強者です。もうみんなこっちで書けばいいのにっていうレベル…
クラスをクラスとして扱えるのと、extendsを使って継承できるなど、Javaしか触ったことのない私でも「あ、なんとかなりそうだ」という気分にさせてくれました。実際、なんとかなりました。
ただ、1つ問題があって、babel等でbuild.jsなるファイルに吐き出したjs、どうがんばってもデバッグできなそうなんですけどフロントの皆さんはどうやってるんですかね？ちょっと調べてみたんですが、Chromeの検証ツールはあんまり役に立たないみたいですし…デバッグは死活問題ですし必ず誰かが解決していると思うのでもう少し調べてみよう…
エディタ
Java側はIntelliJ、フロントサイドは全部Atom、みたいな使い方をしています。IntelliJは安定といえば安定なんですけど、コマーシャル版だとjs側の補完が全然効かなくてわりと不便です。また、Atomだとlanguage-vueというパッケージがあって、これをインストールすると.vueファイルでも補完が効くようになるので、その点でもAtomを選びました。参考までにどうぞ。
ひとまずフロントエンドの皆様が使っていそうなツールを一通り使って、これから三が日で簡単なWebアプリでも作ってみようかなと思っています。githubはもうちょっとできてからコミットします。
