何も知らない私が独学で３日間ruby on rails勉強しながらTODOを作ってみた


# はじめに

どうやって私がruby on railsを勉強したのかについて詳しく説明します！

# なぜrubyを勉強したのか？

日本でrubyを使うことがあると聞きました。
いつかrubyプロジェクトに出会いそうで勉強を始めました。

# rubyを勉強した方法

https://www.tutorialspoint.com/ruby/index.htm

上リンクにある例をすべて確認しました。
重要なポイントだけ実行しながら勉強しました！
わからないことが出てきたら後で参考にすることにしました。

```ruby
# variable and operate
num1 = 10
num2 = 20
result = num1 + num2

# print string
puts "result is #{result}"

# if else condition
if result > 10
    puts "result > 10"
else
    puts "else condition"
end

# loop
# start <= n <= end
for n in 1..5
    puts "#{n}"
end

# array (list)
arr = [1, 2, 3]
for n in arr
    puts "#{n}"
end

# hash (dict)
hash = Hash[
    "a" => 100, 
    "b" => 200
]
puts "#{hash['a']}"
puts "#{hash['b']}"

# block
def helloworld
    puts "hello world"
end
helloworld()

def add(num1, num2)
    puts "sum is #{num1 + num2}"
end
add(5,8)
```

# railsを勉強した方法

https://guides.rubyonrails.org/getting_started.html

上リンクにある例を部分的に参考にしました。  

railsをインストールする  

```
gem install rails
```

railsがよくインストールできたのか確認する

```
rails --version
Rails 6.1.0
```

プロジェクトを作る  

```
rails new todo
```

optionを見る  

```
rails s --help
```

サーバーを実行する　

```
rails s
```

# mysqlを作る

docker-compose.yml

```yml
version: '3'

services:
  db:
    image: mysql:8.0
    container_name: mysql
    environment:
      MYSQL_ROOT_PASSWORD: root
      MYSQL_DATABASE: todo
      MYSQL_USER: docker
      MYSQL_PASSWORD: docker
      TZ: 'Asia/Tokyo'
    command: mysqld --character-set-server=utf8mb4 --collation-server=utf8mb4_unicode_ci
    ports:
    - 3306:3306

```

```
docker-compose up -d
```

dockerを利用して簡単にmysqlを作りました：）


# 勉強しながら出会った最悪の問題

https://rubyinstaller.org/downloads/

上記のリンクからrubyをダウンロードしました。

```
ruby --version
ruby 3.0.0p0 (2020-12-25 revision 95aff21468) [x64-mingw32]

gem --version
3.2.3
```

最初は全然わからなかったです。
windows10でrubyを使うのはダメだったこと…

mysqlと繋ぐとき問題に出会いました。

### 問題１

```
Puma caught this error: Error loading the 'mysql2' Active Record adapter. Missing a gem it depends on? mysql2 is not part of the bundle. Add it to your Gemfile. (LoadError)
```

### 問題１解決

Gemfileにしたのコードを追加  

```ruby
gem 'mysql2'
```
```
bundle install
```

### 問題２

```
Gem::Ext::BuildError: ERROR: Failed to build gem native extension.
...
Cannot find include dir(s)
C:\Users\dev\mysql-connector-c-noinstall-6.0.2-win32/include/include
```

### 問題２解決

```
bundle config --local build.mysql2 "--with-mysql-dir=C:\Users\dev\mysql-connector-c-noinstall-6.0.2-win32"
```

```
bundle install
```

### 問題3

```
client.c:1350:38: error: 'MYSQL_DEFAULT_AUTH' undeclared (first use in this
function); did you mean 'MYSQL_SECURE_AUTH'?
 1350 |   return _mysql_client_options(self, MYSQL_DEFAULT_AUTH, value);
      |                                      ^~~~~~~~~~~~~~~~~~
      |                                      MYSQL_SECURE_AUTH
```

### 問題３解決

Gemfileにしたのコードに修正  

```ruby
gem 'mysql2', '~> 0.4.10'
```

