Railsチュートリアル - 学習の流れ

コンテンツ一覧と学習の流れ

本サイトはProgateなどでプログラミング経験された方を対象として、より実践的な技術が学べるコンテンツとなっています。ローカル開発の基本から、GitHub Pagesを使ったWebサイト制作、JavaScriptのテスト駆動開発、Ruby on Railsによる本格的なプロダクト開発まで取り揃えています。

本ページでは『各コンテンツで学べる技術』と『学習の流れ』をまとめています。プロダクト開発の全体像を把握したり、学習計画を立てる場面などでご活用ください。

コンテンツ一覧(難易度順)

初めての方へ

メッセージ 読む

これからプロダクト開発を学ぶ方へのメッセージです。全体像を把握したい場面で役立ちます。

開発環境の基本

プログラミングは細かな「ワザ」の積み重ねです。基本を1つずつ押さえることが、開発の素早さに繋がります。

command_line

コマンドライン編 読む

コマンド入力の基本、ファイル操作と検索、ディレクトリと構造などが学べます。

目次
text_editor

テキストエディタ編 読む

Vimエディタの基本、VS Codeなどの操作、編集の各種テクニックなどが学べます。

目次
  • 1章テキストエディタとは
  • 2章現代的なテキストエディタ
    • 2.1テキストエディタを選ぶ
      • 2.1.1Sublime Text
      • 2.1.2Visual Studio Code (VSCode)
      • 2.1.3Atom
    • 2.2ファイルをエディタで開く
      • 2.2.1シンタックスハイライト
      • 2.2.2Markdownをプレビュー表示する
    • 2.3ファイル内を移動する
    • 2.4テキスト範囲を選択する
      • 2.4.11つの単語を選択する
      • 2.4.21つの行全体を選択する
      • 2.4.3複数行を選択する
      • 2.4.4ドキュメント全体を選択する
    • 2.5カット、コピー、貼り付け
      • 2.5.1Jumpcutツールについて
    • 2.6削除と取り消し
    • 2.7変更を保存する
    • 2.8検索と置換
    • 2.9まとめ
  • 3章テキスト編集の高度な技
    • 3.1オートコンプリート機能をTabキーでトリガーする
      • 3.1.1オートコンプリート
      • 3.1.2Tabトリガー
    • 3.2ソースコードを書く
      • 3.2.1シンタックスハイライト
      • 3.2.2コメントアウト機能
      • 3.2.3インデントと逆インデント
      • 3.2.4行番号を指定してジャンプする
      • 3.2.580カラムの制限
    • 3.3実行可能なスクリプトを書く
    • 3.4プロジェクトを編集する
      • 3.4.1ファジーオープン
      • 3.4.2マルチペイン
      • 3.4.3 グローバル検索置換
    • 3.5カスタマイズ
    • 3.6まとめ
    • 3.7本チュートリアルを終えた方に
git

Git / GitHub 編 読む

Gitの基本コマンド、ブランチ作成とマージ、コンフリクトの解消方法などが学べます。

目次

Web技術の基本

WebブラウザはHTMLやCSS、JavaScriptを読み込んで描画します。ブラウザが対応している基本を押さえることが、Webの理解に繋がります。

html

HTML 編 読む

HTMLタグの基本、場面に応じた各タグの用途、GitHub Pagesでのサイト公開方法などが学べます。

目次
  • 2章indexページに手を加える
    • 2.1見出し
    • 2.2テキストの整形
      • 2.2.1イタリック体による強調
      • 2.2.2太字による強調
    • 2.3リンク
    • 2.4画像を追加する
      • 2.4.1ホットリンク
  • 3章ページを追加してさまざまなタグを学ぶ
    • 3.1HTMLに関するHTMLページ
    • 3.2テーブル
      • 3.2.1ブロック要素
      • 3.2.2インライン要素
    • 3.3divタグとspanタグ
    • 3.4リスト
    • 3.5ナビゲーションメニュー
  • 4章インライン方式のスタイル追加とCSS
    • 4.1テキストにスタイルを指定する
    • 4.2フロート
    • 4.3マージンを適用する
    • 4.4マージンの小技
    • 4.5ボックスを使ったスタイル指定
    • 4.6ナビゲーションメニューにスタイルを指定する
    • 4.7はじめてのCSS
      • 4.7.1内部スタイルシート
      • 4.7.2外部スタイルシート
    • 4.8 まとめ
css

CSS & Design 編 読む

CSSとデザインの基本、静的サイトジェネレータ『Jekyll』を使ったWebサイト制作、実例で学ぶflexboxの仕組み、モバイル対応のテクニックなど学べます。

