はじめに

先日、ある企業と面談している中での気づきです。
もしかしたら、現場のエンジニアの方からしたら、当たり前のことなのかもしれませんが、まだ実務の経験もない私にとっては結構大きな気づきだったので、これを見た誰かにも同じ気づきになることを願って紹介します。

よく使うコードはストックしておくということ

今の段階で、どんなコードがよく使うものなのかわからないけど、Rubyで言えば、処理をメソッド化してストックしておき、必要に応じて、コピペし、メソッドを呼び出すだけで処理を終えられるというのは、とても効率的だと感じました。
ポイントとしては、

• コメントで何の処理をしているのか記述しておく。
• メソッド化して、引数を渡すことで戻り値が返ってくるような感じ。（例えば、数値を渡したら文字列として返ってくるみたいな）

そういえば、Paizaの問題解くときに毎回新たにコード書いてたけど、何回も同じもの書いてたなぁ…

最後に

これを受けて、新たな疑問としては、

• よく使うコードとは、どういったものの処理なのかということ。
• そもそも自分で考えなくても、ネット上に転がっているのを拾ってくる作業なのか。

ということです。
何かアドバイスがあればください…

やり方

VScodeを起動している状態で「ctrl, shift, `」の3つを同時に押す。

「`」のキーは、Macのキーボードであれば「P」の横にある。
（＠マークと同じキー。）

上記コマンドでVScode上でターミナルを実行できる。

余談

FWを使ってちょっとしたRailsアプリを作れるようにはなってきたけど、アルゴリズム全然組めないなぁって時に、チェリー本などを読みながらプログラムを組んで勉強したくなったのだが、VScode上でプログラムの実行結果を確認できると便利だなぁと思ったのでググった。

おそらくコマンドを忘れてこの先何度もぐぐるだろうなと思ったのでメモ。

オリジナルアプリを作って今日で3日目。
要件定義をしっかりしたつもりだったがあれやこれやと出てきてしまい、
「あ、これもやらなきゃ」
「あれ？スペルミス」
「あれ？ここどうしたらいいんだっけ？」
こんなことの連発。
こまめにcommitしなければいけないと思いつつ作業ブランチのことをやっていて、他のブランチに戻る、そんなことを繰り返していてわけがわからなくなってしまったので、
「一度マージし終わっているブランチを削除しよう！」
そう思いついたのが地獄の始まりじゃったそうな・・・

やっちゃったこと

% git branch -D master     

