コーダーができるサイトの高速化10選
はじめに この記事では「コーダーが対応できるサイトの表示速度向上」についての具体的な手法を紹介していきます。 サイトの表示速度はユーザー体験を大きく左右し、サイトの種類によってはUI（サイトの見た目）より重要視される場合もあります。 2017年にはGoogleが「ページの読み込み速度によって離脱率が変わる」と発表しました。 ・1〜3秒の離脱率：32% ・1〜5秒の離脱率：90% ・1〜6秒の離脱率：106% ・1〜10秒の離脱率：123% 引用：https://www.thinkwithgoogle.com/ このようにサイトの表示速度はとても重要な指標になります。 サイトの表示速度向上には様々な手法が存在して、効果が出やすいものもあれば出にくいものもあり、実際に本番反映してみないと結果が分からないものもあります。また、難易度や実務上で許可を貰いやすいかなども考えなくてはいけません。 これ
Reactコンポーネントの基本原則と人気のUI/UXデザインライブラリの解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
Reactは単なるUIライブラリではなく、コンポーネントベースのアプリケーション開発フレームワークです。UI/UXデザインの基本原則に加え、再利用性や状態管理、データフローなどの概念も重要です。 Reactのコンポーネントベースのアーキテクチャを活用すると、UIと裏側のロジックを分離して管理しやすくなり、効率的なアプリケーションの開発が可能です。 今日は、Reactにおけるコンポーネントの基本原則の解説と、初心者に役立つReactコンポーネントライブラリの紹介を提供します。 コンポーネントの設計原則 UI（ユーザーインターフェース） UX（ユーザーエクスペリエンス） UIのデザインに役立つReact コンポーネントライブラリ React Material UI React-Bootstrap Fluent UI Chakra UI Semantic UI React Ant Design
フロントエンド開発の準備
開発の前に決めておくこと 後から変更するのが難しいこと、大きな手戻りが発生する可能性のあることをできる限り開発のはじめに決めておきます。 多言語対応の有無 URLに依存する可能性が高い多言語対応は、後から対応すると制限がかかったり破壊的な変更が必要になる場合があるので、はじめに決めておきます。 多言語対応する予定はなかったけど、後から必要になってしまった場合は仕方ないと思います。 OGPの必要性 動的ルーティングに対するOGPの必要性によってレンダリング方法の選定やCDN周りの選定が変わってきます。 SEOのニーズ こちらもOGP同様レンダリング方法に影響します。 OGPに関しては後からなんとかなることもありますが、SEOが重要なサイトの場合、そもそもSPAを選択しない方が適している可能性もあるので重要です。 対応ブラウザ/バージョン これを明確にしないと、一部のブラウザで使用できないCS
私が愛するフロントエンドのツールたち2023
自分がチームでフロントエンドの開発をするときの技術選定について書きます。 ログインしてユーザーごとに個別の情報を扱うことがメインのサービスを前提に書きます。 考え方 メンテナンス性の優れたものを選ぶ 制限が少ないものを選ぶ 余計なことに気を使わない 一気にいろんなことに挑戦しすぎない フレームワーク 正直に書くと最近は問答無用でNext.jsを選択しています。 慎重な性格なので、自分が責任を持って開発、運用するプロダクトであれば自分の経験値が高く、多くの課題をクリアできるNext.jsを選びます。 一部インフラの制約があるものの、ページごとにSSGやSSR、On-demand ISRなどができること、Reactの大きなエコシステムの恩恵を受けられることは非常に大きいです。 採用面でも現状Reactを扱える人は他のフレームワークを扱える人より多く感じます。 次点でCloudflare Wor
今すぐにNext.jsでフロントエンド開発 or Web制作を快適に始めたい方におすすめの簡単セットアップを紹介する
はじめに 株式会社LCLでフロントエンドエンジニアとして働いている「おとの」と申します。 今回は、今をときめくフロントエンドのフレームワーク「Next.js」を使って、個人もしくは複数人のチームで快適にフロントエンド開発を行いたい方にオススメのセットアップを紹介します。 本セットアップを行うメリットは以下の通りです。 （自動formatが有効になる等）開発速度が増す （StylelintやEslintの静的解析により）不具合の発生や潜在的なエラーを防ぎやすくなる コードの品質と一貫性を保つことができる Next.jsを使いこなせれば、フロントエンド開発だけに限らず、ランディングページ（LP）など静的なWebサイトの実装を行うWeb制作にも有用です。 私自身、Webサイト1ページのコーディングが求められる際もNext.jsを使っています。本セットアップも簡単に終わるので、今すぐ始めたい方はぜ
【フロントエンド】プロジェクト初期に手を抜かないで - Qiita
はじめに みなさんは新規サービスを立ち上げたことがありますか？ 技術選定から環境構築、諸々の初期設定。大変なことが多いですよね。 僕はこの4年で、新規サービスを3つ、新規の管理画面系を1つ立ち上げたのですが、このプロジェクトの初動で毎回のように後悔をしてます。 特に、フロントエンド領域というのはJavaScriptという自由な言語の特色を色濃く反映しているのか、非常に自由度が高く、どのようにも書けてしまいます。 そんな僕からのアドバイス。 プロジェクトの初期は最大限頑張ること。 最低限ではなく、最大限を心がけるといいと思います。 今回は、理由とともにどんなことを気をつければいいのかという話ができればと思います。 新規サービスの環境構築は最大限頑張った方がいい理由 1. 人は増える。あなたと他の人を一緒にしてはいけない。 環境構築をするのは1人でも必ずあなたではない誰かがプロジェクトにアサイ
Qwikの紹介 – HTMLファーストのフレームワーク | POSTD
Builder.ioは、強力なビジュアルエディタにより、開発者ではない人が超高速なサイトを開発・編集できるようにしています。 私たちのビジュアルエディタが優れている点の1つは、AngularからWeb Components、 そしてその間にあるすべてのフレームワークに至るまで、 さまざまなツールで同じサイトを生成できることです。 出力されるコードは速度が最適化されています。 私たちのツールで作成されたサイトは、手作業で作成されたサイトの大部分よりも高速です。 私たちはこれを心から誇りに思っています。 私たちの製品は、スピードがとても重要であるeコマースに焦点を当てています。 優れたTime to Interactiveの実現は困難 どんなにコードが最適化されていても、静的HTMLのみを提供していない限り、 eコマースサイトがPageSpeed Insightsで100点中100点のスコアを
フロントエンドエンジニアが知るべきキャッシュを理解する
キャッシュは、CPUのバスやネットワークなど様々な情報伝達経路において、ある領域から他の領域へ情報を転送する際、その転送遅延を極力隠蔽し転送効率を向上するために考案された記憶階層の実現手段である。(引用: フリー百科事典『ウィキペディア（Wikipedia）』) こんにちは、@kaa_a_zu です。私たちエンジニアは、「キャッシュ」というワードをよく口にしています。それはインフラの設計をしている時かもしれないし、表示されるコンテンツが変わらない時かもしれないし、パフォーマンスの改善をしている時かもしれません。普段何気なく使っている「キャッシュ」とは一体何なのでしょうか。この記事は、そんな「(Webフロントエンドを触るエンジニアが知るべき)キャッシュ」について、どんなものがあるのかがちょっと分かったという状態になることを目的に書いています。
業務ができる中級者になるためのJavaScript入門（DOM編）
✨無料公開中✨ 業務ができる中級者になるためのJavaScript入門の第2弾となります。何度学んでも今一つ理解できないDOMに関して、できるだけわかりやすく説明しています。 業務ができる中級者になるためのJavaScript入門（文法編） https://zenn.dev/books/568dd4d86562a1/edit ✨開発環境に役立ててください✨ 👾 やっぱりwebpackがわからない（エピソード1） https://zenn.dev/antez/articles/58307946cf4f3e 👾 やっぱりwebpackがわからない（エピソード2） https://zenn.dev/antez/articles/638382faa06bd7 👾 そもそもnpmからわからない https://zenn.dev/antez/articles/a9d9d12178b7b2 ✨Wo
Webフロントエンドパフォーマンスチューニング80選 - Qiita
こんにちは、ぬこすけです。 近年、Webフロントエンドではサイトのパフォーマンスの重要性が高まっています。 例えば、GoogleはCore Web Vitalというパフォーマンスに指標を検索結果のランキング要因に組み込みました。 また、近年の某企業が「パフォーマンスの改善に取り組んだ結果、セッション数〇％アップ、CVR〇％アップ...」などの事例は枚挙にいとまがないでしょう。 パフォーマンスチューニングするためには、定量的に計測してボトルネックを探すようなトップダウンなアプローチもあります。 しかしながら、時には千本ノック的にハウツーを片っ端から試していくボトムアップなアプローチも有効になることもあったり、日々のコーディングでパフォーマンスを意識したコードを書くことは大切でしょう。 この記事ではパフォーマンス最適化のハウツーを紹介します。 パフォーマンス改善の施策が思い浮かばない時やフロン
2021年現在Vueを選択すべきでないと思う理由
使ってわかる、Vueへの恨み、つらつらと（随時更新） コンポーネントのローカルスコープでコンポーネントを定義しようとするとJSXが必要 JSXが嫌でReactを使わないならSvelteがあり、SvelteはゼロオーバーヘッドでVueより速い React+JSXと違って、マークアップをJavaScriptの式として扱えないせいで、TypeScriptとの相性も悪い 後述するが、コンポーネントのプロパティの型をジェネリックにできないところなどは、これの例にあたる Vueの新しい機能が出て、新しい構文を必要とするたびにIDEのプラグインの対応が必要になる JSXも構文拡張だが、JS関数呼び出しのシンタックスシュガーでしかないので、関数と同じだけの表現力（汎用性）を持ち、ReactのAPI拡張のためにいちいちJSXまで拡張する必要はない JSX無しだと、マークアップ内でアクセスしたいコンポーネント
フロントエンドのパフォーマンスチューニングを俯瞰する - 30歳からのプログラミング
去年からフロントエンドのパフォーマンスについて断続的に学んでいるが、自分の頭のなかにある知識はどれも断片的で、まとまりを欠いているような感覚があった。 知識と知識がつながっておらず、各施策が何のために行われるのかも、必ずしも自明ではなかった。何となく「パフォーマンスに効果がある」と言ってしまうが、それが何を指しているのかは実は曖昧だった。 このような状態では新しい知識を得ていくのが難しいというか、効率的に行えないように思えた。議論の背景が分からないし、文脈や問題意識を上手く掴めないから。何の話をしているのかよく分からない、という状態になりがち。書かれてあることの意味は分かっても論旨を掴めているわけではないから、自分のなかに定着しない。 そこで、現時点で自分が知っていることを整理して、自分なりに分類しておくことにした。 当たり前だが、どのテクニックがどの程度有効なのかは、状況によって違う。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
