- ブログ
マークダウン記法を使って、分かりやすく重宝されるREADMEを作成しよう・その1〜README編
2024.07.05 Fri

初めてブログを書いております、ホエールテックのonumaroです。最近の私は、丁寧かつ、妥協のない先輩エンジニアたちに囲まれ、複数の案件にアサインしていただきつつ、日々業務を楽しんでおります。
これまでの私が担当したプロジェクトは、複数人がチームとなって、プロジェクトを遂行するパターンが多く、その際に、そのプロジェクトに最初から関わっていれば、開発ルールなど全容を把握できているわけですが、途中参加や一時参加となる場合は、状況のキャッチアップからスタートします。
そんな時に頼りになるのが、新規参入者の手引き書=README!効率的なキャッチアップの一助になるようなREADMEの構成や書き方を考えてみたいと思います。
題して、
「マークダウン記法を使って、分かりやすく重宝されるREADMEを作成しよう・その1〜README編」
目次
1. READMEとは
2.READMEを書く目的とは
3.READMEに書いておきたい項目
4.READMEまとめ(今回はここまで)
5.マークダウンとは(次回マークダウン記法を使って、分かりやすく重宝されるREADMEを作成しよう・その2〜マークダウン記法編にて公開)
6.マークダウンの書き方一覧(次回マークダウン記法を使って、分かりやすく重宝されるREADMEを作成しよう・その2〜マークダウン記法編にて公開)
1.READMEとは
READMEはプロジェクトの概要や環境構築手順など、プロジェクトに必要な情報を一通り記載しているファイルです。今回は、GitHubなどで使用されるREADMEについて解説していきます。
2.READMEを書く目的とは
READMEを書くことで、新しいメンバーがプロジェクトに参加する際に、プロジェクトの概要や必要なドキュメントのリンクをすぐに理解できます。これにより、コミュニケーションコストを削減できます。
また、環境構築の手順も記載することで、技術レベルに依存せずに誰でも開発環境を構築できるようになります。
3.READMEに書いておきたい項目
以下はREADMEに記載すると便利な項目です。
- プロジェクトの概要
- 主要技術
- コマンド一覧
- ディレクトリ構成
- 開発環境構築方法
- その他特記事項
それでは、各項目について詳しく見ていきましょう。
1.プロジェクトの概要
プロジェクト名、プロジェクトの概要、プロジェクトの詳細が記載された資料のリンクなどを記載します。READMEはプロジェクトの概要と開発環境の構築方法を知るための資料の位置付けなので、プロジェクトの詳細を知りたい場合は、Backlogなどのプロジェクト管理ツールを参照するように運用していきましょう。
READEME(GitHub)

マークダウン記法
## 1.プロジェクトの概要
#### 1. プロジェクト名
README プロジェクト
#### プロジェクトの目的
分かりやすい README の作成方法をマークダウン記法お伝えするプロジェクト
#### プロジェクト体制
- 開発メンバー:5 名
- プロジェクトリーダー:onumaro
- バックエンド担当:onumaro
- フロントエンド担当:onumaro
- 開発設計担当:onumaro
- デザイン:onumaro
- その他付随する業務:onumaro
#### プロジェクト行程
- 開発開始日:2024/1/1
- リリース予定日:2024/7/1
- 要件定義:~20242/1
- 基本設計:~2024/3/1
- 詳細設計:~2024/4/1
- 開発担当:~2024/5/1
- 結合テスト:~2024/6/1
- リリース:~2024/7/12.主要技術
言語や、フレームワーク、バージョン情報など開発に関わる主要な技術について記載します。
READEME(GitHub)

マークダウン記法
## 2.主要技術
| 言語・フレームワーク | バージョン |
| -------------------- | ---------- |
| nginx | 1.25 |
| MySQL | 8.0.33 |
| phpmyadmin | latest |
| Laravel | 10.48.14 |
| Docker | 26.1.4, |
3.コマンド一覧
コマンドは一部の人しか知らないこともあるためブラックボックス化を避けるために、
プロジェクトで使用するコマンドと実行する処理内容を記載した一覧を作成します。
READEME(GitHub)

