webpackJsonp is not defined（rails/rails-react）

saegusa41010.hatenablog.jp
この記事の過程でSSRさせようとしていた際に出てきたエラー

CommonsChunkVendorが悪さしていた

github.com
これを参考にしました。application.jsのみがエントリーポイントとなっており、react-railsで生成されたserver_rendering.jsが読み込まれていない様子

environment.jsを以下のように編集

const {
    environment
} = require('@rails/webpacker')
const customConfig = require('./custom')
const webpack = require('webpack')
const babel = environment.loaders.get('babel')
const babelLoader = babel.use.find(loader => loader.loader === 'babel-loader')
babelLoader.options.presets = [
    [
        "env",
        {
           "useBuiltIns": true
        }
    ],
    "react"
];
environment.plugins.append(
    'CommonsChunkVendor',
    new webpack.optimize.CommonsChunkPlugin({
        name: 'vendor',
        minChunks: module => {
            return module.context && module.context.includes('node_modules');
        },
        chunks: ['application'] 
    })
);

environment.plugins.append(
    'CommonsChunkManifest',
    new webpack.optimize.CommonsChunkPlugin({
        name: 'manifest',
        minChunks: Infinity,
        chunks: ['vendor']
    })
);

module.exports = environment;
environment.config.merge(customConfig)
module.exports = environment

そして、application.erb.htmlのhead中に以下を記述。

    <%= javascript_pack_tag "manifest.js" %>
    <%= javascript_pack_tag "vendor" %>
    <%= javascript_pack_tag 'application' %>

webpackJsonp is not definedは消えました。また別のエラーが出たけど、、、

【React/SSR】サーバーサイドレンダリングの方法

Google Search Consoleでなかなかインデックス登録されない

サイトマップは正しいものを送信しているし、これといった警告もないのになかなか登録されない時間が続きました。
初期のレンダリング時間（ページが表示されるまでの時間）が、インデックスに関係があるという記事を読んだので、その時間を以下のツールで検証してみました。
PageSpeed Insights

初期レンダリング時間がえげつない

f:id:saegusa41010:20190314173313p:plain
処理速度

これではクローラさんも諦めますね笑
ということで、レンダリング速度を上げるためにSSR(サーバーサイドレンダリング)することにした。

SSRの種類(hypernova vs next js)

調べてみると、Rails+ReactでSSRする方法が大きく分けて2つあるようなので、それぞれの特徴をまとめました。

hypernova

この記事にとてもわかりやすくhypernovaの特徴が書かれていました。
RailsでReactをサーバサイドレンダリング（use Hypernova by airbnb） - Qiita
特徴は
- サーバー側（rails）で主にSSRする
- metaタグ(Head内の)がめんどくさそう
- 移行の際Reactはそのままで書き換えが少ない

next js

特徴を列挙すると
- js側でSSRする
- React Routerの進化系
- metaタグの作成が容易
- 移行するにはReactの構造ごと変える必要がある
などが挙げられる。

hypernovaでいこう

特徴の中の、移行にかかるコストを考えると、とりあえずhypernovaでSSRして行くことにした。
明日以降進めて行くので、具体的なやり方はその時書こうと思います。

Reactエンジニアへの道のり【初心者向け】

React Redux

はじめに

近頃、Reactのシェア率がすごいですね。エンジニア求人サイトでは、かなりの確率で「必要スキル:React」って書いてある気がします。
Reactの強い点は

  • 一度学習すれば、webもネイティブアプリ（スマートフォンアプリ）も同じ要領でかける

  • 書いたコードを使い回ししやすいので、二度同じコードを書くことが少ない

  • Reduxと併用することで複雑なデータ構造も扱える

などの点があげられると思います。この記事では、React（エンジニア）初心者の人が二週間程の学習でReactで書かれた簡単なコードを読み書きでき、Reactプロジェクトにジョインできる状態になることを目標とします。各項目の学習方法は、すでにとてもわかりやすい記事がたくさん上がっているので、そちらへのリンクを貼っていきます。ここでは、何をどのような順番でやればいいのかに焦点を当ててまとめていきます。

エンジニアとして知らなきゃいけない基本知識（1日目~4日目）

まずは、プロジェクトにジョインするために、最低限の知識・準備をしましょう。

git

gitはチーム開発において必須の知識ですまずはじめに学習しましょう。
まずは、こちらのサイトでgitとはどういったものか、gitの中で出てくる基本単語を押さえましょう。
【初心者向け】Gitってなに？①まず流れを理解する（コードなし） - Qiita
その後、このタイトルが超絶煽りのサイトの、入門編、できれば発展編までをさら読むのが良いと思います。
サルでもわかるGit入門 〜バージョン管理を使いこなそう〜【プロジェクト管理ツールBacklog】

