入社2日目とりあえず2ch掲示板を作成してみる

Last updated at 2025-01-07Posted at 2025-01-07

今までとこれから

ちょうど1年前だろうか。
HTML、CSS、PHP、C、MariaDBを少しずつ勉強していた。

紆余曲折あり1年の時を経てエンジニアの世界に入門。
アウトプットが大事だということでとりあえず書いていく。

まずは掲示板の制作を通して定義から実装までチャレンジしていく。

学習方法はchatGPTと一緒に

ほぼ答えをくれるらしいがよくわかっていない。
出力されたものが合ってるのかすらわからないレベル。
GPTにわからないことを聞きながら進めていく。

2ch風掲示板を作成するにあたって用意するもの

どうやって進めれば良いんだろう。
それすらわからない状況。

とりあえずAIに聞いた。

目標の整理

まずはシステムの全体像をイメージして、必要な機能をリストアップします。例えば：
- スレッドの作成・一覧表示
- スレッドへの投稿機能
- 投稿の編集・削除（ログイン機能が必要なら検討）
- 簡易的なデザイン（CSSやBootstrapを使用）
環境構築
- Laravelをインストール
- PHPとComposerをインストール
- プロジェクトの作成
  　Mac環境でLaravelを動かすために、必要な開発環境を整えます。
データベースの設計
- threads（スレッド情報）
  - id（スレッドID）
  - title（スレッドタイトル）
  - created_at（作成日時）
  - updated_at（更新日時）
  - posts（投稿情報）
- posts（投稿情報）
  - id（投稿ID）
  - thread_id（スレッドIDへの参照）
  - content（投稿内容）
  - created_at（作成日時）
  - updated_at（更新日時）
Laravelのモデル・マイグレーション作成
基本機能の実装
デザイン追加
ローカル環境でのテスト
サーバーにアップロード

の順序で制作していくそう。
せっかくなので開発を依頼されたときに進めていく方法を確認してそれ通りに進めていこうと考えた。

実際の開発プロセスを疑似体験できるように解説をお願いした。

要件定義

要件定義は、クライアントが求めている機能やサービスを明確にするフェーズです。

例：掲示板システムの要件
• 目的
• ユーザーが自由にスレッドを作成し、投稿を行えるコミュニケーションの場を提供。
• 主要な機能要件
1. ユーザーがスレッドを作成できる。
2. スレッド一覧を表示する。
3. スレッド内に投稿できる。
4. 投稿を削除または編集できる（管理者のみ可能）。
5. 管理者機能（投稿・スレッドの管理、削除など）。
• 非機能要件
• シンプルで直感的なインターフェース。
• PCとスマートフォンに対応したレスポンシブデザイン。
• 一度に表示される投稿数は最大50件。
• ページ読み込み時間は3秒以内。

2. 基本設計

基本設計は、要件定義をもとに、システム全体の構造を設計するフェーズです。データの流れや主要な技術、画面構成などを決定します。

① システム構成
• フロントエンド: HTML, CSS（Bootstrap）, JavaScript
• バックエンド: Laravel（PHPフレームワーク）
• データベース: MySQL
• 開発環境: ローカル（Mac）、後に本番環境へデプロイ
• サーバー: 初期は共有レンタルサーバーを想定
2. 基本設計

基本設計は、要件定義をもとに、システム全体の構造を設計するフェーズです。データの流れや主要な技術、画面構成などを決定します。

① システム構成
• フロントエンド: HTML, CSS（Bootstrap）, JavaScript
• バックエンド: Laravel（PHPフレームワーク）
• データベース: MySQL
• 開発環境: ローカル（Mac）、後に本番環境へデプロイ
• サーバー: 初期は共有レンタルサーバーを想定

② データベース設計

掲示板システム用に最低限必要なテーブル設計を行います。
1.threads（スレッド）

カラム名	型	必須	説明
id	BIGINT	○	主キー
title	VARCHAR(255)	○	スレッドタイトル
created_at	TIMESTAMP	○	作成日時
updated_at	TIMESTAMP	○	更新日時

2.posts（投稿）

カラム名	型	必須	説明
id	BIGINT	○	主キー
thread_id	BIGINT	○	スレッドへの参照
content	TEXT	○	投稿内容
created_at	TIMESTAMP	○	作成日時
updated_at	TIMESTAMP	○	更新日時

3.users（ユーザー）（ログイン機能を追加する場合）

カラム名	型	必須	説明
id	BIGINT	○	主キー
username	VARCHAR(50)	○	ユーザー名
email	VARCHAR(255)	○	メールアドレス
password	VARCHAR(255)	○	ハッシュ化されたパスワード

③ 画面設計

各画面の構成と機能を定義します。
1. トップページ
• 表示内容: スレッド一覧（タイトル、作成日時）
• 機能: スレッド作成リンク
2. スレッド詳細ページ
• 表示内容: スレッドタイトル、投稿一覧（投稿内容、投稿日時）
• 機能: 投稿フォーム、投稿削除（管理者）
3. スレッド作成ページ
• 表示内容: スレッドタイトル入力フォーム
• 機能: スレッド作成ボタン
4. 管理画面（オプション）
• 機能: スレッド削除、投稿削除、管理者ログイン

