初めてのReactで俺が考える最強の電卓を作ってサービスをリリースした話
こんにちは。Azyです。
わたしは独学でプログラミングの勉強をしています。
プログラミング学習の経緯は別ブログで書いています。
React初心者から "SMART CALCULATOR" と言うWeb計算機を作りました。
どんな機能があるのかとなどはこちらの記事にまとめています。
この記事では、Reactをどのように勉強したのかを紹介したいと思います。
1 前提知識
わたしは独学したRuby on Railsで作ったクラフトビールキャンバスというサイトを運営しています。
Railsの勉強は3年くらいしていましたが、JavaScriptはおまけ程度にしか実装しておらず、あまり自信がありませんでした。
2 TypeScript (2020年10月-12月)
何はともあれ、世間で話題のTypeScriptを習得する必要があります。(今からReactを始めるのであればTypeScript一択です。)
本格的には2020年10月から勉強をはじめ、完了したのが2020年12月末でした。
7-11月 現代のJavaScriptチュートリアルを通勤中に流し読み
本格的にTypeScriptの学習を開始
10-12月りあくと!流し読み (少しだけコードも動かしてみる。りあくと!はTypeScriptの解説もあります。)
12月 Rubyで実装していた単位換算アルゴリズムをTypeScriptで実装完了
本格的に学習を初めてTypeScriptでアルゴリズムを実装するまで3ヶ月かかっています。子育てもあり日曜日の午前中しかまとまった時間が取れないので、週8時間くらいとして100時間くらいの学習時間です。
JavaScriptチュートリアルはそこまで読まなくても良かったかな、と思います。りあくと!でJavaScriptとTypeScriptの要点が記載されているので、他の言語の経験があれば、りあくと!からでいいと思います。
焦らずじっくりやるの大事。
3 React (2020年12月末-2021年3月)
りあくと!で一通り概要を確認していたので単位換算のロジックとReactをつなげていきます。
環境構築が一番つまずく所なので、最初はりあくと!の参考にする章のコードを丸ごとコピーして修正していきました。(ESLint, Pritterの設定は初心者にはなかなか難しいが、これこそがTypeScriptを使うメリット)
Material-UIがすごすぎてとにかく感動しました。2, 3日で見た目は今とほぼ変わらないところまで出来上がっています。
LPみたいな単純なページで、ReactやVueを使っているの不思議でしたが、UI系のモジュールを手軽に使えるのであれば、サイトの構築が簡単なので納得しました。
useStateとuseReducerと格闘しながら、なんとか3月にサイトのオープンにこぎつけました。
結局納得するところまで機能を作り込んでいたら3ヶ月くらいかかりました。
4 まとめ
ほぼ半年かけてTypeScriptとReactを初心者から始めて、Reactを使ってサービスとしてリリースするところまで行きました。
ちなみにReactを初めて触った時は以下の感想をつぶやいています。
なんとかなりました。
ただし、Reactからのサーバサイドの呼び出しなどの難しそうなものは全くしていません。それは次のサービスで挑戦しようと思っています。今回は以下のステップでReactを学習しました。
- React, TypeScriptの学習本流し読み (りあくと!)
- TypeScriptを使ってアルゴリズムの実装
- Reactを使ってサービス開発 (フロントエンドのみ)
- Reactを使ってサービス開発 (フロントエンド、サーバサイド) ⇦今後やります。
難易度から考えて学習の順番を意識する、時間がかかっても焦らない、が習得のコツだと思います。
ちなみにPomodoro Health TimerというポモドーロテクニックのアプリもReactで作りました。紹介記事もあるのでよろしければどうぞ。
今後は個人開発の最難関 ”サービスを使ってもらう”、というのを考えてマーケティングを頑張りたいと思います。有料広告も試していこうと思っているので、進捗はTwitterとnoteで共有していこうと思います。
お読みいただきありがとうございました。
この記事が気に入ったらサポートをしてみませんか?