Webフロントエンドの複雑な状態同士の依存をzustandを使ってリアーキテクチャする - KAKEHASHI Tech Blog
この記事は秋の技術特集 2024の 7 記事目です。 カケハシのAI在庫管理チームでフロントエンドエンジニアをしているNokogiri です。今回はAI在庫の入庫ダイアログを zustand を使ってリアーキテクチャした事例を元に取り入れたプラクティスを紹介したいと思います。 イントロ AI在庫では、ユーザーの入力を伴うフロントエンド部分で多くのケースに React Hook Form を利用しています。 React Hook Form は、入力フォームの状態管理やバリデーションを簡単に実装でき、パフォーマンスにも優れた素晴らしいライブラリです。 しかし、ユーザーの操作に応じてインタラクティブに変化する UI では、状態管理が複雑化し、コードの可読性が低下することがあります。その結果、バグが発生し、予測しにくい動作を引き起こすことも少なくありません。 そこで今回は、 zustand を導入
GraphQL実践ノウハウv2
GraphQL実践ノウハウ https://speakerdeck.com/sonatard/graphql-knowhow 宣言的UIの状態管理とアーキテクチャSwiftUIとGraphQLによる実践 https://speakerdeck.com/sonatard/swiftui-grap…
ジャンプTOON アプリチーム 2024 年新卒の西峰です。 5 月にサービスを開始した「ジャンプTOON」は、Flutter を採用し Android, iOS, iPadOS 向けのアプリを提供しています。 本記事では、ジャンプTOON モバイルアプリのために独自に開発されたマンガビューワについて紹介したいと思います。 マンガビューワとは マンガ作品を閲覧できる機能です。 本アプリでは、快適に縦マンガを閲覧いただけるよう、スクロールや拡大縮小操作に工夫を加えています。また、作品の転載防止のため、画面録画、ミラーリングの禁止機能も存在します。（本記事では解説しません） ビューワを自作した目的 本アプリではビューワ機能を自作していますが、その目的はいくつかあります。まず、柔軟に独自の機能を追加しやすくするためです。連続して話を読んだり、お気に入りやコメント、いいね、拡大縮小といった要件を全
ゲーム開発ひいてはクライアントサイドの開発において「クリーン」かどうかは正直けっこうどうでもよく、設計すべき一番のポイントは「制御フロー」にあります。 じゃあ具体的にどういう設計がいいのか、ていうのは、やはりjs界隈みたいにフレームワークになっていないとなかなか伝わらないようです。そういうのもそのうちつくってみたいなあと最近思ってます。 以下、以前ブログに書いたものの転載。 -- Unityで長らくゲーム開発をやっているけれど、Web界隈などで色々と発達しているアプリケーション設計パターンをおいそれと持ち込めば良いわけではないと感じているので、それについて考えてみようと思う。 ここでいう設計パターンていうのは、たとえばUIとかをつくるフレームワークの競争で発達してきた MVC派生 や ReactとかのElmアーキテクチャに影響を受けたものたち、はたまた、Webサーバ(HTTPサーバ) を書
Go製CLIツールGatling Commanderによる負荷試験実施の自動化 - ZOZO TECH BLOG
はじめに こんにちは、ML・データ部MLOpsブロックの岡本です。 MLOpsブロックでは機械学習モデルの実験基盤の作成、機械学習モデルを組み込んだAPI・Batchの開発・運用・保守を行なっています。APIを開発する際には負荷試験を実施し、本番環境で運用する際に求められるスループット・レイテンシを達成できるか確認します。 MLOpsブロックでの従来の負荷試験実施には人手を要する定型的な作業が複数ありました。また頻繁に行う作業でもありトイルとなっていました。 本記事ではMLOpsブロックで抱えていた負荷試験実施の課題と、解決のために開発したOSSのCLIツール、Gatling Commanderについて紹介します。Gatling Commanderが負荷試験の実施におけるトイル削減の一助になれば幸いです。 github.com 目次 はじめに 目次 背景・課題 従来の負荷試験実施の方法 分
SREチームの長田です。 今回は、カヤックのメンバーが業務で使うために開発・公開しているOSSなプロダクトをまとめて紹介しようという企画です。 KAYAC organization以下にあるものだけでなく、在籍中のメンバーが作ったものもひっくるめて、実際に業務で使用しているものを中心に 紹介しています。 以下の3つのカテゴリに分けて記載しています。 各カテゴリ内はアルファベット順です。 ツール編 人間が手動で実行するもの アプリケーション編 どこかに常駐して、イベントを受け取ると動作するもの ライブラリ編 ツールやアプリケーションから参照されるもの 集めてみたらそこそこの量になったので、本記事では詳細な説明は省いています。 GitHubリポジトリのURLや関連記事のリンクを併記していますので、より詳しく知りたい場合はそちらを参照ください。 (...) 内はそのプロダクトで使用している主なプ
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に対する知識があるとよい
【ハンズオン】RemixでTODOアプリを作ってReactの違いを体感しよう【TypeScript/Supabase/TailwindCSS】 - Qiita
【ハンズオン】RemixでTODOアプリを作ってReactの違いを体感しよう【TypeScript/Supabase/TailwindCSS】TypeScriptハンズオンRemixtailwindcssSupabase はじめに Reactを使っていてステートがクライアントとサーバーで辻褄が合わなくなった そんな経験がReactをある程度使ったことがある人はおそらく経験したことがあるはずです。 Reactにおいて状態管理は誰でも使いやすく直感的である半面、クライアントとサーバーの状態を意識する必要が有ります。 どのタイミングでステートの変更をサーバーでも行うのか難しく思う場面もしばしばあります。 今回は最近巷でReactと並んで見かけるようになったRemixについてハンズオン形式で学べるような記事を書いていきます。 ハンズオンを通してRemixの特徴であったり、SupabaseやTail
はじめにこんにちは、PIVOTでソフトウェアエンジニアをしている裾分です。PIVOTは2024年2月にアプリ・Webを本格始動しました。私はPIVOTにジョインして以降、サブスクリプション機能の開発をしてきたので設計の概要と決済プラットフォームが係る実装の難しさについてまとめてみました。 本題冒頭のリリースの通り、PIVOTはYouTubeからプロダクトに集中するにあたり、サブスクリプション機能をリリースしています。 サブスクリプションを実装するにあたり考慮すべき点として、以下の状態を考慮する必要があります。 自サービスで管理する状態 ユーザーのサブスクリプション ユーザーのプラン 他サービスで管理する状態 ユーザーへの課金を行うプラットフォームに登録されているサブスクリプションの状態 決済状態（成功 | 失敗 | …） PIVOTの場合では、決済プラットフォームとして App Store
Zennでは、「記事」や「本のチャプター」のMarkdownエディタのベースにCodeMirrorというライブラリを使っています。これまではCodeMirrorのv5を使っていた（正確にはv5に依存するラッパーライブラリを使っていた）のですが、古いバージョンを使い続けるリスク解消と更なるエディタの拡張性を得るため、CodeMirrorのv6にアップグレードすることにしました。 本記事では、CodeMirror v6の基本的な知識部分から、ZennのMarkdownエディタを実装するまでのカスタマイズ方法を紹介します。 CodeMirrorの基礎知識 はじめに CodeMirrorはWeb上にコードエディタを実装するためのライブラリです。標準で多くのプログラミング言語に対応したシンタックスハイライトや入力補完、折りたたみ、キーマップ、マルチカーソルなど、モダンなコードエディタに必要な機能を備
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 │ │ └
こんにちは、学生エンジニアのMasamichiです。2024年もついに始まってしまいました。今年はより一層プログラミングに励もうと思います。 さて、今回はプログラミング一年目の僕が大学に入学してからプログラミングを始めた2023年にした勉強の内容をざっくり振り返ります。 Python 基礎 プログラミングを始めて、最初の1ヶ月くらいは基礎を勉強していました。Pythonを選んだ理由は特になく、ただ「プログラミング言語」と調べて一番上にきた言語を始めただけです。この時は、「本堂俊介」さんのYouTube動画でPythonの講座をひたすらハンズオンしていました。この講座で一通りプログラミングに必要な知識を習得したイメージです。 また抜けている部分や、復習の意味も込めて以下の本もやりました。この本で基本的なアルゴリズムとデータ構造の考え方をマスターしました。Githubによる状態管理や応用的な内
ジャンプ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 や
フロントエンドの状態管理の改善に対する取り組み
こんにちは！株式会社COMPASSの井上です。プロダクト開発ユニット、システム開発部、アプリケーション開発チームに所属しています。普段はキュビナマネージャー（QM）のフロントエンドエンジニアとして、新規機能の開発、既存機能の改修などを行っています。海外を放浪することが好きで、コロナの時には一度断念せざるを得ませんでしたが、最近ではベトナムやタイに滞在していました。今後は東南アジアの様々な国を訪問してみたいと思っています。 本記事では、キュビナのフロントエンド開発における状態管理について、現状抱えている課題とその解決方針について書いていきます。現在取り組み中の内容になっており、ある程度大きな方針については検討をしているものの、解決までの道のりはまだ少し長いかなという状況です。ですが、少しでも共通の課題を抱えている方々の参考になればと考えています。 この記事はこんな方におすすめ キュビナ（特に
こんにちは、アルダグラムでエンジニアをしている松田です。 Reactで状態を管理するにあたっては、useStateの利用が挙げられることが多いです。 実際、数値や文字列、真偽値などのプリミティブな値であれば、useStateが適切なケースが大半でしょう。 ただ、値を投入するだけではなく、追加・削除・更新といった操作が要求されるケースもあると思います。 その際に、配列やオブジェクトなどといった形式でデータを取り扱うことに併せて、useReducerやuseContextの利用も視野に入れると、開発手法の幅が広がります。 今回は、次の目標に掲げるUIを実現する過程を、useReducerとuseContextの活用方法の1つとしてご紹介します。 目標 以下のような操作ができるUIを作成する。 名前と年齢を入力して、ユーザーを作成 作成したユーザーは一覧に表示 各ユーザーの権限(一般 or 管理
TL;DR 楽しかった！ 本編 おはようございます。手札事故(twitter:@hand_accident)と申します。 Ruby知識ゼロから初参加したRubyKaigi 2024レポート、略してルゼロ*1という感じでやっていきたいと思います。 < Day 0 自己紹介でもしとくか。生まれ育った愛媛県松山市*2に帰って非IT企業でパソコン係をやっている過程で、すべてが個人開発の労働環境で趣味全ブッパ技術選定をした結果HaskellとNimを書くようになりました。すこしSvelteもします。 Rubyは名前を聞いたことがあるしちょっとニッチなPythonライブラリ探そうとしたら時々検索にgemが引っかかってそちらにはあるのねえという感想を抱くなどしていましたが何の因果か触ってみるには至らず、沖縄に来て初めてコードを見たまであります。 愛媛県松山市で趣味の音楽ゲーム(DDR)に高じていたところ
Vue/Vite 関連のライブラリー名の読み方は間違えられやすいものが多く、混乱を招くことがあります。この記事では、2024 年現在における Vue/Vite 関連ライブラリーの正式な読み方や由来をまとめ、正しい知識を共有することを目的としています。 Vue フロントエンド UI フレームワークのひとつ。 「ヴュー」と読む（口語だと「ビュー」と発音することが多い）。 Vue（発音は /vjuː/、view と同様） https://ja.vuejs.org/guide/introduction.html#what-is-vue Pinia Vue 公式の状態管理ライブラリー。 「ピーニャ」と読む。スペイン語で「パイナップル」を表す単語 piña に由来。 「ピニア」ではない。 Pinia (pronounced /piːnjʌ/, like "peenya" in English) htt
アクセシビリティの改善のために React Aria を活用しています - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！DOGO プロジェクトでソフトウェアエンジニアとして活動している @nissy_dev です。 DOGO プロジェクトでは、React Aria を活用してアクセシビリティの改善を行っています。 今回の記事では、React Aria を国内にもっと広めて行きたいということで、React Aria を利用することに決めた理由を振り返りつつ、React Aria について簡単に紹介します。 目次 OSS を活用した効率なアクセシビリティの改善 ライブラリの選定 React Aria の概要 Next.js App Router との相性 終わりに OSS を活用した効率なアクセシビリティの改善 DOGO プロジェクトでは、フロントエンドの刷新を進めていく中でアクセシビリティの改善についても取り組んでいます。 具体的な事例などについては、次の記事も参考にしてもらえればと思います。 各
[Go言語] gin と singleflight を組み合わせた試行錯誤と実装例 - Techtouch Developers Blog
singleflight とは gin とは Middleware Context ２つの実装例 1. 同期待ち方式 2. 非同期待ち方式 まとめ こんにちは。SRE 兼 テックブログ編集長の izzii です。毎年お盆休みに連泊で登山するのですが今年は台風の影響で行けませんでした。悲しい！ さて、本記事ではパフォーマンス最適化の文脈で登場することの多い singleflight と、ウェブフレームワーク gin を組み合わせた実装例を紹介します。要素技術の概要とモチベーションに触れつつ、試行錯誤についてもお話しします。実装に関しては結局妥協が必要であり正解の形がないので GitHub で公開という形ではなく、ブログを通して自分の考えた２つの実装を紹介することにしました。この記事は Go に関する基礎知識を必要とします。 singleflight とは 複数のスレッド（go routine
![[Go言語] gin と singleflight を組み合わせた試行錯誤と実装例 - Techtouch Developers Blog](https://cdn-ak-scissors.b.st-hatena.com/image/square/3e144e7594608c60f90fb0a1a685cbbe11748aa0/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fi%2Fizzii%2F20240827%2F20240827112042.png)
Hanabi.REST AIにHonoJSのバックエンドを書かせて遊ぶ、Hanabi.RESTというサービスを一般公開します。それに際して、この記事では、Hanabiの紹介と簡単に技術スタックを解説していきます。 皆さんは、AIがプロンプトからUIを生成する、V0というサービスをご存じですか？僕はあれを見たときに、ある妄想が膨らみました。 「V0のAPI版があれば、プロンプトからWebアプリケーションを作れるやん！！」と。 当初はハッカソン用の小プロジェクトとして始めましたが、想定以上に面白い結果が得られたため、開発を継続することにしました。技術的な制約、様々な黒魔術による不安定な挙動、LLMの劣化など、数多くの壁を乗り越えながら、約半年をかけてようやくリリースに至りました！！ 次のリンクから実際にAIが生成したTwitter風のAPIを試すことが出来ます！ また、会員登録すれば誰でもAP
システムで扱うステータスの分解と変換
初めに レバテック開発部の今井です。 ソフトウェア開発において、データの状態管理は非常に重要です。注文の状態、ユーザーの認証状態、プロジェクトの進行状態など、多岐にわたる状況で、適切な状態管理が求められます。しかし、ビジネス要件の変化や新機能の追加に伴い、状態管理が複雑化し、保守が難しくなることがあります。 この記事では、データの状態管理を簡単にするためにMECEを初めとした方法で分析を提案します。これによって、柔軟で効率的なシステム設計が可能になることを目指します。 TL;DR MECEの原則を使ってenum型ステータスを分解する方法を解説する MECEによる分解から一次情報と二次情報という区分を提案し、分析の高度化を目指す 一次情報と二次情報の区分とシステム間のデータ連係の関係性について考察する 対象読者 システムの保守性・拡張性に興味関心のあるエンジニア enumをMECEに分解する
はじめに 前回までにドラック＆ドロップでタスクの進捗状態を変更する機能が実装できました。 今回はそれに加え完了したタスクを削除する機能、モーダルでタスクの内容を変更する機能を実装しました。 今回実装できた内容 Redux toolkitを導入してグローバルな状態管理ができるようになった 新しい機能実装に対応できるディレクトリ構成を検討できた Material UIを導入してModalを実装できた onDragとonClickイベントを持つDOM要素のイベントを制御できた 前回までのあらすじ 今までの内容 Next.jsでTODOアプリを作成する日記① Tailwindを導入できた ComponentにPropsを渡せた Componentの中でPropsを使用できた Componentをループを使って表示できた React Iconsを導入できた Next.jsでTODOアプリを作成する日
エンジニア向け社内イベントのご紹介と運営を経験してわかったこと - 一休.com Developers Blog
こんにちは。宿泊プラットフォーム開発チームの菊地です。 一休では月に一度、社内エンジニア向けにIkyu Tech Talkを開催しています。2022年から始まり、ありがたいことに2024年3月で丸2年を迎えることができました。 この記事では、Ikyu Tech Talkの2年間のふりかえりをしていきます。 また、私は社内イベントの主催が初挑戦だったので、どうやったらイベントを盛り上げられるのかと悩んだときもありました。 そこで、同じように自分の会社でTech Talkを開催してみたい人に向けてイベント運営の知見もお伝えしたいと思います。 開催のきっかけ もともと定期的なプロジェクトの成果報告会はあるものの、業務で得たエンジニアリングの知見の共有をする場は設けられていませんでした。 あるとき「技術についてざっくばらんに話す場が定期的にあると楽しそう。一緒にやらない？」と声をかけてもらい、面白
6月19日、The New Stackに「Top 10 JavaScript Libraries To Use in 2024」と題した記事が公開された。この記事では、2024年に利用すべきJavaScriptライブラリのトップ10について紹介されている。 以下に、その内容を簡潔に紹介する。 React 強力なコンポーネントベースのアーキテクチャにより、複雑なユーザーインターフェースの開発が容易。 仮想DOMの実装により、パフォーマンスが向上。 豊富なエコシステムとコミュニティのサポートがあり、継続的な改善が期待できる。 Redux 予測可能な状態コンテナで、アプリケーションの一貫性を確保。 一方向のデータフローにより、状態管理がシンプルになり、デバッグが容易。 大規模なアプリケーションでのスケーラビリティとメンテナンス性を向上。 D3.js データをDOMにバインドし、データ駆動の変換を
この記事は ドワンゴ Advent Calendar 2023 の 13 日目の記事です。 自己紹介 こんにちは。バックエンドエンジニアのlenです。 現在私は社内で使用する教材入稿ツールを改修するプロジェクトに参画しており、そこではバックエンドの実装に加え、フロントエンドの実装も携わっています。 ここではなぜフロントエンドの実装をすることになったのか、またそこから得られたことなどを紹介していきます。 フロントエンドの開発をすることになったきっかけ 理由は2つあります。 1つはバックエンドセクション内でフルスタックな人材が求められていたことです。 2021年の時はバックエンドセクションとフロントエンドセクションというセクション分割をしており、バックエンドセクション内でサービスごとにグループが分かれているような状態でした。 外部ツールは良いのですが新しい内部ツールや内部サービスについても考え
コンピューティング基盤部の三吉（sankichi92）です。 アークエッジ・スペースでは、衛星リモートセンシング1による地球観測データ（以下、「衛星データ」）を活用したソリューションを提供する Web GIS2 アプリの開発をはじめました。 この記事では、プロジェクトの最初期にあたり、プロダクトのさまざまな可能性を高速に検証するために行った技術的な取り組みを紹介します。 Web GIS アプリをつくる背景 プロトタイプで検証するもの スモールスタートのための技術選定 SPA PMTiles GitHub Pages 開発をはじめてからの改善 React Router 導入 S3 + CloudFront 導入 Amazon Location Service 導入 プロトタイピングの結果 今後の課題と展望 データ基盤、ジョブ管理基盤 動的タイル生成への対応 解析の高度化 Web GIS エン
v5 で何が変わる？ 非同期状態管理ライブラリ TanStack Query の新機能と最適化 - Techtouch Developers Blog
はじめに 三行まとめ TanStack Query とは？ v5 アップデート内容の紹介 hooks のインターフェースの統一 Suspense の正式サポート v4 v5 Optimistic Update をシンプルに そもそも Optimistic Update とは？ デモアプリ Optimistic Update の実装例 v4 v5 まとめ 参考資料 はじめに こんにちは！テックタッチでフロントエンドエンジニアをしている tsune です。野球好きの自分は、この時期になるとプロ野球開幕が待ち遠しくなってきます⚾ 開幕戦のチケットも確保したので、当日は会社のメンバーと一緒に神宮球場に行く予定です🥳 この記事では 2023 年 10 月に正式リリースされた TanStack Query の v5 へのアップデート内容を紹介します！ また、その中でも Optimistic Upda
Zag.js が良いかもしれない
Zag.js を調べた背景 私は Chakra UI ユーザーなのですが、Chakra UI はスタイリング部分でランタイム CSS-in-JS（= emotion）を使用しているため、レンダリング時のパフォーマンス影響を考えると、どこかで移行するタイミングがありそうだと思っています。もちろん、Chakra UI がランタイム CSS-in-JS を捨ててくれれば移行は必要ありませんが、Chakra UI のロードマップを見たところ、明確にスケジューリングされていません（未来のどこかで移行はされそう）。そのため、移行先を探していたのですが、Chakra UI の作成者のアデバヨさんが作った Zag.js はとりあえず見とかないといけないよな、という感じで見始めました。 Zag.js が作られた背景 Chakra UI が抱えている技術的課題は先述の通り、ランタイム CSS-in-JS が内
先々月あたりに邦訳が出た『データ指向プログラミング』を読んだ。めちゃくちゃざっくり言うとオブジェクト指向における「データと振舞いの一体化」というドグマを手放させるもので、めちゃくちゃざっくり見るとC言語的な構造化プログラミングの世界に回帰するようにも見えることから、世間的には色々な評価があるらしい。 イミュータビリティが良い、みたいな話は重々承知なので適宜飛ばしながら読んだ。また、lodashまわりの話は単なるライブラリ紹介であり、特筆することがないので飛ばした。 こういう感じで言及されている zenn.dev slides.com 自分なりに読んで思ったことをまとめる。面白い本だったし、自分の思想にも近しいものがある。僕は普段ScalaやTSを書いているので、その観点からの感想が多いです。OOPの歴史に詳しいわけではないので、不足があったらすみません。 OOP以前の世界との差異 イミュー
Server Actions のフォームバリデーションにおいて useFormState でエラーメッセージを表示する
Server Actions のフォームバリデーションにおいて useFormState でエラーメッセージを表示する 2023.10.31 Next.js の Server Actions でフォームを作成する際に、どのような方法でバリデーションを行い、エラーメッセージを表示する際にどのような手段が考えられるでしょうか。プログレッシブエンハンスメントの恩恵を受けるために、サーバーサイドでバリデーションを行いその結果を表示する方法が効果的です。`useFormStatus` フックはこの一連の動作を行うために使用します。 Next.js の Server Actions でフォームを作成する際に、どのような方法でバリデーションを行い、エラーメッセージを表示する際にどのような手段が考えられるでしょうか。 最もシンプルな方法は required 属性や input type="email" な
はじめに この記事は、every Tech Blog Advent Calendar 2024(夏) の1日目の記事です。 DELISH KITCHEN開発部の羽馬(@NaokiHaba)です。 この記事では、DELISH KITCHEN チラシ で使用している Vuex の Pinia への移行について紹介します。 chirashi.delishkitchen.tv 本記事では、これらの知識があることを前提に説明を進めます。 Vue.jsの基本的な知識 Nuxt.jsの基本的な知識 Vuexの基本的な知識 Piniaとは Pinia（ピーニャ）は、Vue.js用の新しい状態管理ライブラリです。Vuexの次のイテレーションとして開発が始まり、Vuex 5に組み込むことを想定していたアイデアを多く取り入れています。 pinia.vuejs.org Piniaは、Vuexと比較して以下のような
はじめに N予備校 iOSアプリ開発チームに所属しているcoffmarkです。 iOSチームではSwiftUIを使って開発を進めています。 SwiftUI導入までの経緯については、ブログ記事(N予備校iOSアプリへ SwiftUI を導入するまでの道のりについて)で説明しています。 SwiftUI導入を進めていく中で、導入後に改善した点がいくつかあります。 今回はその中でもViewState列挙体を使ったSwiftUIの状態管理についてお話しします。 前提 (プロジェクト構成・SwiftUI実装方針のおさらい) N予備校 iOSアプリチームでは以下のような構成でiOSアプリを開発しています。 詳細はブログ記事(iOSチームではリファレンスレポジトリを運用しています)をご覧ください。 大まかな概要としては下記の通りのプロジェクト構成・SwiftUI実装方針です。 プロジェクト構成 RxSwi
年の瀬ですね。クリスマスの足音も近く、ピザなんかを頼んだら景気が良いかなと思ったので、GitHub 上で Issues を生やすとピザが頼める仕組み（workflows）を構築してみました。 本記事は mast Advent Calendar 2023 の 7 日目の記事です。6 日目は Hitoko T. 先生の記事「我が家に猫3匹がやって来た話｜Hiroko T.」でした。猫、癒やしですよね 折角のアドカレの機会ですから、GitHub 上でピザを頼むまでの過程を、GitHub や Web 技術、ピザ等に明るい方にも、そうでない方にもお楽しみいただけるように説明*1*2を進めていきます*3。少し長くなりますが、どうぞお付き合いください。 ピザ 突然ですが、みなさまはピザと呼ばれる食べ物をご存知でしょうか？ 初めてピザをご覧になられた方に向けて説明しておくと、小麦粉等を練って構成した生地を
LangGraphの基本的な使い方
この記事の概要 こんにちは。PharmaX でエンジニアをしている諸岡（@hakoten）です。 この記事では、大規模言語モデル（LLM）を活用したアプリケーションの開発を支援するフレームワークであるLangChain内にあるツールチェインの一つ、LangGraphについてご紹介します。 LangChainがどのようなものかについて知りたい方は、ぜひ一読していただけると幸いです。 ※ LangGraphは、LangChainとシームレスに連携できるライブラリですが、この記事ではLangGraph自体の入門内容に焦点を当てており、LangChainについては詳しく触れませんので、ご了承ください。 LangGraphとは LangGraphは、LangChainのツール群に含まれる一つで、各LLMエージェントのステップなどをグラフ化して状態管理を行うためのツールです。 LangGraphは、ス
技術構成 API: microCMS(ヘッドレスCMS) Next.js Vercel TypeScript はじめに プレビュー機能は、Next.jsのPreview Modeのおかげで、実装自体は簡単になりました。ですが、「現在どのプロセスを実行中で、どのシステムやサービスに対してどんな操作を行っているのか？」 の把握に少し時間がかかりました。 なのでこの記事では、プレビュー機能を実装する過程を分けて解説し、図解した上で今はどの過程かを示して書くようにしました。特に初めての方が迷わずに進められるように心がけました。 プレビュー機能とは？ プレビュー機能は、コンテンツの公開前に、そのコンテンツがウェブサイト上でどのように見えるかを確認できる機能です。この機能により、下書き状態や編集中の記事を、実際の公開環境と同じ条件下で閲覧することが可能となります。 プレビュー機能をどう実現しているか？
新卒配属2ヶ月目でChatGPTを活用した新規機能開発プロジェクトにアサインされた話 | MEDLEY Developer Portal
2024-03-29新卒配属2ヶ月目でChatGPTを活用した新規機能開発プロジェクトにアサインされた話はじめに自己紹介はじめまして。人材プラットフォーム本部プロダクト開発室第一開発グループの田中です。 私は、2023 年の 4 月に新卒エンジニアとして入社し、日本最大級の医療介護求人サイト「ジョブメドレー」のフロントエンドとバックエンドの開発を担当しています。 学生時代は情報系ではなく、経済学を専攻していました。プログラミングには大学の授業で出会い、主にデータ分析に用いる R や Python を触っていました。そのため Web アプリケーションの開発は行っていませんでした。 エンジニアという職業に興味を持ったきっかけは、大学院時代に参加したインターンでした。インターン先の会社ではエンジニアが誰もいなかったのですが、開発未経験の私に機械学習を使ったアプリの PoC を作れという、かなり破
【PGlite】WebAssemblyでPostgreSQLを軽量に - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに PGliteの概要 PGliteの特徴 PGliteを試す ブラウザで使う PGliteの速度計測 まとめ はじめに こんにちは！エンジニア２年目のTKDSです！ 今回はPGliteについて調べてみました！ 概要・使い方・速度実験・まとめの内容で記事は構成されています。 使ってみた結果として、軽量高速であり色々使いみちがありそうなツールだと感じました。 ぜひ最後まで読んでいただけると幸いです。 PGliteの概要 PGliteは、PostgreSQLをWebAssembly（WASM）にコンパイルした軽量なデータベースエンジンです。 これにより、ブラウザ、Node.js、Bun、DenoなどでPostgreSQLの機能を利用でき、開発者はローカルやサーバーレス環境でデータベース操作を行うことが可能です。 PGliteは、インメモリデータベースやファイルシステム（Node.jsやB
こんにちは、UPSIDERで日々モバイルアプリ開発をしているふっくです。 UPSIDERでは今後、よりアプリ開発に注力し決済プラットフォームの中核的な役割を果たすことを目指しています。 今回は、今後の開発・運用を目指して考えたFlutterアプリ向けのアーキテクチャを紹介します。 ネイティブアプリの世界で触れてきた色々なアーキテクチャ・フレームワークを参考に、開発の後半でも順調にスケールさせることができるように、工夫を凝らしました。 本アーキテクチャで作ったサンプルアプリもあるので、ぜひ以下のリンクから見てみてください。 https://github.com/upsidr/flutter_architecture_blueprint デモはこちら https://upsidr.github.io/flutter_architecture_blueprint/ 対象読者 目指すところ 参考に
【2023年版】数あるSwiftの非同期処理の実現方法をきちんと理解した上で使い分けよう - machio Development Diary
これは Qiita iOS Advent Calendar 2023 の13日目の記事です。 概観 背景 こんな人へ向けた記事 この記事で扱う非同期処理の実現方法 GCDを用いた非同期処理 GCDとは DispatchQueue DispatchQueueへのタスク引き渡し DispatchQueueの優先度 DispatchQueueの分類 (Private Dispatch Queue) GCDの使い方 Operation、OperationQueueクラスを用いた非同期処理 Operation、OperationQueueクラスとは Operation、OperationQueueクラスの使い方 タスクの定義とキューへの追加 タスク間の依存関係の設定 タスクのキャンセル GCDとの比較 余談：Operationクラスは単体でも実行できる Threadクラスを用いた非同期処理 Thre
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ジャンプTOON マンガビューワ を支える Flutter の技術
ゲーム開発に所謂なアプリケーション設計パターンを適用するのは難しい - hadashiA
カヤック発OSSカタログ - KAYAC Engineers' Blog
プレミアムプランの状態管理と決済ハンドリングの難しさ｜tsusowake
CodeMirror v6によるZennのMarkdownエディタの作り方
プログラミング１年目の2023年に勉強した技術・書籍の振り返り - Qiita
Reactの状態管理におけるuseReducerとuseContextの活用例
Ruby知識ゼロから初参加したRubyKaigi 2024レポート - 共沸
Vue / Vite 関連ライブラリー名の読み方 2024
プロンプトからREST APIを作るサービス『Hanabi.REST』の技術構成
Next.jsでTrello風タスク管理アプリを作成する日記⑤ - Qiita
【海外記事紹介】2024年に使うべきJavaScriptライブラリ10選
バックエンドエンジニアがフロントエンドの開発をすることになった話 - ドワンゴ教育サービス開発者ブログ
サーバレスではじめる Web GIS アプリのプロトタイピング - ArkEdge Space Blog
『データ指向プログラミング』読んだ / OOP以前とDOPとの対比と差分などについて - Lambdaカクテル
Vuex から Pinia への移行を行いました - every Tech Blog
N予備校 iOSアプリのViewState列挙体を使ったSwiftUIの状態管理 - ドワンゴ教育サービス開発者ブログ
GitHub Actions を回してピザを頼みたい - いなにわうどん
Next.jsのPreview Modeを使ってmicroCMSのプレビュー機能を実装してみた
UPSIDERのこれからを担うFlutterアプリのアーキテクチャ - UPSIDER Techblog