楽しかったです。
「フロントエンドに秩序を取り戻す方法」
はてなブログチームで行った改善についてのトークです。
アンケートの結果では5位にランクインしました！！！
発表を聞いてくださった皆様、ありがとうございました。
発表に至るまで
きっかけ
応募のきっかけはYAPC2015でした。
YAPC1日目のLTを見てるうちに自分も発表したくなって、即LT応募しました。
絶対通るでしょと思ってスライドまで作成したけど落ちてしまい、機会を伺っていたのでした。
事前に手が滑って応募しておくべきだった。悔しいので今後はどんどん手が滑っていきたい。
YAPC::Asia2015みてきた #yapcasia - マルシテイアは月の上
Node学園祭に応募するのはさすがに怯んだけれど、応募せずに後悔するよりは良い、という事で手が滑って応募してみました。
結果的には良い判断だったと思います。
皆さんも是非積極的に手を滑らせていきましょう。
スライド作成
さて、めでたくトーク採択されたのでスライドを作らねばなりません。
内容についてはウケる事が100%確実だったので、いかに上手く伝えられるかが問題になりました。
僕はLT以外のトークは初めてで、その上Node学園祭という大舞台で話すことになったので大緊張です。
YAPCの時作ったスライドをベースに細かい説明を追加していったのですが、どうもしっくり来ません。
やったことをつらつらと並べるだけで、言いたい事がうまく言えていないように感じます。
という訳で、まずは先輩のスライドを参考にしてみることにしました。
テックカンフでのトークは以下のように分類できるかと思います。
- 技術の紹介
- 言語、コミュニティの現状確認
- ノウハウ共有
- チーム開発の改善事例
今回のNode学園祭だと、国内スピーカーはLinda_ppさん・azu_reさん・h13i32maruさんが技術紹介、kidach1さん・qsonaさんがノウハウ共有にあたります。
海外ゲスト組は 2. が多かったですね。
効果的なトークスタイルはこの分類によって変わってきます。
1.の場合はコード例をどれだけ載せるか、またデモの時間、内容などが重要になります。
2.の場合は、時系列に沿ったイベントやブログ記事の引用が多くなり、どれが重要なポイントなのかを明確にする必要があるでしょう。
今回の僕の発表は技術やノウハウの紹介よりも日常業務での問題解決をテーマにしており、この分類だと 4. になります。
幸い、弊社では 4. にあたる良いトークを沢山見つけることができます。
今回は↓の2つのトークを参考にしました。
speakerdeck.com speakerdeck.com
これらのトークの特徴を箇条書きしてみます。
id:shiba_yu36のトーク
- 1ページにつき1メッセージのみ
- 問題→解決 というフローになっており、伝えたい事が明快
- 図が綺麗
- 字が黒くて読みやすい
id:hitode909のトーク
- 高橋メソッド
- 面白い
- 辛いことも笑顔😇で伝える
- 問題解決の技術だけでなく、スピリットを伝えている
僕は綺麗な図も書けないし、高橋メソッドで書くことにも慣れていません。
なので、僕の発表では
- ページ毎のメッセージを出来るだけ絞る
- 問題→解決 のフローを守る
- 辛いことも笑顔😇で伝える
- 技術だけでなく、スピリットを伝える
事を目標に、スライドを改善していきました。
社内勉強会
はてなでは、毎週木曜日に社内技術勉強会を開いています。
当番制で選ばれたエンジニア/デザイナーが、自分の興味のある話題について30分ずつトークをするというものです。
先週の木曜日は id:hitode909 さんが当番だったのですが、hitodeさんの計らいで僕の発表練習をさせてもらいました。
この時点ではスライドは153枚で、まだ詰めが甘い所があったのですが、Slackや質疑応答で沢山の意見を頂きました。
これらの意見を参考に、金曜日には業務時間をまるっと使ってスライドの修正、発表練習を行いました。
チームメンバー並びに勉強会参加者の皆様、ありがとうございました。
トークの練習
社内勉強会の練習では、全てのスライドを話すのに35分かかりました。
本番の時間は30分なので、質疑応答を考えると25分程度で収めなければなりません。
トーク内容を削るべきか悩んだのですが、どうしても話したい話題ばかりです。
苦悩の末、今回は必死で練習しまくって乗り切ろう！という事に決めました。
今回の発表は5つのセクションに分かれています。
計測した時間をもとに、
- 導入 : 3分
- コード分割 : 7分
- スタイル : 10分
- テスト : 5分
- まとめ : 1分
とペース配分しました。 これなら合計26分で話せるようです。
発表前日は、この配分で話せるようセクション毎に練習していました。
当日
通しでの練習が不完全だったので、朝早く部屋を出て渋谷駅の通路で練習してました。
一応隅っこで練習してたんですが、身振りも交えてたのでかなり怪しかったと思います……。
最後に通しで練習した時はスライド178枚で27分でした。
何とか時間に収まったけど、質疑応答含めると厳しい。
他の発表を聞いている間もスライドを修正し続けました。
話の流れを確認し、わかりやすく話すために整理していくと、いつの間にか190枚まで膨れ上がってしまいました。
上手く行けば時間内に収まるはずだけど、テンションを維持できないと相当厳しそう。
という訳で、直前のESDocの話を聞くのは断念し、エントランスで準備体操してました。
（緊張して体調も悪くなり適当なツイートしまくってました、ご迷惑おかけしました）
とにかく不安でしたが、なんとか途中で力尽きることもなく、時間内に発表を終える事ができました。
発表後エゴサの鬼と化して感想をチェックしましたが、それほど問題もなかったようで一安心です。
- 練習は大事
- 準備運動は大事
ということがよくわかる発表体験でした。
Q&A
発表で頂いた質問について補足します。
全部で3つあったはずだけど、ド忘れしてしまいました……。
思い出したら追加します。
Util系のモジュールをnpmで公開しないの？
npmに公開できると良いけれど、そこまで手が回ってない、という状況です。
CPANの方には社内から幾つか公開されていますが、npmにはまだ公開されていません。
npmはCPANに比べるとかなりカジュアルに利用できるのですが、その辺の温度感のすり合わせも必要ですね。
また、ブログ以前に開発された社内ライブラリが名前空間ベースでモジュール化されており、あちこちで使われているので、それらを置き換える工数を考えると微妙なところです。
リファクタリングの工数、どうやって確保した？
弊チームは締切の厳しいタスクが少ないので、リファクタリングや環境整備に時間を割きやすい、というのがひとつ。
あとは、リファクタリングが工数削減に繋がることを普段からチームメンバーが実感している事が大きいと思います。
発表した内容のうち、最初に手を付けたのはコードの分割でした。
この時は実際のコードを上司に見てもらい、以前のタスクで大変だったことを説明したりしました。
普段からコードを見せて、なんとなく雰囲気を掴んでもらう、というのは有効かもしれません。
テストについての補足
発表内で kyo_ago さんのスライドを引用した所、ご本人からE2Eテスト方針についてのアドバイスを頂きました！ ありがたすぎる……発表者が一番得するというのは本当だったのか……。
0-9, Re: フロントエンドに秩序を取り戻す方法 #nodefestB
道理で、正常系のE2Eテストしかなかったわけだ。 リグレッションテストもE2Eで無理やり書くのは非推奨とのこと。助かった
イベントの感想
個々のトークの感想は省略します。 面白発表の資料はぜんぶ↓↓↓↓↓↓で見れるんで全部読みましょう！！！！！！！
NodeDiscuss
今回は通常のトークとは別枠で NodeDiscussion という枠がありました。
参加者が付箋に「Node.jsの良い所」「悪い所」「要望」を書いてホワイトボードに貼り付け、Node.js/npmの中の人にコメントをもらう、というものです。
僕は中央列の2列目に座ったのですが、たまたま目の前に dshaw と maybekat が座って大緊張でした。
機能要望では power-assert in native と書いた人がいましたね。
日本ではみなお世話になっている power-assert ですが、海外組が全然知らなかったのは意外でした。
要望自体はまあ無理だろうと思っていましたが、Nodeの中の人達にアピールできて良かったです。
あと、shrinkwrapの質問について。
僕が書いた意見のうちに「npm shrinkwrap is DIFFICULT」というのがありました。
業務で npm shrinkwrap を使っており、問題があった時のリカバリが難しいので、何かアドバイスが貰えないかと書いてみたのでした。
これをホワイトボードに貼った瞬間、maybekatさんが「!!??!? npm-shrinkwrap is really good now!!」って言ってて、npm3での改善の大変さが伺えました。
お疲れ様です……。
ついでに「npm2で運用しているプロジェクトでshrinkwrap.jsonが壊れた時、npm3にシュッと移行する手立てはあるか？npmのバージョンを切り替える毎にnode_modulesを作りなおすのは大変だ」と追加質問したんですが、英語が全然しゃべれなくてちゃんと通じたか疑問です……。
maybekatの回答は「そうだね、npm自身も同じ問題に直面したよ。npm2ではじめたプロジェクトはnpm2で頑張り続けた方がいいし、もしnpm3に上げるならnpm2に戻ることは考えたらいけないよ」ということ、だったはず。
おひるごはん
スピーカーなのでタダ飯ゲット。
サイバーのオシャレ会議室で弁当を食べました。
海外組の会話に参加したくて聞いてたけど、英語を聞き取るだけで精一杯でした。 あと、domenicが僕より先に食べ終わったので「箸うまくね？」って聞いたら「箸くらい誰でも使えるやで」って返されてやってしまった感ある……。
懇親会
DeNAの方と「Perl+JSで秩序回復活動してるの、仲間じゃん」みたいな話したり、Rxでの設計についてアドバイスを頂いたりしました。
あとははてなブログについての感想なども聞けて大変ありがたかったです。
閉会後はスピーカーやスタッフの方々と2次会に行ったのですが、Web Componentsの仕様の変遷など非常に濃い話が繰り広げられ、正直全然ついていけなかったです；；
みんなすごいな〜〜
終わってみて
面白いトークばかりでとても楽しかったです。出来ることなら全部聞きたかった。
特にElectroknitの話は圧倒的でした。これがｽｰﾊﾟｰﾊｶｰか……。
僕のトークはおかげさまで好評を頂いてますが、技術というよりもスピリットを重視した発表でした。
なので、electroknitやtextlint、ESDocなどなど、技術で問題を解決するぞ！という話を聞くと、ただただ凄いなあと感心してしまいます。
僕もいずれ、技術で何かを解決したという話が出来るようになりたいです。
運営、スピーカーの皆様お疲れ様でした！！！！
