少しずつ開発している新サイト（プロジェクト名：np2020）では、環境の設計以来ずっとnpmを使っていたんですけど、業務でこれまた新しく設計された環境（設計したのは前任者）で開発をしていて、そこでyarnを使っていてインストールがとても速くて使いやすいので、こっちでもそれに乗り換えましょうということで乗り換え。
npmとyarnの違いについてはこの辺がわかりやすいです。
Yarnとnpmの違い：JavaScriptパッケージマネジャーを比較する – WPJ
npm vs yarnどっち使うかの話 – Qiita
手順は以下の通り。
今現在のフロントエンドはBootstrapVueで、Laravel Mixを使って
npm run devnpm run production記録されたエラーは下記の通り。
"message": "Uncaught SyntaxError: Unexpected end of input",
"file": "",
"lineNo": 1,
"colNo": 158,
"stack": "SyntaxError: Unexpected end of input",
"user_agent": "Mozilla/5.0 (Linux; Android 7.1.1; OPPO A79; Build/N6F26Q; wv) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.92 Mobile Safari/537.36 SogouMSE,SogouMobileBrowser/5.6.0"なるほど。 ChromeのJSON.parse()に空文字を入れるとエラーになると。エラーログからでは具体的にどのJavaScriptファイルでエラーが出ているのかわからないし、そもそも1行目のエラーとなっていて問題の特定が難しかったけれど、幸いサイト内で「JSON.parse()」を使っている部分は限られていたので、そこを改修。 もともと発生頻度の低いエラーなのでこれで効果があるかどうかは不明だが、しばらく様子を見たいと思います。 ちなみに僕が見た環境での「JSON.parse()」は、こんな感じで使われていました。analog_MultiMeter: JSON.parseでハマった
原因 ChromeのJSON.parseは、空文字が入るとおかしなことになるらしい。 JSでは空文字列はfalse性を持つので、上記の対策で通るという事。 そのエラー発生は良いとしても、JSON.parse()のエラーでなくてEnd of Inputなんてわかりづらいエラー、それもHTMLの1行目なんかに出るのが悲しい。
function (error) {
var obj_error = JSON.parse(error);
}
先月の頭くらいに、動かなくなっていたGoogle Feed API を YQL で置き換えるということをやりました。 Google Feed API を YQL で置き換え | mutter これを使ってサイト内でRSSを読み込んで表示するということをやって上手く行っていたんですけど、最近また上手く表示されていないようなので見に行ったら……YQL終わってました。
マジかー。まあいかにもYahoo!らしい時代遅れな感じのサービスではあったけども、それなりに便利そうだったのに。今どきは流行らないか。 仕方ない、Vue.jsで実装するかなあ……と思ったけど、そうだ、相手がはてなブックマークRSSの時のCoRSの解決方法が僕にはわからないんだった。一旦サーバ側で情報を取得してから、 ヘッダ付けてVue.js用に出力し直せば出来るかなあ。面倒くさすぎるけど。 ……復活は引っ越し後かな。。Important EOL Notice: As of Thursday, Jan. 3, 2019, the YQL service at query.yahooapis.com will be retired.
別々のページで開発していた機能を一つのファイルにまとめることとして、そのままだと全部のページで 他サービスのAPIにGETリクエストを投げてしまうからそこをコンポーネントに切り分けて、必要なときだけリクエストを投げるようにした……まではよかったんだけど、描画されない。
RSSフィードを読み込むためのGoogleライブラリ「Google Feed API」が正式に廃止されたのは2017年1月ということなので、もう2年近く放置してたってことになりますが、サイトをいろいろ直しているついでにそれも何とかしておこうと言うことで代替手段を探すとYQLで代替するのが一番スマートそう。
jQueryのajax関数で送信したときのエラーをハンドリングすると、
$.ajax({
type : 'post',
url : 'sample.php',
data : {
'id' : 'sampleID'
}
}).done(function(data, textStatus, jqXHR) {
// ページを再読み込み
window.location.reload(true);
}).fail(function(jqXHR, textStatus, errorThrown) {
console.log(textStatus);
console.log(errorThrown);
});独自データ属性 – グローバル属性 – HTML5 タグリファレンス – HTML5.JP
独自データ属性は、名前空間に属さない属性で、その名前は文字列 “data-” で始まり、ハイフンの後に少なくとも一文字が続きます。これは XML 互換で、ASCII 大文字 を含みません。 （中略） すべての HTML 要素に対して、独自データ属性をいくつでも、どんな値でも指定することができます。
Ippei Suzuki$('#userName').data('userId');$('#userName').data('userId'); //1234
$('#userName').attr('data-userId', '5678');
$('#userName').data('userId'); //1234 ← キャッシュを読み込む
$('#userName').attr('data-userId'); //5678 ← 属性を見る