2012/08/11更新

[セミナー] 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編)



最後に

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

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





こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。