読者です 読者をやめる 読者になる 読者になる

タオルケット体操

サツバツいんたーねっと

モダンなJavaScriptの開発環境構築の一歩目の話をした

プログラミング JavaScript デザイン

f:id:hachibeechan:20150209112454p:plain

社内勉強会をやりはじめたはなし - タオルケット体操 に続いて、社内勉強会第二回目の講師をやりました。以下がスライドになります。

JavaScriptは異常なまでに変化の激しい界隈で、僕が書き始めたこの一年ですら色々な変化がありました。
そんな中でモジュール化、ECMAScript6などの未来を見据えたコーディングについてと、それを支える各種ツールや概念についてのキーワードをスライドにまとめた形になります。また、最後にはJavaScriptのモジュール化がどういう風に行われてどういう風に書けるのかを見せるの手順として、Webpackを使った説明と、軽い実演を行いました。CommonJSスタイルでのrequireのやり方をみせるだけでも反響っぽいものがあったので、やはり実演は大事だなとおもいました(小学生並みの感想)。

モダンJavaScript環境構築一歩目ということもあって、まずはNode.jsの説明から入り、npmとbowerの違いを説明して一気にWebpackまで一時間で進めたので、説明する僕もそうですが聞いてる方もなかなか辛かったんじゃあないかとおもいます。
なお、個人的にサーバーサイドの開発環境としてのJavaScriptにはこれっぽっちの必要性も未来も感じていないので、Node.js(io.js)についてはあくまでフロントエンドの開発を支援するためのツールの一部的な感じでしか説明していません。なのでNodeについて知りたい方には物足りないところもあったかなぁともおもいます。まぁ魅力を感じないからやらないというのは一つの言い訳で、あまりにゴチャゴチャと進化しすぎるので流石に片手間ではついていけないというのが本当のところです。

JavaScriptは動的な、いわゆるスクリプト言語ではありますが、その一方で(色々な点で)ビルドが必要な言語となっています。
それらの作業を補助、自動化するためのツールが豊富に出ていてスーパー便利なんですが、便利な反面覚えることが多すぎてググることすら困難でなかなか実務に取り入れることが出来なかったチームもあるでしょう。
今回の勉強会がその一歩を踏み出す一助になれば良いかなと思いました。実際やり始めるとまた色々ハマるんですけど、調べるキーワードがわかるだけでも結構違う……といいなァ。

しかし今回はうまく結論が出ませんでしたが、GruntやGulpなどのJavaScript側の仕組みと、Railsにバンドルされた仕組みのどっちに乗っかるかというのはなかなか難しい問題です。
チームのスキル感によりますが、JSのエキスパート的な存在がいるならばJavaScript側のエコシステムに乗っかった方が進化についていきやすいので良いと思っているのですが。

ここら辺はスライドでも書きましたが、追求するUI/UXのレベルによってはJavaScriptをあまり使わないと言う方向に戦略レベルで舵取りをしていくのが賢いやり方で、中途半端が一番やばそうです。個人的な経験則でしかないですが。


Keynoteで作ったスライドも人生二枚目ということで、作る速度もそろそろこなれてきた感じはありますね。スライドを作るのはなかなか面白いです。

よくスライド作り講座みたいなもので「文字を少なくしろ、後から読んだら意味不明なくらいに情報を削れ」みたいなものがあって、僕もそれは大筋では正しいとはおもうんですが、今回は「プレゼンテーションというよりは勉強会用のスライド」でありつつも「キーワードをピックアップしていくプレゼン寄りのスライド」みたいなものを意識して作ったので、割と文字が多いです。
その分今回は結構頑張って行間を調整したんですが、今みるとところどころズレているので悲しみでした。PDF化の影響もあるでしょうが。

15ページまでは前回のおさらいみたいな感じで、軽く手入れをした奴を使い回しています。
16ページからが今回のものですね。

今まではserifとsans-serifの違いもよく知らないマンだったのですが、ノンデザイナーズデザインブックを読んで以来は色々とフォントを探すのが楽しくなってきている感じがあります。

Gill Sansというカワイイなフォントの存在を知ったので早速使いました。モダンと言わせつつ、レトロな雰囲気のサンセリフです。特にMの形が大変可愛いので気に入りました。
かのRolls-Royceもロゴに使っているフォントのよーで、あと多分TOMMY HILFIGERのロゴもこいつっぽい気がします。タイポグラフィはまだよくわかりませんが、潔いクールさとレトロな可愛さとが同居した素敵フォントだとおもいます。

フォント沼もだいぶ奥が深いっぽいのでハマりすぎないように楽しみたいですね。

いじょう!

ノンデザイナーズ・デザインブック [フルカラー新装増補版]

ノンデザイナーズ・デザインブック [フルカラー新装増補版]