Giter VIP home page Giter VIP logo

m0use-dev / codespaces-railstutorial Goto Github PK

View Code? Open in Web Editor NEW

This project forked from yasslab/codespaces-railstutorial

0.0 0.0 0.0 60.82 MB

🎓 Railsチュートリアルで採用しているクラウド開発環境『GitHub Codespaces』のテンプレートです。

Home Page: https://note.com/yasslab/n/n427c56266295

License: MIT License

JavaScript 3.91% Ruby 72.54% CSS 4.71% HTML 18.85%

codespaces-railstutorial's Introduction

Codespaces ♥️ Railsチュートリアル

本リポジトリはRailsチュートリアルGitHub Codespaces 用テンプレートです。2022年11月に公開されたGitHub公式のRailsテンプレートを、Railsチュートリアル用にカスタマイズしたものです。

本テンプレートは、Railsチュートリアルの第1章・第2章・第3章の冒頭にある rails new および Gemfile の更新まで(難しいとされる「環境構築」まで)が完了している状態となっており、rails server が立ち上げられる状態から学習をスタートできます 📝✨

Codespaces のサンプル画面


必要なもの

  • Chrome などのブラウザ(Chrome だとより快適に動作します)
  • GitHub のアカウント(もしまだであれば事前に作成しておきましょう) GitHub Top

Codespaces 使い方

以下の手順で、Codespaces を利用した環境構築が行えます 🛠

  1. 当ページの上部にある Use this template から Create a new repository をクリックします。もし Use this template が表示されない場合は、ブラウザの横幅を広げてみましょう。 本リポジトリからリポジトリを作成する場面

  2. 移動したページで、Repository name に作成するアプリ名、Description にアプリの説明文を入力し、Private を選択してリポジトリを非公開に設定します。最後に Create repository from template をクリックすると、新しいリポジトリが作成されます。(以下は第1章の hello_app を作成する場合の例です) テンプレートリポジトリの作成画面

  3. 作成したリポジトリに飛んだら、Code から Codespaces タブに移動し、Create codespace on main をクリックします。 テンプレートリポジトリから Codespaces へ

  4. 環境構築が完了するのを待ちます(1〜2分ほど掛かります) Codespaces の立ち上げ中の画面

  5. Railsチュートリアルのロゴ画像が表示されたら完成です! Codespaces による環境構築の完了画面Top

rails newGemfile の更新、rails server を立ち上がるところまで(難しいとされる「環境構築」が終わるところまで)が完了している状態なので、第1章・第2章・第3章のコードを書くところから始められます! 📝✨

例えば第1章の場合は「1.3.2 rails server」の途中から、すなわち rails server を立ち上げたところからスタートできます。

📝 Codespaces によってココまで自動化されていますが、1.3.2 以前の内容(何が自動化されたのか)を知ることも大事です。このまま 1.3.2 以降に進めていただいてももちろん大丈夫ですが、どこかの段階で 1.3.2 以前の内容にも目を通しておくと、知識は広がります。


インストール済みの拡張機能について

より良い学習体験に繋げるため、本テンプレートには以下の VS Code 拡張機能がデフォルトで入っています。

  • :octocat: rubyide/vscode-ruby:
    • Ruby コードのハイライトや折り畳みなどが可能になります
  • :octocat: castwide/vscode-solargraph:
    • Ruby コードの定義元が調べられるコードジャンプ機能や、Ruby の型情報を使ったコード補完、公式ドキュメントの表示機能などが使えます(以下は公式のデモ動画です)
    • Solargraph Official DEMO

RuboCop によるコード整形、Ruby 公式デバッガーなどの拡張機能はお好みで追加してください。本テンプレートでは必要最低限の拡張機能に留めています。


よくあるエラーと解決方法

ブラウザ別のエラー解決方法を見る(2023年3月時点)

Google Chrome - Webビューの読み込みエラー

Chrome のエラー例1

Error: Could not register service workers: NotSupportedError ... などが表示され、「シンプルブラウザーは開いたけど何も表示されない」という場合があります。これは必要な Cookie が許可されていない場合に起こります。以下の例を参考に、サードパーティの Cookie を許可すると解決する場合が多いです。

Chrome のエラー例2

Cookie を許可しても解決しない場合は、シンプルブラウザーの右端にある「ブラウザーで開く」アイコンをクリックしてください。ブラウザの別タブで画面が表示され、こちらの画面でも現在の状態をご確認いただけます。

Chrome のエラー例3


Firefox - Webビューの読み込みエラー

上記の Chrome と同様に、シンプルブラウザーの画面が表示されない事があります。アドレスバーにある強化型トラッキング防止機能のアイコンをクリックし、「オフ」にすることでプレビューが表示されるようになります。

Firefox のエラー例1

上記の機能をオフにしても解決しない場合は、シンプルブラウザーではなく「新規ウィンドウでサイトを開く」をクリックしてください。ブラウザの別タブで画面が表示され、こちらの画面でも現在の状態をご確認いただけます。

Firefox のエラー例2 Firefox のエラー例3


Safari - 入力の遅延・アイコンの一部非表示

Safari では問題なくことが多いです。ただし、文字入力をしてから、Codespaces 上の画面に表示されるまでが遅い場合があります。また一部のアイコンが表示されない現象も確認できています。開発する上で問題になるわけではないですが、もし気になる場合は Google Chrome など他のブラウザをお試しください。

Safari のエラー例1



制作・ライセンス

Copyright © YassLab Inc.
Railsチュートリアル運営チーム
https://railstutorial.jp/

ソースコードのライセンスは LICENSE をご確認ください。
ロゴ画像やデモ動画などは各制作者の著作物となります。

codespaces-railstutorial's People

Contributors

yasulab avatar joshaber avatar bdmac avatar dependabot[bot] avatar rakuda-san-desu avatar chuxel avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.