知識ゼロからWEB開発までの道 vol.1 【環境構築とサンプル作成】

はじめに

生成AI界隈が盛り上がり、どんな人でもプログラムが書ける時代になりましたね。
プログラムや開発の知識がなくても、生成AIを使うことができればそれなりに形にすることも可能になりました。

この記事では、React知識ゼロの筆者が、Reactを用いたWEBサービスを開発するまでの手順を公開しています。
筆者のプログラミングスキルはPythonを高専教育で習得したレベルです。
特別な知識はありません。

作成したいアプリ

人手不足で忙しいのにアナログな受付をしている農家の知人のために、注文管理可能なWEBサービスを作成して業務削減してあげたいと考えています。

再現したい機能

• 共通
  • 認証
  • 注文の受付
  • 自分の注文情報・発送状況の確認
  • 基本情報の発信（金額、送料、営業時間 etc...）
• 管理側
  • 記事投稿
  • 全ての注文受付情報の閲覧
  • 注文の受付承認
  • 発送情報の管理

作りたいものを整理して図にしたい。。
が、そんなこと考えつつも、やる気がなくなる前に手を動かしてひとまず環境構築したいと思います。

開発環境の準備

使用する生成AIアプリ

今回の開発の相棒はChatGPT for macOSのデスクトップアプリです。
2024年11月14日に公開されたmacOS版のChatGPTアプリの新機能「Work with Apps」が使えそうだと思ったからです。

https://openai.com/chatgpt/desktop/

ベータ版ではありますが、指定したら他のアプリの中のコードを読んでくれるので、従来のようなコードを切って貼って質問する動作が必要なくなり開発効率があがりそうです。
早速開発に必要なツールやアプリ作成の方法から聞きます。

あなたは優秀なWEB開発のプログラマーです。
mac環境にReactを使用してWEBアプリを構築したいです。
下記事項について初心者にもわかるように丁寧に教えて下さい。
1. 必要なツールのインストール
2. macにReacのアプリを構築する際のコマンド
3. 構築したアプリのフォルダ構成

必要なツール

※以下ChatGPT4oの回答を引用

a. Node.js

Reactを使うには、Node.jsが必要です。
Node.jsにはJavaScriptの実行環境とパッケージ管理ツール（npm）が含まれています。

インストール手順:
1. Node.js公式サイト にアクセス。
2. **LTS（推奨版）**をダウンロードしてインストール。
3. ターミナルを開き、以下のコマンドでインストールを確認:

bash

node -v
npm -v

Node.jsとnpmのバージョンが表示されればOK！

b. Code Editor（推奨：Visual Studio Code）

アプリを効率よく開発するためのコードエディタです。

インストール手順:
1. Visual Studio Code公式サイト にアクセス。
2. ダウンロードしてインストール。

c. (任意) Git

バージョン管理ツールです。Macではデフォルトでインストールされている場合が多いです。
確認方法:

bash

git --version

もしインストールされていない場合は、Git公式サイトからインストールしてください。

Reactアプリを構築する際のコマンド

a. プロジェクト作成

1. ターミナルを開きます。
2. 作業したいフォルダに移動します（例: デスクトップ）。

bash

cd ~/Desktop

3. create-react-appを使ってReactアプリを作成します。

bash

npx create-react-app my-app

•npxはnpmと一緒にインストールされるツールで、一時的にパッケージをダウンロードして実行します。
•my-appはアプリのフォルダ名です。好きな名前に変更可能です。

b. 開発サーバーの起動

1. プロジェクトフォルダに移動します。

bash

cd my-app

2. 以下のコマンドで開発サーバーを起動:

bash

npm start

ブラウザが自動で開き、http://localhost:3000でアプリが表示されます。

構築したアプリのフォルダ構成

my-appフォルダの中身は以下のようになっています：

my-app/
├── node_modules/      # 必要なライブラリが自動的にインストールされるフォルダ
├── public/            # 公開用の静的ファイルを置く場所
│   ├── index.html     # アプリのエントリーポイント
│   └── favicon.ico    # ブラウザのタブに表示されるアイコン
├── src/               # アプリの主なソースコードを置く場所
│   ├── App.css        # AppコンポーネントのCSS
│   ├── App.js         # メインのReactコンポーネント
│   ├── index.js       # Reactアプリのエントリーポイント
│   └── logo.svg       # サンプル用のロゴ画像
├── .gitignore         # Gitで無視するファイルを指定
├── package.json       # プロジェクトの設定情報と依存ライブラリ
└── README.md          # プロジェクトの概要説明

