Railsでページ毎にJSとCSSファイルを読み込む
- content_for :css do = stylesheet_link_tag 'posts/show' - content_for :js do = javascript_include_tag 'posts/show'
Rails.application.config.assets.precompile += %w( posts/* )
- ページ毎にcontent_forでレイアウトファイルに読み込ませる
- assets.rbにファイルを追加してasset_pipelineの対象に追加する
RailsにおけるCSS構成のプラクティス
body class="#{controller.controller_name}-#{controller.action_name}"
- コントローラー名とアクション名
.articles { &-show { .inputContainer { margin: 20px } } &-edit { .inputContainer { margin: 10px; } } }
@import "user/articles"
- ユーザー画面でのみ呼ばれるuser.htmlでコントローラーとアクション名を親要素で囲みその下にすれば名前空間は守られるはず
参考記事
- RailsでCSSスタイリングをコントローラー単位で分けるTips - Rails Webook http://ruby-rails.hatenadiary.com/entry/20141220/1419058040
Rails5でローカルではsqlite3で動かしてHerokuではPostgresを使う手順
group :development, :test do # Call 'byebug' anywhere in the code to stop execution and get a debugger console gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] # Adds support for Capybara system testing and selenium driver gem 'capybara', '~> 2.13' gem 'selenium-webdriver' # Use sqlite3 as the database for Active Record gem 'sqlite3' end group :production do gem 'pg' gem 'rails_12factor' end
default: &default adapter: sqlite3 pool: 5 timeout: 5000 development: <<: *default database: db/development.sqlite3 test: <<: *default database: db/test.sqlite3 production: <<: *default adapter: postgresql database: myapp_production username: myapp password: <%= ENV['MYAPP_DATABASE_PASSWORD'] %>
ローカル
bundle install rake db:create rails s
- RailsをHerokuにpushするときにsqlite3でエラーが起こる https://tex2e.github.io/blog/rails/rails-on-heroku
Heroku
heroku run rails db:migrate git push heroku master
package.jsonのdevDependenciesとdependenciesの使い分け
devDependencies
- ライブラリをdev(開発)する時に必要なライブラリを書く
- 開発時のみに必要で実行時には入らないもの
- テストツール - ビルドツール - タスクランナー等
- dependenciesに含まれていても動作はする。ただバンドルファイルの容量が増えたり用途がわからなくなったりするので分けた方がいい
dependencies
- ユーザーとしてライブラリを使う時に必要なライブラリを書く
npm install
- dependenciesとdevDependencies両方がインストールされる
本番環境でnpm installする時
- dependenciesさえインストールされればいいはず
NODE_ENV=production npm install
NODE_ENVにproductionを指定すればdependenciesだけ入る
ちなみにHeorokuはデフォルトdependenciesだけインストールされる設定になっている
VSCodeにES6+ReactのESLint設定を行う
1. eslintをプロジェクトのローカルにインストール
yarn add --dev eslint
手軽さからグローバルにインストールする例もありますが、 チームで開発する場合は以下の理由からローカルにインストールした方がいいです
2. eslint-config-airbnbをインストール
$ yarn add --dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y babel-eslint
3. VSCodeのESLint連携用のプラグインをインストール
4. 設定ファイルを用意
- eslintrcの拡張子にはJavaScript,JSON,YAMLがある
- 拡張子無しの
.eslintrc
はJSON,YAMLで記述可能ですが現在は非推奨
です
{ "extends": ["airbnb"], //ESlint標準のパーサーだとES6の一部記法が認識できずパースエラーになるのでbabel-eslintを使う "parser": "babel-eslint", "plugins": [ //Reactのチェックに必要 "react" ], "rules": { } }
上記の設定だとかなりキツめの設定なので使ってみて気に入らない所はrules
に追記して行くのがいいでしょう
5. AutoFixを有効にする
{ "eslint.autoFixOnSave": true }
ESLintが何か動かないぞ?という時
Parsing errorになっている
- 必要なプラグインがインストールされていなかったり、パーサーがES6に対応していなかったりしてパースエラーになっている可能性があります
- ESlintはパースエラーになると、そこから後のチェックはしてくれないです
Rubyの&とRailsの#tryの違い
Rubyの&.
- ruby2.3から追加された新しい演算子
- Safe Navigation Operator(
&.
)
10&.to_s # => "10" nil&.to_s # nil
- レシーバが
nil
でない場合にメソッドを呼び出す - レシーバが
nil
の場合はnil
を返す
Railsの#try
- ActiveSupportで提供されるメソッド
10.try(:to_s) # => "10" nil.try(:to_s) # => nil 10.try(:to_hoge) # => nil
- レシーバがメソッドを呼び出せる場合にそのメソッドを呼び出す
- 呼び出せない場合は
nil
を返す
&.
と#try
の違い
&.
はレシーバがnilじゃないけど呼び出せないメソッドを呼びだそうとした時にNoMethodErrorになります
10.try(:to_hoge) # => nil 10&.to_hoge # => NoMethodError: undefined method `to_hoge' for 10:Integer
hoge = { fuga: 'fuga' } hoge.try(:hogee) # => nil hoge&.(:hogee) # => NoMethodError: undefined method
結論
Railsでレシーバがnilではない時にメソッドを呼び出したいという時はtryを使うのが無難
ちなみにそもそも存在しない変数に対してアクセスしようとした時はtryを使ってもNameErrorになります。
aaaaaaaaa.try(:to_s) NameError: undefined local variable or method `aaaaaaaaa' for main:Object