0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Rails学習メモ(初学者向け)①

Posted at

Rails学習メモ(初学者向け)

どうも、nus4です。

ProgateのRuby講座の実施が完了しましたので、
今回からRails講座の学習メモを作成していきたいと思います。

これも抑えたほうがいいよ!とかがあれば是非教えて下さい。

学習方法

  • Progate Ruby on Rails5コース
     (Ruby学習に引き続き、愛用させてもらってます!)

📝 目次

アプリケーションの作成

# ターミナルコマンド
rails new アプリ名

アプリ名と同名のフォルダが作成され、
その中に必要なフォルダやファイルがあらかた用意されます。

サーバーの起動

# ターミナルコマンド
rails server

開発中のアプリをブラウザで表示するためには、
毎度サーバーを起動する必要があります。

サーバー起動後は、ブラウザで「localhost:3000」というURLにアクセスすると表示されるようになります。

コントローラの作成

# ターミナルコマンド
rails generate controller コントローラ名 ビュー名

# 作成されるファイル
# app/
# ├── controllers/
# │   └── コントローラ名_controller.rb      # コントローラファイル
# ├── views/
# │   └── articles/
# │       └── ビュー名.html.erb             # ビューファイル
# ├── helpers/
# │   └── コントローラ名_helper.rb           # ヘルパーモジュール
# test/
# ├── controllers/
# │   └── コントローラ名_controller_test.rb  # コントローラのテスト
# config/
# └── routes.rb                           # ルーティングに追記(自動で追記される)
             

コントローラとは、URLリクエストが送られてきた際のアクション(処理やURLの遷移)をまとめたファイルです。

上記コマンドにより、コントローラファイルと属するビューファイル(1ファイル)などを作成することができます。

コントローラの書き方

def アクション名
    処理
end

アクション名は基本、ビュー名と同名になります。
アクション内にはデータの受け渡しなどの処理を記載することができます。

ルーティングの書き方

get "URL(localhost:3000以降)" => "コントローラ名#アクション名"

ルーティングに定義を行うことで、URLリクエストを受けたときにどのアクションで処理されるかを指示することができます。

リクエスト→ルーティング→コントローラ→アクション先 という流れです。

CSSの追加

# .scssファイルの作成場所
#  app/
#   └── assets/
#         └── images/                # 画像フォルダ
#         └── javascripts/           # JavaScriptフォルダ
#         └── stylesheets/           # CSSフォルダ
#               └── コントローラ名.scss 

CSSファイルにレイアウト情報を記述してあげることで、対象コントローラに紐づくすべてのビューファイルにレイアウトが適用されるので、便利です。

Progateではコントローラ作成コマンドを打つと、対応する.scssファイルも自動で作成されますが、ローカルで再現するには設定を変更する必要があるようです。

(設定の仕方は下記記事を参考)
Rails 7で.scssを利用できるようにした

もちろん設定をいじらず、手動で追加してもOK

画像の追加

# 画像ファイルの追加場所
# public/
#  └── ~.jpg, ~png

# publicにある画像ファイルをHTML内で使用する
<img src="/~.png">

# publicにある画像ファイルをCSS内で使用する
background-image:url("/~.jpg")

publicフォルダ内に画像を追加しておくと、他のどのビューでも画像名を指定するだけで使用できるため便利です。

リンク

<!-- HTML内で他アクションへのリンクを追加する -->
 <a href="/アクションのURL">表示したいリンク文字列</a>

railsに入ると複数ファイル間の整合性を意識するような内容が増えてきましたね…
大変ですが、引き続き頑張ります!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?