コード日進月歩

しんくうの技術的な小話、メモ、つれづれ、など

GoogleのSEOを鑑みたときにJavaScriptをどう使うべきかはガイドラインがある

SEOとか考えるとレンダリングちゃんとやらないと不利じゃないですか…みたいな話に対して、現状どうなっているのか調べてみた

出典

明確にGoogleがドキュメントを用意してくれている

JavaScript SEO の基本を理解する | Google 検索セントラル | Google Developers

サマリ

出典のリンクがかなりわかりやすく書かれているのでそこを呼んでもらえれば大体わかるのだが、あえてかくと以下の通り

  1. URLをクローラーが受け取るとrobots.txtを見て判断クローリング対象かを判断(URLがクローリングして問題なければHTMLを取得してhrefなどの他リンク際のURLをキューとして入れる)
  2. ページ内のrobotsメタタグ、ヘッダ情報を見て問題なければレンダリングを開始
  3. headless ChromiumJavascriptなどをレンダリングして、そのHTMLをindexに登録する

ということでJavascriptを登録する

Googlebot目線でレンダリングされるページの見方

Googlebotの互換性があるコードかを確認する方法もガイドがある。

検索関連の JavaScript の問題を解決する  |  Google 検索セントラル  |  Google Developers

こちらに記載があるが、実際Googlebotがレンダリングをした場合のチェックとしてモバイルフレンドリーテストが案内されている。これを使うとどのページでも実際にレンダリングされる結果を確認することができる。

モバイル フレンドリー テスト - Google Search Console

JavascriptでDOMを組み上げるタイプのサイトでも読み込み後のHTMLが表示されるので、公開されているサイトの場合はこちらで確認することで「意図したHTMLがクローリングされないのではないか?」などの杞憂を減らすことができそう

関連リンク

劇場版SHIROBAKOの瀬川さんから正論を言ってしまう人との付き合いかたを考える

この記事は SHIROBAKO Advent Calendar 2020 20日目の記事です。

(リアルタイム更新失敗したのでクリスマスまでにかきあげました。。大変失礼しました。。)

adventar.org

2018年に関しては高梨太郎のダメっぷり反面教師の話をしましたが、今回は劇場版の瀬川さんから「厳しい先輩の裏側」を感じたので書いてみます。

TV版の瀬川さんから見るベテラン感

これは以前のSHIROBAKO AdventCalendarでKoniferさんがまとめていただいているのですが瀬川さんは各シーンでベテランならではの風格を見せます

参考:フリーランスアニメーター 瀬川美里 - Konifar's WIP

全体を通して言えることとすれば

  • 仕事を請け負う立場としてお茶を濁さず、しっかりとものを言う
  • プロとしてのクオリティ担保のための発言をする。

劇場版でみせた弱い部分

タイマスをベースにSIVAを作りあげることになり、タイマス製作時のスタッフが集まっていく過程で瀬川さんが遠藤さんを説得しにゲーセンに行く…が、仕事をしなくなっている遠藤さんに対して厳しい言葉をかけてしまい、口喧嘩をして別れてしまう。そして説得失敗した宮森にポロリと一言。

「私、正論ばっか言って相手を追い詰めるって注意されたのに…」

強い人も落ちこむときはある

おそらく宮森からも「瀬川さんならきっと遠藤さんを説得できると思うんです」のようにお願いされたであろうことなのに、怒らせる展開になり、TVシリーズではあまり見せなかったレベルで瀬川さんの落ち込む。

強くて、正しいことを言って、プロとしてカッコいい姿を見せてきた瀬川さんが落ち込むという展開が当たり前の話である「強い人でも落ち込むことがある」という側面を見せられた。

そこから学ぶこと

強い先輩も泣きたくなるときはある

普通の世界においても強い言葉を使ってプロジェクトを引っ張る人や、正論並べてぐうの音もでない仕事の進め方をする人もいる。

そういう人は「きっと強いひとだから」とどんなことでも耐えぬける、または強い言葉を浴びせても大丈夫、とは限らない。人知れず泣いている瞬間というのはあるはず

バチバチやりたくなっても落ち着くこと

「言葉として強い正論を言う人だから、同じぐらい強い言葉を使って返していい」みたいなことや、ややもすれば「この人は強い言葉を使う人だから人の心がわからない人なんだ」のように思う場面というのはあるかもしれない。でもそういう人こそ自分の強すぎる言葉の使い方に落ち込んでしまったり、人知れず泣いたりしていることもある。もしそういう人にであったときは強いひとは弱い面もあったりすることがあることを思い浮かべつつ落ち着いて接するといいのかもしれない、と劇場版の瀬川さんから思いをはせたのでした。

