2022年におけるフロントエンド開発のベースライン
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは！LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変
フロントエンドのテストは皆のためのもの | POSTD
テストとは人によって反応が分かれるものの1つであり、大喜びする人もいれば、見ないようにして去ろうとする人もいます。あなたがどちらの側であるにせよ、ここではフロントエンドのテストは皆のためのものであるということを説明します。実際、テストには多くの種類があり、それがテストに対して初めに恐れや混乱を感じる一因なのかもしれません。 この記事では、特に有名で広く利用されている種類のテストを扱います。なかには目新しいものはないと感じる読者の方もいらっしゃるかもしれませんが、少なくとも復習にはなるでしょう。どちらにせよ、筆者の目標は、この記事を通じて世の中のさまざまな種類のテストについて理解を深めてもらうことです。ここではユニットテスト、統合テスト、アクセシビリティテスト、ビジュアルリグレッションテストなどを一緒に見ていきます。 さらに、Mocha、Jest、Puppeteer、Cypressなど、各種
フロントエンドが嫌い
ウェブフロントエンドの技術の進歩と興亡の速度には目を見張るものがある。 browserifyが生まれ、Gruntが生まれ、Gulpが生まれた。 そしてその全てが死んだ。 Webpack, Babel, Flow, 今栄えている技術だってそのうちに死ぬだろう。Reactだって例外ではない。 一部はもう死につつあるし、少し前にあれだけ持て囃されたTypeScriptも今や消えつつある。Coffeeは全エンジニアから嫌われた。 そんな万華鏡のように目まぐるしく変わる情勢に追い付かんと研鑽を続ける者等がいる。アーリーアダプターを自称し最新技術のケツを追いかけQiitaにクソを垂れ流す彼らこそ我らがイケイケウェブフロントエンジニアである。 最新技術に目を凝らし、やれ新たなこれイケてるだの古臭いあれはイケてないだのと宣いチュートリアル記事を量産する彼らであるが、彼らの存在は決して無駄ではなく、生まれた
webpack@5の主な変更点まとめ - hiroppy's site
予定では、明日の 10 日に webpack のメジャーバージョンである v5 がリリースされますが、まだエコシステムが安定していない可能性があるため、注意してアップグレードを行ってください。 webpack 5 release plan · Issue #11406 · webpack/webpack TL;DR: release planned for 2020-10-10 After nearly 1 year of beta testing and about 2 years of devel... change log: https://github.com/webpack/changelog-v5 移行ガイド: https://webpack.js.org/migrate/5 追加機能 Persistent Caching このバージョンからは今までメモリ上でしか行ってなかった
Lazy loading images | Articles | web.dev
Lazy loading images Stay organized with collections Save and categorize content based on your preferences. Images can appear on a webpage due to being inline in the HTML as <img> elements or as CSS background images. In this post you will find out how to lazy-load both types of image. Inline images The most common lazy loading candidates are images as used in <img> elements. With inline images we
JavaScript Primerの書籍版が4月27日に発売予定です！
JavaScript Primerは https://jsprimer.net/ でOSSとして公開しているJavaScriptの入門書です。 JavaScript Primerの書籍版が2020年4月27日にアスキードワンゴから発売されます！ 正式名称は「JavaScript Primer 迷わないための入門書」となっています。 略称は今まで通り jsprimer または js-primerです。 ハッシュタグも引き続き #jsprimer を利用してください。 予約できるのは物理書籍だけですが、電子版(Kindleと達人出版)も発売同日〜後日に発売される予定です。 書店への物理的なアクセスが難しい状況なので、欲しい人はできるだけ予約してください！Amazonなら次のページから物理書籍を予約できます。 JavaScript Primer 迷わないための入門書 | azu, Suguru
Notes on ECMAScript 6 (ES6)
Introduction This is not meant to replace the official documentation. This post does not cover all the ES6 features. For typos and corrections: https://github.com/hardy613/es6-notes/issues ES6 Variables var vs let Traditionally the keyword var initializes the identifier with a value: var my_variable = 'value'; //1 //2 //3 //1 the var keyword //2 the identifier //3 the value There are rules for nam
Webブラウザの操作をJavaScriptで自動化。Headless Chromeのフレームワーク「Puppeteer」がバージョン1.0に到達。ChromeのDevToolsチームが開発
UIを持たずスクリプトから操作可能なWebブラウザのHeadless Chromeを利用するためのフレームワーク「Puppeteer」がバージョン1.0に到達した。Webアプリケーションの自動テストなどに利用可能だ。 GoogleのWebブラウザ「Chrome」は、ユーザーインターフェイスを持たずコマンドラインやリモートデバッグ機能を通じてWebブラウザを操作できる「Headless Chrome」機能を備えています。この機能は2017年6月にリリースされた「Chrome 59」から実現されたものです。 Headless Chromeを利用すると人間がWebブラウザをマウスやキーボードで操作することなく、プログラムでHeadless Chromeを起動し、特定のWebページを読み込み、画面キャプチャの取得や、指定された場所をクリックし、値を入力し結果を取得する、といった操作を自動的に行わせ
さよなら、Firebug | POSTD
最も人気が高くパワフルなWeb開発ツール。 Firebugはこれまでに驚異的な成功を収めており、その12年の歴史において、オープンソースのツールとして、Web開発者の間でカルト的な人気を築き上げてきました。登場したのは2005年、Firefoxブラウザでコードの検査、編集、デバッグをできるようにした最初のツールです。また、どのようなWebページにおいても、CSS、HTML、JavaScriptの調査を可能にしています。これは大きな前進でした。 Firebugは多くの人の注目を集め、現在でも100万人以上の熱心なファンがそれを使用しています。 そのような中、来月リリースされるFirefox Quantum (バージョン57) で、Firebugが終焉を迎えるのは残念でなりません。ただし、現在のFirefox Developer ToolsにFirebugの全ての機能が盛り込まれている点につい
【追記：2018 01/25】配列の連結(concat vs Array.prototype.push.apply) - Qiita
こちらに追記しようとしたのですが見にくかったので別記事にしました ES6での配列の連結方法になります https://qiita.com/kaz2ngt/items/c03625587bf398b6f81a 以下過去記事 投稿テストも兼ねたメモ 一般的に配列の連結はconcatを用いるが、配列に配列を継ぎ足していくような処理だとconcatでは毎回配列を生成しているのがきになり、他の手段を調べてみるとArray.prototype.push.applyというものがあったためメモ 実行ファイル var a = [0, 1, 2, 3], b = [4, 5, 6, 7], i, count = 10000; console.time(); for (i = 0; i < count; i++) { a = a.concat(b); } console.timeEnd();
年収でこんなに違う 所得・消費税、あなたの負担は：日本経済新聞
（注）国税庁「民間給与実態統計調査」を基に作成。2017年の予測値は14年の数値を基準とし、給与所得控除の上限額引き下げや所得税の最高税率引き上げの影響を考慮した 国税庁が毎年公表している「民間給与実態統計調査」を基に、所得税の年収階級別の負担額を示したのが上のグラフだ。 グラフから読み取れる特徴の１つは、給与所得額によって負担の増減が二極化していることだ。1999年以降、「年収700万円超」以上は全階層で所得税額が上昇した。一方で「700万円以下」より低い階層は軒並み減少した。 たとえば、「1000万円超～1500万円以下」の負担額は、約88万7000円（99年）から約108万4000円（2014年）と約19万7000円増えた。対照的に、民間給与の平均額に近い「400万円超～500万円以下」の負担額は約３万4000円減り、14年の納税額は約９万1000円。「1000万円超～1500万円以
katatema.js - ✘╹◡╹✘
次のようなコードを書いて、 import React from "react" export default () => <div>Hello!</div> 次のようなコマンドを叩くと、 katatema build 次のようなファイルが生成されるという、katatema というツールをつくった。 <!DOCTYPE html> <html> <head> </head> <body> <div>Hello!</div> </body> 最先端の消耗 前に キーボードショートカットをカスタマイズするブラウザ拡張 - ✘╹◡╹✘ で、こういうことを書いた。 id:moznion へ、寒い日が続きますがお元気ですか。ともあれChrome拡張を1つこさえれば、大の大人が寄ってたかってモダンと言い合う類のものが一通り学べるだろうと思います。 最近のJavaScriptの周辺環境は大変で、何をやるに
キーボードショートカットをカスタマイズするブラウザ拡張 - ✘╹◡╹✘
この文章は https://github.com/r7kamura/keyworks/ の製作記である。Keyworksはキーボードショートカットをカスタマイズするための凡庸なブラウザ拡張であり、つい先日、思いつきによりつくられた。 いま見ているページをTwitterで共有するとき、あるいはMarkdownで書いた文書にページのリンクを載せるとき、皆どのようなツールを利用しているのだろう。この話題を出すと、それ専用のChrome拡張や、秘蔵のブックマークレット、VimやEmacs風のキーバインドを実現するツールのプラグインなど、みな懐から様々なツールを取り出して楽しませてくれる。自分はというと、これまでKeyconfigというChrome拡張を使っていた。 Keyconfig - Chromeウェブストア https://github.com/os0x/ChromeKeyconfig Ke
ウーパールーパーが絶滅の危機
「ウーパールーパー」の名でおなじみの両生類、メキシコサラマンダーが絶滅の危機にさらされている。 数世紀にわたる開発と汚染が原因で、このユニークな生物は現在、メキシコの首都メキシコシティのいくつかの運河にしか生息していない。ナショナル ジオグラフィックのラテンアメリカ版2016年9月号の特集記事によると、このままでは2020年までに絶滅するおそれがあると科学者たちが警告している。 アステカ時代は崇拝の対象だった メキシコサラマンダーは、大きな外鰓（外側に飛び出したえら）を残したまま成熟する珍しいサラマンダーで、体の一部を失っても再生できる素晴らしい能力を持つ。（参考記事：「メスしかいないサラマンダー、驚きの利点判明」） 15～16世紀のメキシコ中央に栄えたアステカ帝国では崇拝の対象であり、首都テノチティトラン（現在のメキシコシティの原型）の盆地に散らばる複数の湖に生息していた。（参考記事：「
ニコニコ大百科のネタバレ防止反転を解除するブックマークレットをちょっとだけ変えてみた
概要!!! iPhoneでニコニコ大百科を見てるとネタバレ防止反転を読むことが出来ないという悲しい事態がある。 それを回避する方法を今日たまたま見かけたので、実践してみた。 詳細ッ！！！ 元ネタはこちら ニコニコ大百科のネタバレ防止反転を解除するブックマークレット で、改造したコードはこちら。元ネタはPCサイトのノードをターゲットにしていたので、僕はモバイルサイトの方のノードをターゲットにした。後、無意味に無名関数で囲って謎の汚染保護。深い意味は無い。 javascript:(function(){ $(".article [style*='color: white'],.article [style*='color: #ffffff']").css("color",""); } )() 後は↑のコードをSafariやChromeのブックマークに設置するだけ。 Google Chromeの
サイト速度とonload再考 | ゆっくりと…
単にウケ狙いなら「革新的！GAのページ平均読み込み時間を劇的に速くする方法」とか「もう3rdパーティーに邪魔させない、超高速スクリプト読み込み術」（笑）とかの煽りタイトルを付けるところですが、今回はもっと本質的なことを論じてみたいと思います。 「プログレッシブレンダリングでUXを向上させるJS非同期読み込みのベストプラクティス」では、スクリプトの読み込みと実行を window.onload 対象から切り離し、見た目のページ速度を速くする方法について書きました。この方法は既存のスクリプトを書き換える必要があるため、Stoyan Stefanov によって 実験的に実装された Facebook SDK か、自前のスクリプトにしか適用できませんでした。 しかし今回、Hatena や Twitter、Pocket、Disqus など、他の 3rd パーティ製スクリプトにも適用できる方法 − “進化
モバイルブラウザで音が出ない時
超例外ﾊﾟﾃｨｰﾝ おっす、オラ開発狂。 今日も元気にデバッグしまくるぜ。 今日解決したのは超例外パターンだ。あまりにも例外的な状況だから誰の役に立つか分かんねーけど、多分誰かを救うことになると思うからここに書きなぐっておくぜ。 モバイル版Google Chrome(iOS)やAndroidのブラウザで音が鳴らない 最近、JavaScriptでvar sound = new Audio();sound.src='hoge.mp3';sound.play();みてーなコード書くんだけれど、音が鳴らない環境があってオラ超困ったんだぞ。 その環境は、Basic認証をかけてる環境だ。 おめえたちも騙されたと思ってBasic認証を書けたサーバにmp3ファイルを置いてモバイル版Google Chromeでアクセスしてみるんだ。 そもそも再生されなくて目の前が真っ白になるぞ。 こりゃ～つれ～な～、おらわ
for文でのlet変数が毎ループ新スコープを持つようになった - JS.next
概要 かつてはfor文初期化句で宣言された変数は、for文の直前で宣言されたように振舞っていたが、各ループでスコープを引きづらないように仕様が変更され、V8も追従した。 例 for (let i = 0; i < 5; i++) { ～～～ } これは今までは次のコードと等価だった。 { let i = 0 for (; i < 5; i++) { ～～～ } } つまりfor文中で関数を定義するとこうなっていた。 let funs = [] for (let i = 0; i < 5; i++) { funs.push(function () { return i }) } funs.map(function (fun) { return fun() }) // [5,5,5,5,5] この結果が[0,1,2,3,4]になるのが今回の変更である。 つまり一番最初のコードはこれと等価になる
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
webpack4→webpack5をして、Module not found: Error: Can't resolveが出た場合、'html-loader'を削除しろ
GitHub - axios/axios: Promise based HTTP client for the browser and node.js
