connpass
http://wantedly.connpass.com/event/22954/
場所はJR目黒駅から徒歩１５分くらいにあるWantedly白金台オフィスです。
参加者は社外の方が８名くらい？ ＋ 社員の方１５名くらいでしょうか。
会社でも、あと個人的にも、必要に迫られてAngularJSを触っているのですが、TypeScriptでコードを書こうという動きがあります。
そんなわけで、どっかで勉強するキッカケが欲しいなぁ、と思っていた矢先、この勉強会をタイムラインで見かけて参加することにしたのでした。
なので私、TypeScriptはこの日が初、という超初心者なのです。
この日は残業もそこそこにして会場に向かったのですが、cpnnpass募集ページの地図が間違っていて、
- 募集ページ上に表示されている地図をPCから見ると、正しい場所（旧クックパッドさんと同じビル）を表示している
- 募集ページ上に表示されている地図をクリックすると、５丁目なのに３丁目の旧オフィスを表示する （笑
ただ、会社を出る前にPCから地図を確認したときに、「あ、ここは旧クックパッドさんと同じトコか」と確認していたので、
スマホで表示される地図がおかしいのだな、とその場で気づき、なんとか開始時間前に到着できました。
ちなみに懇親会で社外からの参加者さんと会話したら、みなさんも間違って旧オフィスへ行ったそうで （笑
TypeScript速習会
- 資料： http://seanchas116.github.io/slide-learn-typescript/#/
- ソースコード： https://github.com/seanchas116/learn-typescript
上記をベースに講義＆ハンズオン形式で進めていきました。
まず環境構築ですが、TypeScript用のエディタとして最初はEclipseプラグインの TypEcs を試してみました。
ただ、動作がちょっと不安定だったこともあり、Visual Studio Codeに乗り換えました。
TypeScript開発元のMicrosoftということもあり、中々快適です。
まず、型推論が働きます。型をウリにしているTypeScript、この機能はとてもありがたいですね。
当然、コード補完も効きます。かなり快適にコーディングできます。デフォルトで色も付きます。
エディタの左ペインはエクスプローラ風味。エディタ上でファイル操作も完結します。
あと、ソースコードの変更を検知してコンパイルしてくれる仕組みを導入しました。
npm run tsc (tsc -w)で起動します。
こんなカンジでソースコードの変更を検知してコンパイルしてくれます。
あと、複数のTSファイルをコンパイルした結果をbundle.jsとしてバンドルしてくれる watchify というツールも使いました。
こちらもリアルタイムで更新を検知してくれます。
こんなカンジでエラーも検出して知らせてくれます。
watchifyがbundle.jsに集約してくれるので、HTMLからは bundle.js のみをsrcタグで取り込めばよい、というわけです。
そんなわけで環境構築を行い、スライドに沿ってハンズオン形式で進めていきました。
ハンズオンのお題は「Canvas要素を使ったお絵かき」でした。最終形の成果物はこんなカンジ。
無事、最後の課題まで動作させることができました。
ちなみにスライドにはありませんが、最後の課題を動作させるためには「npm install lodash --save」が必要です。
★感想：
勉強会のタイトルに「速習会」とあるように、この日は速習を意識した進行で、なかなか付いて行くのが大変でした・・・
ただ、Browserifyとか使ってソースコードの変更を検知してコンパイル＆バンドルしたり、HTML5のCanvasを使った題材を作ってみたりと、中々濃い構成で学びが多く、結果的には良かったと思います。
勉強会終了後はそのまま会場で懇親会でしたが、ピザとビールも潤沢で、みなさんといろいろ意見交換しながら美味しくいただきました。
ビールがハイネケンの瓶だったんですが、ラッパ飲みで２本戴きました（笑
Wantedlyの皆様、講師の @seanchas_t さん、ありがとーございました。
