Lighthouseの点数を50点以上改善したお話 – TravelBook Tech Blog
トラベルブックのフロントエンドチームでは2020年の9月から、ページのパフォーマンス改善に取り組んでいます。 今回は今までどのようにやってきたのかを紹介したいと思います。 Core Web Vitals 2020年5月、Core Web Vitals がSEOに影響されるというのがGoogleから発表され、集客的にもユーザー体験をページパフォーマンスが重要になりました。 弊社はメディアサービスを運用しており、SEOはビジネス的に重要な指標としています。 そのため、Core Web Vitals をパフォーマンス改善の指標としました。 Core Web Vitalsはより良いユーザー体験を提供するための指標となっていて、読み込み時間、インタラクティブ性、視覚的な安定性 に焦点をあてた下記3つの指標をベースに計測します。 Largest Contentful Paint (最大視覚コンテンツの
【JavaScript】３大フレームワーク Angular, React, Vue.jsを比べてみよう (2018年4月) - Rのつく財団入り口
JavaScriptフレームワークを比較してみよう (2018年4月) トレンドの移り変わりが激しいWebフロントエンド。2017-2018年現在、JSフレームワークで最も有力な3強がAngular/React/Vue.jsの３つと言われています。他に日本で比較的聞くのはRiot.js、Ember.js、Hyperappなどがありますね。 ちょいとFW選定の技術調査でいろいろ調べたりしたので、このエントリでは初学者なりに比較を整理してまとめてみたいと思います。 なお最後にも書いてありますが、実際に使ったりして得られた知見もあれば、入門レベルだと確かめようがないので本やネットの情報や意見の中で多いものの受け売り的になっているところもあります。フレームワークって結局どれがいいのという話は混乱したり場合によっては荒れがちですが、最終的には情報は各自の判断でご利用ください。フレームワークは開発をよ
GoogleForm+GoogleSpreadsheet で集めたコメントをタグクラウドにする - Qiita
概要 とあるイベントに参加しているユーザが自由なテキストを投稿した際に、それらのワードがタグクラウドとなって会場のディスプレイに表示されたら面白そうだよね！ と言っていた方がいたので検討してみました。 実際には mentimeter を活用して当日は下記のようなものができたそうです。 大まかな仕組み Google Form にて一行テキストが投稿できるように設定 投稿の保存先をSpreadsheetにしておく そのSpreadsheetをWebアプリケーションとして公開しJSONを吐くようにする JSONを読み込むWebページ（HTML/JavaScriptで良い）を設置する 手順 Google Form で投稿フォームを作成 下記のようにします。あとで楽なので、質問のタイトルは「comment」などの半角英字にしておくと良いと思います。（本記事はここでcommentと設定した前提とします
D3.jsの概要と使い所について - Qiita
個人的に初めてD3.js（以下、D3と呼びます）を使う機会があったので、その時に得られたD3の大まかな概要やD3（もしくはSVG）の使い所を纏めておきたいと思います。特にD3を使った事がない人向けですが、ここではD3についてハンズオン的な事はしないのでご了承ください。 D3とは D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, Canvas and HTML. D3 combines powerful visualization and interaction techniques with a data-driven approach to DOM manipulation, giving yo
Safariでブラウザバックしたときに何かしたい - Qiita
Safariでブラウザバックしたときにリロードが走らず、前画面などで二重サブミット処理を実装していたとき、最送信できない→設定していたフラグを戻すとういう処理を行いたかった。 試したイベントなど pageshow window.onpageshow = function() { // do }; window.addEventListener('pageshow', function() { // do }, false); // jQuery $(window).on('pageshow', function() { // do });
404
File Not Found アクセスしようとしたページは 見つかりませんでした。 以下のような原因が考えられます。 記事が削除された URLが間違っている
JavaScriptでの正規表現のハマりポイント - Qiita
以前ハマったので、メモとして書いておきます。 "." は改行文字にマッチしないし、マッチさせるすべがない（ES2018より以前） （この JavaScript は ES2018 より以前を想定しています） var container = document.getElementById("container"); container.innerHTML = container.innerHTML.replace(/===ここから===.*?===ここまで===/, ""); これ、「===ここから===」と「===ここまで===」が一行に収まっていればマッチするのですが、複数行にまたがっている場合にはマッチしませんし、当然置換も行われません。 ドットが改行文字にマッチしないから です。 記事 RegExp - JavaScript | MDN によると、修飾子(flag) には g i m
Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 - エンジニアHub｜若手Webエンジニアのキャリアを考える！
Chrome DevToolsを使いこなそう！ Web開発に必須なブラウザ開発ツールによるデバッグの基本 開発者ツール（DevTools）とは、ブラウザに搭載されているデバッグツールです。多岐にわたる技術の集合体であるWebページやWebアプリケーション、いわゆるフロントエンドの開発において、なくてはならないツールです。 皆さん、どうもこんにちは。今回で3度目のエンジニアHubの登場となる大竹智也です。春の季節もそろそろ終わりを迎え、新生活を迎えた人たちも新たな環境に慣れてくる時期だと思いますが、元気にお過しでしょうか。 前回までエディタの話ばかりしてきましたが、今回はエディタから離れてWebブラウザ（以下、ブラウザ）の話をしたいと思います。ただ、ブラウザの話といっても、エンジニアHubは開発者向けの媒体なので、ブラウザに搭載されている開発者ツール（Developer Tools）のお話を
Reactを使うとなぜjQueryが要らなくなるのか - Qiita
はじめに React（通称 React.js1）を全く知らない、あるいは幾つか記事を見たけどなんなのかピンと来ていない、という人のために書いています。 「jQuery くらいしか知らない」くらいの人に具体的に雰囲気を知ってもらうのが目的であり、すでにやる気がある人向けのチュートリアルではありません。やる気が出れば日本語版ドキュメントを読んで手を動かせばあっという間なので、そこまでの興味が出ることを目標にしています。 以降では ES2015 (ES6) の文法（アロー関数とか）を使っています。この部分が怪しい人は先にアロー関数と const 文だけでも知ってから先に進んでください。 以下の説明中、このアイコンで表すのは（2023 年現在から見た）『昔話』です。新しく自分のコードを書く際には本来知らなくていいことですが、古い記事を見たときに混同しないための参考情報として書いてあります。この記事
Google Maps API でGeocodingしようとしたらundefinedになる - Qiita
はじめに Google Maps API でGeocodingしようと思ったら、色々とハマったのでメモ。 Geocodingの結果がundefinedで、ずいぶん長く格闘した記事になります。 基本的なGoogle Maps API の使い方はこちらへ。 そもそもGeocodingとは ジオコーディングというのは、住所や地名、駅名などの情報を、緯度・経度の座標値に変換する技術です。 逆も然りで、緯度・経度から住所や地名を取得することも可能です。 それは、逆ジオコーディング(Reverse geocoding)と呼ばれます。 それでは本題へといきましょう。 基本的なGeocodingの書き方 まずは、公式ドキュメントを参考に書いてみます。 <!DOCTYPE html> <html> <head> <title>Geocoding service</title> <meta name="vie
イマドキのJavaScriptの書き方2018
PySpa統合思念体です。これからJavaScriptを覚えるなら、「この書き方はもう覚えなくていい」（よりよい代替がある）というものを集めてみました。 ES6以降の難しさは、旧来の書き方にプラスが増えただけではなく、大量の「旧来の書き方は間違いを誘発しやすいから非推奨」というものを作り出した点にあります。5年前、10年前の本やウェブがあまり役に立たちません。なお、書き方が複数あるものは、好き嫌いは当然あると思いますが、あえて過激に1つに絞っているところもあります。なお、これはこれから新規に学ぶ人が、過去のドキュメントやコードを見た時に古い情報を選別するためのまとめです。残念ながら、今時の書き方のみで構成された書籍などが存在しないからです。 たぶん明示的に書いていても読み飛ばす人はいると思いますが、すでに書いている人向けではありません。これから書くコードをこのスタイルにしていくのは別にいい
【JavaScript入門】replaceの文字列置換・正規表現の使い方まとめ！ | 侍エンジニアブログ
今回は、文字列の中から任意の文字を別の文字に置換する「replace()」メソッドについて学習をしましょう！ JavaScriptには効率よく「置換」ができるメソッドが用意されていますが、簡単な方法から複雑な手法まで人によってさまざまなやり方があります。 本記事では以下のような構成で解説をしていきます！ 【基礎】「replace」とは？ 【基礎】「replace」の使い方 【実践】正規表現による「replace」の使い方 【実践】「replace」の活用事例 【まとめ】「replace」の使い方まとめ この記事で、「replace」をしっかり学習してスキルアップを目指していきましょう！ ＞＞＞ 今すぐ「replaceの使い方」を知りたい方はこちら 「replace」とは？ それでは、まず最初に「replace()」について基本的な知識から学習を進めていきましょう！ 「replace()」は
正規表現を複数回実行する際の注意点 - Qiita
javascriptで正規表現を複数回実行する際の注意点 以下のコードは"hoge"という文字列が含まれているか正規表現で検索し、結果を表示するコードです。 var example = "hoge"; var regexp = /hoge/g; regexp.test(example); // true regexp.test(example); // false regexp.test(example); // true regexp.test(example); // false ... 一度目の実行ではtrueが返ってきますが、二度目の実行ではfalseが返ってきます。 以降は交互に結果が変わります。不思議ですね。 私はループ内で正規表現を実行する際に、この挙動につまづきました。 一体何が起きているのでしょうか？ var examples = ["hoge", "hoge", "ho
console.logまとめ 2016年夏 - Qiita
console.log関連についてまとめました。 モダンブラウザであればどれも使用できると思いますが、基本出力結果等はchromeで確認したものです。 console.hogehogeのいろいろ 基本 引数を入れることで出力結果をカスタマイズできます console.info、console.warn、console.error それぞれで見た目を変えることができます。 console.assert 式を評価してfalseの場合にログ出力します。 console.count ログの出力結果が同じ場合にカウント数が自動的に増えていきます。 console.dir オブジェクトのプロパティの中身をログに出力します。 console.dirxml HTMLとかXMLの要素を渡すと、下の要素が全部見れるようになります。 console.group、conosle.groupCollapsed co
速度が重要な理由 | web.dev
デジタル コンテンツやデジタル サービスにアクセスするためにウェブを利用する消費者が増えています。ウェブサイトのアナリティクスを見ると、このことがご自身のデータでも表れていることがわかります。消費者の要求もかつてないほど高まっており、ウェブサイトにアクセスしたときに、競合他社と比較するだけでなく、日々利用している最高水準のサービスと比較して、自社の評価も高まっています。 この投稿では、パフォーマンスとビジネスの成功の関係と、速度がオンライン ベンチャーの成功を決定付ける要因の 1 つである理由について、これまでに行われた調査の一部をまとめます。 ユーザーを維持することがパフォーマンスの向上につながる Google とのコラボレーションと、LCP をページ パフォーマンスのメイン KPI として採用したことで、当社の e コマースのカスタマー エクスペリエンスを大幅に改善できました。 Vod
【JavaScript】メモリの浪費を避けるコーディング | ヘッドウォータースのブログ TechNote
こんにちは。良昌です。 Facebook、GithubなどのJSON形式でユーザ情報を返却するAPIや、PhoneGap、Monacaなどのスマートフォンのマルチプラットフォームを提供するライブラリ、IDEが開発ツールとして定着してきたことにより、JavaScriptを利用する機会が増えたのではないでしょうか。 今回は、JavaScriptコンテナがWebブラウザの場合に、動的に確保されるメモリ領域の浪費を避ける方法について書きたいと思います。 JavaScriptにおけるメモリの浪費を避けるコーディング JavaScriptにおけるメモリの浪費を避けるコーディングをするためには、GC(ガベージコレクション)、クロージャについての知識が必要です。まずは、この2つの機能について説明していきます。 ■GC(ガベージコレクション) GCとはプログラムが動的に確保したメモリ領域の内、不要になった領
Chrome DevToolsを使ってJavaScriptのメモリリークを検出し、解消する - 人生dat落ち
JavaScriptを書いていたらブラウザがくっそ重くなる症状に出くわした。あぁ、噂のメモリリークですわ。 先人の知恵に頼るマン。それっぽい記事が見つかる。 javascriptのメモリリーク対策(随時更新) - Qiita Shibu’s Diary: JavaScriptのメモリリークを10倍速で発見する Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools Writing Fast, Memory-Efficient JavaScript - Smashing Magazine angularjs - How to catch memory leaks in an Angular application? - Stack Overflow 上の記事はProfiles + Take Heap
JavaScriptで &nbsp; を上手く扱う。
さて、こないだの記事で "半角スペース" と " " は違うのだ、ということを書きました。 例えばこんなHTMLがあったとします。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Loading...
Welcome to m-bsys.com