Code Monkey home page Code Monkey logo

sample_apps's Introduction

Railsチュートリアル_バナー画像

Rails チュートリアル sample_app コード集

Railsチュートリアルの各章が終わった状態を集めたリポジトリです。

『Railsチュートリアルって何?』という方は公式YouTubeチャンネルをご参照ください 📺 ✨

Sample App の開発途中でエラーの原因がどうしても分からないときや、Railsチュートリアル解説動画を視聴するときなどにご活用ください。(解説動画はお試し視聴もできます)


📂 各章とディレクトリ名の対応関係

対応しているRailsのバージョン毎にディレクトリを分けております。具体的な対応関係は次のとおりです。

上記の各ディレクトリの中に 各章が終わった状態の sample_app を置いています。例えば 6_1 ディレクトリの場合は、次のようになります。

  • ch01: 第1章が終わった状態
  • ch02: 第2章が終わった状態
  • ch03: 第3章が終わった状態
  • ch04: 第4章が終わった状態
  • ch05: 第5章が終わった状態
  • ch06: 第6章が終わった状態
  • ch07: 第7章が終わった状態
  • ch08: 第8章が終わった状態
  • ch09: 第9章が終わった状態
  • ch10: 第10章が終わった状態
  • ch11: 第11章が終わった状態
  • ch12: 第12章が終わった状態
  • ch13: 第13章が終わった状態
  • ch14: 第14章が終わった状態

なお、各章の演習の結果や、プロ品質のデプロイなどは反映されておりません。


✅ 動作環境と注意事項

本リポジトリにあるサンプルコードは、第7版では Railsチュートリアル用にカスタマイズしたGitHub Codespaces 上で、第6版以前は AWS Cloud9 上で動作確認しています。 macOS や Windows などのローカル環境では下記の手順で動かないこともあります。あらかじめご了承ください。


また2022年9月より VS Code + Docker 環境でもチャレンジできるようになりました。詳細は下記の note 記事をご参照ください。

🐳 devcontainerを使って開発してみよう - note


🔧 アプリを動かす方法

版番号や章番号ごとにセットアップ方法は異なります。例えば Codespaces を利用してRails 7.0 対応の第11章を動かす場合は次のようになります。 Codespacesの操作について詳しくは『1.2.1開発環境』が、GitおよびGitHubについて詳しくは『Git/GitHub編』 が参考になります。

  1. 本リポジトリをフォークしてからPCなどにクローンし、該当のディレクトリへ移動します。移動したディレクトリでGitの初期化からコミットまでを行います。

    $ git clone https://github.com/<あなたのアカウント名>/sample_apps.git
    $ cd 7_0/ch11
    $ git init
    $ git add .
    $ git commit -m "第11章動作確認" 
    
  2. GitHubで、アプリを動かすためのリポジトリを作成します。ここではリポジトリ名をsample_ch11としておきます。

  3. 手順2で作成したリポジトリで表示されるURLをリモートリポジトリURLとして設定し、プッシュします。

    # HTTPS接続の場合
    $ git remote add origin https://github.com/<あなたのアカウント名>/sample_ch11.git
    $ git remote -v
    origin  https://github.com/<あなたのアカウント名>/sample_ch11.git (fetch)
    origin  https://github.com/<あなたのアカウント名>/sample_ch11.git (push)
    
    $ git push -u origin main
    
  4. 手順2で作成したリポジトリで、「Code」から「Codespaces」タブに移動し、「Create codespace on main」をクリックすると環境構築がスタートします。しばらく待つとシンプルブラウザに「ActiveRecord::PendingMigrationError」が表示されるので、少し下の「Run pending migrations」ボタンをクリックするか、ターミナルを開いて以下のコマンドを実行するとデータベースが移行されます。

    $ rails db:migrate
    
  5. テストを実行して、正しく動作していることを確認します。

    $ rails test
    
  6. サンプルユーザーをデータベースにseedします。

    $ rails db:seed
    