目次
  • 1章 CSSのあらまし
  • 2章 「スタイル指定」の作法
  • 3章 CSSの値: 色とサイズを指定する
    • 3.1 CSSの色指定
      • 3.1.1 16進数のカラーコード
      • 3.1.2 色をrgb()で、透明度をrgba()で指定する
    • 3.2 サイズ指定の基礎
    • 3.3 ピクセル(および日陰者の「ポイント」)
    • 3.4 パーセントによる指定
      • 3.4.1 フォントサイズのパーセント指定について
    • 3.5 em単位によるフォントサイズ指定
    • 3.6 夢のrem単位指定がやってきた
    • 3.7 サイズ指定のニューフェイス: vhとvw
    • 3.8 気持ちよく読めるフォントにしよう
  • 4章 ボックスモデルを完全攻略する
    • 4.1 インラインvsブロック
      • 4.1.1 display: none
      • 4.1.2 display: block
      • 4.1.3 display: inline
      • 4.1.4 display: inline-block
      • 4.1.5 display: flex
    • 4.2 マージン、パディング、ボーダー
      • 4.2.1 マージンの不気味な挙動
    • 4.3 フロート
      • 4.3.1 フロートをクリアする
    • 4.4 overflowスタイルに関する追記
    • 4.5 インラインブロック
    • 4.6 ボックスのマージン
      • 4.6.1 例外その1: margin: auto;
      • 4.6.2 例外その2: マージンにマイナスの値を指定する
    • 4.7 パディングは単なる椅子のクッションではない
    • 4.8 ボーダーで遊ぶ
      • 4.8.1 ボーダーの「radius」
      • 4.8.2 CSSで丸を描く
      • 4.8.3 line-height
      • 4.8.4 CSSとHTMLのずれを修正する
  • 5章 レイアウトを組み立てる
    • 5.1 レイアウト組みの基礎
    • 5.2 Jekyll
      • 5.2.1 Jekyllをインストールして実行する
    • 5.3 Jekyllのさまざまな特殊ディレクトリ
      • 5.3.1 layouts/ディレクトリとレイアウトテンプレートファイル
      • 5.3.2 includes/ディレクトリ
      • 5.3.3 pages/ディレクトリとページテンプレート
      • 5.3.4 posts/ディレクトリとpost-typeファイル
    • 5.4 レイアウトファイル
    • 5.5 CSSファイルを切り出して「CSSリセット」を加える
    • 5.6 Jekyllの「インクルード」の概要: headセクションとヘッダー
      • 5.6.1 ページの最上部にヘッダーセクションを置く
      • 5.6.2 ナビゲーションと「子セレクタ」
    • 5.7 高度なセレクタ
      • 5.7.1 擬似クラス
      • 5.7.3 first-child
      • 5.7.5 兄弟セレクタ
    • 5.8 位置指定
      • 5.8.1 ロゴ文字を本物の画像にする
    • 5.9 ヘッダーセクションを上部に固定する
    • 5.10 フッターをincludesフォルダにインクルードする
  • 6章 ページのテンプレートとfrontmatterの書き方
    • 6.1 テンプレートのコンテンツ
    • 6.2 「やっぱり家(Home)が一番」
    • 6.3 さらに高度なセレクタ
      • 6.3.1 :before疑似要素と:after疑似要素
      • 6.3.2 CSSの:beforeと:afterで三角形を作る技
    • 6.4 ページとフォルダを追加する
  • 7章 flexboxで特殊なレイアウトページを構築する
    • 7.1 コンテナにコンテンツをぴったり流し込む
    • 7.2 flexboxで垂直方向の中央揃えを実現する
    • 7.3 flexboxスタイルのオプションとショートハンド
      • 7.3.1 フレックスコンテナのプロパティ
      • 7.3.2 フレックスアイテムのプロパティ
    • 7.4 3段組のページレイアウト
    • 7.5 ギャラリーの「スタブ」
  • 8章 ブログを追加する
    • 8.1 ブログ記事を1件追加する
      • 8.1.1 ブログインデックスの構造
    • 8.2 ブログのIndexページでコンテンツをリスト表示する
    • 8.3 ブログの記事ページにスタイルを設定する
  • 9章 モバイルとメディアクエリ
    • 9.1 モバイル向けデザインを始める
      • 9.1.2 モバイルデバイスを使わずにモバイル表示を確認する
    • 9.2 モバイル向けに最適化する
      • 9.2.1 グローバルスタイル
      • 9.2.2 Homeページのスタイル
      • 9.2.3 3段組ギャラリーページのスタイル
      • 9.2.4 ブログ記事一覧ページのスタイル
      • 9.2.5 ブログ記事ページのスタイル
    • 9.3 モバイルの「ビューポート」
    • 9.4 ドロップダウンメニュー
      • 9.4.1 ヒットボックス
      • 9.4.2 ドロップダウンボックスを作る
    • 9.5 モバイルのドロップダウンメニュー
  • 10章 細部を仕上げる
    • 10.1 カスタムフォント
      • 10.1.1 ベクタフォントをインストールする
      • 10.1.2 CDNからテキストフォントを読み込む
    • 10.2 ファビコン
    • 10.3 カスタムタイトルとmetaタグ
      • 10.3.1 カスタムタイトル
      • 10.3.2 カスタム説明文
    • 10.4 まとめと関連読み物
