webpack-bundle-analyzer から始めるフロントエンドのパフォーマンス改善入門 - Qiita
はじめに この記事では、 webpack-bundle-analyzer で不要なパッケージを探して削除する方法を紹介します。 CyberAgent が過去に開催した Web パフォーマンス改善のコンテストのリポジトリ に対して試しに導入し、パフォーマンスの改善を試みます。 対象読者 本記事の対象読者は以下を想定しています。 webpack-bundle-analyzer のインストール方法が知りたい フロントエンドが書けるようになってきたので、そろそろ webpack にも入門したい フロントエンドのパフォーマンス改善をしたいけど、何をやったらいいかわからない Web パフォーマンス改善のコンテストに参加することになったので付け焼き刃が欲しい webpack-bundle-analyzer とは？ webpack-bundle-analyzer は webpackによってバンドルされたフ
モダンフロント開発に必須の知識(ES2015~ES2023まとめ + 高階関数) - Qiita
はじめに モダンフロント開発に必須の知識であるES2015〜以降の記法と、実務でよく使用される高階関数について、自分の中で改めて復習、整理しておきたいと思います。 それぞれの項目に★~★★★の重要度も記述しています。 ★★★ => 必ず覚えておくべき ★★ => 覚えておくべきだが、使う場面が限られる ★ => 知識としては知っておいた方が良い 現在フロントエンドエンジニアの方やフロントエンジニアになりたての方、フロントエンドエンジニアを目指して勉強中の方に読んでいただけたら幸いです。 ES(ECMAScript)とは？ JavaScriptの標準仕様。 現在ブラウザで使われているJavaScriptは、ECMAScriptの仕様に則って開発されています。 JavaScriptは他の言語のようにversionなどが存在せず、「ECMAScriptのversion~~に対応しているJavaS
Vue.js UI UX DX Library - Inkline
Configuration file, design tokens, toast notifications and more!Your next Vue.js project deserves the best developer experienceInkline is the intuitive UI Components library for building high-quality, developer-friendly, configurable, and accessible Vue.js Design Systems. More than just a UI LibraryWhile many UI libraries focus solely on UI and UX, they often overlook the most crucial element - th
【結構簡単】ブラウザアクションボタン発火の自作Chrome拡張機能の作り方＆サンプル | degitekunote2
オムニバー横のブラウザアクションをクリックして発火させる2番目に簡単なChrome 拡張機能（Extension）の作り方の紹介です。 単純にボタン一発で何らかの処理を行ないたい時に使える方法になります。 Chrome拡張機能には幾つかの種類があり、ちなみに１番簡単なChrome 拡張機能はscript.jsに処理内容を書いてページが読み込まれれば即実行するタイプです。実行するページURLも指定できるので、とにかく読み込み後問答無用で実行したい時に使えます。 例えばページを読み込むと「背景色を黒に変更させる」なんていう処理が可能なわけですね。まぁ実際はそんな拡張機能なんて使われないので、Google等の検索結果画面にファビコンを表示させたり、ページのサムネイルを表示させるなんていう拡張機能もあったりします。 ただ今回は全てのページ対象で、任意のタイミング（ここではブラウザアクションボタンを
ITP2.1の影響と対策方法のまとめ、JavaScript生成cookie7日間問題 | marketechlabo
ITPの仕様 次々と新しいバージョンがリリースされるITP。微妙にアップデートされ、仕様がわかりにくくなっているので現時点で最新のものを解説する。 ITPの目的と概要 われわれウェブサイト運用者は cookieやローカルストレージなどを使ってブラウザにドメインのデータを保持し、 それらのデータを必要に応じてツール間で連携する ことによって行動計測やコンテンツの出し分けなどのマーケティング活動を行っている。ITPはウェブサイト訪問者のプライバシー保持のためにそれを制限する仕組みである。具体的に何をやっているのかざっくりまとめると、 この3つのケースにおいて cookieなどを使ったデータ保持が短期間しかできなくなる（期間の長さはケースごとそれぞれ異なる） リファラが使い物にならなくなる 可能性があるということである。その結果 コンバージョントラッキングができない リマーケティング広告が配信で
2018年Vue.jsとVuexを使ってる人には必ず知っていてほしいドキュメントに書かれていないコンポーネントやストア、メンテナンスの際に役立つTips - Qiita
はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 現在は構築したシステムを保守・運用しており、その際に得られたノウハウを言語化し、共有出来たらと思います。 ※ 記事の内容に意見がありましたら直接編集リクエストをください。 ※ パフォーマンスの話はしません。 ゴール 役立つTipsを身につけコード品質を向上させる コンポーネントのバグを減らせるTips ほとんどのバグは変数から来ます。 もし全ての値が定数なら状態から来るバグはほとんど無くなるでしょう。 ここではこの変数や式を極力減らせるTipsを紹介したいと思います。 1. dataを極力定義しない Vue.jsでコンポーネントを定義する際ついdata()に沢山変数を定義しちゃいますよね。
脱jQueryのためにしたこと - ICS MEDIA
脱jQueryという主張をよく耳にします。 私の個人プロジェクト「Beautifl - Flash Gallery」のリニューアルでも、依存しまくっていたjQueryの採用をやめました。 サイトを立ち上げたのは8年前の2009年。最盛期のjQueryをふんだんに使って、インタラクションの充実したRIAの開発に挑戦していました（参照「wonderflのギャラリーサイトBeautiflを作りました」）。 この記事では、なぜjQueryをやめようと思ったのか、別の技術で得たものは何なのかを紹介します。 ▲リニューアルしたBeautiflは、jQueryをすべて抜きました ※この記事は「CSS Grid Layoutをガッツリ使った所感 - ICS MEDIA」に対する後編（JavaScript編）となります。 リニューアルにあたってJavaScriptで改善したかったこと リニューアルにあたって
GAE上で大きなサイズのファイルを処理する - Qiita
環境 ruby歴 初心者 rails5 ruby 2.4.1p111 これはなに？ GAE に大きなサイズ（数百MB等）のファイルを処理する方法を記載したものです。 ※細かい部分でもコメントをいただけると学びになりますのでよろしくお願いしますm(_ _)m 概要 まず、大きなファイルをどのようにアプリケーションに持っていくかで処理させる手法が変わってきます。 例えば、リクエストにファイルを乗せて、直接 GAE へのアップロードし処理する手法がまず思い浮かびますが この手法ですと、制限が厳しく、特に下記の制限項目がまず壁となります。 ・リクエストの処理が60秒を超えてはならない ・リクエストサイズが32MB以内 参考： http://qiita.com/tomorier/items/7ee5222137651efddb33 そこで、今回、GAE に直接アップロードするのではなく js から直
JavaScript における文字コードと「文字数」の数え方 | blog.jxck.io
Intro textarea などに入力された文字数を、JS で数えたい場合がある。 ここで .length を数えるだけではダメな理由は、文字コードや JS の内部表現の話を理解する必要がある。 多言語や絵文字対応なども踏まえた上で、どう処理するべきなのか。 それ自体は枯れた話題ではあるが、近年 ECMAScript に追加された機能などを交えて解説する。 なお、文字コードの仕組みを詳解すること自体が目的では無いため、BOM, UCS-2, Endian, 歴史的経緯など、この手の話題につき物な話の一部は省くこととする。 1 文字とは何か Unicode は全ての文字に ID を振ることを目的としている。 例えば 😭 (loudly crying face) なら 0x1F62D だ。 1 つの文字に 1 つの ID が割り当てられているのだから、文字の数を数える場合は、この ID の
フロントエンドの基礎知識
アクセシブルなマークアップの上に成り立つユーザーファーストなドロップダウンメニューの実装 / 20250127_cloudsign_User1st_FE
JSフレームワーク選定の勘所
大づかみなお話です 結論: 課題を知ったらなんでもいいから手を出してみよう！ （細かいところは犠牲にしてます。React でもステートフルコンポーネントつくれるよねとか）
私たちはなぜReactではなくVue.jsを選んだのか | POSTD
Qwintryチームは最近、既存のすべてのプロジェクトのフロントエンドをVue.jsに移行しはじめました。新しいプロジェクトでもVue.jsを使います。 レガシーなDrupalのシステム（qwintry.com） ゼロから新しく書きなおすqwintry.comのブランチ Yii2で動くb2bシステム（logistics.qwintry.com） その他、比較的小さめのプロジェクト（ほとんどは、PHPとNode.jsでバックエンドを構築しているもの） プロジェクトの規模についていうと、 Qwintry は世界中で約50万人の顧客が使っています。アメリカとドイツに倉庫を持っていて、アメリカ国内 最大の郵送先 のひとつで、東欧や中東への出荷に注力しています。Qwintryは、アメリカのオンラインストアでグッズを購入する人たちのためのツールです。私たちの倉庫に届いた荷物をコントロールパネルで管理で
SPAと覚悟
This document summarizes a presentation about single-page applications (SPAs). It discusses what SPAs are, some user experience challenges with SPAs like navigation and accessibility, and solutions to those challenges including server-side rendering and preloading resources. Links are provided to additional resources on topics like accessibility in SPAs and using service workers and prefetching to
Re: React.js界隈の人に聞きたい - mizchi's blog
React.js界隈の人に聞きたい 前提 Reactより前に僕がやりたかったこととして、冪等性の担保の為に毎フレーム document.body.innerHTML を書き換えたかったがパフォーマンス的にそれが許されなかったが、Reactは擬似的にそれを達成させてくれたという圧倒的感謝🙏がある— ダイナモポグラマ (@mizchi) 2016年5月23日 SPA 世の中にSPAの需要があるのか？という点考えていたけど、需要がないからSPA技術がいらない、というのはたぶん間違ってて、SPA技術を持たない人が多いからその発想もなく、SPAで達成できることがイメージ出来ないのがアプリケーション設計の縛りになっている、という感じな気がする— ダイナモポグラマ (@mizchi) 2016年5月23日 GmailやTrelloやPivotalやグラブルは異常な技術の集大成ではなく、個別に分解可能な
Adblock有効時のYouTube埋め込みコード対処 - Qiita
Adblockについて Adblockとは、Webサイト上の広告を自動的に非表示にする拡張機能です。 全世界のネット人口のうち4.9%、数にして1億4400万ユーザーも存在しているそうです。 Adblockが使われている時の問題 多くのキャンペーンサイトで、YouTubeの埋め込みコードで動画を紹介しているサイトを見かけます。 しかし、AdblockでYouTubeの埋め込みコードがブロックされてしまい空白ができてしまいます。 恥ずかしながら自分自身YouTubeの広告に嫌気をさしてAdblockを愛用するようになった一人です。 とあるWebサイトを閲覧していると、画面全体が空白になっており、直帰した経験が何度もあります。 たまたまAdblock非有効時に閲覧をすると動画の存在を知りました。 そういった経緯からYouTube埋め込みコードを用いる場合には Adblockユーザーのために動画
HTMLってどうなの? JSそれぞれの立場 - Qiita
最近のJavaScript業界で「HTMLへの思い」を聞いてみました。 Angular先生 HTMLはもっと出来る子さ。もっと進化できるはず、もっと頑張れよ! React先輩 もうHTMLに期待するのは飽き飽きしたよ。すべてはJavaScriptでいいんだ、クールだろ? Polymer君 HTMLは進化して帰ってきたよ! エッ、Safariッテナンデスカ? このあたり、モダンブラウザ・ネイティブ世代のライブラリたちとの温度差があるようですね。少し、意見を聞いてみましょう。 Riot君 先生、僕たちゆとり世代なんで頑張りたくないです。というかHTMLは十分高機能だし。先輩には悪いけど、ビューはHTMLで書くのが自然ですね。(というか、先輩たちのHTMLアレルギーがナゾ) vue.jsさん 私はわたしですから。あんまりいろいろやりすぎるのはクールじゃないし。HTMLはHTML、JavaScri
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptでconsole.logを使用してませんか？
JSON Hero - A beautiful JSON viewer
axiosのパラメータ指定方法まとめ - Qiita
importのパスにエイリアスを指定する方法 - Qiita
