20220322のRailsに関する記事は8件です。

rails 7系でjqueryが読み込めない問題

タイトルの通りです。rails7系からimportmapとやらを採用しているらいがいまいちわからなかったので緊急でとった対策を書きます。 開発環境 ruby 3.1.1 Rails 7.0.2.3 できなかったこと ドロップダウンメニューを作りたかったのですがrailsでimportmapとやらの仕組みがよくわからず、jqueryが読み込めなかった。 どうやらconfig/importmap.rbに読み込む際の名前と読込みたい内容(cdnやら)を記載してapp/javascript/application.jsで読み込めばいいらしいですがどうもうまくいきませんでした。 ここを参考にさせていただきました。 対策(緊急向け) 力技みたいな感じになりますが、以下のコードを追加したら読み込めます。笑 とりあえず先に進みたいって方向けです。 view/layouts/application.html.erb <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> rails7系の記事は少ないので、importmapを用いて読み込むことができたらまた書こうと思います。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

rails7(apiモード), react, dockerを使って環境構築してみた

環境 Ruby 3.1.1 Rails 7.0.2.3(apiモード) MySQL8.0 node 17.2 rails→3001port、react→3000portになるように設定する 環境構築 まずは以下のディレクトリとファイルを作成 invest_qa |-api |-Gemfile |-Gemfile.lock |-Dockerfile |-entrypoint.sh |-front |-dockerfile |-docker-compose.yml docker-compose.ymlは以下のように docker-compose.yml version: '3' services: db: platform: linux/x86_64 # M1チップ対応のため追記 image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: password ports: - '3306:3306' command: --default-authentication-plugin=mysql_native_password volumes: - mysql-data:/var/lib/mysql api: build: ./api command: bash -c "rm -f tmp/pids/server.pid && bundle exec rails s -p 3000 -b '0.0.0.0'" volumes: - ./api:/myapp - gem_data:/usr/local/bundle ports: - "3001:3000" depends_on: - db stdin_open: true tty: true front: build: ./front command: yarn start ports: - "3000:3000" volumes: - ./front:/myapp depends_on: - api volumes: mysql-data: gem_data: driver: local dockerの環境構築(バックエンド編) Gemfileは以下のように Gemfile source 'https://rubygems.org' gem 'rails', '~> 7.0.2.3' Gemfile.lockは何も書かなくてOK Gemfile.lock entrypoint.shは以下のように entrypoint.sh #!/bin/bash set -e # Remove a potentially pre-existing server.pid for Rails. rm -f /myapp/tmp/pids/server.pid # Then exec the container's main process (what's set as CMD in the Dockerfile). exec "$@" dockerfileは以下のように Dockerfile FROM ruby:3.1.1 RUN curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | apt-key add - \ && echo "deb https://dl.yarnpkg.com/debian/ stable main" | tee /etc/apt/sources.list.d/yarn.list \ && apt-get update -qq \ && apt-get install -y nodejs yarn \ && mkdir /myapp WORKDIR /myapp COPY Gemfile /myapp/Gemfile COPY Gemfile.lock /myapp/Gemfile.lock RUN bundle install COPY . /myapp COPY entrypoint.sh /usr/bin/ RUN chmod +x /usr/bin/entrypoint.sh ENTRYPOINT ["entrypoint.sh"] EXPOSE 3000 CMD ["rails", "server", "-b", "0.0.0.0"] フロントとまとめdockerにbuildしていくのでひとまずフロントエンドの環境構築へ dockerの環境構築(フロントエンド編) Dockerfileは以下のように Dockerfile FROM node:17.2 RUN mkdir /myapp WORKDIR /myapp イメージの構築 以下を実行しイメージの構築をする docker-compose build railsアプリの構築 まずはrailsアプリをapiモードで作成 docker-compose run api rails new . --force --no-deps --database=mysql --skip-test --webpacker --api Gemfileが更新されてるのでイメージを再構築する docker-compose build database.ymlを修正する api/config/database.yml # # And be sure to use new-style password hashing: # https://dev.mysql.com/doc/refman/5.7/en/password-hashing.html # default: &default adapter: mysql2 encoding: utf8 #ここ pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %> username: root password: password  #ここ docker-compose.ymlで設定したパスワード host: db  #ここ docker-compose.ymlでdepend_onしてる development: <<: *default database: myapp_development # Warning: The database defined as "test" will be erased and # re- (以下略) 続いてデータベースの作成のため以下を実行 docker-compose run api rake db:create reactアプリの構築 まずはreactアプリの作成 docker-compose run front npx create-react-app front frontディレクトリに新しいfrontディレクトリが作成されてしまう。。。 元あるfrontディレクトリにコピペしてなんとかしないといけない ともあれこれやればなんとかなる。 それぞれのアプリにアクセス 以下のコマンドを実行してコンテナの構築・起動をする docker-compose up http://localhost:3001 http://localhost:3000 以上で環境構築ができました。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Rails ルーティングの順序で失敗した件