結果はシンプルブラウザにも表示されていますが、実際のブラウザとは表示が異なる場合もあるので、シンプルブラウザのタブか「ポート」タブから実際のブラウザ(Chromeのタブなど)を開いておくと良いでしょう。無事にセットアップが完了できていれば、トップ画面が表示されます。ログインページから以下のメールアドレスとパスワードを入力するとログインできます。

ここをクリックすると Codespaces 以外の環境で動かす場合の参考情報が開きます。
  1. 本リポジトリをクローンし、該当のディレクトリへ移動します。

    $ git clone https://github.com/yasslab/sample_apps.git
    $ cd 7_0/ch11
    
  2. 本番環境でのみ必要なgemはスキップしてbundle installします。

    $ bundle install --without production
    
  3. データベースを移行します。

    $ rails db:migrate
    
  4. テストを実行して、正しく動作していることを確認します。

    $ rails test
    
  5. サンプルユーザーをデータベースにseedして、アプリを実行する準備が整いました。

    $ rails db:seed
    $ rails server
    

無事にセットアップが完了できていれば、ブラウザから localhost:3000 にアクセスするとトップ画面が表示されます。

なお、第13章以降のSample Appを本番環境にデプロイする場合は、別途Amazon S3のセットアップが必要になります。


🎓 関連リンク/関連レポジトリ


:octocat: 本リポジトリのライセンス

The MIT License

Copyright © YassLab Inc.

YassLab Logo


:octocat: Sample Appのライセンス

Ruby on Rails Tutorial: Learn Web Development with Rails.

All source code in the Ruby on Rails Tutorial is available jointly under the MIT License and the Beerware License.

Copyright © Michael Hartl

sample_apps's People

Contributors

himajin315 avatar myumura avatar nashirox avatar ni57721 avatar paveg avatar rakuda-san-desu avatar sho-h avatar tunepolo avatar yasulab avatar yuppymam avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

sample_apps's Issues

emailの一意性のバリデーションについて

第6章でUserモデルのemail属性の一意性についてバリデーションしています。
現状のプログラムでは「同じ文字列で大文字が混じったemail」を新規登録するとバリデーションをすり抜け、DB登録時に一意性のエラーになると思います。
emailのバリデーションをuniqueness: { case_sensitive: false }にするか、
コールバックをbefore_save { self.email = email.downcase }before_validationするか
の対応が必要だと思います。

sample_apps から3桁目のバージョンを消す

現状だとパッチバージョンの変更をおこなった場合、フォルダ名も変更することになる。
👉 対応するURLも変わってしまう

やりたいこと

sample_apps から3桁目のバージョンを消す

🔽 変更例

- 6_0_0
+ 6_0

🔽 参考
image

.gitignoreが存在しないディレクトリにゴミファイルが存在する

.gitignoreがないディレクトリがいくつかあります。そうしたディレクトリはlogファイルやcacheファイルのような不要なファイルが残ったままになっています。

$ find . -name "*.log"
./5_0_0_1/ch13/log/development.log
./5_0_0_1/ch13/log/test.log
./5_1_2/ch14/log/development.log
./omake/ch12_4_0/log/development.log
./omake/ch12_4_0/log/test.log

自分で修正用のpull reqを作ることも考えましたが、ファイルの要・不要をきちんと識別できる自信がなかったため(実はテキスト内の説明で使っているとか)、issueの投稿のみとさせてもらいました(すいません)。

14章のUnfollowボタンのレイアウトがキャプチャと異なる

下記のTeratail質問と同じ現象に遭遇しました。

このリポジトリのサンプル 5_1_2/ch14 を動かしてもボタンに灰色の背景が付いていません。
コードかキャプチャかどちらかが間違っているのではないでしょうか?

確認は"Google Chrome バージョン: 71.0.3578.98(Official Build) (64 ビット)"で行いました。

サンプルコードで用いているgemの'bootstrap-sass'はBootstrap3系に対応しているようですが、ボタンのスタイルを見てもキャプチャと類似するものはありません。

https://getbootstrap.com/docs/3.3/css/#buttons

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.