将来、当時（2026年当初）のWeb界隈ってこんな感じだったよな、というのを振り返られるよう残しておく備忘録です。あくまで一当事者が感じた主観的なことを綴っています（客観的なことは残りやすいと思うのであえて主観的なことを）。それってつまり私の感想です。 JSフレームワーク戦争はReactの勝利 React vs Vue.jsのJSフレームワーク戦争はReactの勝利に終わった。（Reactはフレームワークではなくライブラリと自称しているけども。） これからReactとVueどちらを勉強したらいいですか、と聞かれたら事情がなければReactを先に学びなさいと答える。Reactを使った案件も多いし、フロントエンドエンジニアとしても武器になる。 プロダクトとしてもReactを採用する方が扱える人や知見も集まるのでReactを採用した方が有利で、その結果としてエンジニアもReactを選択するので正

Vite+ は Vite, Vitest, Oxlint, Oxfmt, Rolldown, tsdown といった人気のツールを統合し、開発, テスト, ビルド, リント, フォーマットなどのフロントエンド開発に必要な機能を1つのツールチェインで提供する新しいフロントエンドツールチェインです。この記事では実際に Vite+ をインストールして、プロジェクトのセットアップから開発、テスト、ビルドまでの一連の流れを試してみました。 近年の Web 開発のプロセスはますます複雑化しています。フロントエンドの構築のためには、モジュールバンドラー, トランスパイラー, リンター, テストランナーなど、多くのツールが必要になりますが、設定ファイルも複雑になりがちです。Webpack の設定のために専門の職人が必要になるという話もよく聞きましたね。現代でも .eslintrc, .prettierrc

htmxは、HTMLの属性を追加するだけで、インクリメンタル検索やインライン編集をはじめとするさまざまな動的なUI（User Interface）を実現できるJavaScriptライブラリです。SPA（Single Page Application）フレームワークのような大がかりなビルド環境を用意することなく、すでにあるサーバーサイドアプリケーションに段階的に導入できる点も大きな魅力です。 本記事では、htmxの基本的なしくみや使用方法を紹介したのち、架空のタスク管理アプリケーションを題材に、htmxで実現できるさまざまなインタラクションを紹介します。 htmxの概要 HTMLを拡張するアプローチ htmxの基本的なアイデアは、HTMLの属性を使ってサーバーとの通信およびDOM更新を宣言的に記述するというものです。 たとえば、ボタンがクリックされたらサーバーからデータを取得し、画面の一部を

こんにちは、よしこです。 株式会社ナレッジワーク というスタートアップで、2020年4月の創業時から一人目のフロントエンドエンジニアをしています。 初期に考えて組み上げたスタックで1年半ほど開発・運用してみて、なかなか快適に日々開発ができているので 新規開発のプロダクト立ち上げ時にどのようにフロントエンドを構築したのか？ 立ち上げから1年以上開発・運用を続けてきた今、それらの選択はどうだったのか？ を記事にして振り返り、公開したいなと思いました。 （プロダクトの内容はステルスで進めていてあまり対外的な発信ができないので、かわりに技術的なところはどんどんオープンにしていきたいなという気持ちがあります） いろいろな項目ごとに振り返りたいので、この記事は各項目を横断するindexとして項目ごとの概要を簡単に説明し、深堀りは項目ごとに追って詳細な記事を書いていく予定です！ 前提 プロダクトとしての

フロントエンドはライブラリの更新頻度が高い次に、ライブラリの更新です。特にフロントエンドは、ライブラリの更新頻度が早いです。私が思ってるぐらいだからやはり早いです。「私が思っているぐらいだから」というか、私は常に早いなと思いながら、別に遅くなった試しがないと思っているので、基本的にずっと早いまま来ちゃったな、というところです。 何かしら新しくなって何かしら壊れる。これがフロントエンドだと僕はずっと思っています。ちょっと脇道に逸れますが、昔はそれもひっくるめてFront-end fatigueや、JavaScript fatigue。“JavaScriptやフロントエンドの疲弊”と呼ばれていましたが、その疲弊と言われていたのが3年、4年ぐらい前で、何か解決するのかなと思ったら、疲弊したずっとそのままでいくのがこのやり方で、自分もフロントエンドエンジニアながら「フロントエンドエンジニアはよく着

