[セミナー] Frontrendというセミナーに参加してきました（フロント開発のフレームワークやツール編）

こんにちは、@yoheiMuneです。
今回は、Frontrendというセミナーで学んできた「フロント開発のフレームワークとかツールとか」について、 いいなぁと思ったところを、紹介させて頂きたいと思います(・∀・)

はじめに

このページは、セミナーの内容とそれに関する感想を記載したページです。
私自身、今後何回も読み返して、記載したたくさんの情報を閲覧したいと考えています。

そのため、各情報にはチェックボックスを配置しており、そのチェック状況はローカルストレージに保存し、 ページ再訪問時に、前回のチェックボックスの状態を表示するようにしています。

本機能が、私以外の誰かにも役立てば幸いです。

モバイルウェブ開発ベストプラクティス

斎藤 祐也さんという方が発表されていて、スゴく情報量の多い発表で、たくさん学ぶ事がありました(*´∇｀*)
「知って良かった」「更に詳しく学んでみたい」と感じたポイントを書きたいと思います。

■JavaScript言語仕様、デザインパターン
・『JavaScript The Good Parts（オライリー）（→Amazonで見る）』は必読。
・『JavaScriptパターン ―優れたアプリケーションのための作法（オライリー） （→Amazonで見る）』も良い本。デザインパターンに関する本。
　・・・デザインパターンを知る事で、問題の対応方法を学べる他、発生しうる問題を知る事も出来る。

言語仕様を詳しく学ぶ事や、デザインパターンを詳しく学ぶ事は大変重要な事だと私も感じました。
GoFのデザインパターンも含め、デザインパターンを学び、知識の引き出しを増やしたいと思いました。

■JavaScriptの書き方、お作法
・idiomatic.jsというGithubのページで、書き方の説明が書かれている。
　（日本語に翻訳されたページもあります。こちらをご参照ください）
　他にもjQueryが公開している書き方もある。

読みやすい（理解しやすい）コードを書く為に、書き方を統一すべきです。
しかしどんな書き方に統一するかを検討する時間を、プロジェクト毎に持つのは非効率。 そんな時に、一つ基準となる書き方があると嬉しいですね。ここの書き方を学んで、可読性の高いコードを プロジェクト全体で作れるようにしたい。

■JavaScript MVC
　Backbone.jsが有名らしい。サイズが5.6KBで軽量が良いポイント。1000行程度。読めるのでは！？
　Backbone.jsはMVCフレームワークでは無いどころか、フレームワークですらない。
　Backbone Boilerplateは、Backbone.jsの足りないところを補足してくれる。

サーバーサイドプログラムでは当たり前のMVCをJSでも使える。 このフレームワークを使ったことが無いのですが、JSでなぜMVCが必要で、どのように便利なのかを 近々学びたいなぁと思いました(⌒▽⌒)

■JavaScript - Modularity
・AMD（Asynchronous Mobdle Definition）。モジュールを非同期に呼び出せる。
・AMDのうちクライアントサイドで使えるものは、require.jsがあり、依存関係に関するライブラリらしい。
・Require.jsは重い。リリース後に使わない機能も多い。5.5KB。
・almond.jsは軽い。1KB。requre.jsで動的ロードなどを無くしたもの。

パッケージ管理というと、Java出身者としてはantとかが思い出されますが、 大きなプロジェクトになるとjsでも必要なんだなぁと思いました。
JSでの依存性管理では、node.jsのrequireを思い出しますが、これはCommon.jsのパッケージ管理の仕組みを使っていて、 require.jsとは少し違うのかな？
依存性の管理は、詳しく調べてみたいと思う分野でした。

■CSS
・デザイナーが作成したPSDを厳密にブラウザに描画するのは、普通の事になってきた。
・CSSはプログラミング言語とは言えない非力な言語である。抽象化や拡張性の担保が無い。大きなサイト作成では不便。
・CSSのスタイル/フォーマット。idiomatic.css（日本語訳はこちら）というスタイル記載方法がある。
・Bootstrap。3年間くらい。超有名らしい。Twitterのデベロッパーが、様々な問題に対する解決する
　コーディングを纏めたものらしい。読むとスゴく勉強になる。ver2からレスポンシブデザイン。
・Foundation3。Bootstrapと似たようなサイト。モバイルでは、Bootstrapより優れているかも。verは現在3.0。
・Skeleton。非常にシンプルなフレームワーク。これも参考になる。モバイルファーストの観点で書かれている。
・OOCSS / SMACSS。モジュールの概念をCSSでも使ってみる。
　OOCSSは、github（こちら）に内容がある。
　Scalable and Modular Architecture for CSS（SMACSS）は、電子書籍（こちら）で販売されている。

この部分は、CSSについてこんなにたくさんの情報があるのか、、と驚いた箇所でした。
紹介されたサイトそれぞれの情報量が大変多く、読み込むのも大変ですが、読むとスゴく有益だと思います。
英語なサイトが多いですが、ぜひ全部読みたいと思い、必死にメモした次第でした。

■CSS Preprocessor
・Less.js、Sass、Stylusというモノがある。
・欠点として、吐き出されるコードを意識せずに書くと、大変なソースが出来る。CSSの設計（抽象化、モジュール化）を
　ちゃんと考えて使う必要がある。

