ホエールテック株式会社 ホエールテック株式会社

  • ブログ

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

初めてブログを書いております、ホエールテックの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. プロジェクトの概要
  2. 主要技術
  3. コマンド一覧
  4. ディレクトリ構成
  5. 開発環境構築方法
  6. その他特記事項

それでは、各項目について詳しく見ていきましょう。

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/1

2.主要技術

言語や、フレームワーク、バージョン情報など開発に関わる主要な技術について記載します。

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.js

READEME(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〜マークダウン記法編」

で、マークダウンの詳細な使い方について解説しますのでご興味がある方は是非公開までお待ちください。

onumaro
onumaro
もの作りバカ
「つくる」ことが大好き人間のonumaroです。
家具を作ったり、壊れたオーディオやプリンターを直したり、はたまた自宅では圧力鍋で料理作ったりと本当に作ってばっかりの「もの作りバカ」でございます。

趣味は読書(最近は全く読めてないですが)、
愛読書は「上杉鷹山」(灯火を分け与えるところがたまりません)です。

最近は技術動画や本を見漁ってばかりなので、
どなたか良い本があれば紹介してくれたら嬉しいです。
採用情報
お問い合わせ