ここ1,2年で、Tailwind CSSを使用する人が増えてきました。Tailwind CSSはユーティリティファーストのフレームワークで、いくつかのclassを組み合わせることでUIコンポーネントやレイアウトを簡単に実装できます。 Webデベロッパーによる、Tailwind CSSが私には合わなかった理由を紹介します。 Why Tailwind Isn't for Me by Jared White Tailwind CSSについて詳しく知りたい人は、以前の記事をご覧ください。 Tailwind CSSの便利な使い方、レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得

ウェブサイトを閲覧していると「画像の読み込みが遅い」という場面に遭遇したことがある人は多いはず。画像はウェブサイトのパフォーマンスを左右する要素のひとつであり、ウェブ開発において取り扱いに注意すべきものです。そんな画像をウェブサイトで扱う際の最適化方法について、GoogleのエンジニアであるMalte Ubl氏が解説しています。 Maximally optimizing image loading for the web in 2021 https://www.industrialempathy.com/posts/image-optimizations/ ◆img要素にwidthとheightを指定する アスペクト比を維持したまま画像サイズを変更するには、「style」要素に「max-width: 100%」や「height: auto」と指定しておく手法がよく用いられます。この手法に加

おはようございます、なのくろです。年の瀬ですね。 この記事は ABEJA Advent Calendar 2020 の最終日です。 追記：おかげさまで Qiita LGTM賞 を受賞いたしました、ありがとうございます！ 私は2020年01月にABEJAへ入社しました。チームではフロントエンド開発全般を任されています。 参入してちょうど１年が経過しましたので、今年取り組んだことをまとめました。 「フロントエンドを100倍速く」というタイトルは誇張気味なのですが、難しいことはせず、基本的なパフォーマンス改善を素直に実践したという話を書きます。 本稿では事例とやったことを紹介するのみですが、何かしらの知見や改善のきっかけに役立てば幸いです。 サービスについて 話をする前に、どんなサービスを開発しているかについて少しだけ触れます。 ABEJA社では「Insight for Retail」という、小

Rails の問題は Rails のベストプラクティスがフロントエンドのベストプラクティスの邪魔になるどころか全く逆方向で相反してる点です。DHHの思想がフロントエンドと根本的に逆行してる。そういう人が作るフレームワークなのでwebpackerの抽象化を根本的に間違ったりする。 — prev.js (@mizchi) December 1, 2020 昨日もリプライで少し書いたけど、DHH自体が直近のHeyの開発でも明確にJavaScriptというものを触れないようにすることを是としているような主張をしているので、DHH wayが色濃く反映される以上この状態はもう避けられない気がしている — potato4d / Takuma HANATANI (@potato4d) December 1, 2020 Railsがフロントエンドの最先端をゆく人々1から良く思われないのは事実として。 Vie

