• TOP
  • Tips
  • フロントエンド開発ツールマップみたいな何か。JavaScriptフレームワーク、AltJS、CSSプリプロセッサ、HTMLテンプレートとかまとめ。

フロントエンド開発ツールマップみたいな何か。JavaScriptフレームワーク、AltJS、CSSプリプロセッサ、HTMLテンプレートとかまとめ。

久保田成人

2月1日より社員になりましたくぼたなるひとです。初ブログです。つーかいっそ今日から社員なので初業務です。

ちなみにデザイナーです。でもフロントエンドエンジニアになりつつあります。でもデザイナーです。

はい、意味不明な前置きはやめて本題です。
今日はフロントエンド開発ツールについて概観してみようと思います。
「やっぱりフロントエンドエンジニアじゃねえか！」とか言わないでください。

HTML/CSS/JavaScriptだよね。

フロントエンド開発の人が扱うものといえば、基本はHTML/CSS/JavaScriptという認識ですよね。
その他ツールとしてはブラウザとエディタさえあれば、極端ですが即開発できます。簡単ですね。
およそ間違ってないですね。
こんな感じ。

frontendMap-base

フロントエンド開発に携わっていない方の認識はざっくりとこんな感じだと思います。
およそ間違ってないですね。(2回目)

ベストプラクティスを追い求めてみた。

さて、では開発のベストプラクティスを求めていくとどうなるでしょうか。
ぱーっと思いつく限りで一覧っぽくしてみようと思いました。

 

 

 

 

 

 

 

 

 

 

 

 

 
こんな感じ

 

frontendMap
 

 

は？

 

 

 
嘘だ・・・・・・夢だろ・・・・・・これ・・・・・・夢に決まってる・・・・・・・・・！

 

 

 

 

ところがどっこい・・・・・・夢じゃありません・・・・・・！現実です・・・・・・！これが現実です・・・！

フロントエンドエンジニアに求められているものは右肩上がりに増え続けています。もちろんお給料はきっと据え置きです。世の中無情である。

言うまでもなく、技術を追い続けるか、知らんぷりするかは個人の裁量に委ねられる訳ですが。

どうしてこんなことになってるわけよ？

