@Hiroki__IT が目の前にやってきて私にIstioのこと教えてくれた。- Istio in Action の読書感想文 - じゃあ、おうちで学べる
はじめに マイクロサービスアーキテクチャの台頭により、サービスメッシュ技術は現代のクラウドネイティブ環境において外せない選択肢の一つとなっています。 その理由は明確です。マイクロサービスに求められる非機能要件の多くは類似しており、これをアプリケーション側で個別に実装すると、開発者やインフラエンジニアの負担が増大するからです。 ここで登場するのがサービスメッシュです。サービスメッシュの採用により、これらの非機能要件をインフラ層で一元管理することが可能となり、アプリケーション開発者とインフラエンジニアの責務を明確に分離できます。つまり、各エンジニアが自身の専門領域にフォーカスできるのです。これは単なる効率化ではなく、イノベーションを加速させるためサービス開発する上での労苦をなくします。 そして、サービスメッシュの世界で圧倒的な存在感を放っているのがIstioです。その包括的な機能と広範な採用で
javascripter です。ハローでは、初期メンバーとしてプロダクトのローンチ前からAutoReserve の開発に関わっています。 前回の記事に引き続き、筆者が社内で書いている技術ガイドラインについて紹介します。 はじめに ハローでは、高品質なコードを維持し、開発チームの技術レベル向上を図るため、チーム横断的に、有用な技術Tips、ベストプラクティス・コーディングガイドラインなど情報をNotion上に集約し、自由にエンジニアが閲覧・編集できるようになっています。 この取り組みの目的は以下の通りです： コード品質の向上と統一 開発チームメンバーの技術スキル向上 「どう」直すかでではなく「なぜ」そう修正すべきかまで理解してる人を増やす 効率的な開発プロセスの確立 前回の記事については、こちらを参照下さい。 Reactベストプラクティス: react-hooks/exhaustive-de
【Next.js】チーム開発までの環境整備手順
はじめに 初めまして、現在エンジニアをしながら起業をしてサービスを開発中の橋田至です。 私は今Swappyという同人誌のフリマサイトを開発中です。 初めは一人で開発をしていたのですが、開発すべき機能が多すぎることに気づき、共同開発者を募集しました。 その結果、現在約10名ほどのメンバーがアクティブに開発しています。 チーム開発の難しさ 一人で開発するなら自分だけがコードを読めて理解できたら良いです。 しかし、チーム開発となると統一されたコーディング規約やルールが必要になります。 今回は、個人開発レベルをチームで行う際の環境整備手順を記事にしました。 参考になれば幸いです。 技術スタック Next14(App Router) TypeScript Prisma tailwindcss daisy UI 他:MongoDB・Vercel・git,github・NextAuthなど pull_r
Next.js 13 vs Remix: An In-depth case studyLast updated on 29 Sep 2023 by Prateek Surana • - min read When it comes to building web applications, React has been at the forefront for a while now, and its adoption continues to grow. Among the most common approaches to building web applications with React, Next.js stands out as one of the most preferred options. Next.js has also been in the limel
メルカリ ハロ Webフロントエンドの開発スピードと品質両立の取り組み | メルカリエンジニアリング
こんにちは。メルカリのSoftware Engineerの@tanashoです。連載：Mercari Hallo, world! -メルカリ ハロ 開発の裏側-の6回目を担当させていただきます。 メルカリ ハロのWebアプリケーションは複数存在し、Webフロントエンドチームが横断的に開発をしています。本記事では、その前提を踏まえ、スピードと品質をどのように両立させて開発しているかを紹介します。 プロジェクトの概要とWebフロントエンドの担当領域 メルカリ ハロは「あたらしい出会いを繋ぎ、信頼と機会をひろげる」がミッションで、いますぐ働き手が欲しいパートナー (事業者) と、いますぐ働きたいクルー(働き手)を繋げるサービスです。クルーは自身のスキルや時間を活用して働くことができます。 メルカリ ハロは複数のアプリケーションが存在し、そのなかでWebフロントエンドが関わる領域として以下の3つが
App Router で1年間開発した知見と後悔
Next.js の App Router を 1 年間使用した経験をもとに僕なりの知見と後悔したことを共有しようと思います。 データフェッチング戦略（知見） App Router では RSC 内でのフェッチのため分離しづらいです。なおかつ、以前より柔軟にサーバー側の処理を書けるため、より多くのコードが集まり肥大化しやすいです。 したがって Pages Router と比較して以下のような違いがあります。 Pages Router(SSR) App Router(RSC によるフェッチ) この違いにより、App Router ではデータフェッチのロジックを自身で抽象化する必要性が高まっています。 ベンチャーでは Next.js にすべてのロジックをもたせて、スピード感のある開発をしたい場合があります。それがメインのプロダクトの場合、将来的には肥大化を解消するために API サーバーを実装す
Cloudflare Workers + Hono ワークショップ - ServerlessDays Tokyo 2023
Cloudflare Workers + Hono ワークショップ 資料はこちら => workshops.yusuke.run #serverlessdays Yusuke Wada 2023-09-24 ServerlessDays Tokyo 2023 workshops.yusuke.run アジェンダ ワークショップについて Workers イントロダクション Hono イントロダクション 基本編 プロキシ編 Web API編 フルスタック編 AI編 Honoをより深く知る その他 1. ワークショップについて 1.1 対象 対象者 Cloudflareでのアプリケーション作成に興味のある方 Honoを使ってみたい方 フロント、バックエンド問いません 前提条件 Wranglerが動く環境をつくっておく npx wrangler が動く JavaScriptに対する知識があるとよい
PR TIMESにおけるPlaywrightを用いたVisual Regression Test | PR TIMES 開発者ブログ
CypressからPlaywrightに移行しました こんにちは、フロントエンドエンジニアのやなぎ（ @apple_yagi ）です。 先日、フロントエンドのIntegration Testで使用されていたCypressをPlaywrightに移行したので、... 前提 PR TIMESは、React + Vite製のアプリケーション（主に企業様の管理画面）とNext.js製のアプリケーション（SEOが重要なページ）が存在します。 本エントリーで紹介するのは、React + Vite製のアプリケーションに対するVRTとなります。 VRTの実行環境 VRT（Playwright）は公式のDocker Imageを用いて、Docker上で実行するようにしています。 { "scripts": { "_docker": "docker run --rm --ipc=host -v $(pwd):/
新規サービス「FAANS」における、立ち上げからReact+TypeScriptのSPA開発を2年間運用した際に取り組んだ組織的・技術的な課題 - ZOZO TECH BLOG
こんにちは、ブランドソリューション開発本部フロントエンド部の田中です。 普段はFAANSのWebフロントエンドの開発を行なっています。 FAANSとは「Fashion Advisors are Neighbors」がサービス名の由来で、ショップスタッフの効率的な販売をサポートするショップスタッフ専用ツールです。 ショップスタッフ向けにコーデ投稿・成果確認などの機能が存在し、2022年8月に正式ローンチしました。詳しくは以下のプレスリリースをご覧ください。 corp.zozo.com 現在FAANSは立ち上げから2年経過し、Webフロントエンドの開発現場において様々な組織的・技術的課題がありました。 今回はその課題と取り組みについて紹介したいと思います。 目次 目次 前提 FAANSの組織の特徴 FAANSのWebのプロダクトの特徴 変化の多い環境下で遭遇し続ける課題 組織的・技術的課題とそ
今回使用したAnsible のサンプルはこちらです。 NIC周りの設定変更について、特筆すべき事項はないため飛ばします。 注意すべき点として、初期状態からIPアドレスの付け替えが生じるため、NICの構成が完了するためにはSSH先アドレスを変更しながら2度実施する必要があります。 この問題に関しては今後の課題とします。 Ayameのデプロイと設定 この前に事前準備としてAyameのイメージファイルを取得する必要があります。今回はKVM形式を使用します。IIJマルチプロダクトコントローラサービスをご利用の方で試す場合は提供OVAイメージをKVM形式に変換する。またはKVMで構築している部分をVMwareの手順に読み替えてください。 今回は、SEIL公式サイトで配布しているKVM形式のイメージにプロダクトキーをインストールする方法で説明します。 入手したイメージはfiles/var/lib/li
Next.js 製アプリケーションの CI の実行時間削減や安定性向上のために取り組んだこと - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！DOGO プロジェクトでソフトウェアエンジニアとして活動している @nissy_dev です。 DOGO プロジェクトでは、画面刷新を進めていく中で CI の実行時間が長く不安定になってしまい、開発生産性に大きな影響が出ていました。今回の記事では、CI の課題改善のために取り組んだことを紹介します。 目次 DOGO について CI を改善することになった背景 CI の改善のために取り組んだこと ビルド時に tsc を実行しない .next/cache を除いて、artifacts にアップデートする E2E テストをより多くの shard 数で分割する Playwright のブラウザのインストールをキャッシュする PR ではコード差分に関連するテストのみを実行する Hydration の挙動によってテストが flaky になっていた問題の解消 CI の改善の結果 今回取り組ま
PPRはアイランドアーキテクチャなのか
先日、Next.jsの新たなレンダリングモデルであるPartial Pre-Rendering(以降PPR)について記事を投稿しました。 この記事を書いてる時は意識してなかったのですが、感想でアイランドアーキテクチャに言及されるケースが散見されました。社内で上記記事の話題になった時も同様に、アイランドアーキテクチャとの違いについて問われました。 結論から言うと、PPRとアイランドアーキテクチャは全く異なるものです。本稿ではPPRとアイランドアーキテクチャの違いについて解説します。 PPR まずはPPRとアイランドアーキテクチャの概要を改めて整理しましょう。 PPRはページをstatic renderingとしつつ、部分的にdynamic renderingにすることが可能なレンダリングモデルです。具体的には、画面をbuild時(もしくはrevalidate後)に静的生成しつつ、リクエスト毎
【Istio⛵️】Istioによって抽象化されるEnvoyのHTTPSリクエスト処理の仕組み - 好きな技術を布教したい 😗
この記事から得られる知識 この記事を読むと、以下を "完全に理解" できます✌️ Istioのサイドカーメッシュを題材にしたEnvoyの設定の抽象化について 様々なサービスメッシュツール (特に、Istio、Consul、Cilium、など) でも流用できるEnvoyの知識について この記事から得られる知識 01. はじめに 02. 様々なリソースによるEnvoy設定の抽象化 サービスメッシュ外からのHTTPS マイクロサービス間のHTTPS サービスメッシュ外へのHTTPS 03. istio-proxyコンテナによるHTTPS処理 Istioコントロールプレーンの仕組み サービスメッシュ外からのHTTPS マイクロサービス間のHTTPS サービスメッシュ外へのHTTPS 04. EnvoyによるHTTPS処理 Envoyの設定の種類 フィルター フィルターの一覧 フィルターチェーンの仕
こんにちは。 めろたんです。 最近は咳としゃっくりが同時に出るようになってしまってとてもしんどいです。 はい。 今回は、弊社のサービスである、リーナー見積のフロントエンドをVueからReactに乗り換えた話について書いていこうと思います。 まず前提 リーナー見積では、フロントエンドは３つのサービスに分かれており 買い手向け画面 売り手向け画面 リーナー運営向け画面 という構成になっております。 サービスの構成図 各々Nuxt.jsで作られており、その全てでSEOや初期ページローディングのパフォーマンスをすごく求められるものではないため、CSRで行うように構成していました。 また作り始めた当時、会社やプロダクトがアーリーフェイズであり、そもそもプロダクトがこれで行けるかどうかというのもあったため、何を使って作るかというのは深く考えず、後に作り直すだろうというのを前提でNuxt.jsを選定して
Next.js vs. Remix - A Developer's Dilemma Feb 21, 2024 I am a Javascript and React enthusiast, and I absolutely love writing technical blogs. There's just something about the process of breaking down complex concepts and sharing my knowledge with others that really excites me. In my free time, I enjoy exploring my other passions, such as painting, gardening, cooking, and managing my food blog. The
2023/11/18(土)で開催されたフロントエンドカンファレンス沖縄 2023に関する、現時点での公開資料と X アカウントリンクをまとめました。 よろしければご活用ください。 はじめに 登壇者名は敬称略させていただいています。 スライドについては、ご本人がツイートで展開されていたり、スライドサービスにアップロードされているものを記載。 Discord の方だけで公開されている方は、勝手に公開しない方がよいかと思いましたので、記載しておりません。 X アカウントについては、資料に記載されていたり、資料公開のツイートで分かった方のみ記載。 リンクの間違い等ありましたらコメントいただけると助かります🙏 アーカイブ 本イベントは YouTube で配信されていて、アーカイブが残るようです。 タイムテーブル 10:10 [ゲストセッション]Figmaプロトタイプ入門〜インタラクションイメージの
サイバー攻撃に対する日本政府のパブリック・アトリビューション事例についてまとめてみた - piyolog
2017年以降、サイバー攻撃に関与した国家や国家を背景とするグループを名指したうえでその行為を明らかにする取り組みであるパブリック・アトリビューションを日本政府は行っています。ここではこれまでに公表された取り組み事例について概要をまとめます。 これまでの事例概要 日本政府は2017年以降2024年7月に至るまで7件のパブリック・アトリビューションを行っている。日本政府が行った7例の内訳は、中国5例、北朝鮮2例。 外務報道官談話、注意喚起、共同署名等、公表の形態は様々であり、また公表対象の表現についても意図的に使い分けているかは定かではないが異なっていることが多い。（「拠点とする」、「背景に持つ」、「背景とする」、「下部組織とされる」など。）発出した政府組織は外務省、警察庁、内閣サイバーセキュリティセンター、金融庁。 公表は日本独自の内容及びタイミングで行われた事例は1例のみで開始当初は関係
Synology製のルーターには操作しやすいGUI付きの管理システム「Synology Router Manager(SRM)」が搭載されており、SRM上から「DDNSのホスト名を取得」「VPNサーバーの作成」といった操作を実行してリモートデスクトップ環境を整えることができます。Synology製ルーター「WRX560」をGIGAZINE夏のプレゼント大放出企画の景品として提供してもらえたので、実際にVPNサーバーを作成してリモートデスクトップ環境を整備してみました。 VPN Plus Server - Synology ナレッジセンター https://kb.synology.com/ja-jp/SRM/help/VPNPlusServer/vpnplus_server_desc WRX560 | Synology Inc. https://www.synology.com/ja-jp/
最新のCursorを確認してください。 今現在ははCursor標準でClaude使えます。なので、この方法は使わなくて良いかもしれません。 を使うとできます。OpenRouterはopenaiと同じAPI仕様で様々なモデルを利用できるサービスです。 Cursorの設定項目です。 これを以下の様に謀ればOKです。 OpenAI API Key: <YOUR_OPENROUTER_API_KEY> Override OpenAl Base URL: https://openrouter.ai/api/v1 New Model Name: anthropic/claude-3-opus OpenRouterの方のAPI KeyはSign Up後にメニューのKeyから作成してください。クレジットも購入してください。 他のモデルのモデル名は https://openrouter.ai/docs#mo
情報処理推進機構（IPA）とJPCERTコーディネーションセンター（JPCERT/CC）は4月5日、NECプラットフォームズ（東京都千代田区）のWi-Fiルーター「Aterm」シリーズの59製品で脆弱（ぜいじゃく）性が判明したと公表した。対象となる製品を使用している場合、設定の変更や買い替えなどの必要があるとしている。 NECは、悪意のある第三者によって任意のコマンド実行や装置名などの装置情報が読み取られるなど、ユーザーの意図しない現象を引き起こす可能性があるとしている。 同社は対象製品として、WG1800HP4、WG1200HS3、WG1900HP2などを挙げており、記載のない機種については問題はないという。これらのモデルを使用している場合、Atermサポートデスクサイトに掲載の情報を参考に、管理者パスワードや暗号化キーの変更、設定の変更などの対処をする必要がある。
こんにちは。sumirenです。 イントロダクション 先日、Twitterで以下のポストが話題になっていました。 一部曖昧なところもありますが、推測と動作検証結果も交えて要約すると、以下のことを言っています。 VercelがホスティングしているWebサイトは、エッジでのサーバーサイド処理を行うことをやめた Next.jsに関して、VercelでPPR(Partial Prerendering)を利用した場合、サーバーサイド処理はNodeランタイムで行われる この記事では、このポストに絡めて、PPRとエッジに関する筆者なりの所感や解説を述べていきます。この記事の大部分はポエムですが、一部、技術的な事実についても述べるつもりです。そうした部分について誤りがあればご教示ください。 Vercelがエッジでのサーバーサイド処理を行うことをやめた件について エッジの効能 そもそもエッジに期待していたこ
Vue.js でファイルベースルーティングを実現する「Unplugin Vue Router」の紹介
Web アプリケーション開発において、ファイルベースルーティングはコードの可読性向上や開発効率化に大きく貢献します。本記事では、Vue.js アプリケーションでのファイルベースルーティングをシンプルかつ型安全に実現できる「Unplugin Vue Router」をご紹介します。Nuxt のような大規模なフレームワークは少し大げさだと感じる場合や、Vue Router をより効率的に活用したい方はぜひ参考にしてください。 Unplugin Vue Router 概要 ファイルベースルーティングによってファイルのパスと URL を直接対応させることで、コードの構造を直感的に理解できます。 TypeScript との連携によりコンパイル時にルーティングのミスを検出でき、より安全な開発が可能になります。 Nuxt のようなフルスタックフレームワークと比較して軽量であり、小規模なプロジェクトに最適で
動機 結構 lint 系がアップデートされていたり、以前は必要だったものがいらなくなっていたりしていて自分が作った以前のテンプレートだとちょっと不要な設定などが増えていたので、 これを機に調査しながら設定を見直そうかなと。 今回作ったもの この記事で設定をした Next.js のテンプレートはこちらに公開してあります。 前提 node: v18.17.1 next.js: 13 系 React: 18 系 Next.js まずは Next.js のインストールから。どんなプロジェクトであれ TypeScript で開発をしたいから --ts をつけます。 あとは設問に答えていけば基本的なプロジェクトが作られます。基本的に全て Enter で問題ないです。 ちなみに Would you like to customize the default import alias? はデフォルトで N
Next.js App Router
Connecting dots Rails Girls and RubyKaigi (Red Dot Ruby Conference 2024)
Next.js App Router / React Server Components(RSC)を紐解いてみた - estie inside blog
デザインエンジニアの表(@HirokiOmote)です。 Next.jsでApp Routerがリリースされて、1年が過ぎました。 弊社では、@hiroppyさんを技術顧問に迎え、Frontendを中心とした長期的な技術選定にご協力いただきました。 本日は、そこで得た学びをご紹介したいと思います。 App Routerについて 2023年5月にNext.js 13.4がstableとしてリリースされ、App Routerが登場しました。 ツリー構造でのファイル配置が基本となりました。 ディレクトリ構成とルーティング page単位・feature(機能)ごとに切り分けたディレクトリ構成が可能になったため、より直感的で再利用性の高い構造が実現しました。 // App Router . ├── dashboard │ ├── components │ │ ├── button.tsx │ │ └
#metaをのぞいてみると、より詳細な記録が残っている。だいたい1年おきに当時興味のあったフレームワークを学ぶために作り直していたが、ここ2, 3年は使い慣れたRubyでフルスクラッチしたシステムで落ち着いていた。だけど、ここにきて今回興味のあったNext.jsを学ぶために作り直すことになった。 途中でブログサービスなどに投稿していた記事をインポートしたり、ドメインを移したり、リポジトリを分割したり統合したりしながら、今のブログに至る。 ブログというのはWebフロントエンドのフレームワークを学ぶためのお題として実益も兼ねていて気に入っていて、今後も何度も作り替えるんだろうなと思っている。 ReactやNext.jsは以前から触っていたためだいたい理解していたが、Next.js v13.4で導入されたApp Routerであったり、最近のReactについてキャッチアップできていなかったことが
I've hired a lot of developers over the years. More than a few of them have come in with a strong belief that our code needed heavy refactoring. But here's the thing: in almost every case, their newly refactored code was found by the other developers to be harder to understand and maintain. It also was generally slower and buggier too. Now, don't get me wrong. Refactoring isn't inherently bad. It'
PWA Night vol.59 ～フロントエンド設計の振り返り〜 (2024.01.17) https://pwanight.connpass.com/event/306410/ で使用したスライドです。本編 20 分。 ===== ▼ 元データで参考リンクとして張っていた URL たち …
技術ブログをNuxt + Netlify + Contentfulから、はてなブログ for DevBlogに移行しました - もふもふ技術部
こんにちは。出口です。 タイトルにある通り、技術ブログをはてなブログに移行しました。 この記事では、なぜ移行することになったのか、どうやって移行したのか、移行で苦労したところなどをまとめておきたいと思います。 もし脱セルフホストブログ、脱Contentfulや、はてなブログへの移行をお考えであれば参考になるのではないかと思います。 なぜ移行したのか Nuxt 3への移行が大変すぎる Contentfulへの不満が募ってきた 当初の計画 改めて移行を考える 移行について 記事移行 インポート機能を使ってWXRを取り込む場合 AtomPubを使ったパターンの場合 サブディレクトリオプション Netfilyのリバースプロキシ設定 robots.txtを設置 NetlifyのPrerenderingオプション設定 検証ツールで1つだけ検証失敗する まとめ なぜ移行したのか まずそもそもなぜ移行した
How Google handles JavaScript throughout the indexing process – Vercel
Understanding how search engines crawl, render, and index web pages is crucial for optimizing sites for search engines. Over the years, as search engines like Google change their processes, it’s tough to keep track of what works and doesn’t—especially with client-side JavaScript. We’ve noticed that a number of old beliefs have stuck around and kept the community unsure about best practices for app
特定の時間になったらコンテンツをページに出したい、ということがあると思う。漫画サービスなら「ゴールデンウィーク限定！全話無料キャンペーン！」みたいなのとか。 普段の業務ではこうしたことを実現するために、時限式コンポーネントや、ScheduledComponent などと呼ばれるものを作ってる *1。 // components/ScheduledComponent.tsx export function ScheduledComponent({showAt, children}: { showAt: Date; children: React.ReactNode; }) { if (new Date() < showAt) { return null; } else { return children; } } これを Next.js Pages Router などから、以下のようにして使
ジャンプTOON Web アプリケーションの全体像〜採用技術と開発方針〜 | CyberAgent Developers Blog
目次 はじめに Next.js × GraphQL のサーバー間通信 Fastly でのコンテンツ配信とキャッシュ方針 vanilla-extract の採用とスタイリングシステム Chromatic による UI テスト / UI レビュー Datadog でのサービスモニタリング ジャンプTOON の CI/CD リリース戦略とブランチ運用の工夫 おわりに はじめに ジャンプTOON の Web 版（以降、ジャンプTOON Web）の開発を担当している2024年度新卒入社の鏑木 俊樹（かぶらき としき） @tosssssy_ です。 5 月にサービスを開始した「ジャンプTOON」は、オリジナル縦読みマンガ作品や人気作品のタテカラー版を連載する、ジャンプグループ発の新サービスです。 ジャンプTOON Web では Next.js App Router （v14.2）を採用して開発をしてお
23新卒エンジニアがチーム開発研修で学んだこと - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！ 2023年新卒エンジニアの伴野・谷・和渕です。 サイボウズでは、2023年エンジニア新人研修の集大成として、チームに分かれてソフトウェア開発を行う実践演習が行われました。この記事では、各チームがどんな成果物を作成したのかを、チームごとにご紹介したいと思います。 エンジニア新人研修全体については以下の記事で詳しく紹介されています。ぜひそちらもご覧ください。 blog.cybozu.io 概要 実践演習では3チーム（「チーム gogo!」・「明日から」・「TEMBIN」）に分かれ、それぞれ一つのソフトウェアを2週間で開発しました。「サイボウズ流チーム開発を新メンバーだけで実践できた」「未知見の課題に対してどう行動すればよいか考えるきっかけになった」というコンセプトのもと、自由な発想で取り組みました。 チーム gogo! チーム gogo! では、演習開始時に Mastodon や
Server Actions が Next.js 14 からStableに！古参フロントエンドが消失しないために知っておくこと
思い出します2年前・・・ VTeacher所属のSatokoです。 フロントエンドエンジニアとバックエンドエンジニアを兼任しています。 定番なテクノロジーと少しだけGeekなテクノロジーを組み合わせた選定が好みです🤤 Next.js Conf 、朝まで大忙しでしたね。 （ねむい・・・） Server Actions の一般的な誤解 まず最初に、SNSで話題になっている Server Actions に関する一般的な誤解についてです。 (1) 生のSQLが書かれているというアンチパターン？🤔 一部のサンプルコードでは、生のSQLを直書きしているところがあります。 しかし、以前のプレゼンテーションでも述べられているように、 React Server Component や Server Actions で、この書き方を推奨しているわけではありません。 あくまで「こんなこともできるようになっ
2024 年 5 月現在だと Next.js のドキュメントには明示的な記載がないが、「同時に実行可能な Server Action は常に１つだけ」という件について。 実は自分もこれをちゃんと認識しておらず、先日会社の先輩に教わって初めて知ったので、試したことなどを書き残しておく。 Next.js の場合、App Router (Router Reducer) によって、Server Action の実行が直列化 (キューイング) されるようになっている。 このキューイングの挙動を考慮すると、以下のような呼び出し方は危ういコードとなる。 "use client"; import { useState } from "react"; import { increment } from "./actions"; export default function Page() { const [
Next.js App Router TrainingIntroducing various basic patterns of app router with simplified code.
フロントエンドのLinterやCIを改善した話
この記事は 株式会社エス・エム・エス Advent Calendar 2023 の21日目の記事です。 介護事業者向けの経営支援サービス「カイポケ」のリニューアルプロジェクトでフロントエンド開発をしている @hush_in です。 今年の4月にエス・エム・エスに入社しました。 入社してからフロントエンドのLinterやCIを改善した話をします。 忙しい人向けまとめ ESLint の recommended 系 extends を追加 全般 eslint:recommended plugin:import/recommended TypeScript plugin:@typescript-eslint/recommended-type-checked plugin:@typescript-eslint/stylistic-type-checked plugin:import/typescri
こんにちは、ファインディ株式会社でフロントエンドのリードをしております 新福(@puku0x)です。 この記事では、IT/Webエンジニアの転職・求人サイト Findyのメッセージ画面の改善についてご紹介します。 メッセージ画面の課題 メッセージ画面の改善 Apollo Clientキャッシュの利用 読み込み画面の条件修正 ページ設計の最適化 まとめ メッセージ画面の課題 Findyのメッセージ画面は数年前にデザインを刷新しました。 現在では、3種類のメッセージを表示するようになっています。 通常のマッチングのメッセージ プレミアムスカウトのメッセージ Findyからのメッセージ 機能拡充される一方で「読み込みが多い」「画面遷移がサクサク動くようにして欲しい」との声をいただく機会が増えていきました。 実際に触ってみると確かに読み込み画面が頻繁に表示され、画面遷移に時間がかかっていることがわ
どのようにして Findy Team+フロントエンドチームは高速な開発をしているか 〜開発フロー編〜 - Findy Tech Blog
こんにちは。こんばんは。 開発生産性の可視化・分析をサポートする Findy Team+ のフロントエンド リードをしている @shoota です。 Findy Team+はエンジニア組織の開発生産性を可視化し、開発チームやエンジニアリングメンバーのパフォーマンスを最大化するための支援をしています。 そして（当然のことながら）Findy Team+ を作っている自分たちも、チームや個人でドッグフーディングをして、チームや自分自身の働き方やエンジニアリング組織の健康チェックをしています。 今回はそんな Findy Team+の開発チームのうち、フロントエンドチームがどのような開発環境・開発インフラで働いているかの概要をご紹介したいと思います。 フロントエンド技術スタックとCI高速化 技術スタック まずはじめにフロントエンドの技術スタックを簡単に紹介します。一般的なSPA構築の技術スタックを採
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reactベストプラクティス2: SWRを正しく使うには - Hello Tech
Next.js 13 vs Remix: An In-depth case study
置き換えるだけでもセキュリティ対策として効果あり！ 5～10年ぶりにWi-Fiルーターを買い替える人のための購入ガイド
SEIL/x86 Ayame とミニPCでソフトウェアルータ入門 | IIJ Engineers Blog
リーナー、Nuxt.jsからNext.jsに乗り換えたってよ - リーナー開発者ブログ
Next.js vs. Remix - A Developer's Dilemma
フロントエンドカンファレンス沖縄 2023 公開資料・Xアカウントリンクまとめ
無料でリモートデスクトップをVPNで使える環境をSynology製ルーターで作ってみた
OpenRouterでOpenAIと同インターフェイスにしたClaude3をCursorで使う
NEC「Aterm」シリーズ59製品に脆弱性 IPAなどが注意呼びかけ 設定変更や買い替えを
VercelがPPRをNodeランタイムにした件からWebフロントエンドとエッジの動向に迫る
Next.js のプロジェクトを開発しやすいようにするlintとformatterなどの設定
ブログをNext.jsで作り直した
Good Refactoring vs Bad Refactoring
控えめな App Router と持続可能な開発 - PWA Night vol.59
React Server Components で時限式コンポーネントを作る - mizdra's blog
Server Actions の同時実行制御と画面の状態更新
Next.js App Router Training
Findyのフロントエンドにおけるメッセージ画面のパフォーマンス改善 - Findy Tech Blog