javascript

JavaScript 編 読む

JavaScriptの基本、基本的なデータ構造とメソッド、JavaScriptにおけるテスト駆動開発などが学べます。

目次

Rubyの基本

RubyやHTTPの基本が分かると、Railsの仕組みがより理解できます。本コンテンツではそれぞれの基本をRubyの軽量フレームワーク『Sinatra 』で学びます。

ruby

Ruby / Sinatra 編 (準備中)

プログラミング言語『Ruby』と『Sinatra』のセットアップから始まり、文字列や配列、シンボルやハッシュ、ブロックやMap/Reduceメソッド、クラスと継承、テストとリファクタリング、Gemの作り方、シェルスクリプトとの連携、Sinatraを使ったWeb技術の実践例などが学べます。

Railsチュートリアル (本編)

実践的なプロダクト開発を作りながら学ぶ本編です。Webテキスト解説動画質問対応サービスもあります。

Ruby on Rails 編 読む

上記の基本知識を組み合わせて、テストの基本やテスト駆動開発、Git/GitHubを使ったバージョン管理、HerokuやAWSを使った開発/本番環境の構築、MVCやRESTfulアーキテクチャーの基本、Session/Cookieを使ったログイン機構、暗号化/ハッシュ化とメールを使ったアカウント認証、メタプログラミング入門、多対多のモデル設計、簡単なフロントエンド連携 (Ajax)、簡単なSQLパフォーマンスチューニングなどが学べます。

目次

第6版 目次

Railsガイド

トピック毎に体系化された1400ページ超えの大型リファレンスです。Railsチュートリアルを完走し、プロダクト開発の実践に入った方々を対象としていて、各機能の詳しい使い方を知りたいときに便利です。

Ruby on Rails の大型リファレンス 読む

上記本編で紹介された各機能の詳細に加えて、Railsのセキュリティやデバッグツール、非同期処理を実現する『Active Job』、リアルタイム双方向通信用の『Action Cable』、フロントエンドフレームワークと組み合わせるための『Rails API』など、より実践的な仕組みが学べます。

今後もさらに追加されます。

学習の流れ

各コンテンツを使った学習例は次のとおりです。『この流れが正解』といったものはありませんが、自分に合った学習計画を立てる場面などでご活用ください。

☝️ 図中に記載されている各種サービスの概要は、次の通りです。

  • Progate

    対話的に学べるオンラインのプログラミング学習サービスです。初心者向けのコンテンツが特に充実しており、初めてプログラミングをする方にオススメです。『Progate Journey』でプログラミング学習の全体像を把握することもできます。
  • Railsチュートリアル実践入門シリーズ

    Railsチュートリアルを進めて『難しい!』と感じた方を対象とした補足コンテンツです。『基礎力を高めたい』『まずは基本を押さえたい』という方にオススメです。
  • RailsチュートリアルWebテキスト

    WebpackやGitHubにも対応した最新のコンテンツです。『理解がうまく進まない』『もっと早く学びたい』といった場合は、スライドと実演動画で学べるRailsチュートリアル解説動画がオススメです。
  • Railsチュートリアル解説動画

    実演付きの解説動画で学べる一押しのコンテンツです。イラストと実演で早く効率的に学べるので、すばやく学習を完了させたい人に特にオススメです。
  • 質問対応サポート付き解説動画【提供: ShareWis】

    現役Rubyエンジニアのサポート付きで学べる、解説動画の質問対応付きサービスです。後半の章ほど難しくなっていきますが、サポートを受けながらしっかり学ぶことができます。
  • コミュニティサポート付き解説動画【提供: TechCommit】

    コミュニティ型の学習支援サービスです。独学での学習が不安な方にオススメです。(【Railsチュートリアルコラボ】Rails学習支援追加パックでお申し込みください。)
  • Ruby on Railsガイド

    トピック毎に体系化された、1,600ページを超えるRailsの大型リファレンスです。Railsチュートリアルを完走し、プロダクト開発の実践に入った方々を対象として、各機能の詳しい使い方を解説する辞書型サービスです。『もっと生産的に開発したい』という方向けにProプランTeamプラン電子書籍版も提供しています。
  • 読み物ガイド

    Railsチュートリアル完走者を対象とした『読み物ガイド』も用意しています。『完走後ってどうしたらいいの?』とお悩みの場面でお役に立てば嬉しいです 😌💖

上記の他、YouTubeチャンネルnoteマガジンもあります。『Ruby/Rails学習者の統計データ』や『3ヶ月でWebサービスを開発した話』、『医者からエンジニアになった話』などを公開しているので、ぜひご購読ください!📺✅