Rails6かつMySQLを使う場合に任意の順番でレコードを取得する

いろんなことの合せ技のためご利用は計画的に、という感じであるが知見まで。

環境

$ bin/rails -v
Rails 6.0.3.1

今回の想定ケース

例えばUserクラスがあり、Viewにはidが2,3,1の順で並べたいのでActiveRecordの取得自体も2,3,1の順番で取得したい場合。

User.where(id:[2,3,1])

上記のような書き方が想定できるが、その場合はただただ IN 句で絞り込むだけなので並び順は考慮されない ActiveRecord_Relation が返却されてしまう。

User.where(id:[2,3,1]).each do |u| pp u.id end
# User Load (0.7ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` IN (2, 3, 1)
# 1
# 2
# 3

対応方法

MySQLのみとはなるが、以下のようなクエリを書くことで実現することができる。

User.order([Arel.sql('field(id, ?)'), [3,1,2]])
ids = [2,3,1]
User.where(id:ids).order([Arel.sql('field(id, ?)'), ids]).each do |u| pp u.id end
# User Load (0.6ms)  SELECT `users`.* FROM `users` WHERE `users`.`id` IN (2, 3, 1) ORDER BY field(id, 2,3,1)
# 2
# 3
# 1

なぜ ORDER BY field(カラム名,2,3,1) のようなクエリで任意の並びになるのか

詳しい解説は下記ページに記載がある

日々の覚書: WHERE .. IN (..)のリストの順番でソートするORDER BY FIELDの仕組み

引用させていただくと以下

mysql56> SELECT * FROM t1 WHERE num in (7, 5, 3) ORDER BY FIELD(num, 7, 5, 3);

初めて見た時はファッ!? ってなったけど、クエリーをこう書き換えると、たぶんやってることが伝わる。

mysql56> SELECT *, FIELD(num, 7, 5, 3) AS sort_rank FROM t1 WHERE num in (7, 5, 3) ORDER BY sort_rank;

ORDER BY FIELDはORDER BY句のバリエーションじゃなくて、FILED関数の結果でORDER BYしている。 FIELD関数のドキュメントはこちら。第1引数に検索したい値、第2引数以降に検索元となるリストを与える感じ。 これが、numの値が(7, 5, 3)の何番目にあるかを整数で返すので、そこでソートできる。

とのことなので

  • FIELD関数を使って任意の順番とソート順番のマッピングリストを生成する
  • 上記リストを利用してorderで並べ替えを行う

という原理。

なぜ Arel.sql で囲むのか

これはこの実装がされたPRを見るところ

User.order(params["order_string"]) 

のような無邪気な実装でSQLインジェクションが実行されないように基本的には遮断するという実装となった。 その際にもし指定するSQL安全なものであれば Arel.sql で囲むことで回避ができる、という考えで Arel.sql で囲むことでの回避手段が提供された。

そのため、FIELDを使う場合はちゃんと利用する値にSQLインジェクションの危険性のないものかをしっかり確認してから実装したほうがよい。

参考リンク

Railsのbefore_actionで通常のインスタンス変数をセットするのは、本当にそれが最適解か考えてからやってほしい

before_actionでインスタンス変数を設定するとミスリードが多くなりがちなのでそれに対する話。

(記事製作時)の環境

# bin/rails -v
Rails 6.0.3.1

(前提として)before_actionとは

ActionControllerが提供するフィルタの機能の一種。

before_action は indexやshowなどのアクション定義をしているメソッドに対してそのメソッドを実施する前に実行するメソッドを設定することができる。

before_actionの利用例

Railsガイドでは以下のような記述が例として記載されている

class ApplicationController < ActionController::Base
  before_action :require_login

  private

  def require_login
    unless logged_in?
      flash[:error] = "You must be logged in to access this section"
      redirect_to new_login_url # halts request cycle
    end
  end
end

このメソッドはエラーメッセージをflashに保存し、ユーザーがログインしていない場合にはログインフォームにリダイレクトするというシンプルなものです。「before系」フィルタによってビューのレンダリングやリダイレクトが行われると、このアクションは実行されません。 - Action Controller の概要 - Railsガイド - フィルタ

例示にもある通り、アクションの処理の実施前に何かしらのフィルタリングをしたい場合などに利用することが例示として挙げられる

今回考えたいケース

今回考えたいのはControllerをScaffoldで作ったときにできる以下のような構成

