📅 note公開日：2025-09-14 20:58
🔁 この記事はnoteで公開していた内容をQiitaへ移行・再掲したものです。（必要に応じて加筆修正しています）
今回のApprenticeShip１０期生５回目の課題は
「Conduit と同じ見た目・機能のサイトを Rails で実装」です。
この章では環境構築を中心に備忘録的に記録します。
GitHub連携については触れませんので、忘れずに連携お願いします🙇
Conduitとは
ブログプラットフォームを作成する RealWorld という OSS プロジェクトがあります。RealWorld は、実世界のような機能を持つプラットフォームを作ることで、フレームワークの技術を習得することを目的としたプロジェクトです。Conduit は、RealWorld で作成する Medium.com のクローンサイトです。
作業手順
- Rails プロジェクトを作成
- Home、Create、Edit Article、Article の HTML を ERB ファイルとして作成
- 各ページに CSS を適用
- routes.rb にルーティングを設定し、各ページにアクセスできるようにする
１、Rails プロジェクトを作成
1-1ディレクトリを作成
1-2Rubyのインストール
1-3Railsをインストール
1-4Railsアプリケーションを作成する
1-1ディレクトリを作成
開発を進めたいディレクトリを作成します。
私はRails勉強用にRailsというディレクトリを用意していたので、
その中に今回の課題のConduitという名前で専用ディレクトリを作成しました。
1-2、1-3
1-2、1-3まではRuby on Railsインストールガイドにしたがってインストールすれば問題ないです。
Ruby on Rails インストールガイド - Railsガイド
Rubyプログラミング言語とRuby on Railsのインストール方法について解説します。
railsguides.jp
1-4 Railsアプリケーションを作成する
1-4はRailsを学ぼうの「3.2 最初のRailsアプリケーションを作成する」
を参考にコマンドを実行する事でディレクトリを作成することができます。
しかし！
⚠️私の様に先に作業したいディレクトリを作成している人は要注意！⚠️
ここでは$ rails new storeというコマンドが紹介されていますが、
これは作業ディレクトリを作成していない人用です！！
すでに作業用ディレクトリを作っている人は、そのディレクトリ内で
rails new .とコマンドを入力する事で希望のディレクトリ内でアプリケーションを作成する事ができます。
Ruby on Rails ガイド：体系的に Rails を学ぼう
RailsガイドはRuby on Railsに特化した1,600ページ超えの大型リファレンスです。プロダクト開発を生産的に
railsguides.jp
因みに、rails new storeを作業ディレクトリ内で実行すると、作業ディレクトリ内にstoreというディレクトリが作成され、その中にアプリケーションが構築される形になります。
おそらく皆様GitHubやDockerを併用しながら作業されるかと思います。将来的に
・git push や docker compose でパスを扱うときに「どっちの階層がルートだっけ？」と混乱しやすい
・store という名前が課題の内容と一致しないのでレビュー時に「ん？」となりやすい
という点から、間違えて作成してしまったら削除して作り直しましょう。
以下、削除＆作成コマンド置いておきます。
削除コマンド--rfで強制削除。
rm -rf store
作成コマンド-作業ディレクトリ内で実行する事！
rails new .
２、Home、Create、Edit Article、Article の HTML を ERB ファイルとして作成
2-1ERBファイル作成
2-2Home、Create、Edit Article、ArticleそれぞれのHTMLを書く
2-1ERBファイル作成
以下ターミナルでコマンド一発作成できます。
⚠️作業用ディレクトリ内にいることを確認してください！
bin/rails generate controller Articles index show new edit
このコマンドで作成できるファイルが以下です。
- app/views/articles/index.html.erb（Home）
- app/views/articles/new.html.erb（Create）
- app/views/articles/edit.html.erb（Edit）
- app/views/articles/show.html.erb（Article）
- app/controllers/articles_controller.rb
参考までにVSCの画像つけておきます。👇
2-2Home、Create、Edit Article、ArticleそれぞれのHTMLを書く
2-1で作成したファイルにHTMLを書いていきます。
今回はApprenticeから
RealWorld のドキュメント を参考に、次のページの HTML と CSS を実装し、ページを作成してください。
と指示をもらっているため、HTMLはそのままコピペしてしまいます。（ラッキー✨）
この時、作成したファイルを開くと既に何やら記入されていますが、これはけしてOKです。
こんなやつ👇
<h1>Articles#new</h1>
<p>Find me in app/views/articles/new.html.erb</p>
copy
Home
Templates
realworld-docs.netlify.app
Create/Edit Article-ファイルは別なのにコードが一つしかありません。それぞれに同じコードをコピペしてOKです。
Templates
realworld-docs.netlify.app
Article
Templates
realworld-docs.netlify.app
３、各ページに CSS を適用
RealWorldのドキュメントからスタイルシート付きのヘッドタグを拝借できました！！！
このおかげで今回はCSSに気を取られることなく次のステップへ進ませていただきます💦
以下のページHeadにあるコードがそれです。
Templates
realworld-docs.netlify.app
Conclusion
今回は、Conduit課題の導入として Railsプロジェクト作成〜ERBファイル作成、HTML/CSSの当て方（参照元）まで を備忘録としてまとめました。
次の章では、作成した各ページに実際にアクセスできるようにする（routesなど）も含めて、実装を進めていきます。
note→Qiita repost：この記事はnoteで公開していた内容をQiitaへ移行・再掲したものです。