次のステップ

1. src/App.jsを編集して、自分のアプリケーションをカスタマイズしましょう。
2. 他のライブラリを追加したい場合は、npm install ライブラリ名で追加可能です。

これでReactアプリの基本構築は完了です！

実際に環境を構築してみる

無事起動することができました。
ただの感性の話ですが、Reactってロゴも色使いもシンプルでカッコよくてアガります。

テンプレート作成してもらう

さて、続いてVisual Studio Codeで作成したプロジェクトのフォルダを開き、中身を編集します。
ChatGPTにWEBサイトのテンプレートを作成してもらい、それを元に修正しながら理想に近づけていきたいと思います。

my-farmというプロジェクトを作成しました。
このプロジェクトを編集してHPのサンプルを作成して下さい。
## 要件
1. ヘッダーにナビゲーションのバーをつけて固定する
2. ナビにはHome, Information, About, Order Formが存在し、押下することで各ページに遷移する

プロジェクト準備

※以下ChatGPT4oの回答を引用

React Routerのインストール

複数のページを実現するためにreact-router-domをインストールします。
ターミナルで以下のコマンドを実行：

bash

npm install react-router-dom

プロジェクト構成の編集

以下のようにフォルダ構成を調整します。

src/
├── components/
│   ├── Header.js       # ナビゲーションバーのコンポーネント
├── pages/
│   ├── Home.js         # Homeページ
│   ├── Information.js  # Informationページ
│   ├── About.js        # Aboutページ
│   ├── OrderForm.js    # Order Formページ
├── App.js              # ページ全体の構成
├── index.js            # エントリーポイント

コードの作成

1. Header.js (ナビゲーションバー)

src/components/Header.jsを作成：

Header.js

import React from "react";
import { Link } from "react-router-dom";
import "./Header.css";

const Header = () => {
  return (
    <header className="navbar">
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/information">Information</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/order-form">Order Form</Link></li>
        </ul>
      </nav>
    </header>
  );
};

export default Header;

2. CSS (ナビゲーションのスタイル)

src/components/Header.cssを作成：

Header.css

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #4CAF50;
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.navbar ul {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.navbar ul li {
  font-size: 18px;
}

.navbar ul li a {
  text-decoration: none;
  color: white;
  font-weight: bold;
}

.navbar ul li a:hover {
  text-decoration: underline;
}

3. 各ページ

以下をsrc/pagesフォルダに作成。

Home.js

import React from "react";

const Home = () => {
  return <h1>Welcome to My Farm!</h1>;
};

export default Home;

Information.js

import React from "react";

const Information = () => {
  return <h1>Farm Information</h1>;
};

export default Information;

About.js

import React from "react";

const About = () => {
  return <h1>About Our Farm</h1>;
};

export default About;

OrderForm.js

import React from "react";

const OrderForm = () => {
  return <h1>Order Your Products Here</h1>;
};

export default OrderForm;

4. App.js

src/App.jsを編集：

App.js

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Header from "./components/Header";
import Home from "./pages/Home";
import Information from "./pages/Information";
import About from "./pages/About";
import OrderForm from "./pages/OrderForm";

const App = () => {
  return (
    <Router>
      <Header />
      <div style={{ paddingTop: "60px" }}>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/information" element={<Information />} />
          <Route path="/about" element={<About />} />
          <Route path="/order-form" element={<OrderForm />} />
        </Routes>
      </div>
    </Router>
  );
};

export default App;

各フォルダとコンポーネントはコマンドで作成できます。

フォルダ作成

bash

cd src
mkdir components pages

コンポーネント作成(例：components/Header.js)

bash

cd src/components
touch Header.js

or

bash

cd src
touch components/Header.js

実装

指示通り実行するとこのようになります。
Home画面

Information画面

About画面

OrderForm画面

最後に

何か作りたいが技術力がない。
アイデアはあるが形にする方法がわからない。
私も最近までこんな状態でした。
最近の生成AIの成長は凄まじく、ツールを使い分ければ24時間年中無休でどの分野も対応可能な専属教師がいるようなものです。
作りたいものが言語化できれば、知識がなくてモノにすることができます。
コードの意味も聞けば答えてくれますし、偏りはあれど生成と同時にある程度の知識をつけることも可能だと思います。
生成AIの力だけでどこまで実現可能か、見ものです。
次回に続きます。