class BooksController < ApplicationController
  before_action :set_book, only: [:show, :edit, :update, :destroy]

  # GET /books
  # GET /books.json
  def index
    @books = Book.all
  end

  # GET /books/1
  # GET /books/1.json
  def show
  end

  # GET /books/new
  def new
    @book = Book.new
  end

  ######中略#######

  # DELETE /books/1
  # DELETE /books/1.json
  def destroy
    @book.destroy
    respond_to do |format|
      format.html { redirect_to books_url, notice: 'Book was successfully destroyed.' }
      format.json { head :no_content }
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_book
      @book = Book.find(params[:id])
    end

    # Only allow a list of trusted parameters through.
    def book_params
      params.fetch(:book, {})
    end
end

この記述では before_action にて インスタンス変数をsetしている。この点が微妙に厳しくなる場面があるので、可能であれば避けたい

before_actionでインスタンス変数のsetをすると何が問題なのか

大きく2つ問題がある

インスタンス変数の入るタイミング見えづらくなる

show などは before_actionと記述が近いのである程度見通しとして記述を把握しやすいが、destroyの記述はとおいので記述が遠くなるので、事前に行われる記述としてはキャッチがしづらくなる。

各action内で使われない値であれば問題はないのだが、だいたいはsetしたいものはactionの処理で使うようなデータ(Modelの取得、など)のことが多いので、各actionでインスタンス変数名を書きたい場合にbefore_actionで定義したメソッドの中まで見ないといけなくなる。

インスタンス変数の値の変更がわかりづらくなる

各actionでインスタンス変数を利用したい場合にどのようなデータが定義されたかなどを見る必要があるのと、action単体で見るとインスタンス変数が突然登場したりするケースがあるので、ちゃんと読み解かないとbefore_actionでセットされていることが気付けずデータの代入を読み違う可能がある。

また、インスタンス変数のため普通にprivateメソッドなどで値の変更を行っているとより内容がわからなくなる。

どう書くといいのか

ではどうやって書くといいのかというと、普通に各action内で呼んであげればいい

class BooksController < ApplicationController

  # GET /books
  # GET /books.json
  def index
    set_book
    @books = Book.all
  end

  # GET /books/1
  # GET /books/1.json
  def show
    set_book
  end
  
  # 中略
  
  private
    def set_book
      @book = Book.find(params[:id])
    end
  # 後略
end

更にいうのであればインスタンス変数のセットを各アクションでやってあげたほうが明快になる。

class BooksController < ApplicationController

  # GET /books
  # GET /books.json
  def index
    @books = Book.all
  end

  # GET /books/1
  # GET /books/1.json
  def show
    @book = load_book(params[:id])
  end
  
  # 中略
  
  private
    def load_book(id)
      Book.find(id)
    end
  # 後略
end

参考リンク

早期returnにおける使い方のパターン(防御的プログラミング、あるいは分岐処理)をざっくりまとめる

自身の書き方を言語化するシリーズ

この文章内での早期returnとは

メソッドなどで処理の終端に到達する前に return をして戻り値を先行して返すこと。

早期returnを利用できるパターン

早期returnが有用なケースをパターン分けすると以下の2つになると考えている

  • 防御的プログラミングでの早期return
  • 分岐処理の早期return

それぞれに関して記述していく

防御的プログラミングでの早期return

メソッドの引数の値がおかしい場合に実処理を行わないなどの防御的プログラミングの文脈でのやりかたは以下の考え方

def half_value(number)
  return_value = nil
  # ゼロを除算するとエラーになるので0より大きな数値
  if number > 0
    return_value = number / 2
  end
  return_value
end

このような事前チェックが必要なタイプはチェックのやり方が有用になる。後置ifが使えるRubyだと更にスッキリできる。

def half_value(number)
  return nil if number > 0
  number / 2
end

分岐処理での早期return

もしかすると 早期return とはこちらの意味合いを保つ場合のほうが多いかもしれないが、こちらの文脈は以下のようなパターン。

お題が以下のようなものだったとする

与えられた数字が2なら与えられた数、2でなかったら与えられた数と1〜10の数を2乗した値を足して返す

def calc(number)
  return_number = 0
  if number == 2
    return_number = number
  else
    rand_set_number = rand(10)^2
    return_number = number + rand_set_number 
  end
  return_number
end

この場合は与えられた数( number )が2だったら後続処理の必要は無いのでreturnできる

def calc(number)
  return number if number == 2
  rand_set_number = rand(10)^2
  return rand_set_number 
  end
  return_number
end

ただし、この分岐処理の早期returnは明確にスイッチング処理になる場合はswitch case文のような記述を行ったほうが見通し良い場合もあるので状況によって書き換えるといい

参考リンク

