こんにちは。ココナラテックエージェントの開発をしているエンジニアのみんです。 新技術が常に登場しているフロントエンドの開発で、時代の波に乗り、キャッチアップすることが我々エンジニアの使命です。 ココナラテックエージェントのフロントエンドは Next.js アプリケーションです。2023年の9月から、App Routerへの移行を始めています。 つい9月末に、ココナラテックエージェントの案件一覧ページをApp Routerに移行しました！ 案件一覧と検索を含め、案件まわりのキャッシュ再検証（revalidate）の実装に全身全霊を注いだ成果をシェアしたくて、この記事を書きました。 App Routerのキャッシュ種類 Next.jsは、レンダリングの効率を上げるために、オプション指定がない場合に全てのリクエスト結果をキャッシュする方針です。 公式ドキュメントによると、App Routerのキ
Rust の新しい HTTP サーバーのクレート Axum をフルに活用してサーバーサイドアプリケーション開発をしてみる - Don't Repeat Yourself
この記事は Rust Advent Calendar 25日目の記事です。Merry Christmas! 今年の Web バックエンド開発関連で一番大きかったなと思っているイベントに、Axum のリリースがあります。2021年の夏頃に tokio チームからリリースされた Web アプリケーション用のライブラリです。 基本的なデザインは actix-web 等とそこまで変わらないものの、マクロレスなのが大きな特徴かなと思います。tokio 上に直接載るアプリケーションになり、独自のランタイムをもたないため、tokio のバージョン管理に悩まされずに済むのも大きなメリットかも知れません。私はあまり重要ではないと思っていますが、明示的に #![forbid(unsafe_code)] をしているのでライブラリ内部に unsafe がないのも特徴かもしれません。 github.com 現在のん
EngineeringProductA framework for building Open Graph imagesWe recently set about creating a framework and service for automatically generating social sharing images for repositories and other resources on GitHub. You know that feeling when you make your latest hack project public, and you’re ready to share it with the world? And when you go to Twitter to post a link to your repository, you just s
Previous slideNext slideToggle fullscreenOpen presenter view Build and Publish 2023 @mizchi | Plaid, Inc. jsconf.jp 2023 今日もツールチェインに消耗してますか？ https://2022.stateofjs.com/en-US/libraries 今日のテーマ 今日話すこと 現代のビルドツールチェインの進化と目的 エコシステムに振り回されないようになろう！ 今日話さないこと 個別のツール/ライブラリの使い方 フロントエンドの話？ NO. 最近のサーバーサイドJSとバンドラは一体化している サイズ制限のある CDN Edge Worker も最適化が必要 About Me JSのビルドとは何か Transpile AltJS(TS,JSX)や CSS Modules の変換
Welcome to Wildebeest: the Fediverse on Cloudflare02/08/2023 This post is also available in 简体中文 and 繁體中文. The Fediverse has been a hot topic of discussion lately, with thousands, if not millions, of new users creating accounts on platforms like Mastodon to either move entirely to "the other side" or experiment and learn about this new social network. Today we're introducing Wildebeest, an open-so
【アジャイル系男子】Go Gin Server + OpenAPI Generator 爆速サイクル戦線で生き抜く ⚔⚔ - OPTiM TECH BLOG
アジャイル系男子の日常 Go Ginとは❔❔ 自動生成手順📚 1. ファイル構成 2.openapi/openapi.yml 3.生成コマンド 4.★うわぁ。できたぁ。★ Go言語に高階関数が見当たらない🔍 Go Generate との出会い 新解体実行手順 ~Go2まで耐え抜く編~ 解らないし高階関数ジェネレーターを適当に作っちゃおう(業務で作ったやつコピペ)🔨🔨 型変換も一行でやりたいよね。作っちゃお(業務で作ったやつコピペ)🔨🔨 1.ファイル構成 2. openapi/model.mustache 3.生成コマンドをもう一度 4. go generate 5.★うわぁ。できたぁ。2★ とりあえず適当なレスポンス返してみる。🌶 main.go go/api_api1.go 実行👼 確認👼👼 Gitで管理する際のテンプレート .gitignore .openapi-g
2021/03 末に APNIC から ASN と IPv4 /23、IPv6 /48 を個人として割り当てを受けました。 半年近くかかってしまいましたが、ようやく Internetable になったのでメモ程度ですが書き残しておきます。 1. データセンターを建設します 月日が経つのは早いもので、コンテナ用地を競売で取得してから既に 5 年ほど経ちました。 一般のご家庭でサーバーやネットワーク機器を稼働させると騒音やら夏場の室温やら床の耐荷重が気になるので、 若いうち ( 家庭内稟議とかいう面倒な制度が導入される前) にデータセンターを 1 つ建てておくといいと思います。 この記事を読んでいる方には今更かと思いますが、過去の投稿や記事もご参考にどうぞ。 ブログ記事 https://www.syuheiuda.com/?cat=40Think IT の記事 https://thinkit.
「一戸建て」にピッタリな【楽天ひかり対応おすすめWi-Fiルーター】各メーカーベスト！ - 「Kish」i-smart life!
楽天ひかり対応Wi-Fiルーター【勝手に各メーカーベスト選出！】 楽天ひかりはIPv6(クロスパス)対応のルーターが必要 一戸建てにピッタリなルーターを選ぶ！ 一戸建て・楽天ひかりに合うルーターのスペック・機能は？ IPv4 over IPv6って何？ Wi-Fi6(11ax)の通信規格対応ってどういう事？ アンテナは多ければ多い方が良い？ バンドステアリング(周波数切り替え機能) ビームフォーミング(Wi-Fi機器に重点的に電波を飛ばす機能) 選んだ機能・スペック全部持ちの『楽天ひかり対応のルーター』 バッファローさん【WSR-1800AX4S】 IO-DATAさん【WN-DEAX1800GR】 エレコムさん【WRC-X1800GS-B】 終わりに 楽天ひかり対応Wi-Fiルーター【勝手に各メーカーベスト選出！】 こんにちは。 ご訪問ありがとうございます。 今回は【楽天ひかり対応ルーター
Building Uber’s Fulfillment Platform for Planet-Scale using Google Cloud Spanner
You’re seeing information for Japan . To see local features and services for another location, select a different city. Show more Introduction The Fulfillment Platform is a foundational Uber domain that enables the rapid scaling of new verticals. The platform handles billions of database transactions each day, ranging from user actions (e.g., a driver starting a trip) and system actions (e.g., cre
ANDPAD iOS開発における課題と最近取り組んでいる「マルチモジュール化」について - ANDPAD Tech Blog
ANDPADに入社して1年と少しが経ちました、モバイルアプリエンジニアの佐藤（@ushisantoasobu）と申します。 タイトル通りではあるのですが、現状のANDPAD iOS開発における課題と、ここ数ヶ月取り組んできた「マルチモジュール化」について書いていきます。 ANDPAD iOS開発における課題 スーパーアプリ戦略 vs マルチアプリ戦略 ANDPADが向き合っている課題、ここでは一言で「建築DX」と呼んでしまいますが、建築DXはとてつもなくデカい課題だと自分は認識しています。ゆえにモバイルアプリ開発としても以下の2つの戦略のうちどちらかを選択する必要がありました。 スーパーアプリ戦略 全ての機能やドメインを1つの巨大なアプリに集約 マルチアプリ戦略 機能やドメインごとにアプリをリリース・運用 ANDPADでは後者の「マルチアプリ戦略」を採用しています。そこらへんの経緯などにつ
きっかけ 私は今まで Pages Router でプロジェクトの開発をしてきました。今の所、具体的な新規で開発する案件の話はないけど今後 App Router で開発するときにどうゆうフォルダ構成にすれば良いか悩んだからまとめようかなと思ったのがきっかけです。 環境について node: v18.18.2 npm: 9.8.1 react: 18 系 next.js: 13.5.6 具体的にどんなことに悩んだのか /app の中で style や util 系関数や component なんかも入れた方がいいの？ それとも/app を/pages と同じように扱う方がいいの？ この 2 点です。Private Folders やら Route Groups なんかもあったりして Next.js のファイルベースルーティングはいろんなことが柔軟にできるようになった印象です。 しかし、柔軟だから
この記事は、<strong><a href="https://techfeed.io/events/techfeed-experts-night-31">TechFeed Experts Night#31 〜 フロントエンドアーキテクチャの現状と未来</a></strong>の開催に際し、TechFeedのデータを元に日本語記事ランキングを紹介していくものです。 本記事は、TechFeed Experts Night#31 〜 フロントエンドアーキテクチャの現状と未来のセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 こんにちは、TechFeed CEOの白石です。 この記事は、TechFeed Experts Night#31 〜 フロントエンドアーキテクチャ
SPAを作る際は、URLを変化させたり、URLの変化に反応して画面を変えたりする必要があります。このために使われるのがルーティングライブラリです。Reactにおいては、react-routerが代表格として知られています。 react-routerでルーティングが制御されている場合、その中のコンポーネントが現在のURLを表すオブジェクトであるlocationを得るための方法は大別して2つあります。一つはuseLocation、もう一つはuseHistoryです。なお、これらのフックはreact-routerのv5.1で追加されました。この記事ではこれ以前の方法は取り扱いません。 この2つの方法のどちらを使ってもlocationを得ることは可能ですが、どちらを使うべきかは場合によって明確に異なります。間違った方を使うと、パフォーマンスが低下したり期待通りに動かなかったりという問題が発生するこ
リクルートマーケティングパートナーズにおけるAmazon EKSとAWS App Meshを使った基盤安定性向上とGitOpsへの挑戦 | Amazon Web Services
Amazon Web Services ブログ リクルートマーケティングパートナーズにおけるAmazon EKSとAWS App Meshを使った基盤安定性向上とGitOpsへの挑戦 本番環境でコンテナを利用したワークロードを構築する場合、ほとんどのケースでコンテナオーケストレーションのテクノロジが導入されます。AWS では、Amazon Elastic Container Service (Amazon ECS) や Amazon Elastic Kubernetes Service (Amazon EKS)といったコンテナオーケストレーションに関するサービスを提供しています。 コンテナオーケストレーターの選定においては、各オーケストレーターの持つ機能や思想を理解することが重要です。Amazon ECS は、他の AWS サービスとシームレスに組み合わせることが可能であり、Amazon
Next.js 13 の cache 周りを理解する - Automatic fetch() Request Deduping
Next.js 13 App Router の cache 周りを理解したい記事シリーズです。 Automatic fetch() Request Deduping ← この記事 revalidate fetchCache (後日公開) Next.js 13 App Router の cache はむずかしい Next.js 13 以降 App Router と呼ばれる、app/ ディレクトリを起点とする新たなレイアウト・レンダリング機能が導入されました。 併せて、レンダリングを効率化するためのキャッシュ機構も大きく手を加えられました。 基本的には意識せずとも恩恵を受けられるものが多いですが、把握しておかないと意図しない描画に繋がる可能性もあるため、App Router を利用する場合には抑えておきたいところです。 App Router に対応している beta 版ドキュメント[1]に基本
コンピューティング基盤部の三吉（sankichi92）です。 アークエッジ・スペースでは、衛星リモートセンシング1による地球観測データ（以下、「衛星データ」）を活用したソリューションを提供する Web GIS2 アプリの開発をはじめました。 この記事では、プロジェクトの最初期にあたり、プロダクトのさまざまな可能性を高速に検証するために行った技術的な取り組みを紹介します。 Web GIS アプリをつくる背景 プロトタイプで検証するもの スモールスタートのための技術選定 SPA PMTiles GitHub Pages 開発をはじめてからの改善 React Router 導入 S3 + CloudFront 導入 Amazon Location Service 導入 プロトタイピングの結果 今後の課題と展望 データ基盤、ジョブ管理基盤 動的タイル生成への対応 解析の高度化 Web GIS エン
AWS FargateでFireLens（Fluent Bit）を最小構成で起動し、ECS ExecでFireLensコンテナに入ってみる | DevelopersIO
rain deploy時のパラメータ指定。VPC ID、サブネットIDはご自身の環境に合わせ変更してください。 rain deploy ./fargateWithFirelens.yml fargateWithFirelens-stack --params \ AppName=webapp,\ ClusterName=cluster,\ DesiredCount=1,\ Environment=test,\ ImageNameFirelens=public.ecr.aws/aws-observability/aws-for-fluent-bit:latest,\ ImageNameWebApp=public.ecr.aws/nginx/nginx:latest,\ ProjectName=minimum,\ PublicSubnet1=subnet-043566448c316b46a,\
April 25, 2022 Four Eras of JavaScript Frameworks April 25, 2022 I started coding primarily in JavaScript back in 2012. I had built a PHP app for a local business from the ground up, a basic CMS and website, and they decided that they wanted to rewrite it and add a bunch of features. The manager of the project wanted me to use .NET, partially because it’s what he knew, but also because he wanted i
App Router でのパンくずやナビメニューの作成に useSelectedLayoutSegments が便利
Leaner Techonologies の @corocn です。 最近 Nuxt.js のアプリを Next.js + App Router に載せ替えたのですが、メニューの描画に useSelectedLayoutSegments が便利だったので軽く紹介します。 実は App Router のドキュメントをちゃんと読んでいくと、Functionsの最後で紹介されています。 何ができる？ メニューを描画するときに、現在のページのメニューだけ下線や太字で装飾したいケースがありますよね。このとき普通に実装しようとするとURLからベースとなるパスを除いた上で分割して...など若干面倒です。 useSelectedLayoutSegment(s) を使うと、レイアウトを起点として、URLをいい感じにパースして返してくれるのでスッキリ書くことができます。 単数形（segment）と複数形（se
ISUCON9に参加した方、本戦までお疲れさまでした！ 今年のISUCON9では運営として予選の作問に携わり、フロントエンド周りを担当しました。 その際に得た知見や実装なりの話を雑に書こうと思います。 話で出てくるソースコードは全てここにあります。 github.com Excuse 個人としての雑記です 本業フロントエンドエンジニアではないので詰めが甘い部分がかなり多いです 本業フロントエンドエンジニアからのマサカリ待ってます ISUCON運営として作るフロントエンド、という視点で書いていきます 願わくば未来のISUCONフロントエンド担当者に届け あとは講評や解説は公式Blogで出してるのでそのあたりをぜひ読んでください！ isucon.net あとはBackendやベンチマーカーの実装に関しては@catatsuyさんの記事とGitHubのコードを合わせて読むことをオススメします。 m
MySQL 8.1シリーズにおけるInnoDB Clusterとリードレプリカの融合（ただしMySQL Serverは8.0でOK）
MySQL本体の新機能ではないのだが、MySQL ShellとMySQL Routerのイノベーションリリース（バージョン8.1）によりInnoDB Clusterに対してリードレプリカを追加することができるようになったので、今回はそのことについて解説をしていこうと思う。 InnoDB Clusterとは このブログではInnoDB Clusterとは何かということをそもそもまだ解説していなかったように思う。詳しいことはおいおい別の投稿で触れたいと思うが、InnoDB ClusterというのはMySQL Serverのグループレプリケーションを核にしたクラスタリング機能のことだ。MySQL Shellを用いてかんたんに構築でき、なおかつMySQL Routerを介して接続することにより、インスタンス障害が生じたときに自動的に接続先を振り替えることができる。イメージ的にはこんな感じ。 グルー
Next.js 10.1
We are excited to introduce Next.js 10.1, featuring: 3x Faster Refresh: 200ms faster refresh with no changes necessary. Improved Installation Time: 58% smaller install size and 56% fewer dependencies. next/image Improvements: Apple Silicon (M1) Support, plus more layout and loader options. Next.js Commerce Shopify Integration: Flexible data layer for composable e-commerce apps. Custom 500 Page: Ad
Honoのv3が出ました
僕がCreatorのHonoの新しいメジャーバージョンである「v3.0.0」が出ました。 このリリースノートに全て書いたのですが、補足を含めてこちらにも残しておきます。 Honoのステータス v3の説明の前に現在のHonoのステータスです。 GitHubスターは3.5Kです。 Cloudflare WorkersのSDK、Deno、Bun、それぞれのプロジェクトにHonoの文字が入ってます。 プロダクションやライブラリでも使われています。 cdnjsのAPIサーバー Polyfill.io repeat.dev Drivly substats Ultra（DenoのReact SSRフレームワーク） Cloudflare 公式のブログ記事 などなど いい感じです。 v3のスローガン v3へのバージョンアップにあたってのスローガンはズバリこれでした。 Do Everything, Run A
何問わかるかな？AWS FireLens（Fluent Bit利用版）クイズ！！！ - LayerX エンジニアブログ
こんにちは。バクラク事業部Platform Engineering部DevOpsチームの@civitaspoです。 7月はLayerXエンジニアブログを活発にしよう月間 ということで、この記事ではAWS FireLensに関する情報をクイズ形式でお届けします。 みなさんはAWS FireLensを使っていますか？弊社ではAmazon ECS上にアプリケーションをホスティングしており、AWS FireLensを利用してログ収集・ログ送信を行っています。AWS FireLensは非常に便利です。一方、AWS FireLensは奥が深い挙動をすることもあります。この記事ではそんなAWS FireLensを深く理解するための情報をクイズ形式でお届けしてみることにしました。僕が知る限りの情報を詰め込んでみたのでAWS FireLensを深く理解したい方に届けばいいなと思います。 AWS FireLe
ZOZOTOWNのマーケティングプラットフォームでのフロントエンドの取り組み - ZOZO TECH BLOG
はじめに こんにちは、MA部の林（@hayash__p）です。 私達のチームでは、メール、LINE、Push通知、サイト内お知らせなどでユーザにZOZOTOWNのセールや新着商品を紹介するといった、マーケティングに関わるシステムを開発しています。これまで、配信チャネルや配信内容ごとに個別最適化したシステムを開発していましたが、それらを一新したマーケティングプラットフォームを作ることになりました。新しいマーケティングプラットフォームであるZOZO Marketing Platform（以下、ZMP）の概要については以下のテックブログをご覧ください。 techblog.zozo.com 本記事では、マーケティングプラットフォームのリプレイスにあたり、フロントエンドエンジニアとして取り組んだことを紹介します。 目次 はじめに 目次 背景 ZMPの管理画面モジュール MPマネージャー 技術選定 M
**Next.jsとはVercelが作成しているReactのフレームワークです。**面倒な設定を書かなくてもすぐに使えるZero Configを標榜しており、実際にwebpackやTypeScriptと一緒にReactを書く際にも特別な準備は不要です。SSRにも対応しており、Reactで開発するならNext.jsかFacebook製のCreate React Appを使うのがスタンダードになってます。 私は実務でNext.jsを使っており、このフレームワークはとても便利だと思っています。私はNext.jsの大ファンなので、Reactでの開発時にNext.jsを使う現場が増えるといいなと思って記事を書いています。 関連記事: Next.js + esa.io + VercelでJAMStackな爆速ブログを構築する **この記事では、Next.jsでReactアプリケーションを作成する時に、
もうだいぶ前になってしまいましたが、3月に京都でYAPC::Kyotoに参加してきました。 YAPC::Kyotoは運営の皆さま、本当にお疲れ様でした。コロナ渦で運営の継続には色々苦労があったかと思います。そんな中、世間的にコロナ明けの雰囲気になってきている中、ちょうど先陣を切るような形でオフラインイベントが開催できて、大きな盛り上がりを見せたのは、皆様の苦労が報われたようにも思いました。旧交も温められたし、それだけではなく、学生支援制度などのお陰で、若い人も参加していて交流が盛り上がってよかったです。 思えば、2019年のYAPC::Tokyoのときに僕がベストトーク賞を受賞した勢いで、懇親会の最後にで胴上げされた後に、無責任に「次は京都でやるぞ!」と、勝手に宣言したのが実現した形でした。JPAにも禄に関わっていないのに(当時は一応末席で参加することもあった)。とはいえ、懇親会で @__
vuefes.jp 一日セッション見つつメモを残したので、個人ブログに放り投げておく。 殴り書きなので何の清書もしてないし、誤字脱字もチェックしてないです！！！ Keynote | The Evolution of Vue / Evan You https://vuefes.jp/2022/sessions/yyx990803 0.x系の Pre バージョン時代の話 ES5のみのFeatureを前提にする必要があった 1.0のコードネームってEvangelionだったのか.. 2015-2016でのコアなライブラリ群の追加が多かったらしい。Vue Router とかVuex 大規模SPAアプリケーションの構築の解決狙い Vapor Mode Virtual DOM への依存がない パフォーマンス特化でのプリビルド 今後 Vue2→3の移行期という認識 30%が Vue3, 25%が 2.7
Lazy Load Routes in Vue with webpack Dynamic Comments | CSS-Tricks
The way routing works in JavaScript is usually that you specify which relative URL pattern you want for which component to render. So for /about you want the <About /> component to render. Let’s take a look at how to do this in Vue/Vue Router with lazy loading, and do it as cleanly as possible. I use this little tip all the time in my own work. A repo that includes everything covered in this post
EVPNを知って実際に動かしてみました、記録です。 EVPN(Ethernet VPN)とは すごいざっくり書くとシンプルなL2VPNを実現する技術です。 広域イーササービスやDCのlayer2 networkで活躍するらしいです。 EVPNの仕組みとしてやってることはどうやらBGPでMACアドレスを広報するらしいです。えっBGPで…？ MP-BGP(Multi Protocol BGP)とは 通常のBGP-4(通常のBGPの事を指す)ではMACアドレスなんて経路広報出来ません、BGP-4はIPv4 onlyです。 そこで登場するのがMP-BGP、MP(Multi Protocol)ということはIPv4 unicastだけではありません。扱えるものがIPv4-vpn-unicastやIPv6関連だったりとたくさん増えました。 その扱える中にEVPNがあるということになります。 ここらへんの
React Native for Web + TypeScript + Firebase + PWAを調べたのでまとめておく - gibachan's blog
動機 きっかけはこの記事。ちょっと前にこれを読んで、 「モバイルネイティブアプリに慣れた開発者が、React Native for Webを利用することで手軽にWebアプリ開発できないか？」と思ってたので調べてみました。 iOSについて言えばSwiftUI登場後、宣言的にUIを構築するということが自然となり、Webアプリの各種FW（Reactなど）との距離感が縮まっていること。前述の記事にあるように、ネイティブ開発で馴染みのあるコンポーネントをReact Nativeを経由してWebの世界に持っていけるなら、Webアプリ開発の敷居が下げられるんじゃないかと思って調べてみました。 先に結論 React Native for Webを使って簡単なTODOアプリを作ってみました。 一応Firebase Hostingに置いてPWAとしてモバイルにインストールするところまで試しました。 githu
Mixing It Up: Remix Joins Shopify to Push the Web Forward
Opens in a new windowOpens an external siteOpens an external site in a new window We are very excited to announce that the open-source web framework Remix and its team are joining Shopify. Why? The web is always evolving—and we’re entering a new era. First, we had the document web, and then we sprinkled in richer interactivity. Most recently, we entered the world of single page apps. We’ve learned
This site is a pretty standard demo website; a site with links to different pages. Nothing to write home about except that the whole website is contained within a single JavaScript file, and is rendered dynamically, just in time, at the edge, close to the user. The routing is fairly minimal: we use the router module which uses URLPattern under the hood for pattern matching. /** @jsx h */ /// <refe
Ciliumを試す -サービスメッシュにサイドカーが必須だと思っていたがそんなことはなかったぜ- - CADDi Tech Blog
こんにちは。 Platformチームの前多(@kencharos)です。 2022年8月9日に開催した社内勉強会で、eBPFベースのネットワークミドルウェア、Cilium(スリィアム) について発表しました。 この記事は発表の内容をベースに内容を補足したものです。 この記事を読むにあたり、Kubernetesをある程度触ったことがないと用語などが分かりづらいかもしれません。 サービスメッシュやIstioについては、構成や導入目的について簡単に次節に記載しています。 より詳しく知りたい方はIstioのサービスメッシュの説明を見てもらえると、Ciliumとの対比がわかりやすくなるでしょう。 またサービスメッシュを触ったことがある、あるいは運用している方であれば、Ciliumの魅力がより伝わると思います。 eBPFの知識は必要ありません。またeBPFについて同僚も社内勉強会で発表していますので、
async/await 時代の新しい HTTP サーバーフレームワーク tide を試す - Don't Repeat Yourself
Rust Advent Calendar 2019 25日目の記事です。 tide は現在開発途中の、 Rust の async/await に対応した HTTP サーバーを構築するフレームワークです。not ready for production yet なので本番にこれを使用するのは難しいかもしれませんが、いろいろな例を見てみた感じとても使いやすそうで、注目に値するフレームワークの一つです。 記事を少し読んでみたのですが、どうやら 2018 年に Rust の Network Service Working Group が開発に着手したフレームワークのようですね。現在のステータスを追いかけていないので詳しくはわかりませんが、Rust チームの方々が何かしら関わっているフレームワークということで、少し安心感がもてるかなと私は思っています。async/await が今年無事安定化されたの
この記事は？ アーキテクチャというとエンジニアによって定義が曖昧になりがちです。本来、システム構成やインフラ構成まで含めてアーキテクチャという意見も尤もですが、この記事ではNext.js(App router以降)のアーキテクチャ(フロントエンド、バックエンド)について考察していきます。フロント、バックエンドを分ける理由は、バックエンドにとってはデータベースを含むモデリングが重要になる一方、フロントエンドにとってはデザインシステムを含む整理が重要になってくるからです。 アーキテクチャの基礎知識 (※ ここは復習部分になるので、適宜読み飛ばしてください。 初めにアーキテクチャの基礎について触れるのは、基礎がわかっていれば応用が効きやすいため(敢えてServer Actionsにしていますが、それ以外の技術構成でも応用可能)です。 フロントエンドの実装でデザインシステムが重要なのは、効率良く作
今お世話になっているスタートアップの会社さんで、フロントエンドのVue2アプリケーションをマイクロフロントエンド化しました。 今後、Vue.jsを取り巻く環境が急激に変わった場合を想定し、React.jsもしくはVue3にアップデートしていくために、マイクロフロントエンドアーキテクチャを採用しました。 圧倒的な速度で進化していくフロントエンドのツールおよびライブラリ、これら全てにキャッチアップをして、技術的負債を取り除いていくためには、すでにマイクロフロントエンド以外の選択肢を除いてないと思います。 今回紹介するicestarkを実際に使ってみた上で、より多くの人にこのicestarkを知ってほしい！と思ったので、まとめてみました。 ハンズオン記事はこちら: 更新履歴 Whyマイクロフロントエンド 今回はVue2.XからVue3.xのアップデートを漸進的に行うための決断でしたが、そもそもな
Next.js + Storybook Addon | Storybook: Frontend workshop for UI development
A no config Storybook addon that makes Next.js features just work in Storybook Storybook Addon Next ⚠️ DEPRECATED ⚠️ This addon has been deprecated in favor of @storybook/nextjs which is the Storybook official addon for supporting Next.js features in Storybook. It supports everything storybook-addon-next does and much more! I even worked on developing this with them so you should be in good hands.
Understanding React Server ComponentsLearn the fundamentals of React Server Components, to better understand why (and when) to adopt. React Server Components (RSCs) augment the fundamentals of React beyond being a pure rendering library into incorporating data-fetching and remote client-server communication within the framework. Below, we’ll walk you through why RSCs needed to be created, what the
OpenAI が公開した Function Calling の API を使用すれば、定義した関数の情報を渡すことで、自然言語からどの関数を使用すべきかどうかを判定し、引数も json スキーマに従ってレスポンスしてくれます。 この情報を使って API クエリを実行し、レスポンスを元に UI を動的にレンダリングすれば、自然言語から UI が描画され面白いのではないかと思い実践してみました。 この例では、Function として OpenWeatherMapと REST Countriesを定義しています。 その他にも世界銀行の人口データからチャートを表示したりと、自然言語とコンピューター言語の融合がますます進みそうでかなりワクワクしました。 やりかた 今回は Next.js (App Router) と Vercel AI SDK を使用しました。全体的な実装は GitHub に載せてい
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
やっとわかる！Next.js App Routerのcacheにおけるrevalidateと苦戦した話
A framework for building Open Graph images
Build and Publish 2023
Welcome to Wildebeest: the Fediverse on Cloudflare
コンテナ データセンターで AS 取ってみた – Made in container
Next.js App Routerの場合componentはどこに置けばいいの？
【2024年6月版】フロントエンドアーキテクチャ界隈の必読記事まとめ【TechFeed】
react-routerで現在のlocationを取得する2種類の方法の使い分け方 - uhyo/blog
サーバレスではじめる Web GIS アプリのプロトタイピング - ArkEdge Space Blog
pzuraq | Four Eras of JavaScript Frameworks
ISUCON9予選でフロントエンド周りの実装を担当した話 - はらへり日記
Next.jsでGoogle Analyticsを使えるようにする - パンダのプログラミングブログ
持続可能で幸せなOSS開発 ~ YAPC::Kyotoを終えて | おそらくはそれさえも平凡な日々
📝 Vue Fes Japan Online 2022 / 見たセッションメモ - memo_md
なんとなくEVPN理解 - ネットワークは砕けない
A Whole Website in a Single JavaScript File
【Next.js】Server Actions時代のデザインパターン入門
マイクロフロントエンドフレームワークicestarkが最高すぎる件
Understanding React Server Components – Vercel
ChatGPTのFunction CallingでUIを動的レンダリングしたら楽しかった