見出し画像

初めてのReactで俺が考える最強の電卓を作ってサービスをリリースした話

Azy

こんにちは。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で共有していこうと思います。

お読みいただきありがとうございました。

この記事が気に入ったらサポートをしてみませんか？