④ フロー設計

システム全体の流れを簡単にまとめます。
1. ユーザーがトップページにアクセス → スレッド一覧表示。
2. スレッドタイトルをクリック → スレッド詳細ページに遷移。
3. 3. 投稿内容を入力し「送信」ボタンをクリック → データベースに保存。
4. 管理者が管理画面から不要な投稿を削除。

⑤ 使用技術の決定
• LaravelのBladeテンプレートで動的なHTML生成。
• Bootstrapでレスポンシブデザインを実装。
• LaravelのEloquent ORMでデータベース操作を簡略化。
• PHPUnitで基本的なテストを実装。

次のステップ
1. 要件定義と基本設計をもとに、マイグレーションや基本機能の実装を開始。
2. 進行中の課題や疑問をリストアップし、解決を学習に取り入れる。

こうした流れを意識すると、クライアントから依頼された場合の開発に近い形で学習できます。具体的な質問や進捗について相談があれば、ぜひ教えてください！

知らない言葉もあるが大枠を確認することができた。
現状フレームワークもライブラリと一緒だろうな〜といった認識である。
進めていく中でワードが出たタイミングで少しずつでも解消していこうと思う。
スタンス的にはなんとなく理解で進める。
わからないものはこういうものだという形で一旦そのまま進める。

学生時代は納得するまで進めなかったが、大人になったら割り切りはできるようになってきた。

1.環境構築

次のステップに進みたい旨をGPTに伝え進める。

① 必要なツールのインストール

Mac で Laravel を使用するために、以下のツールをインストールします。
1. Homebrew（Macのパッケージ管理ツール）

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

いきなりbashが出てきて焦った。
なんとなくターミナルだよな〜とは思っていたが、
今の時代GUIベースで進んでいくと思ったので少しドキドキする。

bashというのは、開発者がパソコンに命令を伝えるためのガイドさんのようなイメージだ。
bashさん -c 以下に続く文字列はコマンドだから実行してくれ！
って感じなのかな

進めていく

2.PHP

brew install php

インストール確認：

php -v

3.Composer（PHPパッケージ管理ツール）

brew install composer

インストール確認：

composer --version

4.MySQL

brew install mysql
brew services start mysql

パスワードなしでログイン確認：

mysql -u root

ユーザーのUかな
作業していたときはわからなかった。
PHPはVSコードでインストールしているから重複するんじゃない？
と思っていた。
復習しながらわかったことはbrewのパッケージの中に環境を構築していっているってことだ。

② Laravelのインストール

1.	Laravel インストーラーのグローバルインストール

composer global require laravel/installer

インストール確認：

laravel --version

2.新しいプロジェクトの作成
プロジェクト名は自由に決めてください。ここでは bulletin-board とします。

laravel new bulletin-board
cd bulletin-board

プロジェクト名を決めて。cdでそのディレクトリに移動

3.プロジェクトの起動
開発用サーバーを起動します：

php artisan serve

ブラウザで http://localhost:8000 を開き、Laravelの初期画面が表示されることを確認してください。

Laravelの挨拶文が出てきて正常に動作していることが確認できた。

③ .envファイルの設定

1.プロジェクトのルートディレクトリにある .env ファイルを編集します。
例えば、MySQLを利用する場合：

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=bulletin_board
DB_USERNAME=root
DB_PASSWORD=（必要なら入力）

いきなりここで置いていかれたが
大大先輩がその時見ていてくれてbulletin_boardフォルダが作成されているのを教えてくれた。
このときも点での作業が線になった気分がしていた。

2.MySQLでデータベースを作成します。

mysql -u root -e "CREATE DATABASE bulletin_board;"

-u root 管理者で入るよー　
-e 以下のSQL文を実行してくれ〜

3.設定を反映：

php artisan config:cache

artisan　Laravelのコマンド使うぞ〜
configの設定をキャッシュファイルに保存するぞ。

④ 必要な初期設定

1.Laravel UIとBootstrapのインストール（デザイン用）
Laravelのフロントエンドをセットアップする場合：

composer require laravel/ui
php artisan ui bootstrap
npm install && npm run dev

composer で新しくlaravel/uiをインストールするよ
LaravelのphpUIに関するフロントエンドテンプレートBootstrapを入れるよ。

npmをインストールすることで、フロントエンド関連のツール（Webpack、Bootstrap、jQuery）が使用できるようになる。
ちょっと理解が浅いがJSを稼働させるために必要な処理ということだ。

2.マイグレーションの実行

php artisan migrate

マイグレーションファイルというのが初めて耳にした。
コードでDBの構造を管理するものという認識になる。
更新したり戻したり色々とできるみたいだ。
普通にSQL文を保存している感じで捉えている。

2.掲示板システムの開発準備

① モデルとマイグレーションの作成

掲示板のスレッドと投稿用のモデル・マイグレーションを作成します。

php artisan make:model Thread -m
php artisan make:model Post -m

-mをつけるとマイグレーションファイルも一緒に作ってくれるみたいだ。

app/Models/ に対してファイルを作成。

今日はここまで明日以降はこの続きの作業を行っていく。
Qiitaで復習することによって鳥瞰できるので点がつながる感覚がある。
時間はかかるが良いな。

頑張れ私

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up