LoginSignup
1
0

More than 3 years have passed since last update.

アプリ開発実践入門2 Controllerとviewの基礎

Posted at

参考教材
https://www.udemy.com/course/rails-kj/learn/lecture/9330884#overview
Ruby on rails6 超入門

新しいページの作成

開発環境の起動、停止、削除

docker-compose up -d:起動、docker-compose.ymlが必須
docker-compose stop:停止
docker-compose down:削除

  • docker-compose upだけで起動したら…?-dなし。ターミナルのフォアグラウンドで実行されるため、ターミナルの画面がログだらけになる。この状態でCtrl+Cで強制終了するとサーバー.pidファイルが残り次回の起動に失敗することがある
  • その時はserver.pidファイルを削除してから実行する

ルーティングの編集

routes.rbに必要なコントローラとメソッドを記述する

  • rootはlocalhost:3000へのアクセス時のルーティング

コントローラの作成

routes.rbに記述したコントローラ名でコントローラを作成

ビューの作成

テンプレートファイルの作成(HTMLの作り方、使い方)

コントローラ名でディレクトリを作って、アクション名でファイルを作る
アクション.html.erb:.erb拡張子のファイル。「Embeded Ruby」の略称。htmlタグの中にrubyのコードを実行できるようにするrailsの機能の一部。

render html: テキスト:レンダリング、Webコンテンツを表示する処理のこと、左だとHTMLを出力する
変数.html_safe:htmlをエスケープ無しに表示する際に使うメソッド
クエリーパラメータ:サイトにアクセスする際につけるアドレス部分についたパラメータhttp:/アドレス?名前=値&名前=値とか
params: クエリーパラメータに送られた情報をまとめているハッシュオブジェクト、ここに値を送ってif文で出力したりする

スタイルシートの作成(各コントローラのスタイルシートの編集)

コントローラ.sccs:.scss拡張子のファイル(Sass)。コントローラ作成時に自動生成。スタイルシートとしてロードされる。Bootstrapを利用するので必要以上に記載しなくても…?

ビューのHTMLにあるクラスと関連した構文を作成するので両方をチェックしながらコーディング。
なので、対応するHTMLに個別に記述しているタグ(クラス)に対する記述を行う。

Bootstrapの導入

レイアウトやデザインを簡単に実装できるcssフレームワークの一つ。
必要な定義をGemfileに書き込み、ビルドでインストール。コンテナを立ち上げて実装完了。
application.html.erb:ページ全体のレイアウトについて記述しているファイル

application.scssファイルにインポートを追記。

application.jsも編集、追記で使えるように。

Bootstrapの導入:別のやり方(本の方)

CDNリンクの追加
タグによる埋め込みだけで使える方法もある

Bootstrapリファレンス

テンプレートファイルの作成2(HTMLの編集)

対応するコントローラのメソッドは初めは空にしておく。railsではレンダリングしていない場合、勝手に対応するテンプレート、つまりhtmlファイルを読み込んで表示してくれる。

また、コントローラに追記して用意した値をテンプレートに表示することもできる。
@変数:インスタンス変数を用意しておき、
<%= 〇〇%>のタグの中に入れる。これはrubyを実行するためのもの。

application.html.erb:共通で使用するレイアウト用のビューファイル
各ページのビューはこのファイルのbodyタグの<%= yield %>でレンダリングされる。

スタイルシートの作成2(各ページ共通のスタイルシートの編集)

base.scss(仮名)にh1タグに対する編集をする。
こちらは全体のビューに関わるタグに記述を行う

スタイルシートの作成3(全体のスタイルシートの編集)

@import "〇〇"でよく使う。Bootstrap導入でも記述した。
ここに@import "スタイルシート名"で記述して各スタイルシートを反映させる。

マージンの設定

リダイレクトの設定

気になったこと

コントローラのディレクトリにsをつける理由

わからなかったこと

謎のルーティングエラー
原因はroot 'homes#index'root `homes#index`になっていたこと。
普通に気をつけよう。

計画中のプロダクト

プロダクトの要件

コマンドでコントローラを作成

コントローラにアクションを記入

実装するアクションまとめ

1
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
1
0