エディタを準備しよう

実際にコードを書いて行く際に、コードを書くツールのことをエディタと呼びます。例えば、macで最初から備わっているメモ帳もエディタとして使用することができます。しかし、コードの続きを自動で補完してくれる、コードの形を整形してくれるなどの機能を持ったエディタがインターネット上にはたくさんあります。
その中でもオススメなのがVSコードです。
Visual Studio Code – コード エディター | Microsoft Azure
ここからダウンロードできます。

Reactを学ぼう(5日目~12日目)

まずはhtml,cssから

まずはフロントエンジニアを目指すなならば必須の知識、htmlとcssについて学びましょう。
以下のprogateというサイトが、とてもわかりやすくてオススメです
Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]
一部の講座は有料ですが、無料でも十分に学べます。

次はjavascript(js)

Reactはjavascriptという言語で書かれています。チュートリアルの冒頭でも述べられている通り、基本的な文法はマスターしておきましょう。
jsについても、上記のprogateというサイトがとてもわかりやすいチュートリアルを用意してくれています。そちらをやりましょう。

Reactのメインコンセプトを読もう

公式は英語のドキュメントになります。英語が苦手な人はGoogle翻訳に全部ぶち込んで読んでいきましょう。 メインコンセプトはこちら
Hello World – React
まずは、リンク先のMAIN CONCEPTSを全部読みましょう。概念を理解しているといないとで次のTodoアプリを作る時の理解度が大きく変わります。
ADVANCED GUIDSは必要になったらで大丈夫です。

チュートリアルのまるばつゲームアプリを作ってみよう

リンクはこちら
Tutorial: Intro to React – React
このステップが一番大切です。最初は写経で大丈夫なので、しっかりと理解しながら、きちんと動くものを自分自身で作ってみましょう。
また、Setup Option 2: Local Development Environmentでやりましょう。プロジェクトにジョインする際に避けて通れないのは環境構築です。自分自身のパソコンで動作する環境づくりの練習をここでしておきましょう。また、次のステップで手元に動くコードを残しておく必要があります。

Reduxを学ぼう(13日目~14日目)

Reduxがどのようなものかは、この記事がとてもわかりやすいです。
Redux入門【ダイジェスト版】10分で理解するReduxの基礎 - Qiita
まずはこの記事を読んでReduxの概念を把握しましょう。

先ほど作ったまるばつアプリにReduxを導入しよう

Reactチュートリアルで作ったアプリのデータ構造をstateによる管理ではなく、Reduxによる管理にしましょう。
こちらのサイトに詳しい手順が書いてあります。
初心者がザックリとReact+Reduxを学ぶ - Qiita

あとは実践で

ここまでやれば、大抵のコードは読めるはず！実際に運用されているコードに触れて、よりReactに強くなっていきましょう！

最後に

最後までお読みいただきありがとうございました！ご意見、ご感想お待ちしています！ また、Reactで書かれているwebサイトを運営しています。
https://www.twi-reviews.jp/
今人気のゲームを、最新AI技術を用いた独自のシステムで評価しているサイトです。分析は、該当商品に関するツイートを集計し、評価・星付けをしています。 よかったらのぞいてみてください！

Reactで書かれたコードをグーグルクローラに読み込ませる[その3]

React rails heroku seo クローラ Google Search Console

結論
解決しました！ぜひ最後までお読みください。
これの続き
saegusa41010.hatenablog.jp

謎のエラー

webアプリを公開、サーチコンソールに登録後、url検査にて作成したページをライブテスト。そうしたらエラーが発生。
エラー内容を探してみると

Uncaught SyntaxError: Unexpected token =>
https://www.twi-reviews.jp/packs/hello_react-bc8882257be880b4f845.js:1

エラー内容を特定したい

今のままでは、デプロイしてurlをライブテストして、、、という作業で、原因がよくわからない
そこでlocalで確認できるようにしようと思い立つ
GoogleのbotはChrome41を使用しているらしい、なのでChromeの41をここからダウンロード Google Chrome 旧バージョン - Mac
そしてエラー内容をみてみると、なんとアロー関数はnode_modules内で書かれていました。
ということは、babelがなんらかの原因でnode_modules内では効いていないので、設定を変更すれば解決しそうです。

解決方法

config/webpack/custom.jsを新たに作成し、以下を記述