「記事を見ながらやった。なぜこうなってしまったのかはわからない。後悔はしている。」
(プライバシー保護のため音声を加工してあります

masterブランチって消えるんですね。恐ろしいよ。
その後、下記コマンドでreflogを抽出

% git reflog
　　　　　　　　　　　　　　　　　　　⬇️⬇️⬇️以下結果⬇️⬇️⬇️

0422208 (HEAD -> master) HEAD@{0}: checkout: moving from ユーザー管理機能 to master
444f2b7 (origin/ユーザー管理機能, ユーザー管理機能) HEAD@{1}: checkout: moving from master to ユーザー管理機能
0422208 (HEAD -> master) HEAD@{2}: checkout: moving from ユーザー管理機能 to master
444f2b7 (origin/ユーザー管理機能, ユーザー管理機能) HEAD@{3}: checkout: moving from master to ユーザー管理機能
0422208 (HEAD -> master) HEAD@{4}: checkout: moving from ユーザー管理機能 to master
444f2b7 (origin/ユーザー管理機能, ユーザー管理機能) HEAD@{5}: checkout: moving from master to ユーザー管理機能
0422208 (HEAD -> master) HEAD@{6}: checkout: moving from ユーザー管理機能 to master

〜以下略〜

出てきたHEADの表示を確認し、該当の数字を入力

% git branch master HEAD@{21}       

ザオリク成功。やったね！

そして時は流れ、新たなブランチでの作業が終わった時に事件は起こった。
コミット→プッシュ→
Delete Branchする前にmasterに反映されているか確認するか・・・
・・・あれ？
・・・おかしいな
・・・Fetch Origin、ん？
・・・なんでViewファイルが更新されてないんだ？
え？！他のファイルも更新されてない！なんで？！
Fetch Originすると

Newer Commmits on Remote

もうコミットされてるよ！と怒られた。
え、どこに？反映されてないんだけど・・・
確認するとこんな状態。

% git branch -a  

* master
  テーブル新規作成
  ユーザー管理機能
  remotes/origin/master
  remotes/origin/テーブル新規作成
  remotes/origin/ユーザー管理機能

remotesあるじゃない！なんで反映されないのかわからない。
ここで2時間ぐらいハマる。
復活の呪文がうまくいってなかったのか？あれはザオリクじゃなくてザオラルだったのか？
そんなことを考えながらどうにもこうにもうまくいかなくなってエラー文で検索をかけて出てきた英語の記事を読む。

どうやらローカルリポジトリのmasterブランチにトラッキングブランチが設定されていないことで出るエラーらしい（ちょっと何言ってるかよくわかんない
リポジトリのクローンを作成することで回復するとのこと。

感覚としては削除しちゃったから完全な状態でmasterブランチが復活してなかったよ！ってこと？
とりあえずやってみる。

% git branch -u origin/master

これで見事にpullできるようになりました！ホッとした・・・
色々調べたんですが「-u」コマンドってどういう意味なのかわかりません。
何をしてくれているコマンドなんでしょうか？
remotes/origin/master
ってリモートブランチのことだと思ってましたけど違うんですね。
何回か読んだけどめちゃくちゃ難しい。
まだまだわからないことがいっぱい。やりがい。

参照させて頂きました

https://qiita.com/forest1/items/db5ac003d310449743ca

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

アプリ新規作成

作成したいディレクトリに移動してから

ターミナル

rails new [アプリ名] -d mysql

「-d mysql」でデータベース作成時にmysqlを指定

データベース作成

作成されたアプリのディレクトリまで移動する。
下記のコマンドで、database.ymlに記述された設定通りにデータベースが作成される。

ターミナル

rake db:create

想定通りに作成されなければ、database.ymlを確認する。
sqliteが初期のデータベースに指定されているので、必要ならばgemにmysqlを記述し、bundle installする。

参考: Railsアプリケーション開発をしよう！ 〜開発の準備編〜

コントローラーの作成

ターミナル

rails g controller [コントローラー名]

ルーティング設定

routes.rb

root "[コントローラー名]#index"

rootはurlでアクセスした時に、トップページに表示されるコントローラーとアクションを表示しています。
今回は[index]アクションを指定しています。

コントローラーアクション記述

必要なアクションを記述していきます。

[コントローラー名]_controller.rb

def index
end

ビューファイル作成

[app/views/コントローラ名/]ディレクトリが作成されれいるので、index.html.erbのファイルを作成します。

index.html.erb

<p>Hello, World!</p>

こちらで、railsサーバーを立ち上げて、ローカルでアクセスすると「Hello, World!」と表示されます。

テーブル作成

ターミナル

rails g model [モデル名]

モデルを作成すると、テーブルを作成する為のマイグレーションファイルが自動生成されます。
マイグレーションファイルを記述し、マイグレーションファイルを実行します。

ターミナル

rails db:migrate

参考 Active Record マイグレーション
参考 RailsのMigrationに関する基本まとめ

以上。

はじめに

Railsチュートリアル第４版の第１章の開発中に発生した「Oops VFS connection does not exist」というエラー発生状況とその解決策についてです。

開発環境

• MacOS Catalina 10.15.7
• Safari 13.1.3
• AWS Cloud9
• Rails 5.1.6
• ruby 2.6.3

エラー内容

Cloud9上にてRailsサーバを起動し、プレビューよりデフォルトページを
表示しようとしたところ、以下の画像が表示される。
エラーメッセージ：「Oops VFS connection does not exist」

原因

Could9IDE起動自体にはCookieは不要だが、アプリやファイルのプレビュー機能を利用するにはCookieを有効化する必要があるらしい。
（実は「Third-party cookies disabled」というエラーメッセージが一番最初にプレビュー実行した際に出ていた。エラーメッセージはよく見ないといけないですね。）

[参考]
AWSユーザガイド アプリケーションプレビューまたはファイルプレビュー通知: 「サードパーティーの Cookie を無効にしました」
https://docs.aws.amazon.com/ja_jp/cloud9/latest/user-guide/troubleshooting.html#troubleshooting-preview (2021年1月2日)

解決策

Safariの[環境設定]>[プライバシー]タブにて「サイト越えトラッキングを防ぐ」のチェックをオフにする。デフォルトでは「オン(有効)」になっている。
ちなみに、Safariの「サイト越えトラッキングを防ぐ」のデフォルト設定はバージョン11.0から。

まとめ

「Oops VFS connection does not exist」というエラーメッセージから今回の原因にたどりつきにくかったと感じたので記事にしました。クラウドベースでの開発の際には、ブラウザ設定にも注意を払ってやる必要がありますね。

駆け出しエンジニアの簡単なメモです。
間違いや誤解を招くような書き方があればご指摘いただけると幸いです。

1.中間テーブル作成

ユーザー(User)が投稿(Post)をお気に入り登録できる機能を作成しよう→
postsテーブルとusersテーブルの間にbookmarksという中間テーブルを作成→

rails g model Bookmark user:references post:references

これによりusersテーブルとpostsテーブルの両方を参照するように指定できます。
user_idとpost_idのペアを作成する事で、「お気に入り登録している」という状態を作ります。
しかしながらこの場合、user_idとpost_idのペアが重複することは有り得ません。（既にお気に入り登録している投稿に更にお気に入り登録はできない）
データベースで矛盾が生じないように、二つのペアがuniqueであることを明示する必要が有ります。

2.1. unique制約を付ける（最初から）

作成されたマイグレーションファイルに追記します。

class CreateBookmarks < ActiveRecord::Migration[6.0]
  def change
    create_table :bookmarks do |t|
      t.references :user, null: false, foreign_key: true
      t.references :post, null: false, foreign_key: true

      t.timestamps

      #以下を追記
      t.index [:user_id, :post_id], unique: true
    end
  end
end

あとはrails db:migrateすればオーケーです。

2.2 unique制約を付ける（後から）

今回メモするきっかけになったことです。
「あっやべ！付け忘れた！」となって後から追加する方法を調べました。

migrationファイルを作成

rails g migration AddIndexUserIdAndPostIdToBookmarks

中身を記述

class AddIndexUserIdAndPostIdToBookmarks < ActiveRecord::Migration[6.0]
  def change
    add_index :bookmarks, [:user_id, :post_id], unique: true
  end
end

とてもシンプルで簡単でした。
あとはrails db:migrateでオーケー！

参考にさせていただいた記事
Ruby on RailsでDBにユニーク制約を付与する方法
Railsドキュメント

前書き

先日、業務でRailsAPIでActive Storageを使う機会がありました。忘備録として、導入~設定方法~実装を解説したいと思います。

RailsAPIの環境構築はこちらの記事から。

Active Storageとは

Railsにデフォルトで備わっている機能の一つです。ドキュメントによると下記のように説明されています。

Active StorageとはAmazon S3、Google Cloud Storage、Microsoft Azure Storageなどの クラウドストレージサービスへのファイルのアップロードや、ファイルをActive Recordオブジェクトにアタッチする機能を提供します。

まとめると下記のようなイメージです。

• Active Recordオブジェクトにファイルデータをアタッチできる
• AWS,GCP,Azureなどのクラウドストレージサービスに手軽に保存できる

手軽にファイルデータを扱うのに必要な機能を提供してくれる、という感じでしょうか。

実際にActive Storageを使ってみる

では、以降からコード+文章で解説していきます！！

Active Storageの設定

【1】DB周りの設定

rails active_storage:install

このコマンドを実行すると2つのテーブルを作成するためのマイグレーションファイルが作成されます。

• active_storage_blobsテーブル
• active_storage_attachmentsテーブル

内容としては下記の通り。（ちょっと変えているところがあります。）

active_storage_attachments

create_table :active_storage_attachments do |t|
  t.string     :name,     null: false
  t.references :record,   null: false, polymorphic: true, index: false
  t.references :blob,     null: false

  t.datetime :created_at, null: false

  t.index [ :record_type, :record_id, :name, :blob_id ], name: "index_active_storage_attachments_uniqueness", unique: true
  t.string  :active_storage_blob_id, column: :blob_id
end

active_storage_blobs

create_table :active_storage_blobs do |t|
  t.string   :key,        null: false
  t.string   :filename,   null: false
  t.string   :content_type
  t.text     :metadata
  t.bigint   :byte_size,  null: false
  t.string   :checksum,   null: false
  t.datetime :created_at, null: false

  t.index [ :key ], unique: true
end

確認したら、下記のコマンドを実行してマイグレートしてください。

rails db:migrate

【2】保存先の設定をする。

config/environments/development.rbとconfig/environments/production.rbに下記のようなコードがデフォルトであると思います。

config.active_storage.service = :local

この:localはconfig/storage.ymlに下記のように定義されています。

config/storage.yml

test:
  service: Disk
  root: <%= Rails.root.join("tmp/storage") %>

local:
  service: Disk
  root: <%= Rails.root.join("storage") %>

# Use rails credentials:edit to set the AWS secrets (as aws:access_key_id|secret_access_key)
# amazon:
#   service: S3
#   access_key_id: <%= Rails.application.credentials.dig(:aws, :access_key_id) %>
#   secret_access_key: <%= Rails.application.credentials.dig(:aws, :secret_access_key) %>
#   region: us-east-1
#   bucket: your_own_bucket

# Remember not to checkin your GCS keyfile to a repository
# google:
#   service: GCS
#   project: your_project
#   credentials: <%= Rails.root.join("path/to/gcs.keyfile") %>
#   bucket: your_own_bucket

# Use rails credentials:edit to set the Azure Storage secret (as azure_storage:storage_access_key)
# microsoft:
#   service: AzureStorage
#   storage_account_name: your_account_name
#   storage_access_key: <%= Rails.application.credentials.dig(:azure_storage, :storage_access_key) %>
#   container: your_container_name

# mirror:
#   service: Mirror
#   primary: local
#   mirrors: [ amazon, google, microsoft ]

このlocalの部分にどこに保存されるか定義されています。デフォルトでは、Diskに保存されるようになっていますね。ちなみに、S3などのクラウドストレージサービスに保存させる場合には、このconfig/storage.ymlに諸々の設定を書き込めばOKです。

設定は以上です。次から実際の使い方について見ていきます！

Active Storageを実際に使ってみる

基本的な使い方は下記のような感じです。

post.rb

class Post < ApplicationRecord
  has_one_attached :image
end

上記のようにモデル層に、ファイル情報をアタッチすることでPostモデルがファイル情報を持っているように挙動してくれます。

コントローラ側では以下のような感じです。

posts_controller.rb

class PostsController < ApplicationController

  def create
    post = Post.new(post_params)
    if post.save
      render json: post
    else
      render json: post.errors, status: 422
    end
  end

  def post_params
    params.permit(:name, :image)
  end
end

postモデルがimageカラムを持っているように動いてくれていますね。

基本的な使い方は以上です。次からActive Storageの詳細な機能について解説していきます。

保存済みのファイルのURLを返す

最初に設定としてconfig/environments/development.rbにコードを追加します。

config/environments/development.rb

Rails.application.configure do
  ...

  # 下記のコードを追加
  Rails.application.routes.default_url_options[:host] = 'localhost'
  Rails.application.routes.default_url_options[:port] = 3000
end

そして、該当するモデルで下記のようにしてください。

post.rb

class Post < ApplicationRecord
  # ここから
　include Rails.application.routes.url_helpers
  # ここまでを追加してください。

  has_one_attached :image

  #　ここから
  def image_url
    image.attached? ? url_for(image) : nil
  end
  #　ここまで追加してください。
end

• url_forメソッドを使うためにRails.application.routes.url_helpersをincludeしてください。
• image_urlメソッドでは、画像のURLを返しています。

ちなみに

url_for(image)

の部分について少し補足しておきます。

アクセスした時には、実際のサービスエンドポイントへのリダイレクトが返されます。なので公開されるURLと実際のURLを切り離すことができます。すごく便利ですね。

準備はこれで完了です。コントローラでは以下のように書けば、URLを出力することできます。

posts_controller.rb

class PostsController < ApplicationController

　# 下記のアクションを追加
  def index
    render json: Post.all, methods: [:image_url]  
  end

  def create
    post = Post.new(post_params)
    if post.save
      render json: post
    else
      render json: post.errors, status: 422
    end
  end

  def post_params
    params.permit(:name, :image)
  end
end

methods: [:image_url]の部分で、メソッドの結果をjsonで出力することができます。（実際には、こんな感じには書かずに僕だったらシリアライザーで整形します。）

URLに関しては以上です。

複数のファイルをアタッチしたい

この場合はモデルでhas_many_attachedのように宣言してあげれば、複数のファイルをアタッチすることができます。実際には下記のようなイメージです。

post.rb

class Post < ApplicationRecord
　include Rails.application.routes.url_helpers

  has_many_attached :images

  def image_url
    image.attached? ? url_for(image) : nil
  end
end

基本的な使い方に関しては以上です。あとはドキュメントを読み込んでいくとさらに知識がつくかなと思います。

ではでは?

なにこれ

筆者が||=の扱いでずっこけたので、備忘録として書いてます。
presenceメソッドの解説(?)もしてるので、良かったら見てください！
ご指摘があればコメント欄までお願いいたします。

そもそも「||=」とは

簡単に言うと自己代入
rubyでよく見る下記のコードと同じ意味

result = 1
result += 2
p result #=> 3

これを「もしnil or falseだったら、右辺を代入する」に変えたバージョン。

def check(arg)
  arg ||= 'nil or false'
  p arg
end
check('hoge') #=> 'hoge'
check(nil) #=> 'nil or false'
check(false) #=> 'nil or false'

||= の詳しい動き

Rubyのドキュメントに素晴らしいサンプルコードがあったので、抜粋します

p obj.foo ||= true
p obj.foo || (obj.foo = true)

まさに上記と同じ動きをしています。

||で比較をする。||は最初に真になったものを返す。
obj.fooがnil or falseじゃなければ真つまり左辺を返す。
左辺が偽なら、左辺の変数に対して右辺のコードを代入する。ということです。

筆者がハマった罠（余談）

上記のnil or falseだったら左辺に代入するという仕様を理解できてなかったせいで、
若干沼ったので備忘録として残します。
この記事を書こうとした理由でもあります。

Railsで開発してて、次の要件を満たすメソッドを作りたかった。

・DBから指定したidかつboolean型がtrueのレコードを取得する
・取得したレコードのboolean型をfalseにしてupdateする

・必ずレコードが存在するとは限らない。
・条件に一致したレコードが取得できなければreturnする

下記のようなコードを書きました（変数名は仮）

def find_and_change_default(post_id)
  post = Post.find_by(id: post_id, boolean: true)
  if post.present?
    post.update(boolean: false)
  end
end

1つ問題として思ったのが
「postをfind_byしたのにpresent?で存在確認するって冗長じゃね？」
と、思いました。

そこで色々調べたところ、Railsのpresenceメソッドを知って、下記のように修正しました

def find_and_change_default(post_id)
  post = Post.find_by(id: post_id, boolean: true).presence || return
  post.update(boolean: false)
end

presneceメソッドはRailsで次のように定義されてます。

activesupport/lib/active_support/core_ext/object/blank.rb

  def presence
    self if present?
  end

レシーバ（今回はpost）がpresent?でtrueが返されれば、selfを返します。
Railsガイドに下記のような用法が紹介されてました。

host = config[:host].presence || 'localhost'

configにhostがあれば、そちらを代入。なければlocalhostを代入する。というコードです。

「||=」とpresenceメソッドの関係性

ここを一番説明したかった。今までは前座です

||=の左辺がnil or falseなら右辺を代入する。という仕様を理解してなくて起こった悲劇です。

nilだったらreturnするから、||=が使えそう！と何故か思ってしまい、
こんなコードを書いてしまいました

  post = Post.find_by(id: post_id, boolean: true).presence ||= return
  #=> undefined method `presence=' for nil:NilClass (NoMethodError)

上記は一致するレコードがなかった時の結果です。
エラーを吐いた時は頭を抱えましたが、rubyのドキュメントを100回確認したら理解できました。
https://docs.ruby-lang.org/ja/latest/doc/spec=2foperator.html

用法を調べたら、Railsに下記のようなコードがありました（メソッドはRailsのコードから適当に抜粋しました）

def open_connection(server = nil)
  server ||= TestServer.new
  # 後続の処理
end

引数にとった値を確認する時に使うのが一般的だと思いました。
さっきの場合は、DBからデータを取得して変数に格納したいのに、左辺に代入するという意味が分かってなくて、
上記のようなコードを書いてしまいました。
nil.presenceメソッドを実行してる左辺に対してreturnを代入するって、もはやメチャクチャですね

はじめに

• これはエンジニア初心者(特にRailsエンジニア)向けの記事です
• ビューコンポーネント化という昨今流行りの概念をRailsで説明します
• Railsはオワコンってあちこちで言われてて悲しいのでReact/Vue/Nextに移ろうという人向けに背中を押す

コンポーネント化って何ですか

コンポーネント化の技術に優れたエンジニアは優れています。
優れたエンジニアを目指すために、コンポーネント化とは何なのか知っておきましょう。

コンポーネント化とはコードやファイルを再利用可能な部品として分割することを言います。
そして、コンポーネント化をするメリットは、コードの可読性が上がることです。

なぜコードの可読性をあげる必要があるのですか

エンジニアは突然死ぬからです。

昨日「お疲れ様でした〜」と何気なく別れた開発メンバーが
明日も元気に顔を出すとは限りません。

そして、大きなプロジェクトほどメンバーが欠けた際のインパクトは大きいです。

あなたが一生懸命書いたコードが残っていても、そのコードの可読性が低ければ、
極論、そのプロジェクトはやり直しや中止になるかもしれません。

労働というのは実に人生の1/3を占めると言われています。
私たちエンジニアの仕事の成果は私たちが書いたコードでありますから、
それが無駄になるということは避けたいわけです。

したがって、可読性の高いコードを書くことは人生の質QuallityOfLifeそのものを向上させます。

Railsのビューコンポーネントにはrenderを使おう

Railsにはrenderという大変便利なヘルパーメソッドが用意されています。renderを使うと、巷で話題のReactやVueやらが得意とするビューのコンポーネント化がお手の物です。

renderメソッドは以下の文法によって使えます。

render "ファイル名", 引数, 引数, ...

他にもいくつか指定できるオプションが存在するのですが、ことコンポーネント化について語る文面のうえでその知識は必要ありません。ひとまず、第一引数にはファイル名、それ以降は引数であると覚えておきましょう。

それでは実際にrenderを使うことで何ができるのか見ていきましょう。今から作成するのは、以下の様な簡単なビュー表示です。Twitterのサイドバーを作る様なイメージとなります。

それでは、renderを使わなかった場合のアンチパターンを以下に示します。ハンズオンで学びたい方は、TailwindCSSを導入したRails6アプリケーションを作成のうえ、以下を任意のビューファイルにコピペして下さい。

hoge.html.erb

<div class="wrapper flex h-screen text-gray-800">
    <div class="sidebar w-1/5 bg-gray-200 p-8">
        <div class="sidebar-content h-12 bg-gray-300 items-center flex pl-4 mb-4">
            <i class="fa fa-home"></i>
            <span class="pl-4">ホーム</span>
        </div>
        <div class="sidebar-content h-12 bg-gray-300 items-center flex pl-4 mb-4">
            <i class="fa fa-hashtag"></i>
            <span class="pl-4">話題を検索</span>
        </div>
        <div class="sidebar-content h-12 bg-gray-300 items-center flex pl-4 mb-4">
            <i class="fa fa-bell"></i>
            <span class="pl-4">通知</span>
        </div>
        <div class="sidebar-content h-12 bg-gray-300 items-center flex pl-4 mb-4">
            <i class="fa fa-envelope"></i>
            <span class="pl-4">メッセージ</span>
        </div>
        <div class="sidebar-content h-12 bg-gray-300 items-center flex pl-4 mb-4">
            <i class="fa fa-bookmark"></i>
            <span class="pl-4">ブックマーク</span>
        </div>
        <div class="sidebar-content h-12 bg-gray-300 items-center flex pl-4 mb-4">
            <i class="fa fa-list-alt"></i>
            <span class="pl-4">リスト</span>
        </div>
        <div class="sidebar-content h-12 bg-gray-300 items-center flex pl-4 mb-4">
            <i class="fa fa-user"></i>
            <span class="pl-4">プロフィール</span>
        </div>
    </div>
    <div class="body w-4/5 bg-gray-100"></div>
</div>

アンチパターンとは言いましたが、ごく普通に設計されたビューファイルです。しかしながら、

<div class="sidebar-content h-12 bg-gray-300 items-center flex pl-4 mb-4">
    <i class="fa fa-home"></i>
    <span class="pl-4">ホーム</span>
</div>

といった部分が何度も繰り返されており、所謂DRY(Don't Repeat Yourself)原則というプログラミング界の通説に反しているわけです。

では、続いてrenderを使った場合のコードを確認してみましょう。

hoge.html.erb

<div class="wrapper flex h-screen text-gray-800">
    <div class="sidebar w-1/5 bg-gray-200 p-8">
        <%= render "articles/templates/sidebarContent", icon:"home"    , text:"ホーム"%>
        <%= render "articles/templates/sidebarContent", icon:"hashtag" , text:"話題を検索"%>
        <%= render "articles/templates/sidebarContent", icon:"bell"    , text:"通知"%>
        <%= render "articles/templates/sidebarContent", icon:"envelope", text:"メッセージ"%>
        <%= render "articles/templates/sidebarContent", icon:"bookmark", text:"ブックマーク"%>
        <%= render "articles/templates/sidebarContent", icon:"list-alt", text:"リスト"%>
        <%= render "articles/templates/sidebarContent", icon:"user"    , text:"プロフィール"%>
    </div>
    <div class="body w-4/5 bg-gray-100"></div>
</div>

articles/templates/_sidebarContent.html.erb

<div class="sidebar-content h-12 bg-gray-300 items-center flex pl-4 mb-4">
    <i class="fa fa-<%= icon %>"></i>
    <span class="pl-4"><%= text %></span>
</div>

かなりスリムなコードに生まれ変わりました。
もう一度renderの使い方を確認しておきましょう。

render "ファイル名", 引数, 引数, ...

引数はキーハッシュの形式で与えています。
キーハッシュというのは名前を付けることのできる変数のことです。

今回、fontawesomeのアイコン名がサイドバーの子項目ごとに違っていたので、まずはこれをiconという名前でrenderメソッドの第2引数に与えているわけです。また、表示されているテキストも子項目ごとに異なりますから、こちらはtextという名前で第3引数に与えてやったわけです。

あとはこれらの引数たちをテンプレート(切り出された側のファイルのこと。今回はつまり_sidebarContent.html.erbのことです)内でERBタグ(<%= %>みたいなタグのことです)を使って呼び出せばいいわけです。よって

<i class="fa fa-<%= icon %>"></i>
<span class="pl-4"><%= text %></span>

となるわけです。上記をもって「Railsでビューのコンポーネント化」ができました。

こんな感じで、コンポーネント化しておくことで、コードが大変読みやすい上に、
新しい子項目を追加するのも非常に楽な良いコードを書くことができましたね。

まとめ

• renderメソッドを使えばRailsでビューのコンポーネント化が可能
• render "ファイル名", 引数, 引数 という形式で使おう

コンポーネント化の概念を習得しておけば、Railsが真にオワコンになったとしても他のJavaScript系技術を学習する際に役立つこと間違いなしです。是非習得しておきましょう！

筆者連絡先

https://twitter.com/soeno_onseo

はじめに

• これはエンジニア初心者(特にRailsエンジニア)向けの記事です
• ビューコンポーネント化という昨今流行りの概念をRailsで説明します
• Railsはオワコンってあちこちで言われてて悲しいのでReact/Vue/Nextに移ろうという人向けに背中を押す

コンポーネント化って何ですか

コンポーネント化の技術に優れたエンジニアは優れています。
優れたエンジニアを目指すために、コンポーネント化とは何なのか知っておきましょう。

コンポーネント化とはコードやファイルを再利用可能な部品として分割することを言います。
そして、コンポーネント化をするメリットは、コードの可読性が上がることです。

なぜコードの可読性をあげる必要があるのですか

エンジニアは突然死ぬからです。

昨日「お疲れ様でした〜」と何気なく別れた開発メンバーが
明日も元気に顔を出すとは限りません。

そして、大きなプロジェクトほどメンバーが欠けた際のインパクトは大きいです。

あなたが一生懸命書いたコードが残っていても、そのコードの可読性が低ければ、
極論、そのプロジェクトはやり直しや中止になるかもしれません。

労働というのは実に人生の1/3を占めると言われています。
私たちエンジニアの仕事の成果は私たちが書いたコードでありますから、
それが無駄になるということは避けたいわけです。

したがって、可読性の高いコードを書くことは人生の質QuallityOfLifeそのものを向上させます。

Railsのビューコンポーネントにはrenderを使おう

Railsにはrenderという大変便利なヘルパーメソッドが用意されています。renderを使うと、巷で話題のReactやVueやらが得意とするビューのコンポーネント化がお手の物です。

renderメソッドは以下の文法によって使えます。

render "ファイル名", 引数, 引数, ...

他にもいくつか指定できるオプションが存在するのですが、ことコンポーネント化について語る文面のうえでその知識は必要ありません。ひとまず、第一引数にはファイル名、それ以降は引数であると覚えておきましょう。

それでは実際にrenderを使うことで何ができるのか見ていきましょう。今から作成するのは、以下の様な簡単なビュー表示です。Twitterのサイドバーを作る様なイメージとなります。

それでは、renderを使わなかった場合のアンチパターンを以下に示します。ハンズオンで学びたい方は、TailwindCSSを導入したRails6アプリケーションを作成のうえ、以下を任意のビューファイルにコピペして下さい。

hoge.html.erb

<div class="wrapper flex h-screen text-gray-800">
    <div class="sidebar w-1/5 bg-gray-200 p-8">
        <div class="sidebar-content h-12 bg-gray-300 items-center flex pl-4 mb-4">
            <i class="fa fa-home"></i>
            <span class="pl-4">ホーム</span>
        </div>
        <div class="sidebar-content h-12 bg-gray-300 items-center flex pl-4 mb-4">
            <i class="fa fa-hashtag"></i>
            <span class="pl-4">話題を検索</span>
        </div>
        <div class="sidebar-content h-12 bg-gray-300 items-center flex pl-4 mb-4">
            <i class="fa fa-bell"></i>
            <span class="pl-4">通知</span>
        </div>
        <div class="sidebar-content h-12 bg-gray-300 items-center flex pl-4 mb-4">
            <i class="fa fa-envelope"></i>
            <span class="pl-4">メッセージ</span>
        </div>
        <div class="sidebar-content h-12 bg-gray-300 items-center flex pl-4 mb-4">
            <i class="fa fa-bookmark"></i>
            <span class="pl-4">ブックマーク</span>
        </div>
        <div class="sidebar-content h-12 bg-gray-300 items-center flex pl-4 mb-4">
            <i class="fa fa-list-alt"></i>
            <span class="pl-4">リスト</span>
        </div>
        <div class="sidebar-content h-12 bg-gray-300 items-center flex pl-4 mb-4">
            <i class="fa fa-user"></i>
            <span class="pl-4">プロフィール</span>
        </div>
    </div>
    <div class="body w-4/5 bg-gray-100"></div>
</div>

アンチパターンとは言いましたが、ごく普通に設計されたビューファイルです。しかしながら、

<div class="sidebar-content h-12 bg-gray-300 items-center flex pl-4 mb-4">
    <i class="fa fa-home"></i>
    <span class="pl-4">ホーム</span>
</div>

といった部分が何度も繰り返されており、所謂DRY(Don't Repeat Yourself)原則というプログラミング界の通説に反しているわけです。

では、続いてrenderを使った場合のコードを確認してみましょう。

hoge.html.erb

<div class="wrapper flex h-screen text-gray-800">
    <div class="sidebar w-1/5 bg-gray-200 p-8">
        <%= render "articles/templates/sidebarContent", icon:"home"    , text:"ホーム"%>
        <%= render "articles/templates/sidebarContent", icon:"hashtag" , text:"話題を検索"%>
        <%= render "articles/templates/sidebarContent", icon:"bell"    , text:"通知"%>
        <%= render "articles/templates/sidebarContent", icon:"envelope", text:"メッセージ"%>
        <%= render "articles/templates/sidebarContent", icon:"bookmark", text:"ブックマーク"%>
        <%= render "articles/templates/sidebarContent", icon:"list-alt", text:"リスト"%>
        <%= render "articles/templates/sidebarContent", icon:"user"    , text:"プロフィール"%>
    </div>
    <div class="body w-4/5 bg-gray-100"></div>
</div>

articles/templates/_sidebarContent.html.erb

<div class="sidebar-content h-12 bg-gray-300 items-center flex pl-4 mb-4">
    <i class="fa fa-<%= icon %>"></i>
    <span class="pl-4"><%= text %></span>
</div>

かなりスリムなコードに生まれ変わりました。
もう一度renderの使い方を確認しておきましょう。

render "ファイル名", 引数, 引数, ...

引数はキーハッシュの形式で与えています。
キーハッシュというのは名前を付けることのできる変数のことです。

今回、fontawesomeのアイコン名がサイドバーの子項目ごとに違っていたので、まずはこれをiconという名前でrenderメソッドの第2引数に与えているわけです。また、表示されているテキストも子項目ごとに異なりますから、こちらはtextという名前で第3引数に与えてやったわけです。

あとはこれらの引数たちをテンプレート(切り出された側のファイルのこと。今回はつまり_sidebarContent.html.erbのことです)内でERBタグ(<%= %>みたいなタグのことです)を使って呼び出せばいいわけです。よって

<i class="fa fa-<%= icon %>"></i>
<span class="pl-4"><%= text %></span>

となるわけです。上記をもって「Railsでビューのコンポーネント化」ができました。

こんな感じで、コンポーネント化しておくことで、コードが大変読みやすい上に、
新しい子項目を追加するのも非常に楽な良いコードを書くことができましたね。

まとめ

• renderメソッドを使えばRailsでビューのコンポーネント化が可能
• render "ファイル名", 引数, 引数 という形式で使おう

コンポーネント化の概念を習得しておけば、Railsが真にオワコンになったとしても他のJavaScript系技術を学習する際に役立つこと間違いなしです。是非習得しておきましょう！

筆者連絡先

https://twitter.com/soeno_onseo

はじめに

• これはエンジニア初心者(特にRailsエンジニア)向けの記事です
• ビューコンポーネント化という昨今流行りの概念をRailsで説明します
• Railsはオワコンってあちこちで言われてて悲しいのでReact/Vue/Nextに移ろうという人向けに背中を押す

コンポーネント化って何ですか

コンポーネント化の技術に優れたエンジニアは優れています。
優れたエンジニアを目指すために、コンポーネント化とは何なのか知っておきましょう。

コンポーネント化とはコードやファイルを再利用可能な部品として分割することを言います。
そして、コンポーネント化をするメリットは、コードの可読性が上がることです。

なぜコードの可読性をあげる必要があるのですか

エンジニアは突然死ぬからです。

昨日「お疲れ様でした〜」と何気なく別れた開発メンバーが
明日も元気に顔を出すとは限りません。

そして、大きなプロジェクトほどメンバーが欠けた際のインパクトは大きいです。

あなたが一生懸命書いたコードが残っていても、そのコードの可読性が低ければ、
極論、そのプロジェクトはやり直しや中止になるかもしれません。

労働というのは実に人生の1/3を占めると言われています。
私たちエンジニアの仕事の成果は私たちが書いたコードでありますから、
それが無駄になるということは避けたいわけです。

したがって、可読性の高いコードを書くことは人生の質そのものを向上させます。

Railsのビューコンポーネントにはrenderを使おう

Railsにはrenderという大変便利なヘルパーメソッドが用意されています。renderを使うと、巷で話題のReactやVueやらが得意とするビューのコンポーネント化がお手の物です。

renderメソッドは以下の文法によって使えます。

render "ファイル名", 引数, 引数, ...

他にもいくつか指定できるオプションが存在するのですが、ことコンポーネント化について語る文面のうえでその知識は必要ありません。ひとまず、第一引数にはファイル名、それ以降は引数であると覚えておきましょう。

それでは実際にrenderを使うことで何ができるのか見ていきましょう。今から作成するのは、以下の様な簡単なビュー表示です。Twitterのサイドバーを作る様なイメージとなります。

それでは、renderを使わなかった場合のアンチパターンを以下に示します。ハンズオンで学びたい方は、TailwindCSSを導入したRails6アプリケーションを作成のうえ、以下を任意のビューファイルにコピペして下さい。

hoge.html.erb

<div class="wrapper flex h-screen text-gray-800">
    <div class="sidebar w-1/5 bg-gray-200 p-8">
        <div class="sidebar-content h-12 bg-gray-300 items-center flex pl-4 mb-4">
            <i class="fa fa-home"></i>
            <span class="pl-4">ホーム</span>
        </div>
        <div class="sidebar-content h-12 bg-gray-300 items-center flex pl-4 mb-4">
            <i class="fa fa-hashtag"></i>
            <span class="pl-4">話題を検索</span>
        </div>
        <div class="sidebar-content h-12 bg-gray-300 items-center flex pl-4 mb-4">
            <i class="fa fa-bell"></i>
            <span class="pl-4">通知</span>
        </div>
        <div class="sidebar-content h-12 bg-gray-300 items-center flex pl-4 mb-4">
            <i class="fa fa-envelope"></i>
            <span class="pl-4">メッセージ</span>
        </div>
        <div class="sidebar-content h-12 bg-gray-300 items-center flex pl-4 mb-4">
            <i class="fa fa-bookmark"></i>
            <span class="pl-4">ブックマーク</span>
        </div>
        <div class="sidebar-content h-12 bg-gray-300 items-center flex pl-4 mb-4">
            <i class="fa fa-list-alt"></i>
            <span class="pl-4">リスト</span>
        </div>
        <div class="sidebar-content h-12 bg-gray-300 items-center flex pl-4 mb-4">
            <i class="fa fa-user"></i>
            <span class="pl-4">プロフィール</span>
        </div>
    </div>
    <div class="body w-4/5 bg-gray-100"></div>
</div>

アンチパターンとは言いましたが、ごく普通に設計されたビューファイルです。しかしながら、

<div class="sidebar-content h-12 bg-gray-300 items-center flex pl-4 mb-4">
    <i class="fa fa-home"></i>
    <span class="pl-4">ホーム</span>
</div>

といった部分が何度も繰り返されており、所謂DRY(Don't Repeat Yourself)原則というプログラミング界の通説に反しているわけです。

では、続いてrenderを使った場合のコードを確認してみましょう。

hoge.html.erb

<div class="wrapper flex h-screen text-gray-800">
    <div class="sidebar w-1/5 bg-gray-200 p-8">
        <%= render "articles/templates/sidebarContent", icon:"home"    , text:"ホーム"%>
        <%= render "articles/templates/sidebarContent", icon:"hashtag" , text:"話題を検索"%>
        <%= render "articles/templates/sidebarContent", icon:"bell"    , text:"通知"%>
        <%= render "articles/templates/sidebarContent", icon:"envelope", text:"メッセージ"%>
        <%= render "articles/templates/sidebarContent", icon:"bookmark", text:"ブックマーク"%>
        <%= render "articles/templates/sidebarContent", icon:"list-alt", text:"リスト"%>
        <%= render "articles/templates/sidebarContent", icon:"user"    , text:"プロフィール"%>
    </div>
    <div class="body w-4/5 bg-gray-100"></div>
</div>

articles/templates/_sidebarContent.html.erb

<div class="sidebar-content h-12 bg-gray-300 items-center flex pl-4 mb-4">
    <i class="fa fa-<%= icon %>"></i>
    <span class="pl-4"><%= text %></span>
</div>

かなりスリムなコードに生まれ変わりました。
もう一度renderの使い方を確認しておきましょう。

render "ファイル名", 引数, 引数, ...

引数はキーハッシュの形式で与えています。
キーハッシュというのは名前を付けることのできる変数のことです。

今回、fontawesomeのアイコン名がサイドバーの子項目ごとに違っていたので、まずはこれをiconという名前でrenderメソッドの第2引数に与えているわけです。また、表示されているテキストも子項目ごとに異なりますから、こちらはtextという名前で第３引数に与えてやったわけです。

あとはこれらの引数たちをテンプレート(切り出された側のファイルのこと。今回はつまり_sidebarContent.html.erbのことです)内でERBタグ(<%= %>みたいなタグのことです)を使って呼び出せばいいわけです。よって

<i class="fa fa-<%= icon %>"></i>
<span class="pl-4"><%= text %></span>

となるわけです。上記をもって「Railsでビューのコンポーネント化」ができました。

こんな感じで、コンポーネント化しておくことで、コードが大変読みやすい上に、
新しい子項目を追加するのも非常に楽な良いコードを書くことができましたね。

まとめ

• renderメソッドを使えばRailsでビューのコンポーネント化が可能
• render "ファイル名", 引数, 引数 という形式で使おう

コンポーネント化の概念を習得しておけば、Railsが真にオワコンになったとしても他のJavaScript系技術を学習する際に役立つこと間違いなしです。是非習得しておきましょう！

筆者連絡先

https://twitter.com/soeno_onseo

たとえば、RailsのViewファイルとして次のようなblogs/edit.html.erbがあったとします。

<h1>Editing Blog</h1>

<%= render 'form', blog: @blog %>

<%= link_to 'Show', blog_path(@blog) %> |
<%= link_to 'Back', blogs_path %>

5行目のblog_path(@blog)は/blogs/10のようなパスを生成するヘルパーメソッドです。（ここでは@blog.idの値が10だった場合を想定）

このようにblog_pathの引数には通常、@blogのようなActiveRecordのインスタンスを渡すと思います。
ですが、blog_pathは次のように引数無しで呼びだしてもエラーにはなりません。

<%= link_to 'Show', blog_path %> |

生成されるパスは先ほどと同じく/blogs/10になります。

Viewだけでなく、コントローラ内でも同様です。

def update
  if @blog.update(blog_params)
    # blog_path(@blog) と書かなくても /blogs/10 にリダイレクトされる
    redirect_to blog_path, notice: '...'
  else
    render :edit
  end
end

Why?

上記のような編集画面は通常、以下のようなパス（URL）で呼び出されると思います。

/blogs/10/edit

blog_pathのように引数無しでヘルパーメソッドを呼び出した場合、リクエスト時のパスに含まれるid（ここでは10）を引き継いで /blogs/10 が生成されます。

引数がないとエラーになるケース

rails consoleなどでapp.blog_pathと書いた場合は引き継ぐidがないのでエラーになります。

> app.blog_path
Traceback (most recent call last):
        1: from (irb):2
ActionController::UrlGenerationError (No route matches {:action=>"show", :controller=>"blogs"}, missing required keys: [:id])
Did you mean?  blog_url
               blogs_url
               blogs_path
               new_blog_url

引数無しのblog_pathを使うのはアリか、ナシか？

個人的にはナシだと思います。

暗黙的にidが決まってしまうより、明示的に「このメソッドで生成したいパスはこのid（このオブジェクト）」ということを示すためにblog_path(@blog)のように書く方が安全だからです。

また、引数を省略するクセが付いていると、Viewのロジックによっては意図しないidでパスが生成されたりして思わぬ不具合を起こすかもしれません。

ドキュメントはどこ？

url_forメソッドのドキュメントにそれらしき記述がありました。

https://edgeapi.rubyonrails.org/classes/ActionDispatch/Routing/UrlFor.html#method-i-url_for

Missing routes keys may be filled in from the current request's parameters (e.g. :controller, :action, :id and any other parameters that are placed in the path).

（筆者訳） 不足しているルーティングのキーは、リクエストパラメータ（例 :controller や、 :action、 :id 、その他パスに含まれる各種パラメータ）から取得されます。

上のドキュメントに書いてあるとおり、たとえば blog_path の代わりに url_for(controller: 'blogs', action: 'show') のように書いても同じように /blogs/10 が生成されます。（もっと言えば url_for(action: 'show') だけでもOK）

確認したバージョン

• Rails 6.0.3.3

プログラミング学習の備忘録としてアップします。

目的

• Switch Branchの使用方法を理解する
• コンフリクトが起こる操作ミスを学ぶ
• 簡単なコンフリクトの解消方法を学ぶこと
• revertの使用方法を理解する
• Switch Branchの使用方法を理解する

内容

• Switch Branchの使用方法を理解する
  　ブランチを作成し忘れたときや、別のブランチに書き込んでしまった場合、ブランチを元に戻すには
  　1.書いているコードを別のブランチに引き継ぐか、　→Bring Change To
  　2.書いているコードを一旦保留して０からブランチを作り直すか　→Leave On Change My Master
  Leave On Change My Master
  　一旦作業を中断したいときなどに用いる操作、０からブランチを作成するため作業内容が０に戻ってしまう。中断した作業を元に戻すには
  マスターブランチに戻る
  Started　Changes を選択する
  Resteore を選択する
  ことでコードを復旧する
  

• コンフリクトが起こる操作ミスを学ぶ
  　コンフリクト　複数人が各々のブランチで作業し、マスターブランチにPushする際、それぞれが同じファイルを編集してしまった場合、AにはIndexがありNewがないBにはIndexがなくNewgがあるといった辻褄が合わない状態が生じる。

• 簡単なコンフリクトの解消方法を学ぶこと
  　間違った情報をPushしてしまった場合
  
  上記画面のResolve conflictを選択
  コードをあるべき内容に修正する
  Mark As Resolved を選択
  上記をそれぞれに行う。
  コンフリクトが起こった際の注意点
  ・別々に作業を始める前に、打ち合わせを行い事前にコンフリクト になりそうな箇所を押さえておく
  ・最新のマスターブランチの情報をpullしてから作業に取り掛かること
  ・なぜコンフリクトが発生したかを明確化すること
  ・コンフリクトの解消は独断で行わず、メンバーと打ち合わせて解消する

• revertの使用方法を理解すること
  間違った情報をpushしてしまった場合
  一度リモートディポジトリにpushしたcomment情報は戻すことはできない。注意してpushすること。
  戻すことはできないが、リモートディポジトリのcommitは削除できる。→Revert
  ・Historyの中にあるcommit一覧の中の削除したいものを選択し右クリック
  　「Revert Changes In commit」を行う　
  　push Origin

間違った情報をcommentしてしまった場合
pushする前であれば、commentの下にあるUn doでコメントは取り消せる

総括

複数人で作業をする際には個人のエラーが全体のエラーにつながってしまう。
・push・comment等をする際にはエラーがないことを確認して行う。
・間違えてしまったら正しい手順で解消し、チームメンバーには相談、報告を行う。
・解決できない時は分で解消しようとしないでメンバーに相談する。

メソッドとは

一言で言えば処理をまとめて使えるようにするものです。
これだけでは意味がわからないと思うので実際にコードを書いていきます

こんにちはと出力する　hello というメソッドを定義したいとします。

def hello              #メソッドを定義するときはdefで始めてendで終わる
  puts "こんにちは"
end

hello                  #メソッドの呼び出し

こんにちは　　　　　　　　　#helloで定義したこんにちはが出力される

戻り値

メソッドは最後の行が戻り値となります。

def number
  "1"
  "2"
  "3"         
end

puts number
3              #最後の３が出力

returnを入力すると処理が途中でとまります。

def number
  "1"
return  "2" 
  "3"         
end

puts number
2             #途中の2が出力

以上です。

課題

既存の記事を参考にrqr_codeを利用したら undefined method `dark?' が出た。

再現手順

rqr_codeのインストール

$ gem install rqrcode_png

基本コードの丸写し

require 'rqrcode'
require 'rqrcode_png'
require 'chunky_png'

qr = RQRCode::QRCode.new( "Hello World!!", size: 3, level: :h)
img = qr.to_img

img.resize(200, 200).save("hello_world.png")

実行エラー

$ ruby qr_code.rb 
Traceback (most recent call last):
<中略>
rqrcode_png/sequence.rb:11:in `block (2 levels) in dark_squares_only': undefined method `dark?' for #<RQRCode::QRCode:0x00007f9126021200> (NoMethodError)

結論

.to_imgでは無く.as_pngで回避できた。

.to_imgを.as_pngに変更

require 'rqrcode'
require 'rqrcode_png'
require 'chunky_png'

qr = RQRCode::QRCode.new( "Hello World!!", size: 3, level: :h)
# img = qr.to_img
img = qr.as_png

img.resize(200, 200).save("hello_world.png")

参考情報

[Ruby]QRコードの生成、埋め込み
https://qiita.com/koteko/items/d6d033997c544c47b718

Rubyで簡単にQRコード画像を生成する方法
https://qiita.com/sakaitaka/items/c753103c93fa177e4466

rqrcode
https://github.com/whomwah/rqrcode

はじめに

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

なぜrubyを勉強したのか？

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

rubyを勉強した方法

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

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

# 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

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にしたのコードを追加

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

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

users table

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を正常に送る方法が胃リンクで分かりました。

結果

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

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

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

その後bootstrapのbreak pointとspaceを利用して反応型ウェブを作りました。

デザインも修正してtoastrライブラリーも追加しました。

最後にログインを勉強するためにsessionを利用した機能を作りました。

ユーザーを変更するuiはslick.jsを使いました。

github

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

まとめ

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

やはりすんなりいかないRuby,Railsインストール

前回に引き続き、
RubyとRailsのインストールを進めるもやはりすんなりいかない。
しかし今回は約1年半前に挫折した経験があるのである程度は要領を得ている。

まずはRuby

$ brew install rails

でインストールすると、バージョンが2.5.0であった。
2.6.0あたりでインストールしたいので下記コマンドでアップグレード。
下記コマンドは約1年半前の記録を参照。こちら

$ cd ~/.rbenv
$ git pull origin master
$ cd ~/.rbenv/plugins/ruby-build 
$ git pull origin master
$ rbenv install 2.6.0
$ rbenv global 2.6.0
$ rbenv rehash

$ ruby -v
ruby 2.6.0p0 (2018-12-25 revision 66547) [x86_64-darwin19]

次はRails

$ gem install rails

で処理完了後バージョン確認するといない。

$ rails -v
Rails is not currently installed on this system. To get the latest version, simply type:

    $ sudo gem install rails

You can then rerun your "rails" command.
$ sudo gem install rails
Password:
Successfully installed rails-6.1.0
1 gem installed

$ rails -v
Rails is not currently installed on this system. To get the latest version, simply type:

    $ sudo gem install rails

You can then rerun your "rails" command.

すどぅーをやれと言われているようなので、すどぅー発動し、成功したかと思わせるが、
バージョン確認すると、またすどぅーをやれの繰り返し。

ググる

こちらのブログを参考にさせていただき解消。
railsをインストールしたのに Rails is not currently installed on this system と出る場合の対処法

$ export PATH="$HOME/.rbenv/shims:$PATH"
$ rails -v
Rails 6.1.0

とりあえずOKでしょう。