Toyama.rb 第20回目のイベントとして、フロントエンドの入門的な勉強会をやった。
以前から懇親会などで「もくもく会以外でどういうことやりたいです？」と参加者に聞いていたところ、フロントエンドがよくわからん！という意見が多かったので、テーマに据えて勉強会をやってみることにした。
お盆
わりと面白いテーマだったので人数も結構集まるかな〜ワクワク、って思っていたら、お盆ど真ん中に設定してしまったので、普通に少人数だった。
完全に私のミス感はあるけど、人数が少ないぶん、ゆるい雰囲気でできたのでこれはこれでよかったかなって思った。（思いたい）
babel & webpack 入門
1つは私自身が話をさせてもらった。
自分自身まだまだ解ってないことが多いな〜と日々感じることが多いけど、良く使う構成であればさくっと構築できるようになってきたので、頑張ってまとめてみた。
何を話そうかな〜？と悩んだけど、自分が最初に触れたときに一番混乱したのが、babelとビルドツール(webpack/browserify/gulpなど)を同時に利用した場合の設定まわりだったので、そこを中心に話した。
資料作成＆話をしてみて
「こんなもん解るわけないよな」って改めて思った。
登場人物というか、必要なツール群が多く、かつブラウザの話なのかnode.jsの話なのかとかでも混乱するし、なかなかつらい世界だった。
自分は全部一気に学ぼうとしてパニックになった記憶があるので、資料にも書いたけど、1つずつ覚えていく、というのも大事なのかもしれない。
GitPitch
発表用の資料作成にGitPitchを利用させてもらった。
- Markdownで書けるのはやっぱりすごいいい。短時間で作れた。
- デフォルトでデザインがいい感じになるのがありがたい。
- コードのハイライトとかがめっちゃ便利だった。
- デフォルトでcssの
text-transform: uppercaseが適用されてるので、デフォルトだと見出しが全部大文字になっちゃう。 - → カスタムcssで打ち消せるけど、これはデフォルト無効でいいのではって思った。
感想としてはすごいよかった。 また利用させてもらうと思う。
フロントエンド開発の足回りとしてのyarn(あるいはnpm)
@hikaruworld さんの発表。 今までの歴史的経緯と、yarn/npmの話だった。
歴史の話がおもしろかった。知らないことも多かった。
話を聞きながら、いつの間にやらみんなyarn使ってるな〜って思ってた。
そして「今の話なので、来年はまたどうなってるかわかりません」という言葉を聞いて、ｳｯってなっていた。つらい世界や…
モブプロで学ぶReact/webpack/babel
話を聞くだけじゃつまらんかな〜というので、実際のコードを対象にどんな感じで環境を作ってコードを書いていくのかを、モブプロ形式でやってみた。
内容
Toyama.rbのHPで、次回のイベントと最近のイベントをconnpassから動的に取得して表示している。
- 変更前 : jQueryとlodash#templareでゴリゴリに実装
- ゴール : React/ES6で書き換える
進行
当初はドライバーを交代しながらやっていこうかな〜と思っていたんだけど、普通にツラいし時間も全然足りないだろうな、という判断から、私がドライバーをやりながら終始ツッコミをもらうというスタイルにした。
モブプロというかコーディング実況的な感じになったけど、スムーズに進んだのであれで良かったかなって思ってる。
結果
1時間半程度だったけど、以下を達成できた。
- webpackによるReact/ES6のビルド環境の構築
- Reactによるコードの書き換え
- コンポーネントの分割
- 公開
当日作成したPRはこちらです。（コミットコメントがなんちゃってイングリッシュなのは突っ込まないで..）
環境の構築もそうだけど、ビルドがコケたときにどうするか？とかを見ながら話できたのは良かったなって思った。
途中、デフォルト引数の部分でビルドエラーが起きて、原因としては babel-preset-envの設定を書き忘れていた。そのときは .babelrcに env を足してサッと動くようにしたけど、「なんでそのエラーからそれが原因だって解ったんですか？」という声があがって、「あ、うん、そうですよね…」という気持ちになった。
感想
わりといい内容だったんじゃないのかな？と主催者は勝手に思っている。
見てた感じ、モブプロは結構ウケが良かった。またやりたい。
※
ちなみに、実際にはLTもあった。けど、オフレコ的な話もあったのでここには書かないでおく。
