サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
買ってよかったもの
postd.cc
クイックサマリー:人工知能がコンピューティングパラダイムの進化をもたらしており、それに伴いデザイナーはより直感的なユーザーインターフェースを開発するチャンスに恵まれています。新しい機能のほとんどは、テキストベースの大規模言語モデルによって実現されているため、グラフィカルインターフェースからチャットボットのような対話型インターフェースへの移行が必要との声が多く聞かれるようになっています。しかし、多くのインタラクションパターンにおいて、対話は優れたインターフェースではないことをかなりの証拠が示しています。最新のAI機能によって、対話だけにとどまらずヒューマンコンピューターインタラクションの未来がどう変わりうるのか、マクシミリアン・ピラスが考察します。 人間とコンピューターのインタラクションのあり方を根本から変えうるような技術革新はそうそうありません。幸運なことに、次のパラダイムシフトは今まさに
「決断の時における最善の選択は、正しいことをすること。最悪の選択は、何もしないことだ。」セオドア・ルーズベルトの言葉です。 人生を左右する可能性のある重要な決断を下すとき、結果が不確実であることや、未知の領域に踏み込むことへの不安から、ひたすらデータを集めては分析を繰り返し、必要以上に考え過ぎてしまう非生産的な悪循環に陥ってしまうことがあります。 想像が膨らんでしまい、最悪のシナリオを想定してそれが最善だと思い込んでしまうこともあれば、頭の中にストーリーを描き、良い選択肢があるにもかかわらず、より良い選択肢があるのではと考えて全て却下してしまうこともあります。 こうした決断の例としては、引越し、退職と起業、転職、企業戦略の大転換などがあります。 恐怖心、完璧主義、怠惰、集中すべき目標の欠如など、理由はさまざまですが、分析ばかりに時間を費やして一向に行動を起こさないでいると、「analysi
none«自動化できるものはすべて自動化されるだろう» - ロバート・キャノン、インターネット法・政策専門家 人工知能(AI)が今年のトレンドであることは紛れもない事実です。AI技術が台頭し、さまざまな業界で急速に普及する中、UI/UXデザイナーやプロダクトデザイナーも当然その影響を受けています。ChatGPTやMidjourney、DALL-E 2(ダリ・ツー)、Stable Diffusionなどの製品はすでにかなり人気があり、筆者の同僚の中にも積極的なユーザーが多数います。 UI/UXデザイナーとして、筆者もChatGPTを作業プロセスに取り入れたことにより、より使いやすいインターフェースの開発能力が格段に向上したことをすでに実感しています。この記事では、ChatGPTの具体的な使い方を示しつつ、ChatGPTを利用することでどのようなメリットを享受でき、いかにして全体的な作業効率を
クイックサマリー:「テストピラミッド」は、自動テストをUI、サービス、ユニット単位に整理することで、開発に自動テストを組み込む方法を示すために作成されました。2012年に定義されて以降、このモデルは次第に使われなくなってきたように思いますが、本当に廃れてしまったのでしょうか。この記事では、最新のテスト戦略を紹介するとともに、今日のソフトウェア開発におけるテストピラミッドの関連性を検討します。 筆者の同僚であるジャン・フィリップ・ピエトルチェクが、かつてコードを書く開発者の責任について、次のように述べました。 none「我々の仕事の成果を最終的に使用する人々は、(中略)我々がただ最善を尽くすだけでなく、実際に機能するものを作ることを期待しているのです。」 — ジャン・フィリップ・ピエトルチェク 彼の言葉は、私たちが書くコードをそれに依存する人々の観点からとらえている点で非常に印象に残りました
Next.jsを4年間使用してたどりついた、エンタープライズアプリケーションのフロントエンド開発・構築手法 はじめに 目まぐるしく進化するフロントエンド開発の世界では、常に最新の知識や技術をいち早く取り入れることが、エンタープライズアプリケーションの開発を成功させる上で欠かせません。Tailwind CSS、TypeScript、Turborepo、ESLint、React Queryなどを含む強力なツールキットとNext.jsを4年間使用してきた結果、開発に役立つさまざまな知見やベストプラクティスが得られました。この記事では、大企業向けフロントエンドアプリケーションのパフォーマンス、保守性、拡張性を最大限に高める設計・構築手法を紹介したいと思います。 注記:ここに記載する内容はあくまでも個人的な見解であり、筆者が推奨する手法が必ずしも適さない場合もあります。 効果的なエンタープライズ向け
はじめに 目まぐるしく進化するフロントエンド開発の世界では、常に最新の知識や技術をいち早く取り入れることが、エンタープライズアプリケーションの開発を成功させる上で欠かせません。Tailwind CSS、TypeScript、Turborepo、ESLint、React Queryなどを含む強力なツールキットとNext.jsを4年間使用してきた結果、開発に役立つさまざまな知見やベストプラクティスが得られました。この記事では、大企業向けフロントエンドアプリケーションのパフォーマンス、保守性、拡張性を最大限に高める設計・構築手法を紹介したいと思います。 注記:ここに記載する内容はあくまでも個人的な見解であり、筆者が推奨する手法が必ずしも適さない場合もあります。 効果的なエンタープライズ向けフロントエンドアーキテクチャの基本原則 エンタープライズ規模のアプリケーション向けにフロントエンドソリューシ
2020年5月、GoogleがWebサイトのパフォーマンス測定を目的としたユーザー中心の指標を発表しました。コアウェブバイタル(CWV)と呼ばれるこの一連の指標には、以下が含まれます。 LCP (Largest Contentful Paint):ビューポート内で最大の要素が表示されるまでの時間。 FID (First Input Delay):ユーザーの最初の入力に応答するまでの遅延時間。近々INP (Interaction to Next Paint)に置き換わる予定。 CLS (Cumulative Layout Shift):ページのコンテンツがどれだけ移動したかを表す指標。- CWVの狙いは、世の中にあふれるさまざまなパフォーマンス指標を簡素化し、最も重要な指標に優先的に取り組めるようにすることです。この取り組みは好影響をもたらしています。CWVの発表以降、多くのWebオーナーや
fetchPriority APIは、リソースの相対的な優先度をブラウザに示すために使用します。fetchpriority属性を<img>、<link>、<script>、<iframe>の各要素に追加するか、Fetch API上でpriority属性を使用することで優先度を設定できます。 ブラウザのロードプロセスは複雑です。ブラウザは、主にリクエストの種類や、ドキュメントのマークアップ内におけるリクエストの位置によってその優先度を判断します。例えば、ドキュメントの<head>内で要求されたCSSファイルの優先度はHighestとなり、defer属性が設定された<script>要素の優先度はLowとなります。ブラウザは、同じ優先度が割り当てられたリソースを、検出した順にダウンロードします。 fetchpriority fetchpriority属性を使用することで、要求されたリソースの優先
この記事では、DOMの測定結果に基づいて要素を変更する方法、useEffectの問題点とuseLayoutEffectによる解決法、ブラウザペインティングとは何か、SSRの役割について説明します。 この記事と同じ内容を扱ったYouTube動画も公開していますので、活字媒体よりも動画視聴を好まれる方はそちらをご覧ください。文字ではなく、アニメーションと音声で同じ概念を解説しています。 この記事は動画形式でも公開しています。 目次 useEffectの問題点とは? useLayoutEffectでチラつきを解決する 解決策が有効な理由:レンダリング、ペインティング、ブラウザ Next.jsやその他のSSRフレームワークでuseLayoutEffectを実行する ReactにおけるDOMアクセスについてもう少しお話ししましょう。"前回の記事 ReactにおけるRef:DOMへのアクセスから命令型
フロントエンドパフォーマンスのチェックリスト2021年版(PDF、Apple Pages、MS Word)-中編 目次# 前編 準備段階:計画と指標 パフォーマンスを重視する文化、Core Web Vitals、パフォーマンスのプロファイル、CrUX、Lighthouse、FID、TTI、CLS、端末。 現実的な目標の設定 パフォーマンスバジェット、パフォーマンス目標、RAILフレームワーク、170KB/30KBバジェット。 環境の定義 フレームワークの選択、パフォーマンスコストの基準設定、Webpack、依存関係、CDN、フロントエンドアーキテクチャ、CSR、SSR、CSR + SSR、静的レンダリング、プリレンダリング、PRPLパターン。 中編 アセットの最適化 Brotli、AVIF、WebP、レスポンシブ画像、AV1、アダプティブメディア読み込み、動画圧縮、Webフォント、Goog
クイックサマリー:2021年のWebパフォーマンスを高速化しましょう。 毎年恒例のフロントエンドパフォーマンスのチェックリスト(PDF、Apple Pages、MS Wordに対応)は、指標やツールからフロントエンドのテクニックに至るまで、現代のWebで高速なユーザ体験を生み出すために知る必要があるすべてを提供します。 このチェックリストは2016年から更新を続けてきました。 メールのニュースレターでも、フロントエンドに関する便利な情報をご確認いただけます。 このガイドは、LogRocketに勤務する筆者の友人の厚意によるサポートを受けています。 LogRocketは、フロントエンドパフォーマンスのモニタリング、セッションリプレイ、製品分析を組み合わせ、顧客体験の向上に貢献するサービスです。 また、DOM完了時間、サーバ初期応答時間(TTFB)、初回入力までの遅延時間(FID)、クライアン
写真: Jr Korpa on Unsplash Intro:2021年はこれまでCSSにとって盛りだくさんな一年でした。 CSSワーキンググループはCSSの仕様にさまざまな変更を加え、既存機能を改良するとともに多くの新機能を追加しました。 一部のブラウザには、すでに実験的に実装されているものもあります。 ブラウザベンダーは、新機能のサポートだけでなく、開発者を悩ませるブラウザの互換性に関する5大問題(#compat2021)の解決にも注力しています。 2021年もそろそろ終わりに近づいているので、今回は2022年に実装されそうなCSS機能を紹介したいと思います。 (※訳注:翻訳元の記事は2021年12月27日公開) 目次 はじめに 注目の新機能(クロスブラウザ対応) コンテナクエリ カスケードレイヤー カラー関数 新しいビューポート単位 :has()擬似クラス overscroll-be
WebAssemblyは今、転換点にあります。今後数年間で、コンテナ化からプラグインシステムやサーバレス・コンピューティング・プラットフォームに至るまで、IT業界全体でWebAssemblyの導入が増えると筆者は予想しています。この記事では、WebAssemblyとは何か、なぜそれが重要なテクノロジーであるのか、現在はどのような分野で利用されているかを説明します。また、WebAssemblyが大きな影響をもたらす可能性がある用途や、WebAssemblyの将来に関する予測も紹介します。 WebAssemblyとは何か WebAssembly(Wasm)とは、さまざまなプログラミング言語と多様な実行環境の間に位置する中間層です。30以上の異なるプログラミング言語で書かれたコードを.wasmファイルにコンパイルし、そのファイルをブラウザ、サーバ、あるいは自動車でも実行できます。 「WebAss
コードを書いて新たな発見をするほど楽しいことはありません。 ついにnpm init qwikの登場です。 どんなサイズでもリーンで高パフォーマンスなWebアプリを開発するための新たな方法をお試しください。 builder.ioのサイトも同じ技術で開発されており、PageSpeed Insightsで100点中100点を獲得しています。 QwikスターターCLIは、Qwikを試しに直接体験してみて、他のフレームワークとの違いを深く理解するためのシンプルなスターターです。 このCLIに含まれている例は次の4つで、近い将来に拡張される予定です。 starter:基本的なHello Worldプログラム。 starter-builder:基本的なHello Worldプログラムをbuilder.ioのQwik APIと統合したもの。 starter-partytown:基本的なHello Worl
全てのプログラマが理解すべき171語の文章 MITライセンス は、最も有名なオープンソースソフトウェアのライセンスです。この記事では、その内容を一行一行読んでいきます。 ライセンスを読む オープンソースソフトウェアを利用しているものの、これまでライセンス全文(原文:171語)を読む機会がなかった方は、大した量ではないので、今すぐ読んでください。あなたにとってライセンスが身近なものでないなら尚更です。理解できない箇所などがあれば、その部分は心に留めておき、明確にするようにしてください。これから背景や解説とともに、全文を分割して順番に紹介していきますが、大事なことは全容を頭に入れておくことです。 MITライセンス(MIT) Copyright (c) <年> <著作権保持者> 本ソフトウェアおよび関連文書ファイル(以下「ソフトウェア」)のコピーを入手する全ての人に対し、それらに関する無償のライ
Google PageSpeed InsightsはWebサイトの知覚的な待機時間を測定できるツールです。 Googleはこのスコアを検索ランキングのアルゴリズムに活用すると公表しているため、良いスコアが必要不可欠です。 私たちは、モバイルサイトのPageSpeed Insightsスコアを100点にするために何が必要かを探ってきました。 この取り組みを始めたとき、デスクトップサイトのスコアはすでに100点でした。 しかし、現代のeコマースの主流はモバイルコマースであり、モバイルサイトでは60点台半ばのスコアしか獲得できていませんでした。 このブログ記事では、モバイルサイトでも100点を取るための方法を共有します。 多くの企業がデスクトップサイトで100点を獲得していますが、モバイルサイトで100点を取れることは滅多にありません。 それでは始めましょう。 Builder.ioは標準的なNe
POSTDでは、DEV Communityで公開されているQwikシリーズ の翻訳記事を公開予定です。 翻訳記事の更新に合わせてこのページも更新されていきます。 シリーズ記事一覧 Qwikの紹介 – HTMLファーストのフレームワーク クロージャによる死(とQwikによる解決方法) HTMLを最初に、JavaScriptを最後に:Webを高速化する秘訣 Qwik:最適できめ細かい遅延読み込みを実現 モバイルサイトのGoogle PageSpeed Insightsスコアを100点にするには 既存のバンドラの手法は間違っている QwikとPartytownでJavaScriptを99%削減する方法 Qwikスターターの紹介 – 今すぐQwikを起動・実行してみよう
すべてのフレームワークはステートを保持する必要があります。フレームワークはテンプレートを実行することでステートを構築します。ほとんどのフレームワークは、このステートをリファレンスやクロージャとしてJavaScriptヒープに保持します。Qwikのユニークな点は、ステートが属性としてDOMに保持されることです(リファレンスもクロージャもシリアライズして送受信するのは不可能ですが、文字列であるDOM属性なら可能です。これがresumability(再開性)のカギとなります)。 DOMにステートを保持することには、以下のように多くのユニークなメリットがあります。 DOMはシリアライズの形式としてHTMLを使用します。ステートを文字列属性としてDOMに保持することで、アプリケーションをいつでもHTMLにシリアライズできます。HTMLを送信し、別のクライアントでDOMにデシリアライズすることが可能に
次のページ
このページを最初にブックマークしてみませんか?
『POSTD | ニジボックスが運営するエンジニアに向けたキュレーションメディア』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く