はじめに JSONを返すRailsAPIを作成中に、意図しないコントローラーのアクションを読み取りに行ってしまった事があった。 エンドポイント(api/v1)を設定していた為、URI Pattern に被る部分が起きた為のミスだった。 状況 ディレクトリ構成 app/  ├ contorollers/api/v1/articles/drafts_controller   contorollers/api/v1/articles_controller コントローラー drafts_controller.rb module Api::V1 class Articles::DraftsController < BaseApiController def index ~ end def show ~ end end end articles_controller.rb module Api::V1 class ArticlesController < BaseApiController def index ~ end def show ~ end end end ルーティング routes.rb Rails.application.routes.draw do namespace :api do namespace :v1 do resources :articles namespace :articles do resources :drafts, only: [:index, :show] end end end end エラー内容 上記の状況で、drafts_controllerのindexアクションを実行しようとしたら、 意図せずarticles_controllerのshowアクションが実行されてしまった。 この2つはHTTPメソッドが同じGETであり、URI Pattern が上記画像の通り、 目的のindexがapi/v1/articles/drafts、期待してないshowがapi/vi/articles/:id。 共通の部分が/api/v1/articles/である。 ルーティングの記述は上から順番に読み込む性質がある。なので、先に記述されてる/:idの部分をdraftで読み取ってしまった為、api/vi/articles/:idとしてarticles_controllerのshowアクションが実行されてしまったようだった。 解決策 シンプルにルーティングの順番を下記のように書き直したら、解決した。 routes.rb Rails.application.routes.draw do namespace :api do namespace :v1 do namespace :articles do resources :drafts, only: [:index, :show] end resources :articles end end end 参考文献 rails routes(ルーティング)の順番の解説
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

自分のふりかえりの為に・・・

新規アプリケーション作成のためには ターミナルで % cd ~/保存したいディレクトリ名 % rails バージョン指定 new 作製したいファイル名 -d mysql
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

復習 Ruby on Railsアプリケーション作製

新規アプリケーション作成のためには ターミナルで % cd ~/保存したいディレクトリ名 % rails バージョン指定 new 作成したいファイル名 -d mysql 作成したいファイルまでディレクトリまで移動 % cd 作成したディレクトリ データベースを作成するために config/database.ymlを編集しましたが、開発環境によっては utf8mb4の方が良いのでは? # encoding: utf8mb4 encoding: utf8 ←に変更 そして、ターミナル上で % rails db:create これで、データベースも作成されてサーバーの起動まで可能になりました。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Mac】Ruby3.1.1がインストールできなくて辛かった

なんとなく「Rails7を使ってみよう!せっかくだからRubyも新しいの入れとくか!」と思い立ったものの、全然全くインストールできずハマったのでのでその時の対処法をメモ。 実行環境:macOS Monterey(12.2.1) エラー ruby3.1.1をインストールしようとするもエラーを吐かれてしまう。 $ rbenv install 3.1.1 Last 10 log lines: checking for llvm-strip... no checking for gcc... clang checking whether the C compiler works... yes checking for C compiler default output file name... a.out checking for suffix of executables... checking whether we are cross compiling... configure: error: in `/var/folders/r1/x9mwdc5s12z1fj1361bzv8z00000gn/T/ruby-build.20220322144842.18804.Za253O/ruby-3.1.0': configure: error: cannot run C compiled programs. If you meant to cross compile, use `--host'. See `config.log' for more details make: *** No targets specified and no makefile found. Stop. やってみた1: Xcode再インストール ググると「Xcodeを入れ直す直すべし」との声が多数あったので、XcodeとCommandLineToolsを再インストール。 [参考] https://blog.nocorica.jp/2017/01/rbenv-failed/ →同じエラーが出た。 ログを読む See 'config.log' for more detailsと言っているのでとりあえず見てよう(先に見ればいいのに)。 $ cd /var/folders/r1/x9mwdc5s12z1fj1361bzv8z00000gn/T/ruby-build.20220322140955.1606.YESPtG/ruby-3.1.1 $ cat config.log ~~略~~ clang: error: argument to '-V' is missing (expected 1 value) clang: error: no input files configure:5773: $? = 1 configure:5762: clang -qversion >&5 clang: error: unknown argument '-qversion'; did you mean '--version'? clang: error: no input files ~~ clangが何か失敗してるっぽい。 $ clang -v Apple clang version 13.1.6 (clang-1316.0.21.2) Target: x86_64-apple-darwin21.3.0 Thread model: posix InstalledDir: /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin ちゃんと入ってるのにね!なんだよ!!!! やってみた2(解決): clangのバージョンを下げる 憤りながらも残念ながら「clangのバージョンを下げてみる」くらいしかやることが思いつかなかったので実行。 [参考] https://soluna-eureka.hatenablog.com/entry/2021/01/10/201341 llvmをインストール。 $ brew install llvm パスを通す。 $ vi ~/.zshrc # 下記を追加 export PATH="/usr/local/opt/llvm/bin:$PATH" export LDFLAGS="-L/usr/local/opt/llvm/lib" export CPPFLAGS="-I/usr/local/opt/llvm/include" # 追加ここまで $ source .zshrc clangはどうなったのか? $ clang -v Homebrew clang version 13.0.1 Target: x86_64-apple-darwin21.3.0 Thread model: posix InstalledDir: /usr/local/opt/llvm/bin # 元の状態 Apple clang version 13.1.6 (clang-1316.0.21.2) Target: x86_64-apple-darwin21.3.0 Thread model: posix InstalledDir: /Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/bin ちょっと変わった。うーん意味があるか怪しいが、リベンジ。 $ rbenv install 3.1.1 ~~略~~ Installed ruby-3.1.1 to /Users/hoge/.rbenv/versions/3.1.1 インストールできました!!やったね!!!!
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Rails 日付日時の入力を簡単に実装するヘルパーメソッド

