社内JavaScript勉強会で作ったコンテンツまとめ

はじめに

弊社で実施している社内向けJavaScriptの勉強会のコンテンツまとめです(最近はやってないのも上げてる)。対象は独学でJavaScriptを少し触ったことがあるけど企業でやったことはない、くらいのレベルの人です。このコンテンツを作っている筆者も1年くらいしかJavaScriptを触ってないので怪しい所もあると思いますが、社内でのJavaScript教育に困っている方の参考になればと思います。

ちょっと一部古かったりするので、Issueでも立てて下さい。気が向いたら直します。

コンテンツ

ES2015(ES6)

JavaScriptを書く上でスタンダードになりつつあるトランスパイラBabelを使用したコーディングについて学びます。ES2015の記法について全て網羅しているわけでなく、今すぐ使える簡単なものを優先して開設しています。ES2015の構文を使うことで何が楽になるのか、という点を重視しています。先に「Effective JavaScript」を読んでJavaScriptのイケてない具合を確認しても良いでしょう。

node.jsのテスト

mocha + power-assertを使用した単体テストの方法について解説しています。JavaScriptのテストはテストフレームワーク/アサーションライブラリ/その他カバレッジ計測のライブラリ等、登場人物が多く初心者には取っ掛かりをつかむのが難しいので、テストの周辺技術を把握することを目的においています。

フロントエンドのテスト

karmaを使用したフロントエンドのユニットテストについて説明しています。karmaを使ったテストでは、karmaが動いているnodeプロセス、テストコードが動くブラウザの関連が分かりづらいと思ったので、その仕組みを理解させることに重点を置いています。

lodashによる関数型プログラミング

今やJavaScriptを使う上で欠かせないlodashの使い方を、関数型の考え方をさらっと伝えながら説明した資料です。便利関数はただ使えるだけでなく、何故この関数があるのか？この関数を使うときに注意すべきことは何か？を考えながら使えるようになって欲しいという目的があります。

Sails.jsのサーバーサイドテスト

弊社ではnode.jsのフレームワークにSails.jsを使用しています。そのService層をテストするための構成を説明しています。カバレッジ計測、Fixtureを使ったDBの初期化を学べる内容です。

Seleniumを使ったE2Eテスト

E2Eテストについて調べていたらどうやらSelenium WebDriverをそのまま使うより、Nightwatch.jsやtestiumを使った方が良いそうで。。やっぱりテスト周り難しいなと思いつつせっかく作ったので公開します。

ServiceWorkerを使ったWebPush

Progressive Web Appというものがどうやら2016年のトレンドらしく、その中核になるであろうServiceWorkerを使ったWebPushについてのコンテンツです。Android版Chromeで、ブラウザを閉じているときでもPush通知を受信出来ているのを見て、凄い時代になったものだと感じます。

Flux

Reactを取り入れる機会が増えてきたので、Fluxの考え方とReduxを使ったサンプルをまとめてみました。Fluxと一言にいっても実装方式はいくらでもあり、考えなければいけないことも多いので、メンバー全員の意識を統一させる事が重要だろうなと感じます。

Serverless

動くものはないけど、サーバーレスアーキテクチャの概要と、AWS Lambda/Serverless Frameworkの導入的なもの。Productionと切り離して開発できる(所謂microservice)のが便利なのでどんどん使っていきたい。

npmの作り方

資料を作っただけで勉強会はやってない。汎用的なモジュールは、出来るだけOSSにする文化をつけていきたいですね。

Angular2

社内で使う予定はないですが、個人では結構使ってるので共有の意味を込めて。結構好きなんですが、世の中の流れを見ても今のところReactに乗っておいたほうが良さそうですね。ただ、言語やフレームワークは色々触ってみたほうが良いと思うので、概念だけでも知ってもらおうと作りました。

非同期処理

ちょっと難しいJavaScriptの非同期処理(callback/async/Promise/async-await)についてまとめました。

TypeScript

1.x系のアップデートが速く、型定義ファイルの参照方法とか、DefinitelyTypedとTypingsとは何なのかとか、ゴチャゴチャしているのをまとめました。

flowtype

TypeScriptと近い、JSに型定義情報を付与するツール。個人的にはTypeScript好きなんですけど。気軽でかつロックインされ辛いという点ではflowtype良いなーと思いました。

Redux SPA

Single Page Applicationのサンプルとして。React/Redux/ReactRouter/Webpack/StyleLoaderなどなど。Reduxのサンプルを探してもToDoアプリが巷にはあふれていて、「じゃあ実際にSPA作るにはどうするの」とか「プロジェクト構成どうするの」というのはちょっと分かりづらい。と思ってやってみた。

WebRTC + Redux

まとめ

今後も随時追記していきます。

また、最初社内向けに作ったので動かし方が分からなかったり、説明が分からないところがあると思います。その時はIssueを立てて頂ければできるだけ一般化出来るようにしますので。。