はじめに
前回はプロジェクトの概要と開発環境を整理しました。
今回は実際に Railsアプリを立ち上げて、トップページを表示する ところまでを進めます。
前回の記事はこちら👇
ポートフォリオ構築の振り返り（第1回：プロジェクト概要と設計）
Railsアプリケーションの新規作成
まずはアプリケーションを新規作成します。
アプリケーションを作りたいディレクトリに居るか確認してから行うように！
$ rails new sample-app
$ cd sample-app
これで新しいRailsアプリが生成されました。
- rails new ○○（アプリ名） でアプリケーションを作成
- cd ○○ で作成したアプリのディレクトリへ移動
- ディレクトリが変更しているのを確認！
データベースの作成
次にデータベースを作成します。
$ rails db:create
プラグインが必要ならインストールします。
$ yarn add @babel/plugin-proposal-private-methods @babel/plugin-proposal-private-property-in-object
Rails 6以降（特にWebpackerを使う場合）、フロントエンドのコンパイルに yarn と babel が関わってきます。
ReactやモダンなJavaScriptの構文（クラスのプライベートフィールドなど）を使うと、Babelにその構文を変換するプラグインが必要になります。
yarn？babel？React？などは、この記事の最後でまとめます。
サーバーを起動して確認
以下のコマンドでサーバーを立ち上げます。
rails s
ブラウザで確認すると、Railsの初期画面（Yay! You’re on Rails!）が表示されます 🎉
トップページの作成
ルーティング設定
root にアクセスしたらトップページを表示できるようにルートを設定します。
Rails.application.routes.draw do
root to: "homes#top"
end
コントローラ作成
次にコントローラを作成します。
rails g controller homes top
生成されたファイルを確認します。
class HomesController < ApplicationController
def top
end
end
ビュー作成
トップページのビューを編集します。
<h1>ようこそ</h1>
ルーティング・コントローラー・ビューの関係
-
ルーティング（routes）
→ URLと処理をつなぐ地図のようなもの
→ 「このURLにアクセスしたらこのコントローラを呼ぶ」と決める -
コントローラー（Controller）
→ ルーティングで呼ばれた処理を実行する場所
→ データを取り出したり、ビューに渡したりする -
ビュー（View）
→ ユーザーに見せる画面
→ コントローラーから渡されたデータを表示する
まとめると
ルーティングが入口（URLにアクセス）、コントローラーが処理、ビューが出口（画面の表示）
動作確認
もう一度サーバーを起動し、ブラウザで確認すると
先ほど作成したトップページが表示されます 🎉
まとめ
今回は以下を行いました。
- Railsアプリを新規作成
- データベースを作成
- サーバー起動と初期画面の確認
- トップページを作成（ルーティング → コントローラ → ビュー）
これで 最初の画面 が表示できました。
次回は Deviseを導入してユーザー認証機能 を追加していきます。
ポートフォリオ構築の振り返り（第3回：Deviseでログイン機能を実装）
用語解説
JavaScript（ジャバスクリプト）
- 概要：Webページに動きをつけるプログラミング言語。
- HTMLやCSSで作ったページの「動作部分」を担当。
- 例：ボタンを押したら文字が変わる、入力フォームでリアルタイムにエラーを表示するなど。
- Railsでは、ユーザーが操作する画面の動きを実装するのに使う。
Yarn（ヤーン）
-
概要：JavaScript用のパッケージ管理ツール。
-
必要なライブラリやパッケージをまとめてインストール・管理できる。
-
コマンド例：
-
yarn add ライブラリ名→ ライブラリを追加 -
yarn install→ 依存関係（ライブラリがさらに必要とするライブラリ）を一括インストール
-
Babel（バベル）
- 概要：JavaScriptのトランスパイラ（変換ツール）。
- 最新のJavaScript構文（ES6以降）を、古いブラウザでも動く形に変換する。
- これにより、モダンな書き方のJavaScriptでも幅広い環境で動作可能になる。
Node.js（ノードジェイエス） ※今回のポートフォリオでは使用なし
- 概要：JavaScriptをブラウザの外でも動かせる環境。
- Railsでは、JavaScriptやCSSのビルドやコンパイル処理に使われることが多い。
React（リアクト） ※今回のポートフォリオでは使用なし
- 概要：Web画面を作るためのJavaScriptライブラリ。
- UIを「部品（コンポーネント）」ごとに作って組み合わせられる。
- Railsと組み合わせることで、より動的でリッチなフロントエンドを構築できる。
スクールのカリキュラム通りにBabelプラグインを追加したけど、復習してみると今回のポートフォリオではReactなどは使用していないため不要だったようだ。。。
今後Reactの学習も進めていって、Babelプラグインが必要なアプリケーションにしていきたいな！