JavaScript
Node.js
TypeScript
ServiceWorker
Angular2

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

More than 1 year has passed since last update.

はじめに

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

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

コンテンツ

ES2015(ES6)

https://github.com/KeitaMoromizato/js-study-es6/

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

node.jsのテスト

https://github.com/KeitaMoromizato/js-study-node-test

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

フロントエンドのテスト

https://github.com/KeitaMoromizato/js-study-front-test

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

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

https://github.com/KeitaMoromizato/js-study-fp-in-lodash

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

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

https://github.com/KeitaMoromizato/js-study-sailsjs-test

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

Seleniumを使ったE2Eテスト

https://github.com/KeitaMoromizato/js-study-selenium

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

ServiceWorkerを使ったWebPush

https://github.com/KeitaMoromizato/js-study-web-push

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

Flux

https://github.com/KeitaMoromizato/js-study-flux

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

Serverless

https://github.com/KeitaMoromizato/js-study-serverless

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

npmの作り方

https://github.com/KeitaMoromizato/js-study-how-to-make-npm

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

Angular2

https://github.com/KeitaMoromizato/js-study-angular2

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

非同期処理

https://github.com/KeitaMoromizato/js-study-asynchronous

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

TypeScript

https://github.com/KeitaMoromizato/js-study-typescript

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

flowtype

https://github.com/KeitaMoromizato/js-study-flow

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

Redux SPA

https://github.com/KeitaMoromizato/js-study-redux-spa

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

WebRTC + Redux

https://github.com/KeitaMoromizato/js-study-webRTC

まとめ

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

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