Railsにて新規アプリケーションを作成しており、日付と日時を合わせて入力できるヘルパーメソッドを使用しましたのでアウトプットさせて頂きます。 記録機能を実装する上で新規記録時に日時と時間をフォーム形式で入力させたかったので 以下のような記述で入力ページを作成しました。(完成はしていなく日時と時間の欄をアウトプットする) app/views/コントローラー名/new.html.erb <%=form_with model: @record, url:records_path,local: true do |f| %> <div class="record-box"> <h1 class="page-heading">食事を記録する</h1> <div class="field"> <%= f.label :datetime, '日時(必須)', class: 'control-label' %><br> <%= f.datetime_field :datetime, class: 'form-control' %> </div> <div class="field"> <%= f.label :age_id, '年齢(必須)', class: 'control-label' %> <%= f.collection_select(:age_id, Age.all, :id, :name, {}, {class:"select-box"}) %> </div> <%= f.submit "記録する" ,class:"btn" %> </div> <% end %> form.labelにはカラム名、表示させたい文字、クラス名を設定しました。 form.datetime_fieldにはカラム名、クラス名を設定しました。 <%= f.label :datetime, '日時(必須)', class: 'control-label' %><br> <%= f.datetime_field :datetime, class: 'form-control' %> モデルとコントローラーを作成することが前提ですが、 以下のような見た目になりました。(cssはほぼノータッチ) 調べてみると意外に簡単でしたので今後も活用していきたいと思います。 アドバイスやご指摘等ございましたらぜひお願いします!! 以上
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

効率的なseedの書き方

seeds.rb Railsで初期データを格納する場合、あらかじめseeds.rbでデータをcreateしておくという手法が一般的だと思われます。 ただ、モデルが増えていくと自ずと投入したいデータは肥大化していき、seedで管理するのが面倒になりませんか?? 管理の方法 ある種思想の話になりますが、私はdevelop/test/productionでそれぞれseedデータは分けるべきだと考えています。 従って下記のようにseedを管理しています。 格納フォルダ作成 $ mkdir -p db/seeds/development $ mkdir -p db/seeds/test $ mkdir -p db/seeds/production seedデータを格納するseedsフォルダを作成しました。 さらに実行環境毎にフォルダを分けています。 データを投入 $ touch db/seeds/development/users.rb $ touch db/seeds/test/users.rb $ touch db/seeds/production/users.rb db/seeds/development/users.rb User.create!( email: test@example.com password: password name: nara ) 各フォルダにデータ投入用のファイルを作成します。 また、必要なファイルに初期データを投入します。 seed.rbで環境毎に読み込むフォルダを変更 db/seed.rb tables = %w(users) #読み込むseedデータのファイル名 tables.each do |table| path = Rails.root.join("db", "seeds", Rails.env, "{table}.rb" #環境毎のpathの指定 if File.exist?(path) puts "Creating #{table}..." require(path) end end tablesという変数に配列で読み込むファイル名を指定します。(複数ある場合でも、付け加えていけば大丈夫です。) そして、それらをeachで回した上で、環境毎にpathを発行し読み込むseedの分岐を行なってあげます。 これにより、環境毎に読み込む先のフォルダを変更でき、かつseed.rbに全ての初期データを書く必要がなくなるため肥大化を抑えつつ効率よく初期データを作成することが可能になります。 まとめ seedは肥大化するとイライラの原因になるのでできるだけ避けましょう。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む