【初心者】Ruby on Railsでメモ帳アプリを作成する

# 概要 :beers: 

脱初心者に向けて、メモ帳アプリをつくっていく！
おなかすいた、絵文字使う練習を兼ねて....
かわいい :japanese_goblin: 

# まずは新規アプリの作成から:beers:

```shell
ubuntu@ubuntuv:~/デスクトップ/projectX$ rails new memo
ubuntu@ubuntuv:~/デスクトップ/projectX$ cd memo/
ubuntu@ubuntuv:~/デスクトップ/projectX/diary_app$ bundle install && bundle update
ubuntu@ubuntuv:~/デスクトップ/projectX/diary$ rails g controller memo index
```

# 最初のページを作成する:beers:

トップページを作成する:pick:

```html:app/views/memo/index.html.erb
<h1>Memo app</h1>
```

設定ファイルでアプリにアクセスしてきたら、トップページに飛ぶ :airplane: ように設定する

```ruby:config/routes.rb
Rails.application.routes.draw do
 root to: "memo#index"
end
```

`http://localhost:3000`にアクセスすると`memo_controller`の`index`アクションが呼ばれるという意味らしい。

これでアクセスしてみると、`index.html.erb`の内容が呼ばれる！
（すげぇ...:grinning:）

# 新規投稿ページの作成:beers:

次に新規投稿をするためのページを作る :pick: 
まずは、`new`というコントローラーを作成する

```ruby:app/controller/memo_controller.rb
class MemoController < ApplicationController
 def index
 end

 def new
 end
end
```

新規投稿ページのHTMLの内容は以下の通り

```html:app/views/memo/new.html.erb
<h1>投稿ページ</h1>
```

さっきの設定ファイルに書き加える

```config/routes.rb
Rails.application.routes.draw do
 root to: "memo#index"
 resources :memo, only: :new
end
```

# トップページと新規投稿ページを行き来するためのリンクを貼る:beers:

`トップぺージ→新規投稿ページ`と移動するためのリンク :feet: 

```html:app/views/memo/index.html.erb
<h1>Memo APP</h1>

<%= link_to '新規投稿', '/memo/new' %>
```

`新規投稿ページ→トップページ`と移動するためのリンク :feet: 

```html:app/views/memo/new.html.erb
<h1>新規投稿ページ</h1>

<%= link_to 'トップページ', '/' %>
```

それぞれのページから、このように見れてればおっけ:thumbsup:

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1523062/b0b62c69-3bfb-d4b7-156c-fd6278bb8306.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1523062/7cd3fe0e-951a-ae7f-9046-3b8413996894.png)

HTMLじゃなくて設定みたいな感じ:gear:
WOW！すごいね！

# 投稿する際に必要な「モデル」を作る:beers:

新規モデルを作成するために、コマンドを打つっ！

```shell
ubuntu@ubuntuv:~/デスクトップ/projectX/memo$ rails g model post
```

次にモデルの設定を変更する

```ruby:db/migrate/20220420053955_create_posts.rb 
class CreatePosts < ActiveRecord::Migration[7.0]
  def change
    create_table :posts do |t|
      t.text :content
      t.timestamps
    end
  end
end
```

`DB`に反映させるために、以下コマンドを実行するぞい :muscle: 

```shell
ubuntu@ubuntuv:~/デスクトップ/projectX/memo$ rails db:migrate
```

# 新規投稿ページに投稿フォームを作る:beers:

フォームがなければ投稿できませんので、作りましょう！

```html:app/views/memo/new.html.erb
<h1>新規投稿ページ</h1>
<%= form_tag('/memo', method: :post) do %>
<input type="text" name="content">
<input type="submit" value="投稿">
<% end %>
<%= link_to 'トップページ', '/' %>
```

ちょっと脇道↓

:::note warn
`erb`の`<%=`と`<%`の違い
　・`<%=`はフロントエンドで出力するようなコード行
　・`<=`はバックエンドで出力しないようなコード行
このような違いがある！！
:::

# 投稿を保存するためのcreateアクションを作る :beer: 

```ruby:app/controllers/memo_controller.rb
class MemoController < ApplicationController
  def index
    @posts = Post.all
  end

  def new
  end

  def create
    Post.create(post_parms)
    redirect_to root_path
  end

  private
  def post_parms
    params.permit(:content)
  end
end
```

設定ファイルからルートを追加する

```ruby:config/routes.rb
Rails.application.routes.draw do
  root to: "memo#index"
  resources :memo, only: [:new, :create]
end
```

# トップページで投稿一覧を見られるようにする:beers:

`POSTテーブル`の情報を変数に入れることで、`HTML`からすべて参照できるようにする:thumbsup:

```config/routes.rb
class MemoController < ApplicationController
  def index
    @posts = Post.all
  end

  def new
  end
end
```

そして、`HTML`を以下のように変える :pick: 

```html:app/views/memo/index.html.erb 
<h1>Memo APP</h1>
  <% @posts.each do |post| %>
  <ul>
    <li>
      <%= post.content %>
    </li>
  </ul>
  <% end %>
<%= link_to '新規投稿', '/memo/new' %>
```

こんな感じで、入力したものが出てくればよし！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1523062/196661ef-1b0b-37da-389c-fd6eed512d32.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1523062/503bf30c-bd2b-61a3-06a7-89d7c5c32628.png)

# まとめ :beers: 

難しかった...💦

# 参考にしたサイト

https://note.com/john01/n/nd29bfe70ba7b

https://note.com/john01/n/ne74455816d99

https://note.com/john01/n/neaa13f3b322d