まったくの0から独学する実践10ステップ(RxJS編)


エンジニアは常に学習していく職種ということで、自分で学習の計画をたてられることは重要だと考える。今回は、Soft Skillsという本で、独学の方法について触れていたので、それを少し整理してみようと思う。

## 学習の10ステップ

あげられていた10のステップは以下だった。

1. Get the big picture
2. Determine scope
3. Define success
4. Find resources
5. Create a learning plan
6. Filter resources
7. Learn enough to get started
8. Play around
9. Learn enough to do something useful
10. Teach

詳しい例や説明は本を読むのが1番良いと思うので割愛するが、ここでは、これらを`RxJSの学習`を例に取り、試しにプロセスを作成してみる。

## Get the big picture

ここでは、`何がわからないかわからないままやみくもに学習をすすめる`ことは、効率が悪いということを述べていた。例えば、いきなりRxJSの書籍を読み始めたりしても、`自分はいま全体のどの地点にいるのか？`や`どの程度理解度が進んでいるのだろうか？`がわからず、やみくもに学習しているのと同じになってしまう(あくまで、書籍を読むこと自体は否定しておらず、全体像をつかむことをまずはじめに行うべき、ということを言っていた)。

ここで全体像を示すなら、以下のようなものになると自分は考えた。

>
* Reactive Extensionsとは？
* Streamとは？
* RxJSとは？
* Observableとは？
* Subjectとは？
* Operatorsとは？
* RxJSにおける実装例はどんなものがある？
* RxJSのAPIにはどんなものがある？何をしてくれる？
* 設計にはどんな手法がある？
* RxJSを使用したフレームワークは？
* テストはどのように書く？


## Determine scope

`「物理学」を学習しよう`と思っても無理がある。ここでは、すべて学びたい欲求を抑えてscopeを決めろ、ということを言っている。今回は例なので、以下のようにscopeを定義してみた。

>
* RxJSが何をするものなのか
* Observable/Subjectなど、基本的なオブジェクトについて
* Operatorを使用したRxJSによるStreamの操作


## Define success

学習のゴールを決めろとのことで、今回のゴールを決めてみる。本記事では、以下のように定義した。

>
RxJSの簡単なコード例を読んで理解することができる。
>
具体的には、
Observableを作成し、Operatorを使用して操作された、
数十行程度のコードを理解/実装することができる。


## Find resources

ここでは、学習のためのリソースを片っ端から調べ上げる。

### Awesome

