CSS Nite LP47「Coder's High 2016」フォローアップ（4）長谷川 広武さん（HAMWORKS） | CSS Nite公式サイト

2016年9月24日（土）TKPガーデンシティPREMIUM神保町で開催したCSS Nite LP47「Coder's High 2016」のフォローアップとして、長谷川 広武さん（HAMWORKS）の『本当に利用は必要か？ デザイナーにとっての jQueryとJavaScript フレームワーク』セッションのスライドなどを公開します。

• スライド（PDF）
• 音声
• 動画

セッション4「本当に利用は必要か？ デザイナーにとっての jQueryとJavaScript フレームワーク」を担当したHAMWORKSの長谷川です(´°ム°`)

デザイナーやマークアップ担当にとって JavaScript の内容は苦手意識の大きい部分だった人も中にはいると思います。しかし、jQuery やその他のライブラリ・フレームワークを含め JavaScript を覚えることで、仕事の幅も大きくかわってきます。今後も JavaScript が必要になることは多く出てきますので、紹介したようなライブラリやフレームワークも、簡易なところからでいいので、まずは一度チャレンジしてください。

以下、アンケートでいただいた質問への回答です。

結局 jQuery 使ってて OK？

小規模のときは使っててOKです。規模が大きめになる場合は jQuery だけだと対応が難しい場合も増えるため、そのときは jQuery 以外の選択も検討してください。

便利なプラグイン、フレームワークがあって自分に合ったものを探すのって大変

プラグインにしても、ライブラリやフレームワークにしても、自分に合うかどうかは触ってみないとわからないことが多いので、とても大変です。私もよく悩みますが、合うかどうかやカスタマイズしやすいかを判断するために、導入前に一度触れてチェックするようにしています。

JavaScript Framework って SEO 的にはどうなんでしょう？

私もこの点についての知識が乏しいため明確な回答を出せないのですが、検索エンジンはJavaScriptでの表示もクロールされるといわれているので、検索にヒットしないということはないようです。もしも気になってしまうようであれば、検索に影響の少ないところ、例えばサイドバーの読み込みや一覧の読み込みなどの簡易部分から利用してみることをおすすめしています。

JavaScript / jQuery どっちを勉強したらいいのか？

個人的には jQuery から勉強を始めても問題ないと思っています。jQuery なしでも出来ることでも、利用前提でいることで作る時間の短縮にもなるためです。JavaScript で抑えなければならない基礎部分もありますが（forループや変数など）それほど多くないため、jQuery の勉強とともに JavaScript の基礎も勉強してみてはいかがでしょうか？

jQueryのアニメーションはやっぱり便利

アニメーションはとても便利な機能の一つですが、CSS のアニメーションで代替できることが増えてきています。CSS で出来ることであれば jQuery のアニメーションを使わずに、transform や opacity などで動作を構成する方が動きが滑らかです。動的に値が変わる場合も、animation を使うのではなく、CSS の値を書き換えるくらいにとどめ、動き自体は transition や transform で構成するほうが滑らかです。アニメーションが必要な場合は、最初は CSS でできるか考え、難しい場合のみ jQuery の animation を利用するようにしましょう。

スライドで紹介した参考サイトjQuery

• jQuery https://jquery.com/
• Lightbox http://lokeshdhakar.com/projects/lightbox2/
• Handlebars.js: Minimal Templating on Steroids http://handlebarsjs.com/
• 漢は黙ってjQuery http://www.slideshare.net/TakumaHanatani/jquery-56093566漢は黙ってjQuery from Takuma Hanatani

ライブラリ・フレームワーク

• Backbone.js http://backbonejs.org/
• AngularJS ? Superheroic JavaScript MVW Framework https://angularjs.org/
• A JavaScript library for building user interfaces | React https://facebook.github.io/react/)
• vue.js https://vuejs.org/
• Riot.js ? A React-like user interface micro-library http://riotjs.com/

簡易サンプル（リスト表示）

• jQuery版 http://codepen.io/h2ham/pen/WGpwwJ
• jQuery と handlebars.js 版 http://codepen.io/h2ham/pen/yarORd
• Vue.js 版 http://codepen.io/h2ham/pen/QKpEpL
• Riot.js 版 http://codepen.io/h2ham/pen/jrBAKb