サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
デスク環境を整える
zenn.dev/aishift
React19のRCが発表され数ヶ月が経ちました。Next.jsではReact19のExperimentalな機能を使った実装をいち早くしていたので、少し馴染みのあるアップデートが多かったように思います。 Next.js(特にApp Router)においてReact19のAPIやHooksをどのように使うべきかはNext.jsのドキュメントを見れば大体のベストプラクティスが見えてきます。ですが、実際の開発現場ではApp Routerを採用しているケース以外にもVite+ReactやPages Router, Remixなどと様々な実装があるのが現実です。 そこでこの記事では、特にVite+Reactのスタックを前提にReact19の新機能をいかに活用できるか整理したいと考えています。 また、React19の新機能を見た時にTanStack QueryやSWRのようなサードパーティの状態管理
zenn.dev/noko_noko
背景 Next.js に App Router が導入されてから1年近くが経ちました。しかし、未だに App Router を前提として設計のベストプラクティスが定まっておらず、身近なフロントエンドエンジニアはみな「まだプロダクトに取り入れるには考えることが多いよね」という共通認識のまま止まっているような気がしています。 また、App Router が導入されるまでは、技術選定の無難な選択肢として Next.js が最有力でした。しかし、現在は App Router の設計のプラクティスが未発達なことや、オーバースペックであるという見方が出てきており、検討しなければならないことが多くなったように感じます。 そうした中で、ではその懸念というのはどのようなものがあり、導入しずらい要因に何があるのか、というところが、今回執筆を行う上での背景になります。 App Router導入で考えないといけな
zenn.dev/bony_chops
実は 学校課題の要件を見間違えており、使用するバックエンドが Django ではなく Flask だったため書き直しました😇😇😇😇😇 Django版はこちら はじめに みなさん、マイクロサービスに疲れていませんか? バックエンドにFlask, Laravelをたてているのに、フロントエンドで別途Next.js(Node.js)をたてているのが意味わからん モダンにWebサービスをたてたいだけなのに、なぜAPIを解放しないといけないのか [Flask React アプリ構築] [検索] 単純にバックエンドはFlask, フロントエンドにReactを使いたい、それだけなのに、こんな複雑な構成にしないといけないの...? 今回ご紹介するモジュラモノリスなアーキテクチャでは、以下のようにサクッとWebサービスを構築できます。 from flask import Flask from fl
zenn.dev/beingish
PPR の登場でだいたい登場人物が出揃ったかな、というタイミングのため、一度まとめる。 左が古いもの、右が新しいもので並べている。 これらの目的 いたずらに登場人物を増やしているわけではなく、解決したい課題に対する解法としてこれらがある。というわけで、そもそもこれらが出てきた目的に立ち戻って考えてみる。 と言っても特に難しいことはなく、すべてユーザーからのリクエストを起点としてできるだけ速くユーザーが画面を操作できるようにするためのものだ。特に最近出てきたものほどその傾向が強い。 速度にこだわる理由は、コンバージョンや売上の減少を回避するためが大きいだろうか。ユーザーが短い時間で目的を達成できるのであればそれに越したことはないし、ともすればロイヤルティも向上する。 待ち時間は少ないほうが良いのか? ここではどういった状況であっても待ち時間は少ないほうが喜ばしいという推測に立っている。が、す
zenn.dev/streamwest1629
今日は最近 Terraform Module に感じていた使いにくさの理由と、その克服方法について AWS VPC を構築しながら整理していきます。 世間で使われる Terraform Module に対する違和感 早速ですが、巷で使われている Terraform Module に対して感じた違和感を挙げていこうと思います。 具体例があるとよりわかりやすいかと思いますので、 terraform-aws-modules/vpc/aws を例に取りながら見ていこうと思います。
zenn.dev/eng_o109
Goって静的型付けで処理速度早いのが特徴でしょ?と、ざっくりしかイメージできていなかったので、具体的にどんなメリットがあるのか?調べて見たのでそのメモ 1. 処理速度が速い プログラミングの実行には、「インタプリタ」と「コンパイル(ラ?)」の2種類があって、インタプリタ(Ruby, Pythonなど)は、コード1行ずつ翻訳→実行をするのに対し、コンパイル(Java, Go etc)は、全て翻訳してから実行する。という違いがあって、 なので、コンパイル方式のほうが効率がよくて、速いというわけらしい。 (そう考えるとRubyとかってめっちゃ非効率なのね。。) 2. 統一性のあるコードになりやすい Goは、型指定やシンプルな構文であるため、開発者の癖のあるコードが生まれにくいよう。 なので、規模の大きい会社だと良さそうですね 3. エラーに気づきやすい 型を書くから、事前にエラーに気づきやすい。
zenn.dev/sutefu23
前書き エンジニアを始めて14年、独立して9年経つ。 この仕事を始めた時に「さすがに眼が悪くなるかな」と思ったが、40過ぎていまだに裸眼1.5/2.0だ。(昨年はどっちも2.0。) ↓今年の検査結果(右列が昨年) これはなんなら、始めた時より眼が良くなっている。(始めたころは1.2/1.5だった。) 先日知人のエンジニアと話していると、彼は200人規模のエンジニアを抱える会社でリーダーをしているが「メガネをしてないエンジニアなんて会った事ない」と驚かれた。 実はそこに秘訣があるのでシェアしたい。 ちなみに妻はこの方法で片目だけだが0.9 → 1.2になった。 結論 「平行法を覚えろ」 これに尽きる。 遺伝の影響か ちなみに自分の親族・家族は実は須らく眼が悪い。 逸話的にも、若くして眼鏡を掛けていた父が、母をお見合いで最初に見た時に、「こいつも眼鏡掛けてる。」「もし子どもが出来ても全員目が悪
zenn.dev/nari007
はじめに GPT-4o miniが発表されたので、APIを使ってNext.js App routerにて簡単なAIチャットページを実装してみました。Vercel AI SDKを使用しています。 以前にも記事を書きましたが実装内容が古くなりましたので新たに記事にしてみました。(今回はLangChain JSは使っていません) GPT-4o mini また、今回はローカルLLM(Ollama)でも利用できる内容としています。 ※ マシンスペックが足りないなど環境がない方は、Ollamaの部分は読み飛ばしてください。 以前の記事 読者対象 Next.js開発の経験者 事前準備 OpenAI プラットフォームから API キーを作成&取得しておく。 https://platform.openai.com/ Ollamaも使いたい場合は起動しておきます。 参考ドキュメント コードを書く ステップ N
zenn.dev/acntechjp
今さらながらGoogleの「NotebookLM」を触ったら、インターネットサーフィンが普通にそのまま"仕事"になった話 6月頭くらい? にGoogleがリリースして話題になっていた、自分専用のRAGが簡単に組めるLLMツール「NotebookLM」ですが、そのうち触ろうと思いつつも、「またRAGか」「どうせRAGでしょ? 知ってます」みたいな気持ちでいたら腰が重くなってしまい、いつのまにか一ヶ月くらい経ってしまっていました。 そして今日、たまたまちょっと時間が空いたので触ってみたんですが、想像していたよりもずっと楽しくてすごかったので書き残したく思った次第です。ちなみにこれ↓ NotebookLMってファイルとかURLとかかなりの量放り込めて、放り込まれただけ参照できる(しかもかなり精度高い)っていうツールなんですが、これの何がすごいというと、インターネットサーフィンをしながらおもしろい
zenn.dev/funteractiveinc
はじめに フロントエンド開発において、効率的かつ一貫性のあるモック生成は非常に重要です。本記事では TypeSpec、Orval、Storybook の 3 つのツールを使用して自動生成でモックを実現する方法を紹介します。 TypeSpec は、大規模な API を提供するために Microsoft が開発し、使用している新しい API 記述言語です。 Orval は、OpenAPI 仕様から TypeScript のクライアントコードを生成するツールです。これにより、最新の API 仕様に基づいたクライアントコードを常に保持し、API との通信がスムーズに行えるようになります。 Storybook は、コンポーネントを独立して開発・テストするためのインタラクティブなツールです。コンポーネントの見た目や動作を個別に確認できるため、UI の一貫性を保ちながら効率的に開発を進めることができます
zenn.dev/socialplus
はじめに TypeScriptには新しい機能がたくさん追加されていて、どれを使うか迷うことがあります。本ブログでは、次の開発にすぐ使えそうなTypeScriptの面白い機能をいくつかピックアップして紹介します。 using キーワードでリソース管理をシンプルに こちらは C# の using や Python の with と同じものです。 using が導入される前は、以下のようにリソース管理を行いました。 export function doSomeWork() { const path = ".some_temp_file"; const file = fs.openSync(path, "w+"); try { // use file... } finally { // Close the file and delete it. fs.closeSync(file); fs.unl
zenn.dev/levtech
これはなに ども、レバテック開発部のもりたです。 もりたはデータベースが好きなんですが、最近は特にAWS RDS/Auroraでのモニタリングとパフォーマンスチューニングについて興味があります。ただ、これらのうちモニタリングは扱っている話題が若干ローレベルであまりピンとこず、またチューニングもどこから手をつければいいのかわかりませんでした。 この記事では、もりたがモニタリング&チューニングを学習する上で役に立った書籍やWeb上の資料をロードマップ形式で紹介していきます。対象読者はDBのモニタリングとチューニングをやりたいけどどこから手をつければいいか分かんないなとなっている人、ゴールはそんな人がモニタリング&チューニングの第一歩を踏み出せることです。 スコープ 今回扱うもの、扱わないものは以下の通りです。 扱う モニタリング&チューニングの概要 モニタリングの前提知識 チューニングの前提知
zenn.dev/yuta28
序論 先日IaCをオーケストレーションしてくれるツール、Terramateについて紹介しました。 この時はクイックスタートということでnullリソースを使ってTerramateの動作確認程度のハンズオンを実施しました。 今回は複数のStateファイルで分割され、CI/CDパイプラインの処理に時間がかかるようになったTerraformリソースをTerramateを活用して、変更差分があった場所のみ検知してapplyを実行するCI/CDパイプラインの構築について紹介いたします。 対象読者 Terramateを使ったCI/CDパイプラインの構築に興味がある人 Terraform(OpenTofu)の基礎知識がある人 GitHub Actionsの基礎知識がある人 IaC(Terraform)導入後の課題についておさらい Terramateの概要については私の記事や本家ドキュメントを読んでもらえま
序論 先日LinkedInで面白そうなIaCツールを紹介してもらいました。 マネージドサービス版はまだクローズドベータで一般利用できませんでしたが、GitHubにCLI版がオープンソースとして公開されておりました。 一見、Terraformの実行を代行するTerragrunt[1]のようなラッパーツールかと思いましたが、Terramateは単なるラッパーツールではなくオーケストレーションツールとしてIaC開発を楽にしてくれるさまざまな機能が提供されていましたので、Terramateを使ったIaC開発について紹介いたします。 対象読者 複数のIaCツールの管理に苦労している人 (後述のハンズオンのため)Terraformの基礎知識がある人 Terramateについて 創業者のブログを見ると2022年5月にリリースされた比較的新しいGo製の開発ツールのようです。 ドキュメントではTerrama
zenn.dev/praha
会社でNeverThrowというライブラリを使っています。 とても便利なので、とても便利だよ〜という記事を書きます。 NeverThrowとは? NeverThrowは、TypeScriptで「Result型」を実現できるライブラリです。 Result型とは? Result型は、関数の中でエラーをthrowする代わりに、エラーを戻り値として返すようにすればいいじゃね?な仕組みのことをいいます。 もっと噛み砕いて説明します。 たとえば「50%の確率で足し算してくれるけど、50%の確率で💩をthrowする」という関数があるとします。 コードで表すと👇になります。 function add(a: number, b: number) { if (Math.random() >= 0.5) { throw new Error('💩'); } return a + b; }
zenn.dev/takuyaot
本内容は実際に「Microsoft Entra ID」のテスト環境を構築してみよう!これから触ってみよう!という方に向けて、基本的な設定と操作をガイドします。 本書では Microsoft Entra ID の基本機能を想定しています。 ライセンス的には Free や Entra ID P1 あたりとなります。 なお本内容は著者自身の所属する会社は関係なく、いちエンジニアとして情報を共有するべく提供しておりますので、勉強用途でご利用くださいませ。 スムーズに Microsoft Entra ID の環境を作るのにお役に立てれば幸いです😉
zenn.dev/team_soda
先日、他社のFlutter製のアプリを触っていて、よくできているなーと感心していました。 いい意味でFlutter感がないなと。 しかし、そのことをデザイナーの友だちに伝えたところ、「まだFlutter感ある!」と言っていたのです。 さすがデザイナーだなと感心していたのですが、その視点はどこに向けられているのかを深掘りしてみました。 角丸に現れるFlutterっぽさ この2つのオブジェクト、よく見ると微妙に角丸が違うのがわかりますでしょうか。 右の方が優しい印象を受けます。 この2つの違いはCorner smoothingを取り入れているかどうかになります。 もうちょいわかりやすいようにオブジェクトを重ねてみました。 どちらもRadiusは20pxですが、青色の方ははCorner smoothingを取り入れています。 青色の方が丸くなっていく角度が滑らかになっています。 角を滑らかにする
zenn.dev/bm_sms
それぞれが折りたたまれていてコメント全体がコンパクト リソースの数が増えてもコメントが縦へ長くなることはありません。 開けばこのように表示されます。 危険な操作(削除・更新)があったときにわかりやすい 削除や更新があった場合は画像のようにその部分だけは折りたたまず表示してくれます。 日本語なので読みやすい(日本人にとって) いい感じのコメントにするための tfcmt.yml 基本的に公式ドキュメントのDefault Configurationを日本語化して上記の修正を加えただけです。 なので、もとの英語表記がいいとか、特定の機能だけ取り込みたい、という方は以下と公式のDefault Configurationでdiffを取ると特定の機能だけ取り込みやすいと思います。 embedded_var_names: [] templates: plan_title: "## {{if eq .Exi
zenn.dev/ml_bear
みなさん、こんにちは! Twitterでも告知させていただきましたが、2024年7月18日に 「つくりながら学ぶ!生成AIアプリ&エージェント開発入門」 を出版しました。今回は宣伝がてら、本書の特徴や執筆の経緯について少しお話させていただきます。 執筆の経緯 この本の原点は、昨年出版したWEB Bookにあります。このWEB Bookは、LLM初心者の方でも躓かないよう、ステップバイステップで解説し、実際に「作って動かす」という体験を重視した内容でした。 今回の書籍でも、この「つくりながら学ぶ」スタイルを大切にしています。技術的な詳細は必要最小限に抑え、実践を通じて理解を深められるよう工夫しました。 WEB Bookが予想以上に好評だったことがきっかけとなり、マイナビの編集者さんからTwitter DMでお声がけいただいたのが、この本の始まりでした。当初は、AIエージェントの章を追加するだ
zenn.dev/chot
はじめに とある日のメール。 「何か100%いって従量課金始まっているなぁ…」と不思議に思い調べていたところ、VercelのProプランの新料金体系の発表が4月にあり、そこから約2ヶ月後の6月分(5/25〜6/25)から新料金体系になっていたことが分かりました。 今回の新料金体系で、「帯域幅(bandwidth)」と「機能(functions)」が細分化され、より具体的な項目に料金がかかるようになりました。 以下はVercelからのお知らせに書いてある2文です。 We're reducing pricing on Vercel fundamentals like bandwidth and functions For the majority of customers, monthly bills will remain the same or decrease 「帯域幅と機能の料金が改善
これは「Developer eXperience Day 2024」のLightningTalk枠での登壇内容について、 口頭で話したことを補足しつつ、その他話せなかったこと含めてドキュメントにまとめたものです。 余談ですがDXD2024は初日のトラックレコードさんとログラスさんのワークショップがイチオシでした。 DXD参加の皆様、運営の皆様、お疲れ様でした。来年も楽しみです。 TL;DR コミットできる経営層を巻き込み、開発組織に信頼を輸入するとよい Who:巻き込む狙い目→「目標の時間軸が長い人」 How:①知識 + ②可視化 + ③追体験 = コミット 自己紹介 レバテックでDevRel責任者をしているヤマモトヒロキと申します。 キャリアとしてはBiz畑から来ており、その後PdMを経て、 現在は事業企画の責任者として、経営戦略の策定や全社課題解決の推進をしています。 1年ほど前から、
zenn.dev/apple_yagi
Background これまでVitestでコンポーネントのテストを行う時は、jsdom や happy-dom を使ってブラウザ環境を偽装していました。しかし、偽のブラウザ環境を使うことは多くの問題があり、また開発者はテスト以外でどこにも存在しない環境を作り上げるという不毛な作業が必要でした。 この問題を解決するために、Playwright や Cypress などのテストフレームワークは Component Test をサポートしています。しかし、UnitテストでPlaywrightやCypressを使うのは少々Fatであり、Reactのhooksなどのテストをすることができません。 Vitest Browser Modeを使用することで、Vitest上でComponent Testが可能となり、これらの問題を解決できます。 Installation Browser ModeのSetu
zenn.dev/calloc134
はじめに こんにちは。calloc134 です。 前回の授業内ハッカソン記事において、200 いいねを頂きました。ありがとうございます! 自分の大学では、これ以外にも授業内で開発を行う実践的な授業がいくつか存在します。 前回の授業とは別に授業内開発を行う機会があったため、半年ぶりに大学の授業として開発を行いました。 簡単な概要 この授業では、チームで開発の分担を行いながら決められた期限までにコンテンツを制作していきます。自分は後輩とチームを組み、開発を行いました。 本来であればここで開発する内容は静的サイトで十分なのですが、せっかくなので動的サイトを作ることにしました。 後輩に聞いてみたところ、 「自分は軽音楽部に所属しているので、練習室の予約システムを作りたい」とのことでした。 丁度いい機会だと思い、自分の気になっている技術を利用しながら開発を行っていくことを決めました。 全体像 まずは
zenn.dev/firstautomation
ロボットを工場に導入する際の仕様書を書いてもらうというお題です。 このお題の回答のポイントとしては以下のような点が挙げられます。 仕様書の構成がしっかりしているか(項目・章立てがちゃんとしていて見やすい、網羅性があるなど) 必要な装置やシステムが列挙されているか(ロボット、安全装置、ベルトコンベア、操作パネルなど) 予算やスケジュールに関する記述があるか(どういう順序で進めようと考えているか) 注意すべき法律や環境面への考慮(特に食品工場として) がされているか(ISOやIECの規格、衛生面、防水など) ローカルLLMの前にGPT-4oを使って回答させてみた結果が以下になります。 ## パレタイズロボット導入仕様書 ### 1. はじめに 本仕様書は、食品工場におけるパレタイズロボットの導入計画および必要な要件を明示するものである。目的は、効率的かつ高精度なパレタイズ作業を実現し、生産性の
zenn.dev/kohii
ドメインイベントを扱う実装は様々な流派があり、本記事ではなるべく一般的なものを取り上げたいと思っていますが、あくまで一例です。 実装例は Kotlin を使っていますが、他の言語でも同様の実装が可能です。 ドメインイベントとは イベントとは「過去に発生した出来事」であり、ドメインイベントは「ビジネスドメイン上で発生した重要な出来事を表すメッセージ」です。 (例: チケットが割り当てられた、注文がキャンセルされた) ドメインイベントはシステム内の状態の変化(=集約の状態の変化)を表現するものであり、通常は集約がドメインイベントの発生源となります。 用途 ドメインイベントは主に次のような目的で使用されます。 1. イベントの発生を起点に、別の処理をトリガーする ドメインイベントは、システムの異なる部分間を連携させるために使用されます。 ドメイン上の要件として「...したら...する」のようなフ
zenn.dev/gemcook
はじめに 昨今、ビルドツールは様々なものが開発され、いかに高速化するか、開発者体験を上げられるかが注目されているように思います。2024年6月にState of JSが公開され、その中でBuild Toolsはwebpackが最も使用されており、次いでViteがランキングしています。 Viteの伸びがすごいですね...🔥 ビルドツールも様々ありますが、2024年4月にFarmというWeb Bandlerのv1.0がリリースされました。 気になってドキュメントサイトを覗いてみるとなんだか良さげな雰囲気を感じたので、Farmの特長と推せるポイントをまとめてみようと思います。 やること、やらないこと やること Farmの紹介 Farmの特長とおすすめポイントの紹介 やらないこと Farmの導入方法や詳細について (ドキュメントがわかりやすい) Farmとは? Farmは、webpackやVit
zenn.dev/kou_pg_0131
たまに言っちゃうので自戒も込めて。 正しくは「Google Cloud」 2 年以上前に公式からアナウンスが出ています。 Google Cloud Platform が Google Cloud に名称変更 お客様のエクスペリエンスをシンプルにし、プロダクト間の一貫性を保つために、Google Cloud Platform は Google Cloud という名称になりました。 (以下略) Google Cloud の新しくなったホームページのご紹介 | Google Cloud 公式ブログ さらに、 Google Cloud Japan の Zenn Publication の記事内でも以下のように紹介されています。 コラム: Google Cloud? Google Cloud Platform? GCP? (中略) 実は 2022 年の 6 月に、公式ブログ でブランディングが変更さ
export const tagSchema = z.object({ name: z .string({ required_error: "Name is required" }) .min(3, "Name is too short") .max(100, "Name is too long"), }) export type TagSchema = z.infer<typeof tagSchema> 一つポイントを挙げるとすると、このクライアント・サーバー間で使用するスキーマを use-tag-form.ts ファイル内で定義していない点です。 通常、状態管理やクライアントサイドのバリデーション検証を含むフォームコンポーネントはuse clientディレクティブを使用して Client Component として実装されます。同様に、そのコンポーネントで使用されるカスタムフックもクラ
はじめに はじめまして!レバテック開発部でレバテックプラットフォーム開発チームに所属している塚原です。 直近に認証・認可周りの改修を予定しているため、チーム内で認証・認可の基礎からOAuth・OpenID Connectの仕組みを学ぶ勉強会を実施しました。今回はそこで学んだことのうち、認証・認可の基礎とOAuthの仕組みをまとめます。また、WebフレームワークとしてHono、JavaScriptランタイムとしてBunを使って、OAuthクライアントを実装してみます。 対象読者 認証と認可の違いってなんだっけ...?という人 Basic認証やDigest認証てなんだっけ...?という人 OAuthはライブラリ使って実装してるから仕組みよくわかっていない...という人 OAuthのクライアントの実装って何をすればいいんだっけ...?という人 認証・認可の基礎 2024/7/18 追記 こちらで
次のページ
このページを最初にブックマークしてみませんか?
『Zenn|エンジニアのための情報共有コミュニティ』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く