１日一つ強くなる戦略としての UCDDD (Udemy Course Development Driven Development)

https://www.udemy.com/react-redux-basic

私は「１日一つ強くなる」ということをスローガンとして掲げ、活動しています。

１日一つ強くなれば、昨日の自分よりも今日の自分の方が強いので、結果今日が最強です。そしてこれが死ぬまで続けば、死ぬ瞬間が、自分の人生において最強な訳です。最強になってどうするんだ…という問題は置いておくとして…非常にいい考え方だと思います。

これは私の尊敬する梅原大吾さん (プロゲーマーで特に格闘ゲームのストリートファイターとして有名な方です) の提言する最強になるための理論で、梅原さんの新書のタイトルにもなっています。

さて、１日一つ強くなれば最強になれるのはわかったので、次にどうやって強くなるか、ということについて考えてみると、一般的に以下のような方法が有効だと言われています。

### アウトプット
- 自分でテストを作って解いてみる
- 仕事でその技術を使う
- 自分でアプリケーションを作る
- ブログを書く
- 教える

この中でも特に今回は教えるということの有効さについて話をしたいと思います。

この四半期に教える機会を2ついただいたことで、圧倒的に成長をすることができました。

まず、2月から「もくもく temple」で React ハンズを講師を担当させていただく機会をもらい、合計二回、React の超基礎から初めて ToDo App を作るところまで講義させていただきました。まずこの機会に大きく成長ができました。

ハンズオン当日までに、全ての内容を動画にして Youtube にアップして、テキストも作って、それから CodeSandbox というブラウザ上で動く IDE に過程も含めて全てのコードを書いて公開したのですが、動画を取るためには、かなり完全に理解していて、さらさらとコードを書けないとうまくいかないんですね。

うろ覚えだと、説明しようとしてもつまづくし、コードを書いていてもあやふやなところがあるとエラーが出て止まってしまって、動画は取り直しです。講義資料として使えるくらい、スラスラと説明して、コードを書いて、ということを実現しようとすると、完全に理解する必要が出てきます。

それから、動画を取ると、自分が何をわかっていないのか、明確になります。当然ですけど説明ができないし、コードがうまく書けないからです。

つまり動画を取ることで次のような成長が発生します。

### 自分が理解していないことが明確になる
明確になったところを学習して、説明できるまで身につく
つまり、動画を撮影して指導のための資料を作っているように見えて、結果的に自分に教えていることになります。

これが指導用の動画を取ることによって、自分が圧倒的成長できる原理です。

教えることが自分に効くということは、みなさんにもご理解していただきやすいと思うのですが、実はコードを何回も書く、というのもかなり効いてきます。

動画を撮ってみてわかったのですが、こう書けば動くだろうという自分の予想が、かなり外れて、つまり本当はわかっていないのにわかったつもりになっていたコードがたくさんあったんですね。コードを取り直しの際になんどもなんども書くことで完全に身について、その結果、コードの全体像が完全に頭に入ってくるので、見通しが驚くほどクリアーになります。途中で間違えると取り直しになるので、とにかく一発で動かせるまで理解できます。

今書いている部分が完全に理解できると、新しく追加する要素についても、以前よりも理解ができます。曖昧なところがないので、追加される要素だけ学習すればいいからです。

こうして、動画を取るたびに、その領域をマスターできるので、コースを進めれば、どんどん成長できます。

さて、本題の UDDDD ですが、React ハンズオンの1回目と2回目の間だったと思うのですが、Udemy の担当者から Redux のコースをやらないかという打診をいただきました。Redux のドキュメントを一部日本語訳して公開しているので、それを検索で見つけて声をかけていただいたようです。

正直言って、自分のエンジニアとしてのレベルは、お金をとって人に指導するレベルではありません。コースを完成する前には、一応書いて動かせはできるけど、人に流暢に説明することはできませんでした。しかし、受けさせていただくことにしました。

その理由は、日本語 React のコースが Udemy には一個しかなく、それは既にエンジニアとして一定レベルにある人向けのコースだったので、そのコースでは説明されないもっと基礎的な JavaScript の知識から説明して底上げをするコースを作ることで、自分が提供できる価値はあるだろうと思ったからです。

React と jQuery の間にあるのは、React の理解の有無というよりは、JavaScript の理解、特に Babel 等を使ってトランスコンパイルする必要がある「新しい JavaScript 環境」による開発だと思っていました。それは資料の前文でも書きました。つまり Node.js が開発の中心にあって、新しい JS をブラウザで動く JS にトランスコンパイルしながら進める、という開発スタイルに参入している人と、そうではない人の差が、React 学習においては大きな違いになると思ったのです。

これは自分が React を学習していて難しかった部分でもありますし、またハンズオンを通して感じたことでもありました。多分多くの人は Webpack の設定でかなりつまづいていて、React のコンポーネントを書くところまでいっていないと思います。

だって、node を使わない開発環境の人は、まず node を入れて、しかもバージョン管理するために nvm を入れて、おっとパスがあってないからパスも追加して、うーん動かない…このあたりでまず第一につまづきポイントがきます。

次は、Webpack で JS module をバンドルして、さらにその際に Babel でトランスコンパイルもする？バンドルって何？なぜコンパイルする必要があるんだ？

そこを乗り越えても、

```js
const List = ({data}) => data.map((o) => <li>{o.name}</li>)
```

みたことのない表記が多すぎる！

つまづきポイントがたくさんあります。ここを掬いあげれる動画はまだないなと思ったので、自分がそこを埋めることはできるのではないかなと思いました。

そこから一ヶ月ちょっとですが、ずーっと資料を作ってはボソボソ喋って動画を取り、わからないところがあれば調べて、ということを繰り返した結果、Udemy の動画を完成させることができました。

今は審査待ちで、通って欲しいのですが、仮に通らなかったとしても、圧倒的成長をできた一ヶ月でしたので、ラッキーという感じです。

特に非同期処理、Promise, Async/Await, Redux-thunk あたりは動かせるけどあやふやだったので、そこを完全に理解できたのが大きいです。自信を持って JS アプリケーションの開発をできるようになりました。

ということで、指導動画を取る、特に今回は Udemy のコースを作ることによって成長するという戦略は、最強になる上で非常に有効だということがわかりました。

なので、今後もですね、Youtube に動画を上げていって、ある程度まとまったら Udemy にコースとして公開するというフローを続けていきたいと思います。具体的には Node.js のコースか、もしくは今回の React コースでは取り上げることが間に合わなかった「react-router, Material UI, React-bootstrap, transition, 開発者ツールの使い方、ローカル環境の作り方、エディターとの連携等々…」

Node.js はサーバーでもローカルでも動く最強のツールで、ウェブエンジニアの私としては Python よりもしたしみがあるので、もっと使いこなして、なんでも node にやらせて楽をしたいと思ってます。自分の開発で使うちょっとしたツールなら自分でかける！となったら面倒な仕事も少し楽しくなりますよね。

ということで、Udemy Course を開発することで、圧倒的成長を日々するという戦略でした！

React + Redux + Redux-thunk
https://www.udemy.com/react-redux-basic