いつも再レンダリングを確認するときは Chrome の DevTool から Profiler 立ち上げて、'Highlight updates when components render.' のチェックを入れていたのですが、それやらなくても良いじゃんということに気づいたのでメモ。 import * as React from "react" import { StateContext } from "./app" export const Count = () => { const context = React.useContext(StateContext) const getColor = () => Math.floor(Math.random() * 255) const style = { color: `rgb(${getColor()},${getColor()},${

STORES でフロントエンド開発をしているushironokoです。今回は Vue でも SWR のようなしくみが使え、遠くない未来で標準的に使われることになりそうだ、という話を書きます。stale-while-revalidate とはどのようなものなのかについても簡単に解説していきます。 SWR(stale-while-revalidate) とは何か Vue や Nuxt 界隈の技術者はあまり縁がないため、そもそも SWR と称されるものが何者なのかご存知でない方も多いはずです。SWR は stale-while-revalidate と呼ばれるキャッシュ戦略に基づいたデータフェッチライブラリで、React のカスタムフックとして提供されています。つまり、元々 React 向けのライブラリとして作られたものです。 github.com stale-while-revalidate

この記事でわかること オンライン演劇はリアル演劇の代替ではなく、新しいエンタメの形。 奥行きやスケールのある世界観をつくることが課題。Blenderなどを駆使した3Dは解の一つ。 スマホやPCの画面に映るUI/UXの工夫によって、劇場以上の没入感など未来の劇場体験を実現できる。 7月23日から8月2日にかけて上演された劇団ノーミーツによるオンライン演劇「むこうのくに」。 オンラインでライブ配信される演劇で140分という長編、チケットは有料にも関わらず、7000人以上が観劇するなど話題を呼びました。 劇場でのリアルの演劇に制限がかかるなか、新しいエンタメの形として注目されるオンライン演劇。 劇団ノーミーツはその中でも最も注目を浴びながら最先端を走っている劇団です。 今作、前作や他のオンライン演劇以上に世界観や没入感といった点で大きな注目を集めました。 そんなオンライン演劇「むこうのくに」を支

Intro <img> や <picture> で srcset に複数の画像を指定することで、デバイスに応じて適切な解像度の画像を提供することができる。 この画像が、どういった条件で選択されるのかを頭では勝手に理解していたつもりだが、理解とは違う挙動があったため、仕様と実装を確認した。 その記録を記す。なお、先に言うがどのブラウザも 仕様に準拠して 実装されている。 srcset attribute まず以下のようなコードを考える。 <style> body { margin: 0; } </style> <body> <img id=hero_image src=320x240.png srcset=" 320x240.png 320w, 640x480.png 640w, 800x600.png 800w, 1024x768.png 1024w, 1280x960.png 1280w

注意 この記事は 2020 年 09 月 24 日現在、古い情報となりました。 eslint-plugin-prettier の利用は非推奨であると公式がアナウンスを出しています。 そのことについては Prettier と ESLint の組み合わせの公式推奨が変わった にてまとめましたので、こちらもご覧ください。 また eslint-plugin-prettier は公式推奨ではなくなりましたが、それは Editor などの外部環境の進化によるものでこのプラグイン自体に何か問題が起きたわけではありません。 そして eslint-plugin-prettier を利用した設定方法、特に eslint-plugin-prettier と eslint-config-prettier が何を解決していたかを知らないと、prettier-eslint が何をどう解決したかを理解できないはずなので

そうはっきり言ったほうが良かった。いや言わなくても伝わる現場は良かったんだけど、伝わらないままごく一部だけをコンポーネントに移行、それ以外はただ生 DOM API に変えて終わり（あるいは他は jQuery のまま）みたいな「モダン化」で済ます余地を与えたのは発信の失敗だった……という10年代の振り返り。 テンプレートエンジンはなぜ倒された方が（…といって悪ければ、変わったほうが）良いのかは端的に指摘できて、それは初回レンダリングしか考慮してないからだということになる。 Web の UI には状態変化がつきもの（になったのは実は最近の話）だが、テンプレートエンジンは1回目のレンダリングだけを担当し、変化した後の2回目以降の見え方は JavaScript が担当するというパラダイムを構成する。

New Network Provisioning System Leveraging Kubernetes and Cloud Native Open Source

みなさん、 lodash で消耗してますか？ 私は消耗しています。 なぜ lodash で消耗するかというと、とにかく思考停止でインストールされ、 node_modules 下で大量に重複します。サイズが大きいlodashが複数バンドルされてビルドされると、重篤なパフォーマンス上の問題を引き起こします。 lodash には実装上の問題もあり、異様に丁寧に、そして富豪的に作られており、その結果ビルドサイズが無駄に大きいです。丁寧に作られて入るのですが、現代のフロントエンド水準や一般的なポリフィルと噛み合っていません。というわけで、常々やめたいと思っています。 ちゃんとES201xを追ってる人からすると、ほとんどの lodash のメソッドは不要に見えるはずです。本エントリは、思考停止で lodash で実装しようとする人に、ちょっと考え直しては？ と投げつける用の記事になります。 現代におい

初心者向けにモダンJavaScriptの開発で必要になる CommonJSとECMAScriptでのモジュールの違い、babelとwebpackの知識に関してまとめておきます。 CommonJSとECMAScript JavaScriptの歴史的経緯にもなるのですが、 実はJavaScriptには サーバサイドのNodeJS(CommonJS)とブラウザのJavaScript(ECMAScript) の大まかに２つの言語仕様があります。1 元々のJavaScriptの欠点としてJavaScript内でモジュール化されたJavaScriptファイルを外部参照するという言語機能がなかったことが起因しています。 (かつてはHTMLのscriptタグでグローバル参照するというやり方が従来だった） モジュール機能が先に言語仕様として策定されたのがCommonJSでECMAScriptのモジュール機能

FRONTEND CONFERENCE FUKUOKA2019の登壇資料です