何故 jQuery ではなく React/Vue/Svelte が流行するのか？
こんにちは。 jQuery から商業プログラミングに入門したやまゆです。 なぜ jQuery だと古い、ダメだと言われるのでしょうか？いいじゃん。 $.ajax で簡単にデータ引っ張ってこれるし、 $("#btn").click(function () { alert("押した！"); }); は誰が見ても何が起こるか一瞬で分かる Simple さがあるじゃん。なんでわざわざ React/Vue/Svelte その他 jQuery ではないライブラリを使わなければならないんでしょうか？ 100 億回言われてきたことだと思いますが、私なりに振り返ってみます。 手続き型 UI と宣言型 UI は、手続き型です。 btn という ID の DOM 要素を取得して、それらの(一応複数になる可能性があります)要素に対して click イベントハンドラを登録します。 この処理が実行される前と後では、
フロントエンドのスピードに置いていかれたので、よく聞く技術を調べて分類してみた
元フルスタックエンジニア(死語)をやらせていただいていたものです。 JavaScript(TS)周りの進歩が凄く、あまりにもついていけていなかったので、気になったワードを片っ端から整理してみました。 それぞれに対する説明の正しくないものが含まれてしまっている可能性があります。 そんなところを見つけたときは優しく教えてくださると助かります。 各ツールの詳細というよりは、それぞれがどんな役割のものなのかを記載しています。 この記事が誰かの助けになれば幸いです。 調査・分類した言葉(技術)たち Hono Bun Deno Biome Vite Webpack Turbopack esbuild Babel SWC Prisma まず上記に上げたものが、どういった機能を持つものなのかもわかりませんでした。 それを整理すると以下になるようです。 JavaScript Runtime Deno Bun
HTML 全体の CSS を取得して Shadow DOM に適用する
以下のコードで HTML 全体の CSS を取得して Shadow DOM に適用することができます。 最近まで replaceSync() と adoptedStyleSheets() の存在を知らなかったのですが、 この 2つを使うと毎回 style タグを書き出すより効率的に処理できるらしい。 これまで Shadow DOM の中に link タグを書くような方法を使っていたのですが、link タグだと最適化がしにくい問題があります。 CSS はインライン化したほうが高速なので、その時にも同じように使える方法が欲しかったのですが、この方法でいけるとわかりました。 document.styleSheets も知らなかった…。 function getGlobalCSS() { let cssText = ""; for (const stylesheet of document.sty
フロントエンドテストにおける知見の宝庫を発見！「javascript-testing-best-practices」 - Qiita
フロントエンドテストにおける知見の宝庫を発見！「javascript-testing-best-practices」JavaScriptテストフロントエンド はじめに JavaScriptにおけるテストのベストプラクティスをまとめた「javascript-testing-best-practices」というGitHubレポジトリが大変勉強になったため、特に参考になった内容をまとめて共有したいと思います。 （補足）本レポジトリにはfrontendのみならずbackendのテストに関する情報もありますが、今回はfrontendに焦点を当てて共有します。そのため扱うSectionは以下の4つです。 Section 0: The Golden Rule Section 1: The Test Anatomy Section 3: Frontend Section 4: Measuring Test
書いた JavaScript をそのまま動かすフロントエンド開発の未来のために必要なもの
大きめのテーマです。もしかしたら「うちでは書いた JS をそのまま配信してるぜ〜」って人もいるかもしれないでが。 最近の Web フロントエンド開発では、書いた JavaScript をそのまま動かさないことが多い 最近のフロントエンド開発ではエンジニアが書いた JavaScript をそのままブラウザで動かすことはほとんどないかもしれません。 例として最近流行のフレームワークを考えてみましょう。Next.js や Remix、Nuxt.js など、いずれも内部的にトランスパイラやモジュールバンドラを使い、エンジニアが書いた JavaScript を別の形へと変換してからユーザーのブラウザで動かすような仕組みになっています。 一昔前だと Next.js のようなフレームワークが今ほど発展していなかったこともあり、webpack や Babel を直接使っていたと思いますが、それも同じです。
【フロントエンド】プロジェクト初期に手を抜かないで - Qiita
はじめに みなさんは新規サービスを立ち上げたことがありますか？ 技術選定から環境構築、諸々の初期設定。大変なことが多いですよね。 僕はこの4年で、新規サービスを3つ、新規の管理画面系を1つ立ち上げたのですが、このプロジェクトの初動で毎回のように後悔をしてます。 特に、フロントエンド領域というのはJavaScriptという自由な言語の特色を色濃く反映しているのか、非常に自由度が高く、どのようにも書けてしまいます。 そんな僕からのアドバイス。 プロジェクトの初期は最大限頑張ること。 最低限ではなく、最大限を心がけるといいと思います。 今回は、理由とともにどんなことを気をつければいいのかという話ができればと思います。 新規サービスの環境構築は最大限頑張った方がいい理由 1. 人は増える。あなたと他の人を一緒にしてはいけない。 環境構築をするのは1人でも必ずあなたではない誰かがプロジェクトにアサイ
どのWebフロントエンドフレームワークから始めるべきか？（考察編） - Qiita
※筆者による主観的な評価であること、2022年8月時点の評価であり今度変動する可能性が高いことについてご注意ください。 ※コミュニティ情報とはQiitaやStackOverflowなどに掲載されている非公式情報を指しています。 どのフレームワークも基本的な公式ガイド、公式チュートリアル、リファレンスは充実しています。初歩的なWebアプリを作る分には困ることは無いと思われます。 各フレームワークのドキュメントの特徴について補足説明します。 React: コミュニティ情報が非常に多いです。フレームワーク自体の需要が多い（後述）こともあり、コミュニティが最も活発です。Qiita、note、Zennのどの媒体でも最も多くの記事が掲載されています。そのためフレームワーク利用の研究が最も進んでおり、フレームワークに踏み込んだ内容であればあるほど優位にあると思われます。 Vue.js: 大きな特徴として
どのWebフロントエンドフレームワークから始めるべきか？（歴史編） - Qiita
昨今、ReactやVue.jsのような素晴らしいWebフロントエンドフレームワークのおかげで、モダンWebアプリを効率的に作ることができるようになりました。しかし2022年現在多くのフレームワークがあり、Webアプリ開発を始めたばかりの人にとってはどれから始めればいいのか選ぶのに迷ってしまうのではないでしょうか？ そのような方のために、この記事では、数あるフレームワークのうち、どれから始めればいいのか判断材料を提案したいと思います。判断材料としてフレームワークの歴史、特徴、現状を解説します。そして、それらを踏まえた上で、どのフレームワークから始めるべきか考察を説明します。 非常に長い記事になりますが、もし興味がありましたらご覧ください。 この記事の対象者 この記事はWebアプリ開発の勉強を初めたばかりで、ReactやVue.jsなどのフレームワークのどれを選ぼうか迷っている方を対象とします
【Bun】新しいJavaScriptランタイムについてふわっとまとめた
JavaScriptランタイムと言えばnode。 nodeの代替としてdenoがありますが、新たにbunというものを知ったのでふわっとまとめてみました。次のリンクは、Bunを知るきっかけとなったものです。 トップのコメントを一部抜粋(DeepL翻訳) 私が興奮していることのひとつは、bun install です。 Linuxでは、シンプルなNext.jsアプリの依存関係を、現在利用できる他のnpmクライアントよりも20倍ほど速くインストールします。 Bunとは 「速くて All in One な Javascript ランタイム」 内容を見ていく前に、Bunへの注目度がわかるグラフをご覧ください。 7月6日からほぼ垂直にStarを獲得しており、7月11日までの五日間で約20倍になっています。すごい。 ここからは私が気になった内容をピックアップして紹介していきます。 All in One B
IEが終了したので、webpackやbabelは不要？ - Qiita
IE終了により、webpackやbabelを使う必要がなくなるのか、フロントエンドからビルドステップを完全に消し去ることはできるのか。 そもそもなぜフロントエンドを「ビルド」していたのか そもそもなぜwebpackやbabelを使ってJavaScriptをバンドル（1ファイルにまとめる）していたのか 1. HTTP/1.1とモジュールシステムの相性の悪さ ブラウザにはES Moduleというモジュールシステムが導入されています。これはimport文で他のファイルを読み込むことができるシステムです。 HTTP/1.1については、ブラウザ側で同時接続数制限があります。これは、ファイルを多数読み込む必要があるES Modulesには不向きでした。 2. ブラウザのES Module対応率の低さ ES ModulesはIE非対応です。開発するWebサイトがIEをターゲットにしたい場合、ES Mod
Navigation API による「JS での画面遷移」と SPA の改善 | blog.jxck.io
Intro 従来の History API を改善する Navigation API の仕様策定と実装が進んでいる。 これは、 History API の使いにくかった部分を補うだけではなく、「JS で画面遷移をする」という現状のミッシングピースに取り組み、 SPA が抱える多くの問題だけでなく MPA すら改善する可能性がある。 この API の目的と仕様を解説しつつ、実装のメモを残す。 画面遷移と SPA の軌跡 Web は HTML の取得と描画を繰り返す、画面遷移(Navigation)を前提としたアーキテクチャ(のちに SPA からの逆算で MPA と呼ばれる)が基本であり、ブラウザなどの実装もそれに最適化されている。 一方「アプリケーション」の設計手法をそのまま Web に持ち込んだ SPA は、この Navigation によってもたらされる UX の低下を防ぐ部分がある一方
モダンフロント開発に必須の知識(ES2015~ES2023まとめ + 高階関数) - Qiita
はじめに モダンフロント開発に必須の知識であるES2015〜以降の記法と、実務でよく使用される高階関数について、自分の中で改めて復習、整理しておきたいと思います。 それぞれの項目に★~★★★の重要度も記述しています。 ★★★ => 必ず覚えておくべき ★★ => 覚えておくべきだが、使う場面が限られる ★ => 知識としては知っておいた方が良い 現在フロントエンドエンジニアの方やフロントエンジニアになりたての方、フロントエンドエンジニアを目指して勉強中の方に読んでいただけたら幸いです。 ES(ECMAScript)とは？ JavaScriptの標準仕様。 現在ブラウザで使われているJavaScriptは、ECMAScriptの仕様に則って開発されています。 JavaScriptは他の言語のようにversionなどが存在せず、「ECMAScriptのversion~~に対応しているJavaS
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ - ICS MEDIA
グーグルが開発した画像圧縮ツールSquoosh。フロント開発向けにNode.jsで扱う方法まとめ 『Squooshスクーシュ』というGoogleが開発した画像圧縮ウェブアプリがあります。ブラウザで変換結果を見ながら圧縮設定ができるので、画像圧縮の難しい知識を持たない方でも使いやすいことが特徴です。圧縮だけでなく、WebPなどの各種フォーマットへの変換・リサイズといったこともできる便利ツールです。 このSquooshをNode.jsで扱える『libSquoosh』が存在します。libSquooshは大量の画像を一括で圧縮、WebPへの変換、リサイズなどの処理をこれ1つで完結できるのがポイントです。昨今のウェブはページの読み込み時間が重視される傾向があります。画像のファイルサイズは読み込み時間に大きく影響するため、画像圧縮は重要なテクニックです。libSquooshをwebpack・Viteと
フロントエンド強化月間 - 開発する上で知っておくべき知見を共有しよう 結果発表🚀 - Qiita Blog
こんにちは、Qiita運営スタッフです。 4月26日（月）より開催中の記事投稿イベント フロントエンド強化月間 – 開発する上で知っておくべき知見を共有しよう へのたくさんのご参加、誠にありがとうございます！ 今回のイベントでは、合計169名の方にご参加いただき、69本もの記事が投稿されました！ ご投稿いただき誠にありがとうございます🎉 フロントエンドライブラリの紹介や、パフォーマンス向上テクニックなど、開発体験、ユーザー体験を向上させるような記事を多数ご投稿いただくことができました。 今回はご投稿記事の紹介とLGTM数ランキングを発表いたします！ Qiita運営ピックアップ記事たくさんのご投稿の中から、Qiita運営がおすすめ記事をピックアップしました！ まだ記事を確認できていない方はご参考にしてみてください！ ざっくり、フロントエンド開発のためのバックエンドサービスを整理する by
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