／)( ◕ ‿‿ ◕ )(＼ わけがわからないよ

要因1 – Webのリッチ化＆モバイル化

Ajax

非同期通信の使用したUI構築技術。ページ遷移せずにデータを持ってこれる。
これのおかげでGoogleMapsが使えると思えば感謝せずにはいられない。
今ではページ遷移しないでいろいろできるなんてふつうの感覚になっているが、それくらい当然のように恩恵を受けている技術です。

他にもすごーくたくさん増えたものがあります。

  • クロスサイトスクリプティング
  • クロスサイトリクエストフォージェリ
  • SQLインジェクション

厨二病っぽい感じありますね。心がくすぐられます！
全部セキュリティ問題です。
統計的に見ると3つトータルで1,000件/年間くらい起きてるらしいです。それまでほとんどなかったのに。統計データのグラフとかどっかから引用したかったのですが、じょうほうじゃくしゃなので見つけられませんでした( ◠‿◠ )うーむ
詳しく知りたい人は以下のリンクへどうぞ。とてもよくまとまっています。

Ajaxの脆弱性を理解する – IBM developerWorks

HTML5/CSS3の登場

HTML5はこれまでのバージョンと比べて新しい指針を打ち出しました。ウェブアプリケーションのプラットフォームになろうとしています。直近の一例として昨日ついにYouTubeの動画がFlashベースからHTML5ベースに変わるというニュースが発表されました。
さらにCSS3も登場したことで、フロントエンドでできることが増えています。
できることが増えれば求められることも増えるわけで。やること増えたら今まで通りではいろいろと不満が出てくるわけで。そしたら自然とそれを解決するツールが出てくるわけですね。

モバイルの大流行

言うまでもないですね。レスポンシブにしてみたり、なんかモバイルファーストとか言ってみたり、よくわかってないのに言葉だけが先走るのはよくある話ですよね(何の説明にもなってない。)
jQuery Mobile?知らんな。

  • できることが増えた
  • セキュリティ対策も求められるようになった。

要因2 – CSSやJavaScriptの仕様

CSSのゆるさ

CSS書けます！って人は多くてもきっちりとしたCSSの設計できます。自信あります！って人はそうそういないと思います。
CSSは学習コストが低いですがー、どうにも誰でも書けてしまうので設計が雑になることが多くて、メンテナンスが大変なんですよね。個人的な悩みかなーと思っていた時期もあったんですけど、どうやらそうではないっぽいので参考リンク貼っておきます。

なんでCSSすぐ死んでしまうん
CSS勉強するだるさ

じゃあCSSのメンテナンスで悩まないようにする対策って何があんの？ってお話。

対策方法1.設計をきっちりしよう
  • OOCSS – オブジェクトオリエンテッドなCSSを書きましょうってやつ。構造と見た目の分離。コンテナとコンテンツの分離。
  • SMACSS – モジュールに分類するやつ。Base,Layout,Module,State,Themeとか。
  • BEM – Block,Element,Modifierに分けてガチガチにしてガチガチなやつ。

これらはツールではない。設計の考え方で、他にも命名規則考えたりとか運用でなんとかしましょうってお話。いずれブログ書けたらとか思いますが、今は詳しく知りたい人はぐぐってください。(雑)

対策方法2.CSSプリプロセッサを使う

運用でなんとかするだけでは難しい大規模な開発もあるわけですね。
それにCSSにないけど使いたい機能が使えるようになります。変数、演算、ネスト(入れ子)、Mixinなどなど。
あとラクに書ける気がする(重要)
結局コンパイルしてCSS生成するので、設計から完全に解放されるわけではないという点は注意が必要。

  • Sass – Ruby製。Compass(後述)のおかげでかなりリードした感あるやつ。
  • LESS – Node.js製。Bootstrapで使われたりでよい感じにポジション確保したやつ。
  • Stylus – Node.js製。後発にありがちなよいとこどりなやつ。

CompassはSassのフレームワークです。何が何だかわからなくなりそうですね( ◠‿◠ )

JavaScriptの実行環境

サーバーサイドJavaScript

JavaScriptはブラウザ上で動くって思っていれば問題なかったよねっていう時期が私にもありました。今では、Node.jsの隆盛のおかげでどうにもサーバーサイドJavaScriptは無視できません。
ちなみにいま最も注目しているのはio.jsです。
サーバーサイドJavaScriptってNode.jsって知ってるけど、io.jsって何？って人のためにかんたんに説明しておくと、Node.jsからフォーク(ある時点のコピーを生成して別のものとして派生)されたものがio.jsです。どうしてこのように派生することになったかの説明は詳しく書いてあるブログに任せるとして、注目したいのはGitHub上でのコミット数の差です。2014年中盤にフォークしてからの盛り上がり方にあからさまな差があります。Node.jsの行く末が心配されますね。

io.jsについて知っていること

クライアントサイドJavaScript

JavaScriptってブラウザ上で動きますね。何が言いたいかってブラウザ毎に実装されるので差が出るんですよね。 要するにめんどくさいと。
なんとかしようやって感じで生まれたのがprototype.jsっていってライブラリなどが生み出されて、気付いたらjQueryの大流行と。だいたいこんな感じ。
jQueryはとても使いやすいものなんですが、上述の通りフロントエンドでの表現でできることが多くなった昨今では大規模開発が多くて、jQueryの弱点が露呈してきたわけですね。
メンテナンスが大変。大量のDOM操作という名のメダパニ状態ですね。
それを解決するためにたくさんのフレームワークやライブラリが登場しましたとさ。詳しくは今回は書いてたらきりがないから一覧だけだよ。

  • Backbone.js – MVCの考え方をJSに持ち込んで、シンプルな構成なのが特徴。
  • Angular.js – 双方向データバインディングなど独自の仕様を盛り込んでいるMVWフレームワーク。フルスタックな感じが特徴。
  • Knockout.js – MVVWフレームワーク。人気フレームワークといえばAngular,Backbone,Knockoutとか言っとけばいいんすよね？
  • Vue.js – 後発フレームワークだからよいとこ取りしてるやつ。
  • Ember.js – MVCフレームワーク。キャラクターかわいい。
  • React.js – 仮想DOMとかいうすばらしい概念を採用。最近ReactNativeというモバイル開発向けの言語も出してましたね。

要はMVxで整理しようっていうのが多い。
jQuery UI?知らんな。

要因3 – 人間だもの

進化に対応するために連鎖反応として生まれたツールがあります。

人間はラクをするためならどんな努力も惜しまないのである

俺(1989~)

要するにラクしたい。雑にやっててよいもの作れたらサイコー
働きたくないでござるの世界サイコー

HTML書くのめんどくさいって思ったから働きたくない人向け

更新ボタン押す(ショートカットたたく)のもめんどくさいって思ったから働きたくない人向け

上の両方とも当てはまる人にはEmmet LiveStyleとかいうツールもあるらしい。

JS書くのめんどくさいって思ったから働きたくない人向け

AltJSというものがある。最終的にJSにコンパイルするけど。

  • CoffeeScript
    ラク。実際に書かなきゃいけないコード量の減少具合がハンパではない。
  • TypeScript
    とはいえきっちりしたい人も世の中にはいて、そんな人のためのツールはこれ。

  • Yeoman

  • Grunt
  • gulp
    らへんの説明抜けてたなーってあとから気付いたやつ。
    こいつらも結局ラクしたい派

要因4. 大規模化したらテスト書くようになってたやつ

テスト書きたい。(雑)

ユニットテストツール

テストランナー
Karmaとか(雑)

総合テストツール
SeleniumとかPhantom.jsとか(雑)

情報をキャッチアップするために

こんな多い情報があってどうすればよいの？って困らないためにやってること

  • 興味のある情報が入るような仕組みをつくる。
    RSSで興味のありそうなブログまとめてもよい。勉強会まとめサイトに登録して興味のあるような逐一確認できるようにするなど。
  • すべてを求めない
    よくばりおじさんになったと思ったら、どの情報がいらないかを考える。
  • 自分にとってのインフルエンサーを見つける
    私はこの人が言うならある程度は鵜呑みにするという人がいます。自分で時間を確保できないなら先人の知恵を取り入れようというだけのお話ですね。
  • 継続
    やめない。

じゃあ何を選べばいいのよ？っていう疑問には次回以降書きたいと思います。

おすすめ記事