WEBアプリ開発未経験者がChatGPTにおんぶにだっこでWEBアプリを作っていくシリーズ
第2回 開発環境選定編！
どんなアプリを作りたいのか
私が今回作りたいなと思っているWEBアプリは、「カクテル版のクックパッド」です！
筆者はお酒やカクテルがとても好きです！
作ろうと思ったきっかけは以下になります！
- 自分の好きな味や雰囲気などの曖昧な属性からカクテルを検索し、お気に入り登録してBARで飲むときに使いたい
- いろんな人がオリジナルカクテルのレシピを投稿できるアプリがあれば面白いと思った
最終的に選んだ開発環境
結果から言います！WEBアプリ開発未経験者の筆者が選んだ開発環境は以下になります！
- フロントエンド：React
- バックエンド：Ruby（Ruby on Rails）
- データベース：MySQL
- エディタ：VSCode
どうしてこの組み合わせにしたの・・・？
フロントエンド：React
Reactを選んだ理由は以下になります！
- 人気と情報量の多さ
初心者がつまずくポイントの1つが「参考情報が少ない」こと。その点、Reactは世界中で広く使われているフレームワークで、公式ドキュメントやチュートリアル、コミュニティの情報が豊富らしいのです！困ったときに検索すれば、大抵の問題は解決できそうだと感じました！ - コンポーネントベースで直感的
UIを「パーツ（コンポーネント）」単位で考えることができるので、アプリの構造が整理しやすいらしいです！特に、複数の画面を持つアプリを作りたい場合には適しているとChatGPTから教わりました！ - 将来性
Reactはモバイルアプリ開発（React Native）にも応用が利くため、今後の拡張性を考えると魅力的です。
バックエンド: Ruby（Ruby on Rails）
Rubyを選んだ理由は以下になります！
- Railsの存在
ChatGPTに「初心者がバックエンドを学ぶならどれがいい？」と尋ねたところ、Railsを使えば基本的なCRUD（作成・読み取り・更新・削除）操作が短時間で構築できるとアドバイスを受けました。特に「フロントエンドに集中したい初心者にはRubyのシンプルさが向いている」とのこと！ - シンプルなコードで書ける
Rubyの文法は自然言語に近く、コードの可読性が高いので、学習の障壁が低い点が決め手でした！ - コミュニティのサポート
Railsの公式ガイドや活発なコミュニティがあるため、初心者でも困りにくいと判断しました！
データベース：MySQL
MySQLを選んだ理由は以下になります！
- Railsとの相性
Ruby on RailsはMySQLをサポートしており、設定がシンプルで直感的です。特に初心者でも簡単に導入でき、動作確認がスムーズに行えるため、学習段階でも扱いやすいと判断しました！ - 普及率の高さ
MySQLは世界中で広く使われており、多くのプロジェクトで採用されています。そのため、トラブルシューティングや最適化の情報が豊富で、困ったときにすぐに解決策が見つけやすい点が魅力だと思いました！ - パフォーマンスと安定性
MySQLは高いパフォーマンスを発揮し、小規模から中規模のアプリケーションに非常に適しています。また、商用環境でも長年使用されている実績があり、安定性にも信頼があります。開発のスケールに応じて柔軟に対応できる点がメリットだと感じました！
そもそも開発環境って・・・？
「開発環境」と聞いて、なんだか難しそうな響きだな～と思う方も多いはず！
でも、安心してください！これは、WEBアプリを作るために必要な「作業場と道具のセット」のようなものです。
たとえば、あなたが何かを作るとき、道具や素材、作業スペースが必要だと思います！
開発環境は、アプリ開発というプロジェクトを進めるために必要な「作業スペースとツールの集合体」と考えてください。
- フロントエンド（React） = デザイナーの道具
Reactは、アプリの見た目や操作感を作るためのツールです！
たとえば、デザイナーが「絵を描くキャンバス」と「デザインツール」を使って美しい作品を作るように、
Reactは「UI（見た目）」を設計し、組み立てていくためのツールとして機能します！
・実際に行うこと：ボタンのようなUIの作成、画面のレイアウト作成 - バックエンド（Ruby） = 作業指令を出す司令塔
Rubyは、裏でアプリ全体をコントロールする役割を担います！
たとえば、工場の司令塔が機械を動かして、「この部品をあの場所に運んで」「これを組み立てて」と指示するようなもの。バックエンドは、ユーザーが入力したデータを処理し、適切な応答を返す仕組みを作ります！
・実際に行うこと：データの保存や取得、アプリ全体のロジックの構築 - データベース（MySQL） = 倉庫や棚
MySQLはアプリで扱うデータを整理して保管しておく役割です！
工場で言えば、部品や完成品をしまっておく棚や倉庫のようなもの。
たとえば、ユーザーの情報や、アプリに表示するリストなどを管理します。
・実際に行うこと：データの登録・更新・削除 - エディタ（VSCode） = 作業机
VSCodeは、コードを書くための作業机です！
ReactやRubyでアプリを作るにはコードを書きますが、VSCodeはその作業をスムーズにするための机であり、便利な文房具（プラグイン）がたくさん揃っています。
・実際に行うこと：上で説明した各種ツールを用いて作業する - 開発サーバー = 試作の検証スペース
開発サーバーは、完成する前のアプリを試してみる「検証スペース」です！
工場で新しい製品を試作して問題がないかをテストするように、開発サーバーを使えば、
アプリの動作を確認しながら改善できます。
・実際に行うこと：作ったアプリを実際に動かして動作確認
ChatGPTに聞いたこと
私がChatGPTに聞いたことを会話形式でまとめたものを書いていきたいと思います！
筆者
「WEBアプリを作るのにどんな開発環境がいいか全然わかりません。初心者におすすめの組み合わせってありますか？」
ChatGPT
「初心者におすすめの開発環境は、学習コストが低く、情報が豊富なものが良いですね。以下のような組み合わせがよく使われますよ：
- フロントエンド: React（UIの見た目を構築するために最適）
- バックエンド: Ruby（Ruby on Railsを使えばシンプルで開発がスムーズ）
- データベース: MySQL（Railsとも相性が良く、扱いやすいデータベース）
この組み合わせだと、初心者でもスムーズに学びながらアプリを作ることができます。」
筆者
「なるほど、Vue.jsとかもあるみたいですが、Reactのほうがいい理由って何ですか？」
ChatGPT
「Reactをおすすめする理由はいくつかあります：
- 情報量が多い: Reactは世界中で人気があり、困ったときに検索すれば解決策が見つかりやすいです。
- コンポーネントベース: アプリを小さな部品（コンポーネント）に分けて作れるので、再利用性が高く、コードが整理しやすいです。
- 将来性: モバイルアプリも作れるReact Nativeに発展させることができ、長期的なスキルにもつながります。」
筆者
「データベースはPostgreSQLもいいと聞いたんですが、MySQLと比べてどうですか？」
ChatGPT
「PostgreSQLも素晴らしい選択肢ですが、初心者向けにはMySQLがシンプルで導入しやすい場合が多いです。また、MySQLは非常に普及しており、Railsでもサポートが強力です。特に大規模なデータを扱う予定がなければ、MySQLで十分だと思います。」
筆者
「これで大体決まりそうです！でも、もし他におすすめがあれば教えてください。」
ChatGPT
「これから学習を進めるなら、以下も検討してみるといいですよ：
- Git/GitHub: コードのバージョン管理と共有に便利です。
- VSCode: コーディング用のエディタとして、拡張機能が豊富で便利です。
- Docker: 開発環境を簡単にセットアップし、管理するためのツールです。
この辺りを覚えていけば、さらに効率よく開発が進むと思います。応援しています！」
上記のような雰囲気で聞いたところかなり簡単に決めることができました！
個人的には質問に対する質問を簡単に返してくれるのがとてもよかったです！
まとめ！
ここまで読んでいただきありがとうございます！WEBアプリのことが全く分からない筆者でもChatGPTを使うことによって具体例を知りながら、初心者にしてはしっかりとした環境を選定することができたのではないでしょうか！
最後に飽き性の筆者がChatGPTに推しキャラの花火ちゃんの口調を真似させようとしたところを載せて今回は終わろうと思います！
次回はとりあえず形にしてみる編！またみてくれたらありがたいです！
