fv17の日記

Webエンジニアの備忘用ブログです。主にWeb界隈の技術に関して書いています。

エンジニアとしての技術の学び方

勉強方法 メモ

何を学ぶか

どう学ぶか

Line Chartでsection毎に背景色を付ける

Chart.js

やりたいこと with chart.js

funnel

パターン1: datasetsをsection毎の配列で渡す
https://stackoverflow.com/questions/52120036/chartjs-line-color-between-two-points

パターン2: ライブラリに描画ロジックを追加　※ライブラリにロジック追加は微妙 https://github.com/chartjs/Chart.js/issues/4068

実装例(パターン1)
※ https://codepen.io/chartjs/pen/YVWZbz で試す

HTML

<div class="chart-container">
    <canvas id="chart"></canvas>
</div>

CSS

body {  
  background: #1D1F20;
  padding: 16px;
}

canvas {
  border: 1px dotted red;
}

.chart-container {
  position: relative;
  margin: auto;
  height: 80vh;
  width: 80vw;
}

JavaScript

const ctx = document.getElementById('chart').getContext('2d');

const data = {
  labels: ["Step1", "Step2", "Step3", "Step4", "Step5"],
  datasets: [{ // ★★★section毎にbackgroundColorを設定して渡す★★★
      data: [100, 80, NaN, NaN, NaN],
      backgroundColor: '#0000FF',
      lineTension: 0,
      pointRadius: 0,
    } , {
      data: [NaN, 80, 60, NaN, NaN],
      backgroundColor: '#FFFF00',
      lineTension: 0,
      pointRadius: 0,
    }, {
      data: [NaN, NaN, 60, 40, NaN],
      backgroundColor: '#008000',
      lineTension: 0,
      pointRadius: 0,
    }, {
      data: [NaN, NaN, NaN, 40, 20],
      backgroundColor: '#FF0000',
      lineTension: 0,
      pointRadius: 0,
    }
  ]
};

const options = {
  maintainAspectRatio: false,
  scales: {
    xAxes: [{
      gridLines: { // 目盛線
        display: true,
        color: "grey",
      },
      ticks: { // 目盛り
        display: false,
      },
    }],
    yAxes: [{
      display: false,
      ticks: { // 目盛り
        display: false,
        beginAtZero: true,
      },
    }]
  },
  legend: { // ラベル
    display: false
  },
};

const myChart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: options,
});

クラスメソッドは基本使わない?

あとで詳しく Rails - モデル
  • modelのクラスメソッドは基本使わない
  • 特に、引数にオブジェクトいくつも渡してるのはNG、使い勝手が悪い
  • 使うのは、createしない限りインスタンスが存在しない場合など
  • 使わない理由は、rails consoleでオブジェクト作成しにくい、そもそもインスタンスメソッドで済む場合がほとんど
  • ムダなSQL走らせないように

後で読む
https://blog.mah-lab.com/2014/11/13/instance-method-and-class-method-with-ruby/
https://qiita.com/jnchito/items/49fe82364bca2f4f37f5

Blocked hostエラー@Rails6から導入された「DNSリバインディング攻撃からの保護」について

Rails

HerokuにRails6アプリをデプロイしたところ、下記のエラーが表示された。調べてみたところ、Rails6から導入された「DNSリバインディング攻撃からの保護」関連のエラーとのこと

Blocked host: hoge.herokuapp.com

To allow requests to hoge.herokuapp.com, add the following to your environment configuration:
config.hosts << "hoge.herokuapp.com"

リリース情報

Rails6 リリースノート
https://railsguides.jp/6_0_release_notes.html#railties-%E4%B8%BB%E3%81%AA%E5%A4%89%E6%9B%B4

GitHub Pull Request
https://github.com/rails/rails/pull/33145

DNSリバインディング攻撃とは？

下記が分かりやすかった
https://www.gsx.co.jp/tts/activity/110111.html

対策するためには、リクエスト元のHostを確認すれば良いとのこと。なるほど

Rails6 + postgresql 12.3 + docker + heroku

環境構築 Rails Docker

参考

Quickstart: Compose and Rails | Docker Documentation
Dockerを使ってRails6環境の構築をしてみる - Qiita
RailsアプリをDockerで作ってCircleCIで自動テストしてHerokuにデプロイした話 - Qiita

メモ

Docker 公式Docの方法はRails5までの対応で、Rails6になると次の対応が必要

  • Rails6からwebpacker利用のため、Dockerfileでyarnのinstallが必要
  • postgresqlでパスワード設定をしないと起動できない仕様変更が入ったため、それの対応

やっといた方がよいこと

  • 公式DocやQiita記事だとバージョン指定していないことが多いが、した方が良い(ruby rails postgres etc...)
  • 勝手にバージョンが上がることを防げるし、最新バージョンだと依存関係問題が発生しがちなので回避できる

2020年5月現在で気になること

  • Rubyはバージョン2.6.6指定の方が良さそう。理由は2.7になるとキーワード引数等に大きな変更があり、未対応gemがありそうなため。ただし、徐々に対応されてくるはずなので、将来的には上のバージョン指定で良い