変数代入を複数回行うと何が良くないのか、どうするといいのか

変数の代入を複数回行う、すなわち変数の再代入をすることは何が辛いか、また変数の代入を1回にすると何が嬉しいかを書く。

今回の題材

例えばRubyで以下のようなメソッドがあるとする

def make_aisatsu_text(people_name: "Suzuki", is_san: false)
  text = is_san ? "さん" : ""
  text = people_name + text
  text = text + "、こんにちわ!" 
  return text
end

この記述を例に辛い部分は大きく以下の2つ

  • 変数の状態がメソッドの最初から最後まで変わり続けるので変更に弱い
  • (型付き言語だと発生しないが)途中の状態が削除されると読み取り難易度が増す

1つずつ簡単に説明していく

変数の状態がメソッドの最初から最後まで変わり続けるので変更に弱い

上記の例だと text という内容が行によって変わり続ける。 最後にreturnする内容をするのを text にしたいという意図はあるかもしれないが この方法は今後拡張したときに厳しくなる。

例えば * Satoさんへの挨拶の場合は、「久しぶり」という言葉を、そうでない人には「はじめまして」を挟む * 天気がいいかを調べる、 sunny? メソッドがtrueなら「天気がいいですね」という言葉を挟む という変更が加わるとすると以下のようになる

def make_aisatsu_text(people_name: "Suzuki", is_san: false)
  text = is_san ? "さん" : ""
  text = people_name + text
  if people_name == "Sato" 
    text = text + "、久しぶり"
  else
    text = text + "、はじめまして"
  end
  if sunny?
    text = text * "、天気がいいですね"
  end
  text = text + "、こんにちわ!" 
  return text
end

このようになるが、この時点でかなり読みづらくなっている(と私は思っている) さらに「こんにちわ!の位置は文の最初の方に…」などの変更が入ったら更にカオスになる。

途中の状態が削除されると読み取り難易度が増す

上に書いた仕様追加されたコードで更に「Tanakaさんの場合は名前を呼ぶ部分はいらなくなりました」といって削除を行うとする。 単純にやると以下のような事が起きる。

def make_aisatsu_text(people_name: "Suzuki", is_san: false)
  text = is_san ? "さん" : ""
  text = people_name + text
  if people_name == "Tanaka"
    text = ""
  end
  if people_name == "Sato" 
    text = text + "、久しぶり"
  else
    text = text + "、はじめまして"
  end
  if sunny?
    text = text * "、天気がいいですね"
  end
  text = text + "、こんにちわ!" 
  return text
end

textを "" してリセットするという処理を入れたが、増々読みにくくなった。

このように継ぎ足していく処理とまっさらにする処理が混在する状況になると「この行における text は何が入っているのか?」というのがよりわかりにくくなる。

改善例

シンプルに再代入をやめることだけでかなりスッキリさせることができる。

def make_aisatsu_text(people_name: "Suzuki", is_san: false)
  san_text = is_san ? "さん" : ""
  full_name_text = people_name + san_text
  return full_name_text + "、こんにちわ!"
end

盛々の仕様変更も耐えやすい

def make_aisatsu_text(people_name: "Suzuki", is_san: false)
  san_text = is_san ? "さん、" : ""
  full_name_text = people_name + san_text
  meet_text = people_name == "Sato" ? "久しぶり、" : "はじめまして、"
  weather_text = sunny? ? "天気がいいですね、" : ""

  main_text = meet_text + weather_text + "こんにちわ!"

  return main_text if people_name == "Sato"
  return full_name_text + main_text
end

参考リンク

X-UA-Compatible メタタグの意味と使い方に関して調べる

今や不要と言われているので調べる

出典

Internet Explorerにはドキュメントモードというものが存在し、下位バージョンのIEと同等の動きをさせるために指定することができた。

例えばIE7相当の表示をしてほしいときは以下のような記述を行っていた

<meta http-equiv="X-UA-Compatible" content="IE=7" >

また、互換モードではなく最新の状態にしてほしい意図のときは以下のようにEdge(最新版という意味のEdgeでWebブラウザのEdgeのことではない)を指定する

<meta http-equiv="X-UA-Compatible" content="IE=edge" >

この仕様をIE以外にも普及させようとしたが定着されず、ほぼIE固有の実装となった。

2020年現在において

現在ではマイクロソフトのドキュメントページを探すと記述がだんだん失われつつあること、加えていよいよIE11がサポート終了するという状況下においてIE11未満の動作を互換モードであるドキュメントモードの必要性は薄れてきており、非常に特殊な環境下出ない限りはこの記述には不要かと思われる。

参考リンク