注目キーワード
  1. react
  2. docker
  3. インターン

reactの基礎と設計に関して勉強会で登壇した感想と反省

サポーターズColabの学生向けの勉強会で、reactの基礎と設計に関して勉強会で登壇してきたので感想や反省点についてまとめてみたいと思います。

登壇内容

具体的な登壇内容としては、前半でes6の基礎からreact/reduxの基礎までざっと説明し、その後コンポーンント設計やreduxについての設計に関して説明しました。
コンポーネント設計はAtomic Designとかpresentationalとcontainerにわけようとかの話を、reduxについてはducks使おうみたいな話をしました。

reduxあたりからレベルが上がってしまいreactをちょっと触っただけの人にとってはかなりレベルの高いものになってしまったかもしれません。

登壇資料は以下です。この記事を書いているとき(5/18時点)で2.3kぐらいpvがいっててびくりしてますw

Twitterでも結構いい評判をもらえたのでぜひみてください!

 

感想・反省

レベル感

何よりどれぐらいのレベルに合わせるのがいいのかわからずに難しかったです。これは地方特有のものかもしれませんが、あまり勉強会がないので簡単そうな内容の勉強会でも結構レベルの高い方が参加されるケースが多いです。そのため、知識のボラティリティが大きくどこまで深掘りするかがめちゃくちゃ難しかったです。簡単過ぎると退屈に思ってしまう層が出てくるし、難しすぎるとその分野に精通していない人が退屈になってしまいます。

今回は、基礎から設計までと広範囲を網羅することでどの層にもリーチできるようにしてみました。もともとはもう少し簡単な内容にする予定だったのですが、途中で参加者のレベル感をみてレベルを結構あげました。

参加してくださった方の感想をみている限り、「簡単すぎてつまらなかった」という意見はなかったので、ひとまずよかったかなと思っています。
とはいえ、「難しすぎた」との意見や「初心者向けとは思えない」との感想も多く、一番の失敗は勉強会を公開してからレベルをあげたことかなと思っています。ただ、急遽開催決定で何も作っていない状態だったのでかつ、初めての勉強会だったのである程度は仕方なかったのかなと思っています。

次開催するときは、今回の反省を踏まえて事前にテーマをもう少し詳細に詰めるか、参加者へのアンケートを事前にとってレベル感の調整をするなど工夫しみたいと思います。

あと、勉強会って基本知らないことを聞いて今後の勉強に繋げるためのものかなと思っているので、そういう意味では分からないところとその先にある世界を知れるというのはとてもいい機会だと思います。「初心者だと参加の障壁が。。」とか思うかもしれませんが、分からないことは「恥」ではなく「幸せ」ぐらいの心持ちで参加するのがいいのではないでしょうか。(これでブログ書けそうw)

 

時間

今回は1時間を一人でやるというものでした。一人で1時間って聞いたことあんまないなぁと思っていたらまさにその通りで結構これが大変でしたw
だいたい1テーマ30分ぐらいしか話すことがないので、2テーマがちょうどいい感じでした。(そういう意味では前半で基礎・後半で発展的な設計としたのはちょうどいい構成だったかも?)

手を動かす内容にしてもいいかなとも思ったのですが、そうなると今度は1時間じゃ短すぎてうーむって感じです。30分 or 2時間以上が良さそうです。(これは運営としてのフィードバック)

 

サンプルアプリ

今回はサンプルアプリを作っていてそれを後半の設計の話のときの具体例として使っていました。あえてもモリモリにしてAPIも作っておいたのでアプリ自体はかなり参考になるものだったと思います。

が、ひとつ重大な失敗をしてしまいましたw

なんと、buildが通らずアプリが起動しないwww

というのも、直前にdockerで起動できるように色々変更を加えたのですが、その時に手元のいろいろbuildされたものが入っている環境では動いたもののクリーンな状態では動かなかったんです。。懇親会中に冷や汗かきながら必死にデバックした結果、、

npm iを忘れるという失態を犯していましたw(dockerのbuild stageで)

そりゃうごくわけねーわ、というわけで今後登壇される方はくれぐれもお気をつけください。。

 

資料

LTチックにテンポよく話すために情報量を減らしたスライドもあったのですが、それでも94枚は多すぎたかなと反省していますw

最終的には55分と完璧なペースだったのですが、資料を読むだけみたいなページも多かったのでスライド枚数の調整や取捨選択は今後の課題になりそうです。全体的に日本語の説明ばかりになってしまったので、図やコードを増やす工夫が必要そうです。

フロント界隈では綺麗なスライドを作る方が多いので負けじと綺麗でわかりやすいスライドを作るとともに、伝え方も課題なので練習していけたらと思っています。

 

今後やってみたい内容

今回の質問などで需要がありそうだなと思ったものは、

  • redux以外の状態管理
  • 他のコンポーネント設計の手法
  • SSR

あたりかなという印象です。実際に質問いただいたり懇親会で質問してもらいました。ほとんど触ったことがないものばかりなので、今後の課題として触ってみて発表してみたいです。

個人として気になっているのはPWAです。最近iOSでもOAuthが使えるようになったらしくそろそろ本格的にやっていきたいと思っています。何かアプリを1個作ってみてLTなり勉強会で登壇したいです。

また、altJSも最近はかなりきているので、flutterにおけるDartやElm、webコンポーネントのlit-elementなんかも試してみLTしてみたいです。

 

さらにさらに、フロント以外も書くことが最近多いので(というか勉強会以外の目的でフロント書いてないw)k8sやdockerなどのインフラ系、nodeやgolangでのAPI開発などもやってみたいなと思っています。(こっちは勉強会かな?)
あと、めちゃくちゃマニアックなのでいくと、ブロックチェーンのノードのデータベースをノードから分離してノードの機能だけを冗長化してデータベースを共有するってのも演ってみたいですw(そうしたらノードをk8sクラスタで管理できる)

 

てなわけで、勉強会とかLT会とかやるよーみたいなんがあればぜひ呼んでください!