この記事では、私がプログラミング弱者としてツール開発に挑戦した体験をお届けします。
初めてReactやMUIを扱ったり、エラーに苦戦したりする中で、どんな壁に直面し、それをどう乗り越えたのかをリアルにお伝えします。
同じような課題にぶつかった方が解決の糸口を見つけられるよう、少しでもヒントになれば嬉しいです！
この記事は次のような人におすすめ！
- プログラミング初心者で、ツール開発に挑戦してみたい人
- 初めてReactやMUIを使ったフロントエンド開発に取り組む人
- 自分のアイデアを形にしたいけど、一歩踏み出せずにいる人
ツール開発のきっかけ：プログラミング初心者の挑戦
プログラミングなんて大学の授業でちょっと触ったくらい。「自分にはエンジニアなんて無理だな…」って痛感したタイプです（だからこそ、エンジニアの人たちって本当にすごい！尊敬してます！）。
そんなプログラミング初心者が、思い切ってツールを作ってリリースするまでの奮闘記をお話しします。
ツールを作ろうと思ったきっかけは、図書館をよく使っていて「どれくらい得してるんだろう？」って気になったことです。
記事にまとめる時に、読んだ本を振り返ったり、「こんなに節約してるんだ！」という達成感がとても楽しかったんです。
以前の記事では、一冊一冊検索して値段を調べて計算しました。
また書きたいなと思ったんですが、毎回手作業で計算するのは正直めんどくさかったんです。
「もっと簡単に計算できたらいいのに！」って思ったのが、このツールを作る決心をした瞬間でした。
作成したいもの：シンプルで実用的なツールを目指して
まずは、作りたいものをちゃんと整理しました。
目的を明確にしておかないと、途中であれもこれもと機能を増やしちゃって、収集がつかなくなるのを過去に経験していたので…。
目指したのはシンプルなツール。やりたいことはこんな感じ：
- 本のタイトルを入力すると、それぞれの価格が出る
- 一冊ずつ入力するのは手間だから、複数冊を一気に算出したい
- 計算結果は合算されてると便利！
これだけ！最低限の機能に絞った、シンプルなツールを目指しました。
ポイント：作りたいものを最初に明確にしよう！
MUIとReactで作る！フロントエンド開発の第一歩
次に、フロントエンドの作成です。今回はMUIを使ってみることにしました。
理由はシンプルで、「触ったことがなかったから、チャレンジしてみたい！」という気持ちからです。
ちなみにReactも初挑戦。
実は、jQueryで止まっているタイプの人間です（笑）。
新しい技術に挑戦してみたいという思いから、MUIでの開発をスタート。
まずはローカル環境で再現するためにnpmをインストールしました。
ちなみに最初は、いきなりサーバ上で作業しようとしていたんですが、それを見た我が家のエンジニアに「え、何やってんの？」とツッコまれました…。
なるほど、まずはローカルで作業するのが基本なんですね。
Node.js
最初にやったのは、npmのインストール。まずはNode.jsのサイトに行って、インストーラーをダウンロードしてファイルを展開しました。
その後、ターミナルを開いてcdコマンドで作業したい場所に移動。
ちなみに、cdを入力後、遷移したいフォルダをドラッグ＆ドロップすると、パスが自動で表示されるので便利です。
インストールがうまくいったか確認するために、コマンドでバージョンをチェック。
node -v; npm -v結果はこんな感じ
v18.2.0
8.9.0これで、無事インストールが完了しました！
React MUI
MUIのドキュメントを参考にしながら、コマンドを打っていきました。
すると、こんなエラーメッセージが…。
npm notice New major version of npm available! 8.9.0 -> 10.9.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.9.2
npm notice Run npm install -g npm@10.9.2 to update!バージョンが古いってことかな？
早速、npm install -g npmを打ってみましたが、またエラーが…。
npm ERR! code EBADENGINE
npm ERR! engine Unsupported engine
npm ERR! engine Not compatible with your version of node/npm: npm@10.9.2
npm ERR! notsup Not compatible with your version of node/npm: npm@10.9.2
npm ERR! notsup Required: {"node":"^18.17.0 || >=20.5.0"}
npm ERR! notsup Actual: {"npm":"8.9.0","node":"v18.2.0"}どうやら、今使っているnpmのバージョン（8.9.0）ではアップデートできない様子。
これが原因で、grunt@18.17.0をインストールしようとしてもエラーが出ました。
npm ERR! code ETARGET
npm ERR! notarget No matching version found for grunt@18.17.0.ここで、npmとNode.jsのバージョンの関係性に少し困惑。
どうやら、npmをアップデートするにはNode.jsのバージョンもアップしないといけないようです。
そこで、nodebrewを使ってNode.jsをアップデート。
以下のコマンドで、最新のバージョンをインストールして切り替えました。
nodebrew install
nodebrew use [version]その後、npm i reactを実行し、無事にMUIをインストール！
ここから、試しにボタンを表示しようとしましたが、どのファイルに書けばいいのか迷いました。index.jsかなと思ったり、新しいファイルを作ったりしましたが、うまくいかず…。
そんな時、こちらのサイトを参考にしました。
https://ralacode.com/blog/post/react-material-ui/
これで、npx create-react-app mui-sampleを実行して、なんとサンプルが用意されていることがわかりました！
npm start実行したところ、最初はエラーが発生。
Can't resolve 'web-vitals' in ~
調べてみたところ、web-vitalsのインストールが必要とのこと。
そこで、以下のコマンドを打ちました。
npm i web-vitals --save-devこれで、npm startが成功し、webpack compiled successfullyというメッセージが表示されました！
これで、ようやくサンプル画面が表示されました！
App.jsを更新すればいいことが分かり、嬉しかったです。
公式のチュートリアルは正直ちょっと難しかったので、最初からこちらのサンプルを使ったほうが近道でした。
ポイント：Reactサンプルを活用しよう！
MUIデザイン、ChatGPTで かんたん作成！
満を持してMUIを使って、画面デザインに取りかかります！
まずはMUIのドキュメントを参考にして、必要なパーツを配置。…の前に、試しにChatGPTに「MUIでこういう画面を作って」と頼んでみました。
すると、コードを表示してくれて、コピペするだけでキレイな画面が完成！感動しました。
どんなツールを作りたいのかを伝えると、サンプルデータまで入れてくれるんですね。
なんて気が利くんだ、ChatGPT！
さらに、画面の全体的なイメージを夜の読書シーンにしたいと思って、背景に夜っぽいグラデをつけて、星々が瞬いているデザインをChatGPTにお願いしたところ、これも見事に作ってくれました。
「星空みたいに、白い点をランダムでつけてほしい」と頼んだら、それに加えて星の瞬きまで実装してくれたんです。
自分じゃ絶対にできないようなことだったので、こんな細かいところまで対応してくれるなんて、感動しました！
楽しくなってきたので、最後にお得になった値段によって合いの手を入れる機能も追加しました（笑）。
ポイント：画面デザインの実現には、ChatGPTをフル活用！
次回予告：API連携からツール完成へ！
今回はフロントエンドの作成までを紹介しましたが、後編ではAPIとの連携を進め、ついにツールを完成させる過程をお届けします。
API接続でちょっとした波乱もありましたが、最終的には無事に完成！
どんな課題に直面し、それをどう乗り越えたかも紹介しますので、ぜひ後編もお楽しみに。
完成したツールのリンクも後編でお知らせしますので、ぜひチェックしてみてください！
