はじめに
- 正確なことを言おうとすると、かえってまた混乱させてしまうのでざっくりな話をします。
- なのでツッコミどころはたくさんあると思いますが了承を
目的
- エンジニアではない人達向けにフロントエンド技術の概要や取り組んでいる事とかをざっくりわかったという状態を作る
- エンジニアは自分で調べて、手元で少し動かしてみて確認すれば理解は進むと思うけど、エンジニアではない人達はなかなか難しいですよね
- フロントエンドエンジニアに限らずですが、取り組んでいる内容や技術の理解があればお互いに仕事しやすくなるよね
用語
- 「フロントエンド」とは≒Javascriptで良いです
以前のフロントエンドをちょっと振り返る
自分が業界で働き始めた2007年ぐらいまで
- Javascript自体は存在していたが、各ブラウザの実装がバラバラで且つ、大した処理ができず、ユーザ的にも邪魔くさい挙動になっていた為、正直全然注目されなかったと思う
- この頃はガラケーで、モバイルにも使えないし更に使われなかった
- リッチデザインな表現をする場合は大体Flashが使われ、Action Scriptを主に使ってた
- AdobeのFlashが買えず、Flexを勉強してみたりした。全然できなかったけど
Ajax
- JavascriptからHttp通信が可能になり、ページの表現が格段に上がった
- prototype.js、jQueryが流行って皆使った
- DOMの操作もゴリゴリかけて、表現力が増した
この辺から最近で取り組んでる内容
フレームワーク登場(2010,2012年ぐらいからかな)
- jQueryのDOM操作をゴリゴリ、つらい。
- フロントエンドにもMVC的な考えが入ってきた
- いろんなフレームワークがクソ増えた
- React.js（https://facebook.github.io/react/）
- Angular.js（https://angularjs.org/）
- Angular.js 2.0（https://angular.io/）
- Backbone.js（http://backbonejs.org/）
- Knockout.js（http://knockoutjs.com/）
- Ember.js（http://emberjs.com/）
- Ractive.js（http://www.ractivejs.org/）
- Vue.js（https://jp.vuejs.org/）
test codeもでてきた
- KARMA (https://karma-runner.github.io/0.13/index.html)
- mocha (https://mochajs.org/)
- power-assert (https://github.com/power-assert-js/power-assert)
CSSも効率的に管理しよう流れが入ってきた
- Less
- SASS
モジュール管理(コンパイル)して使うという流れが入ってきた
- Gulp（http://gulpjs.com/）
- Grunt（http://gruntjs.com/）
- Browserify（http://browserify.org/）
- Webpack（https://webpack.github.io/）
これらどう組み合わせて使ってるのか
こんな感じ（だいたい枠の中から１つピックアップして使う）
簡単な説明
- altjsはAltnative javascriptでjavascriptの代替言語です。
- より簡単に記述ができ且つテスタブルにすることができる
- test系はサーバサイド言語では当たり前ですが、unit test codeをjavascriptでも実現させている
- FW系はModel View ViewModelだったり、VirtualDOMという考えだったり色々とありすぎる
- 構文チェックはwordの誤字チェック
- CSS系はCSSもサービスがスケールすると管理が大変なので変数が使えるようなSASSがメイン？で使い効率化をしている
上記の図より：枠の中の要素を一つピックアップして使い、最後コンパイラーが丸っと変換してからプロダクションで使う！
- 例えば1：CoffeeScriptをメインに使って、Mochaでテストコード書いて、ESLintで規約を揃え、CSSはBEM記法とSASSで書く。最後にgulpでコンパイルしてプロダクションで使う
- 例えば2:React.jsでメインで使って、redux(flux)を活用して、power-assertでテスト書いて、ES6に準拠した記載にして、BABELでES5に変換して、Browsrifyでコンパイルして、最後gulpでまとめる
なぜこんな複雑な感じになったのだろうか
- 個人的に複雑にしたくてしているわけでは無いよ
- 世界的な流れです
- 元々が何も無い状態で世界のエンジニア達が改善を猛スピードで加えた結果かな
- webのトレンドがよりリアルタイム性を求められるようになり、必然的にフロントエンドの進化が求められた背景が関連してる？
- ？html5とかwebsoketとかこのあたりの流れ
まとめ的な感じ
- まだまだこの組み合わせが良いんじゃなかろうか的なデファクトはない気がするし、またパラダイムシフトが起きそうだけどある程度追いかけながら導入を見極めて行く必要がありそう
- フロントエンドはもはや完全なエンジニアリング
- やはり最近の流れにのった要件を実現させようとするとだいたいはモダンな仕組みは必須だし、スケール、運用という意味でも必須
- 大体の人はスーパーマンで無いので一夜にして習得は無理で地道な努力と時間的投資が必要