Reactを最低限理解するまでの過程
はじめに
フィヨルドブートキャンプ Part 1 Advent Calendar 2023 - Adventar
の22日目の記事です。
フィヨルドブートキャンプ Part 2 Advent Calendar 2023 - Adventar もあります。
素晴らしい記事盛りだくさんなので、みなさん是非、フィヨルドブートキャンプのアドベントカレンダーをクリックしてみて下さい！
Reactを学習する必要性
はじめまして。
FJORD BOOT CAMP（フィヨルドブートキャンプ）を昨年卒業したclio209です。
フィヨルドブートキャンプの卒業課題を、主にRubyonRailsでバックもフロントも作りました。が、訳あって、そのアプリを拡張することになり、バックはRails APIモード、フロントをNEXT.js、データのやり取りはGraphQLを使用することとなりました。
それで、急遽、React周りの知識をキャッチアップする必要に迫られたのですが、フィヨルドブートキャンプで学んだのはJava Scriptの基本とVue.jsの基本のみ。どうやって学習しようか悩み、悩んで色々と試行錯誤してしまいました。
なので、未来の自分への記録の意味も込めて、実際の学習変遷と、こうしとけばよかったバージョンを記載したいと思います。（現在、フィヨルドブートキャンプのカリキュラムにReactがあるとのことなので、そちらを行うのがベストチョイスです！）
自分が行った学習変遷
自分は当時いろんな情報に当たりながら以下の順番で学習しました。
- モダンJavaScriptの基本から始める React実践の教科書 を読む、コード書く
- りあクト！1〜2を読む、読みながら適時コード書く
- Reactの公式チュートリアルを読む
- ドットインストールでReact入門を見て、動かしてみるがイマイチしっくりこない
- JavaScriptの理解がイマイチだからでは？と感じたので、 を再読する（GPT-4を家庭教師として丁寧に）
- フィヨルドブートキャンプのJavascript課題を復習する
- 実際にアプリに、テストでReactのコンポーネントを作って動かしてみる
- Full stack open を順番にこなしていく（GPT-4を家庭教師として丁寧に）
（フィヨルドブートキャンプのJavascript課題は、JavaScriptでメモアプリを作成したり、その他様々なアプリケーションを作るものでした。ここでは、メモアプリを作る、ということと言い換えても大丈夫です。）
今、fullstackopenの途中なのですが、ようやく自分の中で徐々に理解できるようになってきました。が、この過程は全くもって効率的である、とは言えないものでした。。今なら、以下の順番で学習します。
こうしとけばよかったバージョン
- フィヨルドブートキャンプのJavascript課題を復習する
- 合わせて、 をGPT-4でわからないところを丁寧に補完しながら、再読する
- Reactの公式チュートリアルを読む
- fullstackopen2023を順番にこなしていく（GPT-4を家庭教師として丁寧に）
Reactを学習する前には、何はともあれJava Scriptが読めないと始まりません。自分はこの理解が対してないままReactに突入し、なんか分かったようでコードが読めない痛い期間を長く過ごしました。。これは非常に効率が悪いので、絶対避けるべきです！逆に、Java Scriptに関しては結構大丈夫です、という方は、1、2は飛ばしていただいていいかと思います。
そして、ここで、とにかく個人的にオススメしたいのは、
Full stack open です。
かなりボリューミーなのですが、DeepLとGPT-4が生まれた現在、これらを駆使してこの講座を行うことができます。これはやらない手はないです！！特に課題演習が素晴らしく、フィヨルド生のバイブル、チェリー本（プロを目指す人のためのRuby入門[改訂2版]）に匹敵するわかりやすさ、そして課題が良問揃い！
最後に
あくまで個人的な提案なので、本内容は参考程度に留めて下さい。
が、あまりにもFull stack open が自分に刺さったので、これからReactを学ぶ方にFull stack open をオススメしたく、こんな記事を書いた次第です。
最後まで読んでいただいて、本当にありがとうございました！
前提条件と意思決定
それが最適解かどうかわからないが、現状わかることのみで、最適解であろうものを探し、提案するとき、議論するに当たって、前提条件の情報が欠けていて、議論が意味をなさないことが多い。
例えば、育児の大変さについて議論するとしても、その家族一つ一つ、人・物・金の前提条件は異なるため、大変のレベルの範囲は全く異なるものになる。この観点がないと、新聞記事ひとつ読んでも、意味がある思考はできない。
しかし、その前提条件がわからない、見えない場合が多い。あえて見えないようにしていることも多い。
これを確認できるかどうかが、一番大事でかつ、難しい。様々な個人的な情報の要素をはらむし、その背後にある意図も透けて見えてしまうからだ。
議論するには、意思決定するには、その部分を明らかにしないと、そもそも成り立たない。
なので、経営の論点について議論するとき、何か提案を出す必要がある時は、何にせよ、人・物・金の前提を箇条書きで書き出すようにしている。
条件が同一だと、意思決定は、時を経ても、案外変わらないことに気づく。これはこれで非常に問題な気がする。もっと色んな経験をしなければ・・。
国立の喫茶店 ナジャの思い出
昨日で重たい重たいデータ作成がひと段落した。ちょっと違う場所で仕事したいなと、国立にある都のテレワークモデル施設を知り、利用してみようと予約。そして、久しぶりに国立駅に降りた。
昼休みに、学生時代よく利用してた喫茶店ナジャに寄ろうと、ぶらりブランコ通りに行ったところ、なんと、ナジャはもうそこにはなかった。
調べると、もう8年前に閉店したとのこと。
そんなに来てなかったのかと、年月の流れに驚いた。
初めて訪れたのは大学生1年の頃、妻と。もう25年以上前だ。
学生最後の年、再履修を連発していた英語の統一テストの課題書を覚えこむのに、夜11時まで空いているナジャには足繁く通った。
ナジャのおかげでなんとか卒業できた、ような気がする。
そして何より、一杯のコーヒーの美味しさを教えてくれた店だった。ナジャをきっかけにコーヒーが好きになった。
もう2度と飲めないとは。。今もその味忘れません。
生活に革命を与えたGO WILD的生活
はじめに
この記事はフィヨルドブートキャンプ Part 1 Advent Calendar 2022 - Adventarの20日目の記事です。
昨日 12/19 は
machidaさんの自作サービスを作り切るためのフィヨルドブートキャンプの取り組み | FJORD BOOT CAMP（フィヨルドブートキャンプ）
GennyBoyさんの家庭・仕事とフィヨルドブートキャンプでの学びを両立させるために4時起き生活にしてみた話 - GennyBoy のメモ
でした。「自作サービスを作る」課題は本当に素晴らしく、サービス開発の順番はこの先新しいサービス作るにあたって、そのまま使えるものだと感じました。また、早起きは自分にとって永遠の課題、、チャレンジしたくなってきました。素晴らしい記事、ありがとうございます！
簡単な自己紹介
約２年前に1次産業を生業とする会社を起業し、日々雑務に追われているhondaと申します。また、とある大学の研究を事業化するベンチャーキャピタルでのベンチャーパートナーとして、複数のスタートアップのハンズオン支援もやっています。
今年の11月にフィヨルドブートキャンプをなんとか卒業しましたが、それまではmacすら触ったことのない、カナ打ち（だった）昭和生まれの40代です。この２年で机周りは大きく変化し（自作キーボードにまで手を出してしまいました。。）、この歳になって、その変化にびっくりしています。
本日のテーマ
折角のアドベントカレンダー、フィヨルドブートキャンプで学んだことを書こうかと思ったのですが、自分の拙いプログラミング話よりも、今年非常に感銘を受け、後の人生に影響を与えるであろう本に出会えましたので、興奮しながらその本について書きたいと思います。
その本の名は
「GO WILD」 という本です。
ご存知の方も多い本かもしれませんが、この本についてちょっと語らせてください。この本は、実はほぼ前作と呼べる「脳を鍛えるには運動しかない」という本があります。もともとその本を10年以上前に読んでいた自分は、今年受けた健康診断で初めて再要検査となって、久しぶりにその本を手に取り再読しました。そして、その後に書かれたこの「GO WILD」が気になって購入した、という経緯です。
「GO WILD」とはどういう本か
結構厚い本ですが、一言で言うと、「ホモサピエンスの本質は昔から変わっていないので、それに反する行動を減らして、本来持っている本質にできるだけ沿った生活をした方がいいよ」、という内容です。（以下、主観ましましなので、気になる方はぜひ読んでみてください。）
本に書かれている、ホモサピエンスの本質とは、簡単にまとめると、下記のようなものです。
- 20~10万年前に現代の姿 文明が発達し、穀物を作る現生活になったのはたった2000年前（100分の1）
- 人は持続的に走り続けれるように体が作られている
- 思考は歴史上、行動が内在化したもの
そして本では、この本質から人間のあるべき生活様式を5つの分野に分けて説明しています。長い内容なのですが、ムリムリまとめるとこんな感じです。
食事
- 精糖は取らない。（糖を含む飲み物は取らない。）
- 穀物はできるだけ取らない。カロリーはなるべく脂肪から摂る（ただしトランス脂肪酸はNG。）
- 加工食品はできるだけ避ける。
- 量は気にしない。まずは少しずつ変えていく。
運動
- 好きな運動をする。（日々習慣化することが大事。）
- できるだけ外で自然を感じる。（山登り、トレイルランニングはベスト。）
- 家族、仲間と運動する。
- 定着するまで色々試してみる。
睡眠
- 8〜８.5時間睡眠がベストだが人それぞれ。睡眠は脳の発達に何よりも大事。睡眠を減らすことは成長を止めるので絶対に辞める。（最悪死ぬ。）
- 家族や外部環境音がある方が熟睡しやすいように人はできている。
- 寝る時間と起きる時間を一定にできるとベスト。
バイオフィリア
- 人は哺乳類であり、自然、日光を感じないとビタミンDが生成されなく生きれないように作られている。
- できるだけ自然を感じることが重要。森、緑、森林の香りでも人の脳に効果をもたらす。
マインドフルネス
- 脳は瞑想によって鍛えられる。
- ひたすら静かに座り、心に浮かぶものをあるがままに観察し、心に留める。（このことをマインドフルネスという。）
- または、ある一つの感覚に意識を集中させる時間を持つ。
そして、まずこの中で今やっていない、これからできる、引き金になるものを1〜数個ピックアップして、2週間ほど続けてみて、体の変化を楽しんでみようと語りかけてきます。
読後
再検査となった自分は脳卒中リスクが高いらしく、前々職の同年代の同僚（40代半ば）を最近亡くした自分としては、素直に試してみようと思い立ちました。具体的には上記の中から、
- 精糖は取らない（糖を含む飲み物は取らない）
- 穀物はできるだけ取らない
- 好きな運動をする
を選び、8月後半から9月前半までの2週間実施してみました。するとびっくり、運動しているのに劇的に体が疲れにくくなりました。病気の予防になればという感覚で始めたのですが、この歳で体が疲れにくくなるとは思っていなかったです。それ以降はこの効果が出過ぎたこともあって、特に苦痛もなく続ける事ができています。
今までラーメン愛好家として炭水化物のオンパレードな食事を摂り続けていたので、ギャップが大きく効果が出やすかったのだとは思いますが、自分と同じように、健康について今年考えられた方には是非試読をお勧めしたい一冊です。特に訳者あとがきが熱すぎますよ。
来年の抱負
起業した会社で大学との共同研究が決まり、補助金も認可され、ようやく会社っぽくなってきたので、フィヨルドブートキャンプで作った自作サービスを会社のサービスとしてリリースさせて、様々な人のお力を借りて、少しづつ育てていければと思っています。
そのためには自分のできることを少しでも増やしていく必要があるので、時間を作って、積極的に学習を継続していこうと考えています。皆様、引き続きご指導いただけますと幸いです。
明日はobregonia1さん、yamabe009さんです。非常に楽しみで明日が待ち遠しいです！！
以上、読んでいただき、ありがとうございました！！
40過ぎてカナ入力からローマ字入力に強制した話
前振り
前職のオーナーが、「出版している雑誌の都合で月1コラムを掲載しないといけないので毎月コンテンツを書いているが、10年振り返ってみると、強制的にも続けてよかった」ということをよく言っていました。
早速3ヶ月以上空いてしまいましたが、、今回、ローマ字打ちに変更して1年1ヶ月、やっとのこさe-typingでSが取れたので、これを期にこの過程を書いて残しておこうと思います。タイピングを今からなんとかしたい、と思っている中高年の方には参考になるかも、です。
自分のタイピングスペック
- 40代半ばに差し掛かろうとしているオッサン
- なんと今まで「カナ打ち」
- 英字はキーボードをガン見しながらたどたどしく打っていたレベル
なぜカナ入力だったのか
これはほんと偶然でした。
大学時代に学祭の運営委員をやってまして、レポート提出時期になると委員会室の複数あるワープロを皆でシェアして使う古き良き時代でした。その時に自分に回ってくるワープロがたまたまカナ打ちだったんです。
使うにつれて、ソコソコ速く打てるようになり、そのまま社会人になってカナ打ちが定着してしまいました。。令和となった現在、会社の若いメンバーからはバレるとかなりの確率で、「カナ打ちの人に初めて出会いました！！」とdisられます。
どうしてローマ字入力にしようと思ったのか
プログラミングの学習を始めて、英字が全くブラインドタッチできず、キーボードを見ながらで、絶望的な気持ちになったためです。今更変えれるんだろうか、と不安になりましたが、そもそもこれができないようでは、この年で0からプログラミングを学んでアプリをリリースすることはできないだろうと思い、挑む覚悟を持ちました。
Sを取るまで何をやったのか
いよいよ本題です。まず前提として仕事、子2人を持つ身のため、最小限の時間しか費やせません。最大効率化を図るため、事前に下記の2つを決めて、タイピング習得に取り組み始めました。
- まず遅くてもいいから、キーボードを見ないで打てるようにブラインドタッチを習得する。
- ブラインドタッチが習得できたら、毎朝10分、タイピングゲーム等で入力練習する。必ず毎日繰り返す。
1について
経験者が共有して言うのは、ブラインドをマスターすると、加速度的に上達する、ということでした。ということは、まず先にブラインドをマスターすれば、その後の上達速度は高まり、結果最小効率でいける、と判断しました。
ブラインドタッチで自分が使ったアプリはTypistです。typistのローマ字入力コース（a 1-20）をまずは毎日コツコツやりました。非常に無機質なアプリですが、マシンのようにこなしました。
Typistはどうもmacだけのようなので、PC がmacではない方は何かブラインドタッチの習得ができる他のアプリを探すのがいいと思います。
結果、ブラインドタッチを習得するスピードが早ければ早いほど、ゴールまでの日数は減ったと感じます。単純に一定時間で習得できるので、この期間は何とか時間を捻出して最速でブラインドをマスターしてしまうのが最も効率がいいと思います。
2について
2.では、自分はe-typingと寿司打を使いました。毎朝起きたらすぐに10分タイマーをつけて、キーボードを絶対見ないようにして、鳴るまで打ち続けました。e-typingの腕試しテストは1回（日によっては2〜3回）は必ずやるようにしていました。（下のグラフは恥ずかしながらその記録です）
停滞期は必ず訪れる
そんなこんなで2ヶ月ほど経ったところ、下記のグラフのように、断続的な停滞期に入りました。スピードも余り上がらず、正確性も高まらない中途半端な状況が続いていたので、3つ目の約束事を作りました。
3. 練習の際は、スピードには全くこだわらない。正確性を最重視する。
タイピングは楽器の習得と通じるところがあるなぁとやりながら実感したので、まず正確性にこだわることで、結果意識しなくてもスピードが後から伴うだろうと判断しました。体感、これは功を奏し、その後は最後の停滞期があったものの、日々ある程度の進歩を感じながら続けることができました。
とは言っても、この点は人それぞれな気もします。
スコアのグラフはこんな感じです。
Aを取るまでは3ヶ月程度でしたが、A＋を取るまでにはそれから更に3ヶ月、そしてSを取るまでには更に半年以上かかってしまいました。が、伸びる時期と停滞する時期がタイピング習得の過程でも見事にあり、全ての習得はこの共通項があることを再度実感するきっかけにもなりました。
終わりに
Sを取ったら念願の英字キーボードを買おうと思い、頑張ってきて、昨日念願の英字キーボードを買いました！
が、矢印がFn＋で打つことや、DELETEキー、SHIFTキー、Fnキーの位置、また記号キーの変わりように全く慣れず、変なタイプミスも増え、振り出しに戻った気分ではあります。。。とほほ。
アンラーニングをフィヨルドを通して実体験。
この記事は「フィヨルドブートキャンプ Part 2 Advent Calendar 2021」の22日目の記事です。
昨日 12/21 は
でした。タマキさんの記事を読んで、来年は絶対ペアプロにチャレンジしようと誓いました！また、ぴーさんのフィヨルドを選んだ理由、めちゃくちゃ共感です！非常に素晴らしい記事、本当にありがとうございます！
自己紹介と何故フィヨルドブートキャンプに入隊したのか
昨年、一次産業系の会社を数人で起業してあくせく働いているhondaと申します。また、大学研究を事業化するベンチャーキャピタルでベンチャーパートナーとして複数のスタートアップのハンズオン支援もやっています。
立ち上げた会社は元来Webサービスとは関係ないジャンルの会社だったのですが、いろいろやっているうちに何個かwebサービスが思いつきました。
自分で手を動かして作ることが出来ればどんなに素晴らしいことか・・！と、思ったものの、昭和生まれの40代、なんとカナ打ち、もちろんターミナルなんて開いたこともないガチ未経験だったので、リスティング系のプログラミングスクールのコンテンツを見てはそっと閉じを繰り返しておりました。
そんな時、前職のエンジニアの方からフィヨルドブートキャンプを勧められました。調べていくうちに本物感をひしひしと感じ、卒業生の方のブログを読んで、ここだ！と確信に至りました。双子の子供ももうすぐ小4になるし、時間もある程度取れるだろうと、前職の退任を機に2021年3月フィヨルドの門を思い切って叩いた次第です。
入隊してみて
仕事後にやっていることもあり、質問コーナーなどのライブイベントに参加できていませんが、分報の呟きに受講生の方から反応を頂いたりすることもあり、非常に勇気づけられ、ひとりじゃない感を噛みしめながらコツコツやっております。フィヨルドコミュニティの皆様に心から、感謝感謝です。
なんとか自分で作りたいwebサービス、を作れるようになるまで走り切れればと思っています。
ここからが本題 フィヨルドでアンラーニングを体感
フィヨルドブートキャンプで最大にハマった課題、JSメモ課題。
フィヨルドブートキャンプでは後半のJava Script課題で、
echo '"hoge" | node memo.jsと打つと、メモが保存されて、node memo.js -l or -r or -dといったコマンドライン引数の内容によってメモの一覧・詳細・削除が実行できるアプリケーションを作る、というお題があります。
「Sinatraでメモアプリ作成」の課題を数ヶ月前にこなしてはいたのでイケるかな、と思い、課題に向き合ったところ、JSで、またコマンドライン上で、むむむ、、と最初の数日は全く一歩目が出ず、日が過ぎるのみでした。何人かの受講生の方の日報から、要素要素必要そうな情報を見つけ出しては読むのですが、自分の中で課題の論点が整理できるほどの前提知識がないためほぼ理解ができず、昭和な私は「風雲たけし城」の「人喰い穴」ばりのインパクトを受け、ただ「人喰い穴」の前で数週間立ちすくむのみでした。
２週間経過して
JSONで作るのか、sqliteを使うのか、という部分もよくわからないまま迷走し、仕事も忙しかったこともあり2週間ほど途方に暮れてプログラミング学習がほとんど進まなくなりました。ここまでまがいなりにもフィヨルドを続けたのに、遂にこの穴の前でリタイヤかと、学習から離れる期間が積もるにつれ、そんなこともよぎりました。
そんな時、偶然にも下のnoteに出会いました。これを読んで、トンカチで頭を思いっきり殴られた気がしました。
（この記事、非常に奥深いです。特に20年以上、専門系の仕事をされてきた方は刺さるところがあるのではと思います。）
この記事を読んで、いつの間にか、仕事でひたすら、時間制限、限られた情報の中で意思決定することを長期間続けたせいで、「わかっている」という深度が、無意識にめちゃくちゃ浅くなってしまっていることに気づいたのです。
詰まった経験からアンラーニング体験へ
そう気づいた後、まずすぐに、今後の学習には投資効率を求めない（時間を図らない、スケジュール、〆切を設けない）こととし、日々使える時間の中で、ゆっくり「スラスラ読める JavaScriptふりがなプログラミング」を出来うる限り精読し、その後「JavaScript Primer」を最初から精読していきました。
わからないところで課題に必要そうなところは付箋を貼り、時間を気にせず丁寧に調べていきました。
また、この機会に受講生の方の日報をたくさん拝見しました。皆さんの熱量、またどのレベルまでの理解を求めて学習されているのか非常に勉強になると共に、何よりも励まされました。
さらに、仕事を終えた後すぐには学習に着手せず、10分ストレッチなどをして頭の中の泥を取り除いてから取り掛かるようにしました。プラス、学習を終える時は次の学習のために、付箋で簡単なメモ書きを残し、次に学習する際スムーズに取り掛かれるようタグ付け的なことをやるようにしました。
その後、課題に再度向き合い、関連しそうな「JavaScript Primer」の箇所を精読しながら、手書きで課題を要素分解して、書き出してみました。
そうすると、なんということでしょう！ ある日、課題の要素と、学習した内容が点と点をつなぐように、自分の頭で理解が進むようになったのです。
それは、大袈裟に聞こえるかもしれませんが、何十年と凝りに凝り固まった自分の頭が、予想外に新しいことを紡ぐ、従来のリズムや習慣を捨て去る、不思議なアンラーニング体験でした。
まとめ
この年で0からプログラミングを学ぼうとしたおかげで、このような機会をいただくことができました。
学び直し、アンラーニングと言ってしまうと陳腐ですが、これがまさにそうなのかと。
何よりもフィヨルドブートキャンプの真剣な、素晴らしい熱量のコミュニティに触れることができたからこそ、実体験でこのような無意識の脳のカスタマイズ、バイアスを自分で気づくことができるまで、諦めずに立ち止まれたのだと思います。
終わりに
こんな長い文章を読んでいただき、有難うございました。
Webプログラミングは、知れば知るほどその世界の広さたるや、、ドラクエで例えると、恐らくフィヨルドを卒業できて初めて街の外に出てスライムと一戦交えることができる（勝てるかどうかは別）。。勉強すればするほど、そんなwebプログラミングの世界の広さを垣間見ます。
あくまで個人的な意見ではありますが、特に社会人経験が長く、未経験で学習を始める方は、理解の深度にバイアスがかからないか、注意して進めてみるのをおすすめします。
そして進むにつれ深度が低くなってるかも、と感じた方は、理解にある程度こだわった方が、私のように「人喰い穴」で動けなくなることもなく、学習後半を結果、速く進めることができるのでは、と感じます。（これは100％理解して進めよう、という話ではありませんので、悪しからず。30％→60％くらいのイメージです。）
個人的には、来年は上手く仕事を調整して、質問タイムや輪読会、ペアプロに参加することで理解の深度をより深めていければと考えております。引き続きよろしくお願いいたします。
明日は、
になります。明日も楽しみですね！
