Railsアプリケーションの作成+土台作りまで(これから1つのアプリを作ります1/10)

Railsアプリケーションの作成と、最初の土台作りについての記事です。
下記順序で行っていきます。

* Railsアプリケーションの作成
* プラグイン
* ホストの制限
* bootstrapの導入
* FontAwesomeの導入
* GitHubで管理できるようにする


## Railsアプリケーションの作成

Cloud9のターミナルで下記コマンドを実行します。
アプリ名の部分には自分で考えたアプリの名前を書きます。
```
rails new アプリ名
```
完了まで1分ほどかかります。
完了後、先ほどのアプリケーション名のディレクトリが左のサイドバーに作成されます。


## プラグイン


下記コマンドで、作ったディレクトリに移ります。

```
cd アプリ名
```
下記コマンドを実行します。
これがプラグインです。
これをしないとrails sでサーバーを立ち上げるときにエラーが起きます。
```
yarn add @babel/plugin-proposal-private-methods @babel/plugin-proposal-private-property-in-object
```

## ホストの制限

次に下記コマンドでサーバーを立ち上げます。
```
rails s
```

立ち上がったWEBアプリケーションを見るとエラー画面になっています。

このエラー画面は、
「〇〇というホスト(自分)がブロックされたから見ることができないよ。見るためには環境設定に以下を追加してね」

ということが書いています。

ですので、エラー画面の一番下の行をコピーし、これを環境設定に張り付ければ、サーバーを立ち上げられるようになります。

張り付ける場所ですが、まずconfigディレクトリを開きます。
その中のenvironments(環境)ディレクトリを開きます。

さらにその中のdevelopment.rbを開きます。
開くと文字がたくさん書いてあるページが出てきます。

そのページに先ほどコピーしたURLを張り付けます。
※endより上に書きましょう。

これで自分のみがこのアプリケーションを見ることができるようになりました。

他の人の環境でも見られるようにするには自分のURLではなく下記を記述すると、見ようと思った全員が見られるようになります。
```
config.hosts.clear
```
状況に応じて使い分けましょう。

張り付け終わりましたらターミナルに戻り、いったんサーバーを閉じます。(キーボードのCtrlボタンとCを同時に押す。)

再びrails sコマンドでサーバーを立ち上げてみると、Yay!You're on Rails!という画面になっていると思います。これでホスト制限の設定は完了です。
次の作業で、またターミナルを使うので、サーバーを閉じておきましょう。

## bootstrapの導入

アプリのレイアウトをCSSのみで行う予定の場合はこの導入は必要ありませんが、bootstrapを使う予定であればこの段階で導入しておきましょう。

導入方法は主に3パターンありますが、今回はyarnでインストールしていきます。

※yarnとはJavaScriptのパッケージ管理ツールで、Rubyのパッケージ管理ツールであるGemと似たようなものです。

今回の場合は、下記の目的で使用します。
・yarnは、railsにない機能であるbootstrapをインストールするために行う
・インストールしたbootstrapを使えるようにするためにJavaScriptのファイルに書く



それでは、下記コマンドを実行し、yarnでbootstrapをインストールします。
```
yarn add jquery bootstrap@4.6.2 popper.js
```

次にconfigディレクトリ内のwebpackを開き、その中のenvironment.jsを開きます。

開いた画面に下記を張り付けます。
```
const webpack = require('webpack')
environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    Popper: 'popper.js'
  })
)
```

次に、appディレクトリ内のjavascriptの配下にstylesheetsディレクトリを作成します。
※作成方法
javascriptディレクトリを右クリックしてNew folderをクリックすると、新しいディレクトリを作成できますので、名前をstylesheetsに変更します。

次に、作成したstylesheets配下にapplication.scssファイルを作成します。
※作成方法
stylesheetsを右クリックしてNew fileをクリックすると、新しいファイルができますので、名前をapplication.scssに変更します。

