instagramのクローンアプリを作る①

##はじめに
タイトルの通り、簡易版instagramのアプリを作っていきます。
下記の工程に分けて記事を執筆していきますので、順を追って読んでいただけたらなと思います。

①[アプリ作成〜ログイン機能の実装](https://qiita.com/maca12vel/items/d1d558dbf55a82b98990)　←イマココ
②[写真投稿機能の実装](https://qiita.com/maca12vel/items/592c78d435a8d950c434)
③[ユーザーページの実装]
(https://qiita.com/maca12vel/items/c716702b02f977303011)
④[フォロー機能の実装]
(https://qiita.com/maca12vel/items/2760d33f3683fac91de5)
⑤投稿削除機能の実装

##まずはアプリケーションを作成
ターミナルを開いて下記コマンドを打ち込みます。
データベースはmysqlを使用していきますので、
オプションで**「 -d mysql 」**としています。

```:ターミナル
rails new instaclone -d mysql
```

作成できたらエディターを立ち上げて、「 datebase.yml 」を編集します。
``encoding``を``utf8``に修正します。

```datebase.yml
default: &default
  adapter: mysql2
  encoding: utf8  # ←修正箇所
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: root
  password:
  socket: /tmp/mysql.sock
```

修正できたらターミナルに戻り、``instaclone``のディレクトリに移動してから
``rails db:create``を実行します。

```:ターミナル
instaclone % rails db:create
```

下準備が整いましたので、次からログイン機能の実装を行います。

##deviseの導入
deviseとは...
Railsで作成したアプリケーションに、
簡単に認証機能を実装することができるgemのひとつです。
ログイン、サインアップなどのログイン機能が作成出来ます。

Gemfileに下記のgemを追加します。（最下部）
その後、ターミナルで``bundle install``を行います。

```:Gemfile
gem 'devise'
```

```:ターミナル
instaclone % bundle install
```
gemの追加が完了したら、deviseの設定ファイルを作成します。

```:ターミナル
instaclone % rails g devise:install
```

続いて、Userモデルを作成します。

```:ターミナル
instaclone % rails g devise User
```

マイグレーションファイルも作成されるので
``rails db:migrate``を実行します。

```:ターミナル
instaclone % rails db:migrate
```

これでログイン機能はできたので、確認用にホーム画面を作ります。
ターミナルで下記コマンドを実行し、ホーム画面用のコントローラを作成します。


```:ターミナル
instaclone % rails g controller homes
```

作成できたら、``homes_controller``にindexメソッドを追加し、
``routes.rb``にルートの設定を記述します。

```homes_controller.rb
class HomesController < ApplicationController
  def index
  end
end
```

```routes.rb
Rails.application.routes.draw do
  root 'homes#index' # ←ここ
  devise_for :users
end
```

先ほどコントーローラを作成した時に、一緒にviewファイルも作成されています。
場所は``app/views/homes``です。
こちらに、ホーム画面用のviewファイルを作成し、表示用の文字を記述します。

```erb:app/views/homes/index.html.erb
<h3>home</h3>
```

ターミナルで``rails s``を実行し、ローカルサーバーを立ち上げ、
http://localhost:3000/ で確認します。
homeと表示できていれば成功です。

##before_actionでログイン画面に誘導
ここまでの状態では、誰もがホーム画面にアクセスできてしまいますので、
コントローラに``before_action``を追記します。
これで、ログイン（もしくは登録）していないユーザーは、自動的にログイン画面に飛ばされます。

```homes_controller.rb
class HomesController < ApplicationController
  before_action :authenticate_user! #←ここ
  def index
  end
end
```

これで画面を更新すると下記のような画面に遷移するはずです。
[![Image from Gyazo](https://i.gyazo.com/8074b4fdffdac2614cc2e8bc745bf9d3.png)](https://gyazo.com/8074b4fdffdac2614cc2e8bc745bf9d3)

この画面で、EmailとPasswordを入力してSign upをクリックすると、
先ほどhomeと表示された画面に遷移することができます。

これでほぼほぼ完成ですが、最後にログアウトするボタンを作成する必要があります。

##ログアウトの実装
link_toメソッドを使って、ホーム画面からログアウトできるリンクを作成します。

```erb:app/views/homes/index.html.erb
<h3>home</h3>

<div>
  <%= link_to 'logout', destroy_user_session_path, method: :delete %>
</div>
```

``destroy_user_session_path``は、ターミナルの``rails routes``で確認できます。
[![Image from Gyazo](https://i.gyazo.com/f74ef0f251ab874fc8081b9ab08bd831.png)](https://gyazo.com/f74ef0f251ab874fc8081b9ab08bd831)

``devise/sessions#destroy``（sign_out）のPrefixが
``destroy_user_session``になっているのが確認できると思います。
Prefixの後に``_path``をつけて記述します。

続いて、``method``を``delete``として完成です。

このようになっていたら成功です。
[![Image from Gyazo](https://i.gyazo.com/a00af5cd8f24a196a29d6298bfefb97f.png)](https://gyazo.com/a00af5cd8f24a196a29d6298bfefb97f)

logoutをクリックすると、ログイン画面に遷移しますので、これで完成です。

---

以上です。お疲れ様でした。

次へ → ②[写真投稿機能の実装](https://qiita.com/maca12vel/items/592c78d435a8d950c434)