module.exports = {
    module: {
        rules: [{
            test: /\.js$/,
            exclude: {
                include: /node_modules/,
                // node_modulesの中のモジュールを除外対象とする。
                exclude: [/node_modules\/query-string\//, /node_modules\/strict-uri-encode\//]
                // パッケージのモジュールを除外対象から除外する。今回はこの二つのmoduleがエラーを起こしていた。
            },
            use: 'babel-loader',
        }, ],
    }

}

そして、config/webpack/environmentsを以下のように編集

const {
    environment
} = require('@rails/webpacker')
require("@babel/polyfill");
const customConfig = require('./custom')
const babel = environment.loaders.get('babel')
const babelLoader = babel.use.find(loader => loader.loader === 'babel-loader')
babelLoader.options.presets = [
    [
        "env",
        {
            "useBuiltIns": true
        }
    ],
    "react"
]
environment.config.merge(customConfig)
module.exports = environment

この書き方は
webpack: Configuration | webpack
rails: webpacker/webpack.md at master · rails/webpacker · GitHub
を参考にしました。

最後に

辛かった、、、クローラbotのバージョン早く上がって欲しいですね。 https://www.twi-reviews.jp/
ぜひこのサイトも訪れてみてね、ゲームのreviewとなるツイートを集計、分析したサイトです。

Reactで書かれたコードをグーグルクローラに読み込ませる[その２]

rails heroku React seo ruby クローラ

これの続き
saegusa41010.hatenablog.jp

謎のエラー

webアプリを公開、サーチコンソールに登録後、url検査にて作成したページをライブテスト。そうしたらエラーが発生。
エラー内容を探してみると

Uncaught SyntaxError: Unexpected token =>
https://www.twi-reviews.jp/packs/hello_react-bc8882257be880b4f845.js:1

クローラのjsが古い?

エラー内容は=>が間違っているよというもの。ここで予想としては、ES6で書かれたjsでのアロー関数をクローラが読み込んでくれてないんじゃないかと考えた。 ならばなんとかしてjsのヴァージョンを下げたい。そこで、babelを利用することにした。

babelを導入。

まずはconfig/environment.jsにいかを記述

import "babel-polyfill"
const babel = environment.loaders.get('babel')
const babelLoader = babel.use.find(loader => loader.loader === 'babel-loader')
babelLoader.options.presets = [
    [
        "env",
        {
            "modules": false,
            "useBuiltIns": true
        }
    ],
    "react"
]

このように記述すればwebpackでjsをまとめ上げる際に、ES5(古いバージョンのjs)に変換できる。 しかしエラー内容は変わらず。
次に、application.js(エントリーポイント)に以下を記述 import "babel-polyfill" しかし変わらず。咽び泣きたい。
続きはまた別記事で

Reactで書かれたコードをグーグルクローラに読み込ませる

rails heroku React seo ruby クローラ

謎のエラー

webアプリを公開、サーチコンソールに登録後、url検査にて作成したページをライブテスト。そうしたら f:id:saegusa41010:20190219161523p:plain
スクリーンショットが真っ白、、、エラー内容を探してみると

Failed to set referrer policy: The value 'strict-origin-when-cross-origin' is not one of 'no-referrer', 'never', 'none', 'origin', 'no-referrer-when-downgrade', 'origin-when-crossorigin', 'origin-when-cross-origin',or 'unsafe-url'. Defaulting to 'no-referrer'.
https://www.twi-reviews.jp/review/ARMS:0
Uncaught SyntaxError: Unexpected token =>
https://www.twi-reviews.jp/packs/hello_react-bc8882257be880b4f845.js:1

という二つのエラーが出ていた

Refferrerを解消

リファラーについてはこちらを参照
Referrer-Policy - HTTP | MDN
strict-origin-when-cross-originがないらしいので、headタグの中に
<meta name="referrer" content="origin-when-crossorigin">
を記述。
しかし、変わらない、、、
rails5.2から、デフォルトでHttpレスポンスにReferrer-Policyがno-referrer-when-downgradeになるようにされているらしい。 なのでconfig/application.rbに以下を記述 config.action_dispatch.default_headers['Referrer-Policy'] = 'no-referrer-when-downgrade'
エラー消えた、万々歳
もう一つのエラーについてはあとで考察します。

【ruby, rails】- 以下の文字列や「」の中の文字列を消す方法

rails rails5 ruby

dbの中の、例えばnameカラムの特定の文字列を消したくなった時のやり方です。
正規表現とsub!を使います。
参考
正規表現: 正規表現一覧
sub!: sub, sub! (String) - Rubyリファレンス

関数は、modelの中にかくと良いです。
/app/models/good.rb

def self.shorten_name
    goods = Good.all()
    goods.each do |product|
      if product.name.sub!(/ -.*/m, "")
        product.name.sub!(/ -.*/m, "")
      end
      if product.name.sub!(/【.*?】/m, "")
        product.name.sub!(/【.*?】/m, "")
      end
      product.save
    end
end

この例では、-以下の全ての文字と、【】の文字列を消しています（？をつけているのは【】~【】となった時に全部消えないように）

その後、db:seedなどで
Good.shorten_name
として呼び出せば消えます。