Railsを使った新規プロジェクトの始め方


# はじめに
新米エンジニアの@richsan60です。

これからは**オウンドメディア**を通じた集客や営業も必要と感じ
私の会社でもオウンドメディアの運用を始める運びとなりました。

~~・・・正確には上司から「オウンドメディアで案件取ってこい」という上司の無茶振りがあry~~

そこで、いくつか記事を作成し、それを通してオウンドメディアを育てて行こうと考え、
まずはその第一歩として最近学んでいる**Rails**を用いて記事をいくつか作ることにしました。

記事作成を通じて学んだことや参考にさせていただいた情報をこちらで紹介していきます。


では早速本題へ

今回は**メモ帳アプリ**の作成を行います。

# プロジェクトの新規作成

## 1. 設計

まずは、どんなアプリやサービスを作りたいのかをまとめ、ドキュメント（紙でも画面でも、図や文章）に落としこみます。
私は過去にこの工程を飛ばしていきなり実装し始めたところ、ロジックミスが発生し、その修正に最初からアプリを作り直すくらい時間がかかったことがあります。
設計にしっかり時間を確保した方が後々の無駄な工数を減らすことにつながると学びました。。。

手間はかかりますが、クラス図、画面遷移図、使用する単語（英語訳）を作成することで
頭の中で描いたイメージを整理できますし、それによって考慮できていないロジックに気づくこともあります。

### クラス図

クラス図とは、**システムを構成するクラスとそれらの関係**を表現します。
シンプルなアプリであってもまずはクラス図を作成し、機能や関係を整理することでスムーズな作成につながります。

クラス図に関しての説明はこちらのサイトが分かりやすく、オススメです。
https://cacoo.com/ja/blog/how-to-write-class-diagram/

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341123/bf1cee81-4072-6ebb-29b8-57bddb84c458.png)

### 画面遷移図
画面遷移図は**アプリの操作の流れ**を見える形にしたものです。
画面遷移図を作成することによって、各ページの関係性と機能を明確化することが出来、
抜け漏れの防止につながります。
※下記のような手書きでも何でも良いので、書くことで整理できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341123/348cf792-a0ad-fe8a-9b3f-846f727d132f.png)

書いてみるとわかるのですが、シンプルな機能しか実装しないアプリでも意外と画面数は多くなります。

### 用語の整理

Railsに限らず、アプリを実装する際には使用する用語を整理しておくことで実装中に類似語との混同を未然に防ぐことが出来ます。
整理するのは以下の項目です。

* 使用用語の洗い出し
* 使用用語の英語訳
* 型の設定

作者はスプレッドシートを使用して以下のように整理していました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341123/42f6e050-a8e8-7e01-884a-b98966a2655e.png)


## 2.プロジェクトの作成
ここまで出来たらプロジェクトを作成していきます。
新いプロジェクトを立ち上げるだけであればRailsはすぐに作成が可能です。

アプリを開発していくためのディレクトリに移動します

```
$ cd [アプリを作成するディレクトリ]

ex)
$ cd workspases

もし、上記ディレクトリがない場合は
$ mkdir [アプリを作成するディレクトリ]
でアプリを作成するためのディレクトリを作成してそこに移動します。
```

### 新規プロジェクトの作成
Railsには**ジェネレータ**という多数のスクリプトが付属しており、これらが特定のタスクを開始するために必要なものを自動的に作成してくれるため、開発が他の言語と比較してとても容易になります。

下記コマンドを入力して新しいアプリを作成します。

```
$ rails new [アプリ名]

ex)
$ rails new notepad
```
これにより、[アプリ名]という名前のアプリケーションがディレクトリに作成され、Gemfile というファイルで指定されているgemファイルがbundleコマンドによってインストールされます。

作成したプロジェクトへ移動するとそのディレクトリの下には多数のファイルやフォルダが生成されており、これらがRailsアプリケーションを構成しています。
それぞれのファイルやフォルダに関しては以下のサイトで詳しく説明が入っています。
https://qiita.com/len_crow/items/7127b31d68197983de87

上記の流れで作成すると、ディレクトリは以下のように仕上がっていきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341123/9f1b5cbd-0645-bb87-2813-e9cc0ab49f74.png)


```
$ cd [アプリ名]

ex)
$ cd notepad
```


### bundlerのインストール
**Bundleはgemの依存関係とバージョンを管理するためのツール**で、bundleをインストールすることによって、
バージョン管理がとても容易になります。
以下コマンドにてインストールします。

```
$ bundle install
```

### サーバーの起動
railsのサーバーを起動してアプリケーションが動くかを確認します。
以下のコマンドを入力してサーバーを起動します。

```
$ rails server

下記コマンドでもサーバーの起動は可能です。
$ rails s
```
「$　rails server」 で無事サーバーが起動されるとターミナルに以下のログが表示されます。

```
=> Booting Puma
=> Rails 6.0.3.2 application starting in development 
=> Run `rails server --help` for more startup options
Puma starting in single mode...
* Version 4.3.5 (ruby 2.7.1-p83), codename: Mysterious Traveller
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://127.0.0.1:3000
* Listening on tcp://[::1]:3000
Use Ctrl-C to stop
```

上記コマンドを実行した際に、裏で何が行われているかは以下の記事で詳しく説明の記載があります。
https://qiita.com/kamohicokamo/items/3ec26ccb8e16b8ba9adb

サーバーを起動したら http://localhost:3000/ にアクセスして動作確認を行います。
以下のような画面が表示されれば無事新しいプロジェクトは作成は完了です！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341123/cb073a27-9ea1-5af8-b456-a087597f268e.png)



サーバーが起動された状態で 「 http://localhost:3000/ 」 にアクセスするとターミナルには以下のログが表示されます。

```
Started GET "/" for ::1 at 2020-07-14 16:47:17 +0900
   (2.7ms)  SELECT sqlite_version(*)
Processing by Rails::WelcomeController#index as HTML
  Rendering /Users/[ユーザー名]/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/gems/railties-6.0.3.2/lib/rails/templates/rails/welcome/index.html.erb
  Rendered /Users/[ユーザー名]/.rbenv/versions/2.7.1/lib/ruby/gems/2.7.0/gems/railties-6.0.3.2/lib/rails/templates/rails/welcome/index.html.erb (Duration: 16.0ms | Allocations: 295)
Completed 200 OK in 28ms (Views: 18.8ms | ActiveRecord: 0.0ms | Allocations: 1737)
```
これでプロジェクトを新規作成することができました。
次回、メモ帳機能を実装していきます。