{"id":20291442,"url":"https://github.com/yasslab/codespaces-railstutorial","last_synced_at":"2025-05-16T08:04:48.518Z","repository":{"id":148331808,"uuid":"619550511","full_name":"yasslab/codespaces-railstutorial","owner":"yasslab","description":"🎓 Railsチュートリアルで採用しているクラウド開発環境『GitHub Codespaces』のテンプレートです。","archived":false,"fork":false,"pushed_at":"2025-04-03T05:47:57.000Z","size":60507,"stargazers_count":58,"open_issues_count":0,"forks_count":293,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-12T04:48:03.656Z","etag":null,"topics":["codespaces","devcontainer","rails","ruby","ruby-on-rails","template","tutorial"],"latest_commit_sha":null,"homepage":"https://note.com/yasslab/n/n427c56266295","language":"Ruby","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yasslab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-03-27T11:13:32.000Z","updated_at":"2025-04-03T05:48:01.000Z","dependencies_parsed_at":"2023-12-27T08:30:16.968Z","dependency_job_id":"eda9464e-5424-4d79-a0af-145d2e602914","html_url":"https://github.com/yasslab/codespaces-railstutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yasslab%2Fcodespaces-railstutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yasslab%2Fcodespaces-railstutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yasslab%2Fcodespaces-railstutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yasslab%2Fcodespaces-railstutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yasslab","download_url":"https://codeload.github.com/yasslab/codespaces-railstutorial/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254493378,"owners_count":22080126,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codespaces","devcontainer","rails","ruby","ruby-on-rails","template","tutorial"],"created_at":"2024-11-14T15:12:23.298Z","updated_at":"2025-05-16T08:04:48.252Z","avatar_url":"https://github.com/yasslab.png","language":"Ruby","readme":"# Codespaces ♥️ Railsチュートリアル\n\n本リポジトリは[Railsチュートリアル](https://railstutorial.jp/)の [GitHub Codespaces](https://github.co.jp/features/codespaces) 用テンプレートです。2022年11月に公開された[GitHub公式のRailsテンプレート](https://github.com/github/codespaces-rails)を、[Railsチュートリアル](https://railstutorial.jp)用にカスタマイズしたものです。\n\n- [:computer: GitHub Codespaces 対応！環境構築が不要に（解説動画付き） - note](https://note.com/yasslab/n/n427c56266295)\n- [:newspaper: GitHub Codespaces が全ユーザーに無料提供へ、毎月60時間分 - Publickey](https://www.publickey1.jp/blog/22/github_codespaces60jetbrainsjupyterlabide.html)\n\n\u003cbr\u003e\n\n本テンプレートは、Railsチュートリアルの第1章・第2章・第3章の冒頭にある `rails new` および `Gemfile` の更新まで（難しいとされる「環境構築」まで）が完了している状態となっており、**rails server が立ち上げられる状態から学習をスタートできます** 📝✨\n\n![Codespaces のサンプル画面](https://i.gyazo.com/b3af38fd1f8b2824791da9001a2bf6a0.png)\n\n\u003c!-- ![旧：Codespaces のサンプル画面](https://i.gyazo.com/af23bec87ce2b3d79613e16883700ecf.png) --\u003e\n\n\u003cbr\u003e\n\n## 必要なもの\n\n- [Chrome](https://www.google.com/intl/ja/chrome/browser/) などのブラウザ（Chrome だとより快適に動作します）\n- [GitHub](https://github.co.jp/) のアカウント（もしまだであれば事前に作成しておきましょう）\n  [![GitHub Top](https://i.gyazo.com/b5bad7bc8318837b67def1643a52b955.png)](https://github.co.jp/)\n\n\u003cbr\u003e\n\n## Codespaces 使い方\n\n以下の手順で、Codespaces を利用した環境構築が行えます 🛠\n\n1. 当ページの上部にある `Use this template` から `Create a new repository` をクリックします。もし `Use this template` が表示されない場合は、ブラウザの横幅を広げてみましょう。\n   ![本リポジトリからリポジトリを作成する場面](https://i.gyazo.com/a483f77e8299ea6b5dd75795c793fb8b.png)\n\n1. 移動したページで、`Repository name` に作成するアプリ名、`Description` にアプリの説明文を入力し、`Private` を選択してリポジトリを非公開に設定します。最後に `Create repository from template` をクリックすると、新しいリポジトリが作成されます。（以下は第1章の `hello_app` を作成する場合の例です)\n   ![テンプレートリポジトリの作成画面](https://i.gyazo.com/2e0188742504ec559109ba35a6b3714d.png)\n\n1. 作成したリポジトリに飛んだら、`Code` から `Codespaces` タブに移動し、`Create codespace on main` をクリックします。\n   ![テンプレートリポジトリから Codespaces へ](https://i.gyazo.com/17c40d8c1453de7a5db9d7ed6b603db6.png)\n\n1. 環境構築が完了するのを待ちます（１〜２分ほど掛かります）\n   ![Codespaces の立ち上げ中の画面](https://i.gyazo.com/1dc81bccd2f416bc936cd60f348a6d7a.png)\n\n1. Railsチュートリアルのロゴ画像が表示されたら完成です!\n   ![Codespaces による環境構築の完了画面Top](https://i.gyazo.com/b3af38fd1f8b2824791da9001a2bf6a0.png)\n\n`rails new` や `Gemfile` の更新、`rails server` を立ち上がるところまで（難しいとされる「環境構築」が終わるところまで）が完了している状態なので、**第1章・第2章・第3章のコードを書くところから始められます!** 📝✨\n\n例えば第1章の場合は「[1.3.2 `rails server`](https://railstutorial.jp/chapters/beginning#sec-rails_server)」の途中から、すなわち `rails server` を立ち上げたところからスタートできます。\n\n\u003e :memo: Codespaces によってココまで自動化されていますが、**1.3.2 以前の内容（何が自動化されたのか）を知ることも大事**です。このまま 1.3.2 以降に進めていただいてももちろん大丈夫ですが、どこかの段階で 1.3.2 以前の内容にも目を通しておくと、知識は広がります。\n\n\u003cbr\u003e\n\n## インストール済みの拡張機能について\nより良い学習体験に繋げるため、本テンプレートには以下の VS Code 拡張機能がデフォルトで入っています。\n\n- [:octocat: Shopify/ruby-lsp](https://github.com/Shopify/ruby-lsp):\n  - Ruby コードを色分けして表示するハイライト機能や、コード補完機能などが使えます（以下は[公式のデモ動画](https://github.com/Shopify/ruby-lsp/tree/main/vscode#features)です）\\\n  ![Ruby LSP Official DEMO](https://i.gyazo.com/71a5c5114b7836d942a5145ca58eadb9.gif) \\\n  参考記事: [Ruby LSPのコードナビゲーションで強化された主な機能 - TechRacho](https://techracho.bpsinc.jp/hachi8833/2024_07_29/143652)\n\n- [:octocat: castwide/vscode-solargraph](https://github.com/castwide/vscode-solargraph):\n  - Ruby コードの定義元が調べられるコードジャンプ機能や、ドキュメント表示機能などが使えます（以下は[公式のデモ動画](https://github.com/castwide/vscode-solargraph#readme)です） \\\n  ![Solargraph Official DEMO](https://i.gyazo.com/5fac6a81088d814a5b8354431239b03d.gif)\n\nRuboCop によるコード整形、Ruby 公式デバッガーなどの拡張機能はお好みで追加してください。本テンプレートでは必要最低限の拡張機能に留めています。\n\n- [:octocat: misogi/vscode-ruby-rubocop](https://github.com/misogi/vscode-ruby-rubocop)\n- [:octocat: ruby/vscode-rdbg](https://github.com/ruby/vscode-rdbg)\n- [:octocat: ruby-debug/ruby-debug-ide](https://github.com/ruby-debug/ruby-debug-ide)\n- [:octocat: Shopify/vscode-shopify-ruby](https://github.com/Shopify/vscode-shopify-ruby)\n- [:octocat: primer/github-vscode-theme](https://github.com/primer/github-vscode-theme)\n\n\u003cbr\u003e\n\n## よくあるエラーと解決方法\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003eブラウザ別のエラー解決方法を見る（2023年3月時点）\u003c/strong\u003e\u003c/summary\u003e\n  \u003ch3\u003eGoogle Chrome - Webビューの読み込みエラー\u003c/h3\u003e\n  \u003cimg src='https://i.gyazo.com/c59a5e4c331e5a513860bc118526378d.png)' alt='Chrome のエラー例１' /\u003e\n  \u003cp\u003e\u003ccode\u003eError: Could not register service workers: NotSupportedError ...\u003c/code\u003e などが表示され、「シンプルブラウザーは開いたけど何も表示されない」という場合があります。これは必要な Cookie が許可されていない場合に起こります。以下の例を参考に、サードパーティの Cookie を許可すると解決する場合が多いです。\u003c/p\u003e\n  \u003cimg src='https://i.gyazo.com/491d00e54d05da7d920816a2dbd53491.png' alt='Chrome のエラー例２' /\u003e\n  \u003cp\u003eCookie を許可しても解決しない場合は、シンプルブラウザーの右端にある「ブラウザーで開く」アイコンをクリックしてください。ブラウザの別タブで画面が表示され、こちらの画面でも現在の状態をご確認いただけます。\u003c/p\u003e\n  \u003cimg src='https://i.gyazo.com/289ea5dc51a0718161b59830c6e3d9ec.png' alt='Chrome のエラー例３' /\u003e\n  \u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n  \u003ch3\u003eFirefox - Webビューの読み込みエラー\u003c/h3\u003e\n  \u003cp\u003e上記の Chrome と同様に、シンプルブラウザーの画面が表示されない事があります。アドレスバーにある強化型トラッキング防止機能のアイコンをクリックし、「オフ」にすることでプレビューが表示されるようになります。\u003c/p\u003e\n  \u003cimg src='https://i.gyazo.com/7a73af24e1d7fde7ebb2ad00fe4bca0a.png' alt='Firefox のエラー例１' /\u003e\n  \u003cp\u003e上記の機能をオフにしても解決しない場合は、シンプルブラウザーではなく「新規ウィンドウでサイトを開く」をクリックしてください。ブラウザの別タブで画面が表示され、こちらの画面でも現在の状態をご確認いただけます。\u003c/p\u003e\n  \u003cimg src='https://i.gyazo.com/488b1f6f090372bbafd7b5590d56acdd.png' alt='Firefox のエラー例２' /\u003e\n  \u003cimg src='https://i.gyazo.com/8884a98fe667819d8730efeb905265eb.png' alt='Firefox のエラー例３' /\u003e\n  \u003cbr\u003e\u003cbr\u003e\u003cbr\u003e\n\n  \u003ch3\u003eSafari - 入力の遅延・アイコンの一部非表示\u003c/h3\u003e\n  \u003cp\u003eSafari では問題なくことが多いです。ただし、文字入力をしてから、Codespaces 上の画面に表示されるまでが遅い場合があります。また一部のアイコンが表示されない現象も確認できています。開発する上で問題になるわけではないですが、もし気になる場合は Google Chrome など他のブラウザをお試しください。\u003c/p\u003e\n  \u003cimg src='https://i.gyazo.com/a74db22c2faba07a44af284a08f1f21b.png' alt='Safari のエラー例１' /\u003e\n\u003c/details\u003e\n\n\u003cbr\u003e\u003cbr\u003e\n\n## 制作・ライセンス\n\nCopyright \u0026copy; [YassLab](http://yasslab.jp/) Inc.\u003cbr\u003e\nRailsチュートリアル運営チーム\u003cbr\u003e\n[https://railstutorial.jp/](https://railstutorial.jp/)\n\n\u003csmall\u003e\n  ソースコードのライセンスは \u003ca href='https://github.com/yasslab/codespaces-railstutorial/blob/main/LICENSE'\u003eLICENSE\u003c/a\u003e をご確認ください。\u003cbr\u003e\n  ロゴ画像やデモ動画などは各制作者の著作物となります。\n\u003c/small\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyasslab%2Fcodespaces-railstutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyasslab%2Fcodespaces-railstutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyasslab%2Fcodespaces-railstutorial/lists"}