* [ichpuchtli/awesome-rxjs: A collection of awesome RxJS resources](https://github.com/ichpuchtli/awesome-rxjs)
* [jsynowiec/awesome-rxjs: A collection of awesome RxJS resources](https://github.com/jsynowiec/awesome-rxjs)

### Web

* [ReactiveX](http://reactivex.io/)
* [RxJS API Document](http://reactivex.io/rxjs/)
* [The introduction to Reactive Programming you've been missing](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754)
* [RxMarbles: Interactive diagrams of Rx Observables](http://rxmarbles.com/)
* [RxJS Advent Calendar 2015 - Qiita](http://qiita.com/advent-calendar/2015/rxjs)
* [cycle.jsでのMVI分割時にどう考えてるか - ✘╹◡╹✘](http://r7kamura.hatenablog.com/entry/2015/10/07/071900)
* [エディタの実装をcycle.jsでMVIベースにしてみた話 - ✘╹◡╹✘](http://r7kamura.hatenablog.com/entry/2015/10/04/062333)
* [Rx(JS)に入門する前に知っておきたいN個のこと](http://blog.mmmcorp.co.jp/blog/2015/12/20/prepare-to-rxjs/)
* [RxJS(5.x)で行うテストファーストな機能開発](http://blog.mmmcorp.co.jp/blog/2016/06/25/testing-rxjs-5/)
* [なぜReactive Extensionsを導入するのか？](http://blog.mmmcorp.co.jp/blog/2016/07/22/why-rx/)
* [「RxJS」初心者入門 - JavaScriptの非同期処理の常識を変えるライブラリ | 株式会社LIG](https://liginc.co.jp/web/js/151272)
* [RxのHotとColdについて - Qiita](http://qiita.com/toRisouP/items/f6088963037bfda658d3)
* [Reduxの概念をRxJSとTypeScriptで理解する ver.2 - Qiita](http://qiita.com/ovrmrw/items/8cca6f40d5f78909a3dc)
* [Angular HTTP TUTORIAL](https://angular.io/docs/ts/latest/tutorial/toh-pt6.html#!#sts=Import%20RxJS%20operators)
* [staltz/rxjs-training: RxJS Workshop exercises for MLOC.js](https://github.com/staltz/rxjs-training)
* [ng-book/angular2-rxjs-chat: Example Chat Application using RxJS and Angular 2](https://github.com/ng-book/angular2-rxjs-chat)
* [fdecampredon/react-rxjs-todomvc: TodoMVC implementation with React and RxJS](https://github.com/fdecampredon/react-rxjs-todomvc)
* [Stream | Node.js v7.4.0 Documentation](https://nodejs.org/api/stream.html)
* [substack/stream-handbook: how to write node programs with streams](https://github.com/substack/stream-handbook)
* [Node.js Streams](https://www.tutorialspoint.com/nodejs/nodejs_streams.htm)
* [What Is RxJS? - rx Video Tutorial #free @eggheadio](https://egghead.io/lessons/rxjs-what-is-rxjs)
* [Creating Observable From Scratch - rx Video Tutorial #free @eggheadio](https://egghead.io/lessons/rxjs-creating-observable-from-scratch)
* [Introduction to RxJS Marble Testing - rx Video Tutorial #free @eggheadio](https://egghead.io/lessons/rxjs-introduction-to-rxjs-marble-testing)
* [CONVERSATION: What's the core differences between the observables/signals approach of Cycle.js and Elm vs React's pseudo FRP manually-triggered branch re-rendering approach? : javascript](https://www.reddit.com/r/javascript/comments/3zr6i0/conversation_whats_the_core_differences_between/)

### 書籍

* [learn-rxjs](https://www.learnrxjs.io/)
  * GitBook
* [RxJS - Javascript library for functional reactive programming.](https://xgrommx.github.io/rx-book/index.html)
  * GitBook
* [Reactive Programming with RxJS](https://www.amazon.co.jp/dp/B01ATYZTI4/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)
* [Introduction to Rx](https://www.amazon.co.jp/Introduction-Rx-Reactive-Extensions-English-ebook/dp/B008GM3YPM/ref=sr_1_1?s=digital-text&ie=UTF8&qid=1485394768&sr=1-1&keywords=Introduction+to+Rx)


## Create a learning plan

定義したscopeを元に、`learning plan`を考える。今回はscopeもscopeだが、学ぶ内容もいってしまえば`ライブラリ`なので、ざっくりと以下のような感じでも問題ないかと考えた。

>
* RxJSが何をするものなのか
* Observable/Subjectなど、基本的なオブジェクトについて
* Operatorを使用したRxJSによるStreamの操作


( ˘⊖˘) 。o（scopeと同じになってしまったがこれでいいのだろうか...）とも思ったが、scope自体そんなにたいそれたトピックではないので、今回はこれでよしとして、次に進もうと思う。

## Filter resources

与えられたscopeやゴールを考え、集めたリソースの中でどれが重要かをフィルターしておく。今回は以下のようになった。

* [RxJS API Document](http://reactivex.io/rxjs/)
* [The introduction to Reactive Programming you've been missing](https://gist.github.com/staltz/868e7e9bc2a7b8c1f754)
* [ichpuchtli/awesome-rxjs: A collection of awesome RxJS resources](https://github.com/ichpuchtli/awesome-rxjs)
* [jsynowiec/awesome-rxjs: A collection of awesome RxJS resources](https://github.com/jsynowiec/awesome-rxjs)
* [RxJS - Javascript library for functional reactive programming.](https://xgrommx.github.io/rx-book/index.html)
* [RxJS Advent Calendar 2015 - Qiita](http://qiita.com/advent-calendar/2015/rxjs)
* [Rx(JS)に入門する前に知っておきたいN個のこと](http://blog.mmmcorp.co.jp/blog/2015/12/20/prepare-to-rxjs/)
* [RxJS(5.x)で行うテストファーストな機能開発](http://blog.mmmcorp.co.jp/blog/2016/06/25/testing-rxjs-5/)
* [angular2-rxjs-chat: Example Chat Application using RxJS and Angular 2](https://github.com/ng-book/angular2-rxjs-chat)
* [react-rxjs-todomvc: TodoMVC implementation with React and RxJS](https://github.com/fdecampredon/react-rxjs-todomvc)
* [RxMarbles: Interactive diagrams of Rx Observables](http://rxmarbles.com/)

目的に合わせて、書籍は割愛した。ただし、[Reactive Programming with RxJS](https://www.amazon.co.jp/dp/B01ATYZTI4/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1)の1-2章あたりは順を追って説明がされているので、使い方を考えると良いリソースだと考える。それでいうと、awesome-rxjsなども用法用量も守ってみてゆきたい。

## Learn enough to get started

ここまで、調査がメインだったが、やはり最終的には何か作ってみることが重要だと言っている。ただし、いきなり作り始めてもそれはそれで良くなく、`作り始められるだけの最小限のインプット`をしてからが効率がいいと述べている。

ここでいうと、[公式](http://reactivex.io/rxjs/)のIntroduction、Tutorialレベルのものが理解できれば、簡単なサンプルを書き始めることはできるのかなと考える。すべてのリソースをみたい欲求を抑えて、最小限で我慢するのが良いらしい。自分は、記事や書籍、GitHubを読んだりして、まずベストプラクティスを探してしまうことが多いので、このやり方も参考になった。

## Play around

このステップでは、実際にコードを書いて遊んでみる。何かプロダクトをつくるとかを決めなくても良く、ただ好きなようにコードを書いたり修正したりしてテストしてみるのが重要だと言っている。

今回のscopeでいうと、[RxMarbles](http://rxmarbles.com/)をみながらAPIを試してみたり、[Creation Operators](http://reactivex.io/rxjs/manual/overview.html#categories-of-operators)をみながらいろんなStreamをつくって遊んでみたり...だろうか。簡単なアプリを作りながら遊ぶのも、流れを理解できていいかもしれない。

個人的には、GitHubでソースを読むのが遊びという意味では好きで、[angular2-rxjs-chat](https://github.com/ng-book/angular2-rxjs-chat)とか[react-rxjs-todomvc](https://github.com/fdecampredon/react-rxjs-todomvc)、[cyclejs/examples](https://github.com/cyclejs/cyclejs/tree/master/examples)をみて遊んでいた。このステップに当てはめるとするならば、サンプルのコードを変更しながら動作を見て遊ぶ感じになるだろうか。

## Learn enough to do something useful

`Play around`のステップで、学びや疑問が出てくるはずで、それをひとつひとつ消化してゆくのがこのステップである。このステップになり初めて、`Filter resources`で調査したリソースを本格的に見てゆくことになる。ただし、その際も、すべてを見てゆく必要はなく、`Play around`ででてきた疑問や問題を解決する手立てとして活用するのが良いらしい。ベストプラクティスを調査したりするのはこのステップでやるべきことなのかなと思った。また、`Create a learning plan`で決めた学習のプロセスを達成できているかを見て、理解を深めてゆく。

## Teach

最後のステップでは、人に教えることがあげられている。`教える`方法の一覧として、が以下がリストされていた。

>
* Write a blog post.
* Create a YouTube video or tutorial.
* Give a presentation.
* Have a conversation with a friend or your spouse.
* Answer questions in an online forum.


`YouTube video`はハードル高いだろ...と思ってしまうのだが、顔出しをせず、スクリーンを映しながらの講座ならできなくもないのだろうか。個人的には、1番手っ取り早いのはブログやQiitaで知見を共有することかと思った。また、社内に環境があるのなら、勉強会など開いてもいいかもしれないし、イベントで登壇するなどもよさそう。

## まとめ

ここまで学習のプロセスをまとめてみたが、個人的な見解に基づくものなので、ご了承いただきたい。あくまでこの記事でやってみたかったのは、学習のプロセスを自分で作ってゆくということだった。具体的には、以下の10ステップを通して、どんな技術でも自分で学習できる状態をつくることができるのでは？ということだ。

1. Get the big picture
2. Determine scope
3. Define success
4. Find resources
5. Create a learning plan
6. Filter resources
7. Learn enough to get started
8. Play around
9. Learn enough to do something useful
10. Teach

自分の普段の学習プロセスとは異なる部分があったので、参考にしたい。ちょっといろいろ理解が甘いところはあるかもしれないので、その時はご指摘頂けるとありがたいですm(. .)m

## 参考

* [Soft Skills: The Software Developer's Life Manual: Scott Hanselman, Robert C. Martin, John Z. Sonmez](https://www.amazon.co.jp/Soft-Skills-Software-Developers-Manual/dp/1617292397)

>* Most developers crack open a book and start reading through it with- out even knowing what they don’t know. They leave these “unknown unknowns” for later discovery.
>* You can’t learn everything about digital photography in any reasonable amount of time, so you’ll have to decide what areas to focus on and what the scope should be.
>* You can only learn one thing at a time. You can always come back later and learn about other subtopics that branch off of your original topic, but for now, pick one narrowly focused thing and go with it.
> * Scope your topic down to the appropriate size that fits your overall reason for learning and fits into the timeframe that’s available to you.
> * Now that you have some resources, you can use those resources to get an idea of what you should learn and in what order you should learn it.
> * But now it’s time to whittle those resources down to the handful of most valuable ones that will help you achieve your goal.
> * It’s easy to get carried away and start consuming all the resources you have on the module you’re trying to learn, but you’ll find the most success if you can avoid that temptation.
> * Most people will attempt to learn a subject by reading a book or watching a video about that subject. They’ll try to absorb as much information upfront and then take action later. The problem with this approach is that when they’re reading about their subject, they have no idea what is important.
> * You might go through your resources and look up everything pertaining to light or any other ques- tions that came up while you were playing around.
> * Remember, though, you still don’t have to completely consume every single resource you gathered.