Udemyというオンライン講座のサイトをご存知でしょうか？

多種多様な動画講座が有料/無料で視聴できるサイトで、ジャンルも幅広く、特にプログラミング系は色んな言語・フレームワークの講座が揃っています。

アメリカの会社なので基本は英語の講座が多いのですが、2015年にベネッセと業務提携して日本市場にも力を入れています。

そんなUdemyから、先日「Reactの日本語講座を作りませんか？」というお話をいただき、さすがにそんなん一杯あるやろ・・・と思って検索してみたら、確かに英語はいっぱいあるけど日本語のReact講座は1つもない。

まあでもドットインストールがやってるやろ・・・と思ったらドットインストールにもなさげ。

これは意外と面白いかも？ということで、もう2年ぐらいReact書いてるし、Udemy講師としてちゃんとした講座を作れば個人のプレゼンス的にも会社の信用的にもプラスになるやろうと思ってやってみることにしました。

収録機材

動画制作自体は先日の結婚式でがっつりやったばっかりやし、音声編集も昔バンドやってた時の資産が多少残ってるやろうということでそんなに不安はありませんでした。

送ってもらった講師向けのサイトを色々見てみると、とりあえずマイクだけはいいの使ったほうがいいっていうことやったので、Blue Micro Yetiというそこそこいいマイクを購入しました。

動画は顔を撮ったりするなら基本iPhoneでいいとのことでしたが、プログラミング講座なのでKeynote/Sketchかエディタの画面を出しながらQuickTimeの画面収録機能で全部やりました。

動画制作の流れ

1つのレクチャー（動画）は2分〜20分で、下記のような流れで1本ずつ作っていきました。

1. 準備

次のレクチャーはこういう話をしようとか、こういう流れで次行こうとか、ここは詳しく解説しようみたいなのを考えながら、一回コードを書いて動かしてみます。

図解が必要な時はSketchで図を作るみたいなのも何回かやりました。

2. 収録

ある程度準備が整ったらコードを戻して実際に収録。

家がわりと大通り沿いで車の音がうるさいので、クーラーかけて部屋は全部締め切って、奥さんにも「今から撮るでー」って言ってちょっと静かにしてもらうというのをお願いしてました。

ライブコーディングの撮影みたいな感じなので、手順通りやれば絶対出るエラーは説明しながらこれはこういうエラーやからこう書いて回避しますみたいなのを解説しつつ、凡ミスでハマった時は後でカットする前提で黙々とデバッグ→カットしやすいように喋りながら再開みたいな感じでやってました。

3. 音声編集

収録し終わったら音声編集ソフトで最低限のノイズ除去＆ノーマライズだけやりました。

ラップトップの横にマイクを置いていたせいか、最初はめっちゃ静かやけど収録開始して1分ぐらいするとファンの音を拾ってるっぽいノイズが出てきて、そのノイズは除去すると声が不自然にショワショワするのでそこだけ諦めました。

マイクのおかげでこれだけの編集でもそれなりの音質になったんちゃうかと思ってますが、窓閉めててもどうしても途中で車の音はうっすら入っちゃうし、収録環境の整備は今後の課題です。

4. 動画編集

動画自体は基本いじらずに、上記のカットしたいところだけカットする作業で十分でした。

撮ったやつを全部見て問題なければそのまま書き出しっていう感じやったので、結婚式の時に比べたら必要な処理はだいぶ少なかったです。

5. アップロード

編集し終わったら書き出してUdemy上にアップロードします。

書き出しに数分かかってたので、その間に変更分をコミットして次の準備し始めてっていう感じで進めてました。

苦労したところ

そもそもサンプルコードをどんなんにするかとか、どこまで作り込むかとか、どこまで詳しく解説するかみたいな構成の部分は最初結構苦労しました。

撮影する前に一旦サンプルコードを最後まで作りきろうと思って普通にゼロからサービス開発みたいな感じでやってましたが、それやとどこで終わったらいいかわからんし、動画は一つもできてないから進んでる感もないし、当初のスケジュールから遅れまくって迷惑かけるしで、途中で諦めてできてる部分から収録していくことにしました。

ある程度の動画の時間がないと売れへんっていうのは聞いてたんですが、今書いてるコードを動画にしたら何時間になるかも予想つかへんし、もっと早くから動画作り始めればよかったです。

本業もなかなかに忙しくてあんまり時間ない中で1日1〜2本ずつちまちま作ってましたが、軌道に乗ってからはわりと予定通り作っていけたと思います。

収録を終えて

動画でちゃんと説明するために改めて色々調べ直してめっちゃ勉強になりました。

勉強会ドリブンならぬUdemyドリブンで新しいことを勉強するのも悪くないかもしれへん。

アウトプットの場があるとインプットも捗ります。

そんなわけで

合計6時間半の動画講座「最短で学ぶReactとReduxの基礎から実践まで」を24,000円で公開したんですが、このブログを見てくれた人は10%オフで買えるクーポンを用意したので、興味ある方はこちらのリンクからご覧ください。

最短で学ぶReactとReduxの基礎から実践まで

安くはないですし自分でもコードを書きながら進めると6時間半よりもっと時間かかりますが、腰を据えてReact/Reduxを学びたい方は買ってみる価値のある講座に仕上がったと自負しております。（Udemyは返金保証があって、買ってみてがっかりしても30日以内なら返金してもらえます）

何より、自分自身がCTOとして「これぐらい習得してくれてたらReactの業務経験なくても採用したい」という基準で作っているので、React使ってる会社で仕事するにはいい取っ掛かりになるはずです。

そしてぼくがCTOを務めるAIトラベルではReactとRailsができるエンジニアを募集しておりますので、受講してみてこの講師と一緒に仕事してみたいと思っていただけたらぜひFacebookやTwitterなどでお気軽にお声がけください。

講座の内容に関するフィードバックもどんどんいただけると嬉しいです。