![見出し画像](https://assets.st-note.com/production/uploads/images/51189097/rectangle_large_type_2_67c8321ec84a6cf0dbe96ef5615b0479.png?width=1200)
初めての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の解説もあります。)
Reactの勉強に一番いい本なのは間違いないです。javascriptの歴史と言語の考え方まで学べます。本の中の教えてもらう側の人がRails出身なのが最高#個人開発 #独学 #プログラミング #今日の学び
— Azy@独学プログラミング (@EastAzy) November 2, 2020
りあクト! TypeScriptで始めるつらくないReact開発https://t.co/9ZmyJ3ZP8X
12月 Rubyで実装していた単位換算アルゴリズムをTypeScriptで実装完了
やっと単位換算のアルゴリズムをTypescriptで実装できた!! Ruby以外で絶対無理と思ってたけど頑張ったらできた。これをReactで実装していきます。やっとReact触れる。 pic.twitter.com/miSPALLP4J
— Azy@独学プログラミング (@EastAzy) December 26, 2020
本格的に学習を初めてTypeScriptでアルゴリズムを実装するまで3ヶ月かかっています。子育てもあり日曜日の午前中しかまとまった時間が取れないので、週8時間くらいとして100時間くらいの学習時間です。
JavaScriptチュートリアルはそこまで読まなくても良かったかな、と思います。りあくと!でJavaScriptとTypeScriptの要点が記載されているので、他の言語の経験があれば、りあくと!からでいいと思います。
焦らずじっくりやるの大事。
Reactいきなりやるんじゃなくて、自分の作りたいロジックをTypescriptでまず作ってTypescriptに慣れる、っていうのはいいやり方だと思う。新しいプログラミング言語を覚える時は基本的にこのやり方でいこう。RubyにしろいきなりRailsでwebアプリ作るのは難易度高すぎる。
— Azy@独学プログラミング (@EastAzy) December 26, 2020
3 React (2020年12月末-2021年3月)
りあくと!で一通り概要を確認していたので単位換算のロジックとReactをつなげていきます。
環境構築が一番つまずく所なので、最初はりあくと!の参考にする章のコードを丸ごとコピーして修正していきました。(ESLint, Pritterの設定は初心者にはなかなか難しいが、これこそがTypeScriptを使うメリット)
できた!React製単位換算計算機#Typescript #React pic.twitter.com/m4umWlHKAu
— Azy@独学プログラミング (@EastAzy) December 28, 2020
Material-UIがすごすぎてとにかく感動しました。2, 3日で見た目は今とほぼ変わらないところまで出来上がっています。
LPみたいな単純なページで、ReactやVueを使っているの不思議でしたが、UI系のモジュールを手軽に使えるのであれば、サイトの構築が簡単なので納得しました。
ReactとMaterial-UIで形になってきた#React #Typescript pic.twitter.com/5XoOAC7mSd
— Azy@独学プログラミング (@EastAzy) December 30, 2020
useStateとuseReducerと格闘しながら、なんとか3月にサイトのオープンにこぎつけました。
Engineer Calculatorを個人開発でリリースしました!!
— Azy@独学プログラミング (@EastAzy) March 20, 2021
簡単なキーボード入力で高機能な計算を実現することができます。”俺が考えた最強の計算機”です。ピンときたら使ってみてください。https://t.co/uDQFOIgssS pic.twitter.com/8tYqjPhc8X
結局納得するところまで機能を作り込んでいたら3ヶ月くらいかかりました。
4 まとめ
ほぼ半年かけてTypeScriptとReactを初心者から始めて、Reactを使ってサービスとしてリリースするところまで行きました。
ちなみにReactを初めて触った時は以下の感想をつぶやいています。
Reactめっちゃ需要あるんだから、みんなちゃっちゃとやったらいいのにと思ってたけど確かに難しいわこれ。javascriptをちゃんと体系的に理解してないとReactチュートリアルでさえ厳しい。この絶望感はRailsを始めた時にも味わったから、まぁなんとかなるんだろうな
— Azy@独学プログラミング (@EastAzy) June 28, 2020
なんとかなりました。
ただし、Reactからのサーバサイドの呼び出しなどの難しそうなものは全くしていません。それは次のサービスで挑戦しようと思っています。今回は以下のステップでReactを学習しました。
- React, TypeScriptの学習本流し読み (りあくと!)
- TypeScriptを使ってアルゴリズムの実装
- Reactを使ってサービス開発 (フロントエンドのみ)
- Reactを使ってサービス開発 (フロントエンド、サーバサイド) ⇦今後やります。
難易度から考えて学習の順番を意識する、時間がかかっても焦らない、が習得のコツだと思います。
ちなみにPomodoro Health TimerというポモドーロテクニックのアプリもReactで作りました。紹介記事もあるのでよろしければどうぞ。
今後は個人開発の最難関 ”サービスを使ってもらう”、というのを考えてマーケティングを頑張りたいと思います。有料広告も試していこうと思っているので、進捗はTwitterとnoteで共有していこうと思います。
お読みいただきありがとうございました。
この記事が気に入ったらサポートをしてみませんか?