次に、作成したapplication.scssファイル内に下記を記述します。
```
@use '~bootstrap/scss/bootstrap';
```

次にappディレクトリ内のjavascriptを開き、その中のpacksを開き、その中のapplication.jsを開きます。開いた画面の9行目の下にスペースを空けて下記を追記します。

```
import "jquery";
import "popper.js";
import "bootstrap";
import "../stylesheets/application"; 
```

次にappディレクトリ内のviewsを開き、layoutsを開きapplication.html.erbを開きます。
9行目のlinkをpackに変更します。

```
変更前
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
```
```
変更後
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
```
以上でbootstrapの導入が終わり、使用できるようになりました。

※bootstrapの機能以外のレイアウトにする場合は、CSSも併せて使うのですが、その時にCSSを記述するファイルは、先ほど作ったapplication.scssファイルです。


## FontAwesomeの導入
デザインの調整の中でFontAwesomeを使用する場面がある場合は、こちらも導入しておきましょう。
※FontAwesomeに登録していて、KitCodeがある前提です。

FontAwesomeにログインし、自身のKitCodeをコピーしましょう。

appディレクトリ内のviewsを開きlayoutsを開き、application.html.erbを開きます。
開いた画面のstylesheet_pack_tagの上に、コピーした自身のKitCodeを張り付けます。

```
※xxxxxの部分はご自身のKitCodeのIDが入ります。
<script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script>
<%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
```

これでFontAwesomeの導入は終わりです。




## GitHubで管理できるようにする

最後に、作ったrailsアプリケーションをGitHubで管理(保存)できるように設定します。


※git initコマンドで、gitディレクトリを作る
(rails newでアプリを作った場合、これはすでに出来ているので省略)

※ls -aコマンドでgitディレクトリがあることを確認できます。

※touch README.md　を実行して、アプリの説明を記述するREADMEファイルを作る。(rails newでアプリを作った場合、これはすでに出来ているので省略)

これでcloud9上の準備ができました。

次にGitHubにログインし、右上の方にある+ボタンを押します。

New repositoryをクリック。

Repository nameを入力します。
※cloud9で作ったアプリ名と同じ名前にするとわかりやすいです。

create repositoryと書かれた緑のボタンを押します。

これで、アプリを保存するためのリモートリポジトリができました。

表示された画面の中央あたりにgit@から始まる、今作ったリモートリポジトリのURLが表示されています。それをコピーします。

※URLの左横にHTTPS　SSHと書かれてますが、SSHを選択しているのを確認してからコピーしてください。

ターミナルに戻り、下記を実行します。
originの後にスペースを空けて、リポジトリURLの部分にコピーしたURLを張り付けてください。
```
git remote add origin リポジトリURL
```

これでアプリと、GitHubで作成したリモートリポジトリが紐づきました。

git remote -vコマンドで、ちゃんと紐付けできているか確認できます。
下記の様に、自分の作ったリポジトリ名が出てきたら成功です。
```
origin    git@github.com:ユーザ名/リモートリポジトリ名 (fetch)
origin    git@github.com:ユーザ名/リモートリポジトリ名(push)
```

#### 補足
変更箇所をちょくちょく保存しましょう。

私はアプリの土台作りが終わったタイミングで、いったんaddとcommitとpushをターミナルでします。
```
git add .
```
```
git commit -m "[add]〇〇アプリケーション作成。プラグイン・ホスト制限・bootstrap導入・FontAwesome導入・リモートリポジトリとの紐づけをしました"
```
```
git push origin main(ブランチはご自身が作業しているブランチ名を書いてください)
```

## 終わり
以上で、railsアプリケーション作成と土台作りは完了です。
他にも、ご自身が使う予定のものがあれば、初めに導入しておくとスムーズに開発が進むと思います。

この記事をはじめとし、１つのアプリケーションを作るまでの過程を今後記事にしていきます。
参考にしていただければ幸いです。

ありがとうございました。