フロントエンドの移り変わりは早すぎるのか
インターネットでは毎日のように言われることですが、私はそこまでではないと考えています。 ネットでよくそう言われる理由として考えられるものと、それを踏まえてどう向き合っていくとよさそうか、個人的な考えをまとめてみます。 なぜ言われるのか 言語が実質的にJavaScript一択 バックエンド、というかサーバサイドでは技術選定に「言語の選択」が入りますが、フロントエンドでは実質的にはJavaScriptにほぼ固定されます（TypeScriptも別言語ではないので、ここではJavaScriptに含めます） サーバサイドと比較して「技術の移り変わりが早すぎる」と評される場合、多くはその人の使用しているとある言語と比較されているように思われます。 実質的に言語が固定なので、比較するならすべてのサーバサイドの変化の総量と比較するのが妥当でしょう。 PHP + Python + Ruby + go + J
Web フロントエンドの推しディレクトリ構成と Next.js App Router なコードベース | Offers Tech Blog
Offers を運営している株式会社 overflow の あほむ でございます。暖冬と言われつつもすっかり寒い季節ですね。おかげさまで割と走っているほうの師です。（師走） n 年ぶり n 回目の Web フロントエンド 最後にメイン開発者の立場でコードをスクラッチしたのいつだったっけ？と遡ると 2018年ごろのブログ記事 がでてきました💀 実際には 2017 年から 2018 年にかけての作品ですかね。当時の構想から読み取れる重厚かつ自己表現の感に内心苦笑いしつつ久々の新規建立です。 今回はディレクトリ構造の面から紹介していきます。 推しディレクトリの先達たち 推しディレクトリという言葉に乗っかってみたものの、ゴメンそこまでの熱感は持っていないかもしれない🥺 とはいえ先達の記事もご紹介しておきます。 今回の前提 本稿において、これらの前提に依存した論はほとんど含まれない認識ですが一応
理想のフロントエンドテストをたずねて三千里 - カミナシ エンジニアブログ
こんにちは。カミナシにて業務委託としてフロントエンドを担当している田村(@junkboy0315)です。皆さんはフロントエンドのテスト、どのように取り組んでいますか？フロントのテストはなかなか難しいですよね。 バックエンドのテストには、「入力、出力、永続化されたデータ」の3つを検証するという基本セオリーがあります。しかし、フロントエンドのテストは、その粒度や手法が多様で、とっつきにくいと感じる方も多いのではないでしょうか。 カミナシでもフロントエンドのテストは以前は十分とは言えない状態でしたが、これまで継続的に改善を重ねてきました。今回は、その変遷についてお話ししようと思います。 夜明け前 カミナシのコードベースでは、元々ユニットテストがある程度整備されていました。これらは主に複雑な計算処理を行い結果を返す関数などに対して実施されていました。 しかし、画面全体の機能を網羅する包括的なテスト
一休.com 宿泊管理システムのフロントエンド設計と改善の変遷 - Developers Blog - 一休.com Developers Blog
宿泊の管理システムについて 新しい管理システムについて 開発初期のフロントエンド設計 コンポーネントは4レイヤー方式を採用 UIのコンポーネントライブラリを採用 これ以上の設計、方針は決めなかった 初期ローンチ後の課題 改善した内容 1. コンポーネント設計の見直し ディレクトリ構成の変更 大きくなったコンポーネントの分割 Fragment Colocationを導入してコンポーネントのインターフェースとFragmentを整理 2. 業務処理（composables）の分割 3. 型安全に開発できるように厳しいlint設定に変更 4. 秩序を保てる開発体制、ドキュメントの整備 現在と今後 今後やりたいこと 改善を継続するためのポイント まとめ おわりに 宿泊プロダクト開発部の田中（id:kentana20）です。 このエントリーは一休.com Advent Calendar 2023の14
日経電子版での自作 SSR フレームワーク基盤について — HACK The Nikkei
こんにちは、Web チームの井手です。今日は私たち Web チームが作っている SSR フレームワーク(以下 FW)にについて紹介します。 記事を書くモチベーション 私たちのメインプロダクトである日経電子版においては k2 という自作 SSR 基盤を 2020 年から運用しています。SSR FW といえば多くの方が Next.js を想起すると思いますが、私たちは自作しています。一方で最近は Next.js の進化が凄まじく、自作 SSR 勢としても意識せざるを得なくなっています。もしかしたら「あぁ Next.js で作っておけばよかった」と思う時が来るかもしれません。特に k2 を保守する際には Next.js では実現できない機能を実現するために様々な手法や工夫を編み出していましたが、Next.js の進化に伴ってその必要性はだんだん減ってきているのを実感しています。そのためいつか N
Re: 僕らを縛る Node.js という呪いについて - あるいはなぜ TypeScript 以外が真っ当な選択肢にならなかったか
Re: 僕らを縛る Node.js という呪いについて - あるいはなぜ TypeScript 以外が真っ当な選択肢にならなかったか https://d.potato4d.me/entry/20220405-nodejs/ へのアンサーソング。 プログラミング言語としての JavaScript の話をする。 2010年頃、Python 2 でプログラミングを学習した自分にとっては Node.js + CoffeeScript が Better Python だった。 CoffeeScript は当時の JS(ES3~5) に足りない機能を補ってくれて、Python と同じく空白制御のオフサイドルールなのが気に入った。見た目が少しだけ Ruby っぽいので当時全盛だった Rails の人間に訴求するにも有利だった。 Node.js のモジュールシステムである Commonjs は Pytho
Webフロントエンドにおける網羅的テストパターンガイド
こんにちは、テストが好きなsilverbirderと申します。Webフロントエンドのテストは実施していますか？ユニットテストやビジュアルリグレッションテストは広く知られていると思います。しかし、パフォーマンステストのためのテストコードはありますか？また、カオスエンジニアリングテストやアクセシビリティテストはありますか？ 今回、私はWebフロントエンドにおける網羅的なテストパターンを調査し、その結果をここで紹介したいと思います。これらを理解することで、読者の皆さんが適切なテスト戦略を策定する際の参考になれば幸いです。 前提 今回、テスト対象として取り上げる題材は、TodoMVCというTODOアプリです。フレームワークとしてReactを使用しますが、紹介するテストパターンはフレームワークに依存しないものです。ただし、使用するライブラリはReactに関連しているため、その点についてはご了承くださ
Modern Web Development on the JAMstack を読んでまとめた - console.lealog();
https://www.netlify.com/pdf/oreilly-modern-web-development-on-the-jamstack.pdf Netlify社が2019年に公開した本？PDFです。 せっかくJamstackの会社に入ったので、読んでおかないといけない気がして。 あとJamstackは人によって解釈が違ったりするとし、Jamstackの真髄について知っておきたいですよね？と思い。 ただこれなんと127ページもあるんですよね〜。 全編もちろん英語なので、読むのも中々に大変ですよね〜。 てなわけで、ざっくり訳してまとめまておきました。（それでも長いけど） はじめに ここ最近のWebの進化はすさまじい ブラウザもJavaScriptもパワフルになった その分ユーザーの要求も増える やることが増えると処理は遅くなる 遅いページは見向きもされないモバイル当たり前の世界だ
Web Test Runner: Modern Web
Web Test Runner Test runner for web applications. 👉 Headless browsers with Puppeteer, Playwright, Selenium or WebdriverIO. 🚧 Reports logs, 404s, and errors from the browser. 🔍 Debug opens a real browser window with devtools. 📦 Mock es modules using Import Maps. 🔧 Exposes browser properties like viewport size and dark mode. ⏱ Runs tests in parallel and isolation. 👀 Interactive wa
500点出す！ - ゆーすけべー日記
「Web Speed Hackathon 2022」という「非常に重たいWebアプリをチューニングして、いかに高速にするかを競う競技」があります。 リモート参加で11月1日から27日まで開催されています。 ここで言う「高速」とはCore Web Vitalsのスコアが高いことを言い、Lighthouseのスコアをベースにした500点満点の争いです。 ISUCONのフロントエンド版ですね。 以前にも同じ課題で「学生向け」と「社内（サイバーエージェント）向け」が行われたらしく、まだ500点を出した人はいません。 そこで僕は「満点を出したい」と思い、初日から、いやむしろフライングしていたからその前から頑張ってきました。 そして、先日（17日）、ついに500点満点を出しました！ たぶん、レギュレーションはクリアしている、はずです（もし違反してたらすいません…）。 自動で行われる「Visual Re
useSignal() is the Future of Web Frameworks
The key difference between Signals and State is that Signals return a getter and a setter, whereas non-reactive systems return a value (and a setter). Note: some reactive systems return a getter/setter together, and some as two separate references, but the idea is the same. The issue is that the word State conflates two separate concepts. StateReference: The state-reference is a reference to the s
マイクロフロントエンドが我々にもたらすうまみとつらみ
はじめに 株式会社マクアケでエンジニアをしている @tokutoku3 です。 僕が携わっているMakuakeという応援購入サービスを支える管理画面では、１年半ほど前からマイクロフロントエンドというアーキテクチャを取り入れた開発・運用にトライしています。 本記事では、その経験を通して感じたことを紹介できればと思います。 対象読者 マイクロフロントエンドに興味がある 試してみたいが、どんな観点があるかわからない 他サービスでの事例を参考にしたい 書いていること マイクロフロントエンドアーキテクチャを導入したサービス開発で実際に試していることや、感じているメリット/デメリットの話 書いていないこと 具体的な実装サンプル 実装に踏み込んだ話は別記事にしようと思っています マイクロフロントエンドとは？ 概念自体初見の方は、以下の記事を読むと雰囲気が掴めるでしょう。 ざっくり表現すると、マイクロサー
ゼロランタイムのミニマルな静的サイトジェネレーター『dodai』の開発と JSX First な世界観について
ゼロランタイムのミニマルな静的サイトジェネレーター『dodai』の開発と JSX First な世界観について2023/01/27 本記事では来たる2/3のKyoto.js #18に備え、年末年始に npm パッケージとして公開した『@potato4d/dodai』という静的サイトジェネレーター(以下SSG)について紹介します。なお、開発にあたって本ブログも @nuxt/content からこの dodai へと移行しています。移行作業の所要時間は 30 分程度でした。 @potato4d/dodai について dodai は 1~5 つ程度の固定ページと、Nつの動的なページを持つ Web サイトの構築を想定した静的サイトジェネレーターです。 元々は私が複数の Web サイトの管理で使っていた Node.js 用の Script 群をパッケージとしてまとめたものになります。 技術的には複数
UIT Survey 2022 実施レポート
はじめに こんにちは。フロントエンド開発センター(UIT) Front-end Dev. 9チームの鴻巣です。普段はLINEスキマニおよびLINE Creators Marketのフロントエンド開発を担当しています。 UITでは社内のフロントエンドエンジニアのトレンドや周辺ツールの利用状況を調査するため、毎年社内に向けてアンケート「UIT Survey」を実施しています。Ashley Nolanさんが実施しているFront-end Tooling Surveyをベースに2018年からはじまり、今回で5回目の実施となりました。11月に実施した2022年のアンケート結果を紹介します。 概要 ・対象: 海外拠点を含むLINEのフロントエンドエンジニア（回答者は日本、韓国、ベトナム、タイの組織に所属） ・7割程度の回答者が日本を拠点とするエンジニア ・質問および回答の言語: 英語 ・回答期間: 2
Qwik(City)を試してみた感想 - console.lealog();
もとい、Svelte(Kit)なプロジェクトを、Qwik(City)で書き直してみての学び。 待望のやつではあるが、端切れの悪いタイトルなのは、移行途中でどうしようもなくハマってしまい、採用を見送ることにしたから・・😇 そういうわけなので、使い込んでみたわけでもまったくないし、最高！とか微妙・・・とかそういう判断というよか、ただの感想文って感じ。 QwikCityありき `npm create qwik`のスターターが、そもそもQwik単体ではなく、QwikCityがセットになってた。 今回はSSG/SPA用途だったので、できればQwikだけ使えればいいかなーと思ってたけどそんな選択肢はなかった。こういうメタフレームワークはSSRが前提になってたりすることが多くて、SSRなコンテキストを回避するコードを書きたくないし、挙動としても囚われたくなかったのに・・。 あとはコードベースもType
Building data-centric apps with a reactive relational database
Building apps is too hard. Even skilled programmers who don’t specialize in app development struggle to build simple interactive tools. We think that a lot of what makes app development hard is managing state: reacting and propagating changes as the user takes actions. We’re exploring a new way to manage data in apps by storing all app state—including the state of the UI—in a single reactive datab
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Upcoming Pricing & Billing Changes | CodeSandbox
Why useEffect May Not Be the Best Abstraction
Redirecting to: /vanilla/islands-architecture
2022年に起きたフロントエンドの変化
