Ruby on Rails チュートリアル
Ruby on Rails チュートリアル
プロダクト開発の0→1を学ぼう
Railsチュートリアルとは?
Webサービスを作りながら
学ぶ大型チュートリアル
ゼロからデプロイまで
プロダクト開発の流れを集約
テキストや解説動画など
様々な学び方をサポート
大学や社員研修でも採用された、Webサービス開発が学べる学習サービスです。Railsチュートリアルで学び、自分のプロダクトを作ってみませんか?
あなたに合った学び方を選ぼう
購入者の声
Webサービス開発に触れてみて『ローカル開発に挑戦したい』『フロントエンドの基本も学びたい』と考えている方向けのコンテンツです。各トピックをチュートリアル形式で学べます。
開発環境の基本を学ぶ
コマンドライン編
- コマンド入力の基本
- ファイル操作と検索
- ディレクトリと構造
テキストエディタ編
- Vimエディタの基本
- VS Codeなどの操作
- 細かな編集のワザ
Git/GitHub 編
- Gitの基本コマンド
- ブランチとマージ
- コンフリクトの解消
Web技術の基本を学ぶ
HTML 編
- HTMLタグの基本
- 場面に応じた使い方
- GitHub Pagesで公開
CSS & Design 編
- CSS/デザインの基本
- Jekyllでサイト制作
- Flexboxの徹底理解
JavaScript 編
- JavaScript (JS) の基本
- 基本的なデータ構造
- JSでテスト駆動開発
メールでお知らせ
Railsチュートリアルの最新情報をキャッチアップしませんか?note の『Railsチュートリアル マガジン』をフォローしていただくと、最新情報がメールで届くようになります。
研修期間を短くしたい | |
理解度のバラつきを抑えたい | |
「やっただけ」にさせたくない |
Railsチュートリアルを事業で使ってみませんか?教育機関やスクールなどであればトレーニングなどのチーム向け機能がご利用できます。
利用実績・提携法人
社員研修や教材連携の事例も公開しております。様々な場面に対応していきたいと考えておりますので、まずはお気軽にご相談いただけると幸いです。
コンテンツ目次
第7版 目次
- 第1章ゼロからデプロイまで
- 第2章Toyアプリケーション
- 第3章ほぼ静的なページの作成
- 第4章Rails風味のRuby
- 第5章レイアウトを作成する
- 第6章ユーザーのモデルを作成する
- 第7章ユーザー登録
- 第8章基本的なログイン機構
- 第9章発展的なログイン機構
- 第10章ユーザーの更新・表示・削除
- 第11章アカウントの有効化
- 第12章パスワードの再設定
- 第13章ユーザーのマイクロポスト
- 第14章ユーザーをフォローする
コマンドライン編
テキストエディタ編
- 第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/GitHub編
- 第1章はじめてのGit
- 第2章リポジトリのバックアップと共有
-
- 2.1GitHubにサインインするには
- 2.2リモートリポジトリ
- 2.3READMEを追加する
- 2.4まとめ
- 第3章中間のワークフロー
-
- 3.1コミットとpushを繰り返す
- 3.2登録したくないファイルを除外する
- 3.3ブランチ作成とマージ
-
- 3.3.1rebase
- 3.4エラーを復旧する
- 3.5まとめ
- 第4章Gitで共同作業する
-
- 4.1gitの「clone」「push」「pull」
- 4.2pullしたときのコンフリクトをマージする
-
- 4.2.1コンフリクトが起きない変更
- 4.2.2コンフリクトが起きる変更
- 4.3ブランチをpushする
- 4.4とっておきのボーナス
- 4.5まとめ
- 4.6高度なセットアップ
-
- 4.6.1チェックアウト用のエイリアスコマンド
- 4.6.2プロンプトでのブランチ名表示とTabキー補完
- 4.7本チュートリアルを終えた方に
HTML編
- 第1章HTMLの基礎
- 第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 & Design編
- 第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.6.1 例外その1:
- 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編
- 第1章Hello, world!
- 第2章文字列
- 第3章配列
- 第4章その他のネイティブオブジェクト
-
- 4.1 mathオブジェクトと数値
-
- 4.1.1 より高度な数値演算
- 4.1.2 数値を文字列に変換する
- 4.2 日付
- 4.3 正規表現
-
- 4.3.1 正規表現のメソッド
- 4.3.2 文字列の正規表現メソッド
- 4.4 「プレーン」オブジェクト
- 4.5 応用: ワードカウント
-
- 4.5.1 マップ
- 第5章関数
-
- 5.1 関数を定義する
-
- 5.1.1 数値の配列を数値としてソートする
- 5.1.2 アロー関数式
- 5.2 関数をファイル内で定義する
- 5.3 メソッドチェイン
-
- 5.3.1 絵文字に注意
- 5.4 forEachによるイテレーション
- 第6章関数型プログラミング
-
- 6.1 map()関数
- 6.2 filter()関数
- 6.3 reduce()関数
-
- 6.3.1 実行例(1/2)
- 6.3.2 実行例(2/2)
- 6.3.3 関数型プログラミングとテスト駆動開発
- 第7章オブジェクトとプロトタイプ
-
- 7.1 オブジェクトを定義する
- 7.2 プロトタイプ
- 7.3 ネイティブオブジェクトを変更する
- 第8章テストとテスト駆動開発
-
- 8.1 テスティングツールのセットアップ
- 8.2 最初のテストカバレッジ
-
- 8.2.1 テストのペンディング
- 8.3 ステップ1「Red」
- 8.4 ステップ2「Green」
- 8.5 ステップ3「Refactor」
-
- 8.5.1 npmモジュールを公開する
- 第9章イベントとDOMの操作
-
- 9.1 実際に動くパリンドロームページ
- 9.2 イベントリスナー
- 9.3 ダイナミックHTML
- 9.4 フォームを扱う
- 第10章Node.jsでシェルスクリプトを書く
-
- 10.1 ファイルの中身を読み込む
- 10.2 URLから読み込む
- 10.3 コマンドラインでDOMを操作する
- 第11章完全なサンプルアプリ: 画像ギャラリー
- 11.1 ギャラリーアプリを準備する
-
- 11.1.1 JavaScriptを準備する
- 11.2 ギャラリー画像を変更する
- 11.3 デフォルト画像を設定する
- 11.4 画像の内部情報を変更する
-
- 11.4.1 デプロイする
- 11.5 総まとめ
-
- 11.5.1 JavaScriptの読み物ガイド
- 11.5.2 新しいプログラミング言語を学ぼう
原著者から,日本の皆さまへ
まつもとゆきひろ (Matz) 氏のいる日本の方々にも Rails Tutorial を届けられて嬉しいです。ここ数年間でMatzや日本のRuby開発者の方々とお会いしましたが、皆さんの技術的な才覚と親切さはいつも私に感銘を与えてくれます。
また、安川氏や八田氏を始めとする多くの関係者によって、本書が日本にも届けられたことを光栄に思います。私の賛同を得て電子書籍版なども提供しており、その収益はこの活動を支えていきます。もしあなたが日本の読者であれば、ぜひ本書を手に取ってみてください!
協力者
第2版 (Rails 4.0 対応)
-
-
第1章~第11章: @hachi8833, @yasulab
-
第2版 (Rails 3.2 対応)
-
第1章: @yasulab
第2章: @yasulab, @hachi8833
第3章: @yasulab, @Spring_MT
第4章: Fumiaki Matsushima
第5章: @takahiroy, Kase Hiroki, @yasulab
第6章: Hiroyuki Hayashi, @hachi8833
第7章: @hachi8833
第8章: Minori Tokuda, Sakiyo Yamaoka, @hachi8833
第9章: @hachi8833
第10章: @sonots
第11章: @hachi8833
第12章: @hachi8833, @yasulab
レビュー: @takahiroy, @Amothic, @_simanman, @nihemak, @yamaguchih, et al.
全版共通
-
発起人: @yasulab
監修者: @hachi8833, @yasulab
開発・運営: YassLab 株式会社
ライセンス
原著
Ruby on Rails Tutorial: Learn Web Development with Rails.
Copyright © Michael Hartl.
本書
Ruby on Railsチュートリアル:プロダクト開発の0→1を学ぼう
Copyright © YassLab 株式会社 (商標公報6006997)
更新日: 2024年09月26日
本サイトは原著者から許諾を得て運営されています。
社員研修や教育機関・スクールなどでもお使いいただけます。
Railsチュートリアルは YassLab 社によって運営されています。
コンテンツを継続的に提供するため、書籍・動画・質問対応サービスなどもご検討していただけると嬉しいです。
研修支援や教材連携にも対応しています。note マガジンや YouTube チャンネルも始めたので、よければぜひ遊びに来てください!