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

はじめに

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

なぜrubyを勉強したのか？

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

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を勉強した方法

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

railsをインストールする

gem install rails

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

rails --version
Rails 6.1.0

プロジェクトを作る

rails new todo

optionを見る

rails s --help

サーバーを実行する　

rails s

mysqlを作る

docker-compose.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を作りました：）

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

上記のリンクから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にしたのコードを追加

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にしたのコードに修正

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とは？

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

users table

rails session が保存できない問題

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

sessionがPOST METHODを使うとき保存できない問題の原因

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

csrf token問題解決方法

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

結果

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

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

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

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

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

github

まとめ

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