今月から、このCSSのプリプロフェッサを使うようになりました。
CSSがこんなに便利に書けるのかと驚きの毎日です。CSSをモジュール化して書ける部分や、CSS3のベンダープレフィックスを自動で付与してくれる機能など、大変気に入っています。
もう少し慣れたら、ぜひブログにも書きたい内容です。

■CSS Tools
・CSS3Pleaseは、CSS3を各種ブラウザで使えるようなルールを作成してくれるCSS。
・CSS3 Generatorは、作成したいCSS3をプルダウンで選んで、値を代入すると、CSS3のコードを作れる。
・Ultimate CSS Gradient Generatorは、名前の通りグラデーションCSSを作れる。
・cubic-bezier.comは、アニメーションCSSなどで指定する変化量をGUIで作れる。
・Prefixrは、CSS3のベンダープレフィックスを付与したり、圧縮したりできる。
・jQuery Easingプラグインは、重力加速度などを簡単に扱えるらしい。

こんなに多くの便利なサイトがある事を知って、ありがたい限りです。
色々と使ってみようと思います。

■Linting
・文法チェックを行うプログラムをlintという。コンパイラーより詳しいチェックが行える。
・lintツールが出すエラーを知る事が、スキルアップには重要。
・Code Linting is your first unit test.
・jshint.comというJSに対するリントプログラムがある。
・CSS LintというCSSに対するリントプログラムがある。

Lintという名前は知らなかったですが、JavaだとcheckStyleやfindbugsといったものになるのでしょうか？
バグや規約違反は、早い段階で（実行する前に）、自動的に見つける（レビューなどの人でに頼らない）事が 大切なので、こーゆう仕組みは、しっかりと調べて使えるようになりたいと思いました。
SublimeText2というエディタでは、Lintを自動的かける事も出来ます。いまのところLintを使うなら、 SublimeText2が一番便利かも。

■JavaScriptのUnitテスト
・QUnit
・Jasmine
・Mocha
・ブラウザでも、Phantom.jsでも、コマンドラインでも、色々な環境でテストが出来る。

Javascriptでは、まだあまりUnitテスト信者がJavaとかに比べて多くない一方で、 JavaScriptのUnitテストについて、出来るようになりたいなぁと考えていました。
紹介頂いたフレームワークを一つずつ見て使って、単体テストが出来るようになりたいと思いました。

■Build Process Automation
・HomeBrewというMac用のパッケージ管理システムが便利らしい。MackPortとかgemみたいなやつ。
・node.jsとNPM。node.jsを使ってコマンドラインプログラムがたくさんNPMで公開されている。
　Grunt.jsが特にお勧め。antやmakeのJSバージョンのもの。
・Gruntは、プロジェクトのビルドツール。
　例）CSSプリプロフェッサコンパイル、テスト、JS/CSSの縮小、結合、画像最適化など。
　Grunt-CSSを使うと、CSSを結合できる。

ビルドツールといえばJenkinsが自分の中で一番ですが、Grunt.jsというものも学びたいと思いました。
Webならではの、JS/CSSの最適化、画像最適化など、設定をJSで書けば？出来るというところが魅力的と感じました。
あと、HomeBrewというものも初めて知りました。世間では有名とのことですが。

■Best Practice
・個人のボイラープレート（=何度も使うコンポーネント）を作って、貯めていこう。
　例えば、HTML5 Boilerplateというサイト（日本語サイトはこちら）があり、手助けになる。
　But Don't just create a web page, Create toolbox.
・Package Managementは未だに無いが、数年以内には出てくるはず。
　クライアントサイドのJSパッケージマネージャーなどがあると良いね。Jamというツールもある。
　Grunt-fetchということで、githubに置いておいて、Downloadすることもいいかも。
・Grunt.jsを使ったビルドとは？
　CSSプリプロフェッサのコンパイル、Phantom.jsを使ったUnitテスト。
　lintをかける。でも、テキストエディタで自動でlintを実行すると良い。Sublime Text2のlinterが良い。
・Version Control。gitでもsvnでもGUIがある。でもコマンドラインで出来ると良いね。
・画像最適化しない画像をアップするのは、本当にもったいない。
　Grunt-Imagineを使うと、CSSのスプライト（スプライトの説明はこちら）や画像のデータURI化（データURIかの説明はこちら）を自動で出来る。

ボイラープレートという言葉を初めて知りました。自身の成功体験（アプリやサイトなど）を部品化（モジュール化）して、 再利用できる形で保持しようという考え方。非常に同感しました。
また、CSSのスプライトという事も初めて知りました。これも説明サイトを見つけたので、後で詳しく読みたいと思います。

他にも

同セミナーの他の講義の無いように関するブログも記載しております。
もしご興味ありましたら、ご覧頂ければ幸いです。
- [セミナー] Frontrendというセミナーに参加してきました（CSS3編）
- [セミナー] Frontrendというセミナーに参加してきました（HTML5 Canvas編）

最後に

発表者は、英語のサイトを多く閲覧し、良質なインプットを得ているとの事でした。
英語のサイトって読むのに抵抗あるけど、情報量や情報スピードはやっぱり違うんだなぁと。自分も今回知った サイトからでも読んでいこう、と思いました。
本当に沢山の情報を得る事のできたセミナーで、大変良かったと感じました。

最後までご覧頂きましてありがとうございました。