kuma0319のブログ

webエンジニアになるためのアウトプットブログ

Ruby on Railsチュートリアル第1章

Railsチュートリアルの第1章を進めていきます。

はてなブログに記法がいくつかあるのを知らず、見たままモードだとソースコードのレイアウトが崩れてしまうとのこと。他でも役に立つだろうから、マークダウンで書いていきます。

第1章(ゼロからデプロイまで)

第1章は、基本的な環境構築、Railsの基本操作、GitHubに初プッシュして、Renderに初デプロイしようといった内容です。

環境構築

環境構築のセクションは飛ばします。
Railsチュートリアルでは、初期環境構築の不要なAWSのCloud9を推奨していますが、私はローカルで環境構築をおこないました。
WSL2+VScode+Dockerの環境構築 - kuma0319のブログ

新規アプリケーションの作成

Rails new

Rails newコマンドを実行します。
チュートリアル内では、互換性を最大限に保つ目的でRailsのバージョン指定や、 --skip-bundleオプションを指定していますが、今回はオプション無しで実行します。
チュートリアル内(コラム1.4)でも特に指定はせず、互換性の問題はbundle updateコマンドで解消出来ると書いています。

$ rails new hello_app

--skip-bundleオプションを付けていなかったためbundle installも実行されて、Gemfile.lockが生成されていました。

bundle update

続いて、今回は不要なエラーを出したく無いのでGemfileの中身をイジってbundle updateを実行し、チュートリアルの推奨バージョンと合わせておこうと思います。

既にbundle installは実行されているので、bundle updateを実行。 試しにrailsのバージョンを見てみます。

$ rails -v
Rails 7.0.4

ちゃんとbundle updateでGemfileで指定した通りのバージョンになっていました。

rails sで「localhost:3000」への接続も確認出来ました。

MVCモデルについて

ここではそれぞれの役割をまとめておきます。

Model

DBとの通信(データの取得、格納)担当。DBのテーブル毎にモデルが用意される。

View

表示画面の作成担当。モデルを介して取得したデータを使ってHTML文書を作成しコントローラへ返す。

Controller

MVCの中枢部分。ブラウザからリクエストを受け取り、Modelを通じてデータを取得したり、Viewからレンダリング画面を受け取ったりして再度ブラウザへレスポンスを返す。

Hello,worldプログラム

コントローラにアクションを定義

コントローラにhelloアクションを記述します。

[app/controllers/application_controller.rb]
class ApplicationController < ActionController::Base
  def hello
    render html: 'Hello,World!'
  end
end
ルーティングを設定

rootURL('/')のルーティング先をhelloアクションに設定。
railsガイドでは、rootルーティングは最初にマッチさせる必要があるため、ファイルの冒頭に記述するよう記載がありました。また、アクションに渡せるのはGETリクエストのみ。

Rails.application.routes.draw do
  root 'application#hello'
end

問題なく表示されました。

Hello,Worldの表示

Git、GitHub

Railsチュートリアルではここからgitの設定をおこないます。
ただ気になっていたのが環境構築出来た最初の方から

vscode ➜ ~/environment/hello_app (main) $ 

のように、デフォルトのmainブランチが表示されており、gitが設定されている状態?と思っていました。
色々とググってみたところ、下記サイトで解決しました。
VScodeのリモートコンテナ機能のおかげで、「ホストの.gitconfig設定をコンテナ内に引き継ぐ」という特徴があるみたいです。また、ssh keyもコンテナ内で有効となるようで、おそらくこのまま何も設定せずにgit push出来るのだと思います。 zenn.dev

ということで、gitの設定は済んでいるはずなので、コミットからプッシュまでやってみます。

git pushの時点で、GitHubとDockerを連携しろといった感じのポップアップが出ましたが、それをおこなったら無事プッシュ出来ました。

こういった点も、VScodeとDockerの相性がいいという部分なんでしょうね。

デプロイ

Railsチュートリアルに従って、Renderへデプロイします。
RenderのGitHubとの連携は既に済んでおり、既に過去の勉強でデプロイ可能なことは確認はしています。

ここでは、「Web service」を新規作成した際の"ADVANCED設定"にkey=RAILS_MASTER_KEYvalue=config/master.keyの中身を設定するぐらいです。

デプロイも問題なくいけてました。

第1章ー演習ー

1.3.2

①デフォルトのRailsページに表示されているRubyのバージョンを見て、今の自分のコンピュータにインストールされているRubyのバージョンがそれと同じかどうかを調べてください。コマンドラインruby -vを実行することで簡単に確認できます。
(解答) 一致している 

$ ruby -v
ruby 3.1.4p223 (2023-03-30 revision 957bb7cb81) [x86_64-linux]

Ruby,Railsのバージョン
②上と同じ要領で、Railsのバージョンも調べてみましょう。調べたバージョンはリスト 1.2でインストールしたバージョンと一致していますか?
(解答) 一致している 

$ rails -v
Rails 7.0.4

1.3.4

①リスト 1.12のhelloアクションを書き換え、「hello, world!」の代わりに「hola, mundo!」と表示されるようにしてみましょう。

Railsでは「非ASCII文字」もサポートされています。「¡Hola, mundo!」にはスペイン語特有の逆さ感嘆符「¡」が含まれています(図 1.24)25 。「¡」文字をMacで入力するには、Optionキーを押しながら1キーを押します。この文字をコピーして自分のエディタに貼り付ける方が早いかもしれません。

③リスト 1.12のhelloアクションを参考にして、2つ目のアクションgoodbyeを追加しましょう。このアクションは、「goodbye, world!」というテキストを表示します。リスト 1.14のルーティングを編集して、ルートルーティングの割り当て先をhelloアクションからgoodbyeアクションに変更します(図 1.25)。

(解答) ここの演習は飛ばします。

1.5

①Renderではデフォルトの設定でオートデプロイがオンになっています。1.3.4.1の演習と同じ変更を行い、GitHubにプッシュすると自動でデプロイが開始することを確認しましょう。また、本番アプリが「hola, mundo!」の表示に変わることも確認してみましょう。

②1.3.4.1の演習と同様、ルートへのルーティングを変更してgoodbyeアクションの結果が表示されるようにしてください。また、Git pushのmainをあえて省略し、デプロイできることを確認してみてください。

(解答) ここの演習も飛ばします。

第1章ーまとめー

  • rails newコマンドで新しいアプリケーションを生成出来る。
  • gemのバージョンを明示的に固定する場合は、Gemfileの中身のバージョンを変更した後に、bundle installもしくは既におこなっている場合はbundle updateを実行する。
  • アプリケーションの設計思想としてMVCモデル(Model、View、Controller)がある。
  • ローカルの環境でgitの設定をおこなっている場合は、VScode拡張機能によりDocker環境でも同様のgit設定でバージョン管理を行うことが可能。

とりあえず、VScodeのリモート拡張機能を使用した上でDockerを使用し、これまでと使用感は変わらずにデプロイまでいけました。
以降の章も、初歩的な内容の演習は飛ばしながら進めていきます。
第1章終わり🐻