### 問題４

```
C:/Ruby30-x64/lib/ruby/gems/3.0.0/gems/bootsnap-1.5.1/lib/bootsnap/load_path_cache/core_ext/kernel_require.rb:23:in `require': cannot load such file -- Win32API (LoadError)
Did you mean?  win32/sspi
```

ここで諦めました…
たくさん調べて分かりましたが
皆WSLを使う事実を分かりました。
ここからはWSLでプログラミングしました

# WSLとは？

https://qiita.com/Brutus/items/f26af71d3cc6f50d1640

WSLに関する詳細は上記リンクを参照してください

# WSLを利用してruby on railsとmysqlを繋ぎました。

dependencyをインストール

```
sudo apt-get update
sudo apt-get install autoconf bison build-essential libssl-dev libyaml-dev libreadline6-dev zlib1g-dev libncurses5-dev libffi-dev libgdbm6 libgdbm-dev libdb-dev
```

rbenvをインストール

```
git clone https://github.com/rbenv/rbenv.git ~/.rbenv
git clone https://github.com/sstephenson/ruby-build.git ~/.rbenv/plugins/ruby-build
```

rbenvをセッティング

```
vi ~/.bashrc
```

```
export PATH=$PATH:$HOME/.rbenv/bin 
eval "$(rbenv init -)"
```

```
source ~/.bashrc
```

rubyをセッティング

```
rbenv --version
rbenv install --list
rbenv install 3.0.0
rbenv versions
rbenv global 3.0.0
rbenv versions
```

db dependencyをインストール

```
sudo apt-get install libsqlite3-dev
sudo apt install libmysqlclient-dev
```

Gemfileに下のコードを追加

```
gem 'mysql2'
```

bundleをインストール

```
bundle install
```

これでmysqlと繋ぐことができました。

# 一つずつゆっくりプログラミング

htmlをレンダリングするために最初にしなければならないことはcontrollerを作ることでした。

```
rails generate controller Todo index --skip-routes
```

htmlレンダリングを確認した後、コードを一生懸命作成しました。　　

その後、モデルを簡単に作ってmysqlでカラムを修正しました。　

```
rails generate model Todo content:string
```
```
rails generate model User username:string
```
```
rails db:migrate
```

### contents table

![contents.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497528/f188fad6-c39e-ef61-0c2e-809508059fe3.png)

### users table

![users.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497528/470bf3bc-d955-1cf5-092b-ce93d981a254.png)

# rails session が保存できない問題

GET METHODでsessionを保存してGET METHODでsessionを呼び込んだら作動する。  
GET METHODでsessionを保存してPOST METHODでsessionを呼び込んだら作動しない。  

### sessionがPOST METHODを使うとき保存できない問題の原因
https://stackoverflow.com/questions/18422182/rails-sessions-not-saving  

csrf tokenが一致しなければsessionが初期化されることが分かりました。

### csrf token問題解決方法

https://qiita.com/naberina/items/d3b14521e78e0daccdcd  

csrf tokenを正常に送る方法が胃リンクで分かりました。

#結果

色んな問題を乗り越えて３日たって完成することができました！！  

![version1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497528/d14213dc-3ef1-b074-20d1-f38af211e91e.png)

最初はデザインもダサいです。 

機能を作ることに集中しました。 

![version2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497528/2ecac86d-da0a-85f6-fddc-38ab050470a1.gif)

その後bootstrapのbreak pointとspaceを利用して反応型ウェブを作りました。  
デザインも修正してtoastrライブラリーも追加しました。 

![version3_new.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/497528/778bd43b-0c9b-a852-2ee3-62dff195ab65.gif)

最後にログインを勉強するためにsessionを利用した機能を作りました。  
ユーザーを変更するuiはslick.jsを使いました。    

# github
https://github.com/h4ppyy/ror-todo

# まとめ

ウェブ勉強の場合TODOを作ると素早くcreate, read, update, deleteを実現することができ効果的です。
私の場合、このような方法で色んな言語やフレームワークを速く経験することができました！