マークダウン記法
## 3.コマンド一覧
| コマンド | 実行する処理 |
| ------------------------------------------------------ | ------------------------------------|
| docker-compose down | Docker の停止 |
| docker-compose up --build | Docker の build+起動 |
| docker compose exec coteiner_naem php artisan migrate | Docker コンテナに入り migrate を実行 |
| docker volume rm $(docker volume ls -qf dangling=true) | データボリュームの削除 |
| docker builder prune --all --force | Docker 全てのキャッシュの削除 |
| docker-compose down | Docker の停止 | |4.ディレクトリ構成
ディレクトリ構成を記載します。
ディレクトリ構成は下記のコマンドて出力することができるため、出力したディレクトリ構成コピーしをREADMEに貼り付けます。
コマンド
## treeのインストール
sudo apt install tree
## tree実行
tree
## tree実行結果
.
└── laravel
├── README.md
├── composer.json
├── composer.lock
├── docker-compose.yml
├── package-lock.json
├── package.json
├── phpunit.xml
├── public
│ ├── favicon.ico
│ ├── index.php
│ └── robots.txt
└── vite.config.jsREADEME(GitHub)

マークダウン記法
## 4.ディレクトリ構成
```
.
└── laravel
├── README.md
├── composer.json
├── composer.lock
├── docker-compose.yml
├── package-lock.json
├── package.json
├── phpunit.xml
├── public
│ ├── favicon.ico
│ ├── index.php
│ └── robots.txt
└── vite.config.js
```5.開発環境構築方法
開発環境の構築方法を記載します。
※あくまでREADMEの説明のために記載している内容ですので、開発環境構築はご自身の環境に合わせて行うようにしてください
READEME(GitHub)

マークダウン記法
## 5.開発環境構築方法
#### 1. Docker と Docker Compose のインストール
Docker と Docker Compose をインストールしてください。インストール方法は公式ドキュメントを参照してください。
#### 2. Laravel プロジェクトの準備
Laravel プロジェクトを作成
```
docker-compose run --rm composer create-project --prefer-dist laravel/laravel
```
#### 3. Docker Compose ファイルの設定
```
version: '3'
services:
app:
image: php:8.0-fpm
container_name: laravel-app
volumes:
- .:/var/www/html
networks:
- laravel
depends_on:
- db
db:
image: mysql:5.7
container_name: laravel-db
environment:
MYSQL_DATABASE: laravel
MYSQL_ROOT_PASSWORD: secret
MYSQL_USER: laravel
MYSQL_PASSWORD: secret
networks:
- laravel
web:
image: nginx:alpine
container_name: laravel-web
volumes:
- ./docker/nginx/conf.d:/etc/nginx/conf.d
- .:/var/www/html
ports:
- "8080:80"
networks:
- laravel
depends_on:
- app
phpmyadmin:
image: phpmyadmin/phpmyadmin
container_name: laravel-phpmyadmin
environment:
PMA_HOST: db
MYSQL_ROOT_PASSWORD: secret
ports:
- "8081:80"
networks:
- laravel
depends_on:
- db
networks:
laravel:
driver: bridge
```
#### 4.Nginx の設定
./docker/nginx/conf.d/default.conf を作成し、以下の内容を追加します。
```
server {
listen 80;
server_name localhost;
root /var/www/html/public;
index index.php index.html index.htm;
location / {
try_files $uri $uri/ /index.php?$query_string;
}
location ~ \.php$ {
include fastcgi_params;
fastcgi_pass app:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
fastcgi_param PATH_INFO $fastcgi_path_info;
}
error_log /var/log/nginx/error.log;
access_log /var/log/nginx/access.log;
}
```
#### 5.コンテナの起動
Laravel アプリケーション、MySQL、Nginx、PHPMyAdmin が起動させる。
```
docker-compose up -d
```
6.その他特記事項
その他にチームメンバーに伝えておきたいことや、異常発生時の対処方法など記載。
READEME(GitHub)

マークダウン記法
## 6.その他特記事項
### mysql の PORT の競合発生時の対処法
#### 1. Doker 停止
```
docker-compose down
```
#### 2. ポートの占有を確認
```
sudo lsof -i :3306
```
#### 3. ポートを解放
```
sudo kill -9 <PID>
```
#### 4. 再起動
```
docker-compose up --build
4.READMEまとめ(今回はここまで)
完成系はこちら(長いので見えずらく申し訳ございません)。
READEME(GitHub)

今回は以上となりますが、いかがでしたでしょうか。
分かりずらかったREADMEも、
少しの工夫と構成で分かりやすさが変わります。
今回はRADMEの構成と、最低限のマークダウン記法をご紹介しましたが、
次回はマークダウン記法に焦点を当てた、
「マークダウン記法を使って、分かりやすく重宝されるREADMEを作成しよう・その2〜マークダウン記法編」
で、マークダウンの詳細な使い方について解説しますのでご興味がある方は是非公開までお待ちください。