エラーと解決方法

docker-compose up 時に Yarn まわりでエラー

web_1  | ========================================
web_1  |   Your Yarn packages are out of date!
web_1  |   Please run `yarn install --check-files` to update.
web_1  | ========================================

解決方法

  # Write in config/environment/development.rb 

  # Disable yarn integrity
  config.webpacker.check_yarn_integrity = false

Railsのバージョンアップ方法

この記事は何？

Railsのバージョンアップ方法について

対象読者

  • はじめてRailsのバージョンアップをする方
  • Railsのアップデート方法を学びたい方

参考資料

大まかな手順

Rubyのバージョンを上げる

下記よりもRubyのバージョンが低い場合は、事前にRubyのバージョンを上げる

Rails 6: Ruby 2.5.0以降が必須です。
Rails 5: Ruby 2.2.2以降が必須です。

(引用元)公式ドキュメント

バージョンアップによる変更点の概要を知る

公式ドキュメントのリリースノートやチェンジログを読み、変更点の概要を知る
Rails 5.1からRails 5.2へのアップグレード などとまとめられている https://railsguides.jp/upgrading_ruby_on_rails.html

Railsのバージョンを上げる

- gem 'rails', '5.1.x.x'
+ gem 'rails', '5.2.x.x'

古いgemを洗い出す

Railsと依存関係にあるgemのうち、アップデート後のバージョンと依存関係が合わないgemを洗い出す

bundle update --conservative rails

Bundler could not find compatible versions for ...などとエラーが出る
gemが依存しているRailsのバージョンが古いとエラーになる

gemのUpdate

dependabotを使うなどして、エラーが出力されたgemのアップデートを行う
あるいは、Rails Updateのタイミングで利用するgemをすべて最新にするでもOK

(注意)
gemが特定のRailsのバージョンまでしか対応しておらず、保守運用されていないことがある
その場合は、updateしても解決しないためgemを使わないように対応が必要

設定ファイルの新規作成や変更

アップデート後のRailsに必要な設定ファイルや記述を作成する

rails app:update

新規作成されたり、既存ファイルに変更が入るため、差分をチェックして問題ないことを確認し、必要分を選択してマージする

※ バージョンアップ後のRailsで導入されたgemは自動で追加してくれないので、必要に応じて対応 railsdiff.orgを参考にして、新しく追加されたgem等を確認する

Railsをバージョンアップ

4.の手順だけではまだ新しいバージョンが反映されてない config/application.rbにある config.load_defaults で設定を変更

- config.load_defaults 5.1
+ config.load_defaults 5.2

エラーに対応する

(1) RSpecを実行すると大量にエラーが吐き出されるはずなので対応

バージョンアップすると様々な変更箇所が反映され、テストが失敗する
エラー内容、下記のChange logなどを確認しながら対応する
https://railsguides.jp/5_2_release_notes.html

(2) new_framework_defaults_x_x.rbで設定が変更された箇所を確認し対応

4.の手順でconfig/initializers直下に new_framework_defaults_5_2.rb といったファイルが新規作成される。このファイルにはバージョンアップで大きく挙動が変更される箇所の一覧が記載されている。

このファイルでは、下記ができる
- 仕様変更の確認
- 旧バージョンの挙動の引き継ぐ設定

内容を確認し、最新バージョンに対応させる、または旧仕様を引き継ぐことでエラー解消する。コメントアウトされているのは、バージョンアップ後の仕様で、旧バージョンの仕様を引継ぎたい場合はコメントアウトを外し、booleanの値を反転する必要がある。

new_framework_defaults_x_x.rb については下記が詳しい https://qiita.com/jnchito/items/cce3b2795e1c66735310

また、コメントアウトされている場合にも バージョンアップ直後は旧バージョンのままでの運用を推奨 などと書かれている場合もあるので注意が必要

最後にSTG環境で手動確認

最後は手で色々叩いて確認する
画面上でのログイン、主要機能に加えて、APIなども一通り叩いて確認
specの記載漏れや、情報がほぼないような箇所でコケてたりするので抜かり無く！

本番環境へデプロイ

多分エラーが出る
そのため、revertコミットを事前に準備するなどして緊急時にもすぐ戻せる万全の体制でデプロイ

5.2へのUpdateでハマった箇所、ポイント

CSRF対策(protect_from_forgery)がデフォルトでActionController::Baseに移行

# Add default protection from forgery to ActionController::Base instead of in
# ApplicationController.
# Rails.application.config.action_controller.default_protect_from_forgery = true

従来ApplicationControllerに設定されていた protect_from_forgery がActionController::Baseに移行された。APIのcontroller等でActionController::Baseを継承していたりすると落ちるため、ActionController::APIを継承したり、skip_before_action :verify_authenticity_tokenを足したりする対応が必要

Rails Updateに向けて普段から気をつけること

下記を普段から意識するとRails Updateがより簡単になる

  • Dependabotなどを導入し、gemのバージョンを最新に保つ
  • DeprecatedなどのWarningは、放置せずに対応する
  • gemを使う場合、保守運用されるものを使う
  • テストはしっかり書くべし

など