こんにちは、ダイニーの Feature team でソフトウェアエンジニアをしている @ta21cos です。 最近は新規事業である決済関連の機能の開発をメインに行なっています。 ダイニーにおける Feature team は機能にフォーカスした開発・運用を行っているチームです。最近は複数の事業毎に Unit として分かれて開発を進めています。 本日は、普段の開発で実際にあった Pull Request のレビューコメントから得た学びについて紹介します。 Dialog を実装しよう React を使ってある Dialog を作成するため、以下のようなコードを書きました（コードは簡略化しています）。 // useSample ファイル // 内部でロジックと Dialog を同時に定義している hook const Dialog = memo<{ progress: number, ...
TVer で Web フロントエンドエンジニアをしている永井です。 この記事は TVer アドベントカレンダー 2024 19 日目の記事です。 18 日目の記事は @k0bya4 さんによる 「Atlasを使った宣言的マイグレーションでDBスキーママイグレーションを自動化する」 でした。 19 日目の記事では、Web フロントエンドチームの内製化について紹介します。 ※ TVer の Web フロントエンドは、広告プロダクトである「TVer 広告」の配信システム・広告周辺領域の開発を行うチームと、tver.jp といったユーザー向けのプロダクトを開発するチームの 2 つあり、今回の話は後者に関するものとなります。 はじめに 現在 TVer の Web フロントエンドチームでは、tver.jp の フロントエンドを開発をしています。2024 年 12 月時点では、 3 名の正社員と 1 名
Dockerでバインドマウントするのやめません？もうCompose Watchでいいでしょ？Docker composeの新機能を使い倒そう
はじめに Docker × VueやReactなどを使用して開発を行う方は多いかと思いますが、その際結構ハマるのがnode_modulesあたりではないでしょうか？ 特にnode_modulesをバインドマウントすることによって、ホスト側のnode_modulesが空になったり色々とややこしいですよね。沢山の賛同の声ありがとうございます！そうですよね！(🤔) 実はDocker compose 2.22.0以降で使用可能となったCompose Watchの機能を使えば、ややこしいバインドマウントのことを考えなくても良くなったりします。 またnode_modulesに焦点を当てていますが、Compose Watchで以下のことが可能なので多くの人のためになるかと思います！ ホスト側のファイルの変更をコンテナに反映させる package.jsonに変更が入ると自動で再buildしてくれる ぜひ
新規プロダクト開発では新しい技術をどう採用するのか？ カオナビでの運用経験をリスクヘッジに生かし挑戦を成功に導く！〔ヨジツティクス開発者インタビュー〕 - はてなニュース
株式会社カオナビでは、社員の個性や才能を発掘するタレントマネジメントシステム「カオナビ」を主力プロダクトとして、HR領域の機能開発に2012年から注力しています。 そして2024年4月、隣接する経営管理領域のSaaS「ヨジツティクス」を独自に開発してリリースしたことで、マルチプロダクト戦略にかじを切りました。 現在の開発組織で新規プロダクトの経験がない中、どのようなことに気を使いながら開発を進めたのでしょう。プロダクトオーナーを務める福田健（ふくだ・けん）さんと、フロントエンドでの技術選定などをリードした別城慎治（べっき・しんじ）さんに話を伺いました。 ※この記事は株式会社カオナビによるタイアップ広告です。 カオナビ エンジニア採用サイト テクノロジーで社会の仕様をアップデートする 採用サイトを見る スプレッドシートに限界を感じて予実管理を楽にしたい Next.jsでApp Routerの
ファインディ株式会社でフロントエンドのリードをしております 新福(@puku0x)です。 この記事では、ファインディで導入しているモノレポ管理ツール「 Nx 」について紹介します。 モノレポとは Nxとは Nxワークスペースの作成 Nxの機能 コード生成 変更検知 依存関係の管理 キャッシュ機構 自動マイグレーション まとめ モノレポとは モノレポは全てのコードベースを単一のリポジトリで管理する手法です。 monorepo.tools コードの共通化や可視化、ツール・ライブラリの標準化、一貫性のあるCI/CDパイプラインを構築できるといったメリットがあります。また、マイクロサービスと相性が良いとも言われています。 circleci.com ファインディでは主にフロントエンド系のリポジトリをモノレポとして運用しています。 アプリケーションとそれに関連するフィーチャー、UIライブラリがひとつに
別名：お互い様子見タイム 採用する気があるのかないのか、応募する気があるのかないのか、お互い探り合う微妙な時間。仕事の話をしつつも、何となく雑談っぽい空気を装う場。面接とは言わないけど、失敗したら次はないやつ。 大作と言えるほどの「エンジニア向け採用デッキ」を見せられては、「技術スタック」という1ページだけでその会社の格付けを一瞬のうちに脳内で行っている自分に気が付いた2024年の末。 この記事では、そんなことを考えている筆者の頭の中を、徒然なるままにChatGPTと共に文字に言語化した記事になります。 1. ミッション？それより技術スタックを見せろ 会社のミッションが社会貢献でも、DX推進でも、環境保護でも構わない。でもその前に知りたいのは、 「その目標を達成するためにどんな技術を使っているのか？」 だ。 例えば: フロントエンドは何？ React？Vue？ まさかのjQuery？ 今は
UI用のアニメーションがかわいくて楽しい！ 商用利用も無料、アニメーションで動くアイコン素材 -pqoqubbw/icons
WebサイトやスマホアプリのUIデザイン用にかわいくて楽しいアニメーションで動くアイコン素材を紹介します。 ハンバーガー用の×に変化するアニメーション、＠を一筆書きで描くアニメーション、時計の針がくるくる回るアニメーションなど、ReactのモーションライブラリFramerを使用した動くアイコンがたくさん揃っています。 beautifully crafted animated icons pqoqubbw/icons -GitHub pqoqubbw/iconsは、Webサイトやスマホアプリのプロジェクト用に美しいアニメーションで動くアイコンのコレクションです。MITライセンスで、個人でも商用のプロジェクトでも無料で利用できます。 アニメーションで動くアイコンは、下記ページから。
この本の概要 GitHub CopilotやChatGPTなど生成AIによるコード生成やコードリーデイング支援が流行っています。これらは破壊的なイノベーションで，いずれはすべての開発者や企業が導入するものです。 ただ，現状では生成AI×コードを推進・導入している企業は多くはなく，さらに活用法については手探りの状況です。 本書では生成AI×コードでなにができるか，どうすればよりよく活用できるかを解説します。しっかりと活用していくための知識と，現場で活用できる実践が身に付く必携の一冊です。 本書のサンプル 本書の紙面イメージは次のとおりです。画像をクリックすることで拡大して確認することができます。 1. 生成AIがエンジニアリングの常識を変える 1. 変化は「今」起こっている — さて，どうする？ 2. 生成AIへの過度な期待と現実のギャップ 3. プロンプトエンジニアリングのテクニックはあま
HotwireとNext.jsをちゃんと見て比較しよう#本サイトでは、React/Next.jsに詳しいフロントエンドエンジニアを対象に、実際に動くコードと実際に動くデモを体感しながら HotwireとReact/Next.jsを比較します。 各技術でのUIの作り方を伝えるだけでなく、さまざまな状況での動きを確認していただくために、仕組みや限界も紹介します。そのため、かなり細部の議論もしています。 HotwireでもNext.jsと同等か、それ以上のUI/UXが実現できます。「Hotwireは簡単だけど、React/Next.jsの方が優れたUI/UXが作れる」というのは、かなり特殊なものでない限りは誤解ですHotwireはバックエンド非依存です。Rails, Laravel, Django, Go, Nodeでも関係なく動きます。実際、本サイトのHotwireコードはNext.js AP
画像生成AIの話題を席巻している、Black Forest Labs（BFL）の「FLUX.1」。画像生成AIの新世代モデルとしてコミュニティーの強い支持を集めつつありながら、モデルそのものはVRAMがリッチでないと十分に使えないという条件のため、ユーザーのシフトをにらみ、各社が一斉に公式APIを使ってのFLUX.1へのクラウド対応を進めビジネス化を図ろうとしている印象です。BFLが成功するためには何が重要なのでしょうか。 クラウドサービス化していくFLUX.1 FLUX.1を使った画像生成AIサービスが次々に立ち上がってきています。たとえばその1つがFlux AI Image Generator。FLUX.1の各種モデルで画像生成できるようになっています。面白いのが「Flux AI 画像プロンプトジェネレーター」という機能を備えているところ。「猫」とテキストを入力すると（日本語でも可）、
国産ヘッドレスCMSとして注目されているmicroCMSとNext.jsを使用したWebサイトのモダンな制作方法を学べる解説書 -モダンWebサイト制作入門
※本ページは、アフィリエイト広告を利用しています。 国産ヘッドレスCMSとして注目されている「microCMS」とJavaScriptフレームワーク「Next.js」を使ったモダンWebサイトの制作について初心者でも分かりやすく解説した入門書を紹介します。 当ブログはWordPressですが、ここ数年ヘッドレスCMSに注目が集まってきています。ヘッドレスCMSって何？という人からNext.jsは使ったことがないという人でも本書でしっかりと学ぶことができます。 著者陣は非常に豪華で、microCMSの開発陣です。開発者と聞くと開発側の目線なのでは？と心配になるかもしれませんが、実装者目線のステップバイステップで架空のコーポーレートサイトを実装しながらmicroCMSとNext.jsを用いたWebサイトのモダンな制作方法を学べます。 WordPressは使ったことがあるけどヘッドレスCMSは初
インストールが完了したらアドレスバーに chrome://flags と入力して設定画面を開きます。以下の 2 つのフラグを設定します。 Enables optimization guide on device: Enabled BypassPerfRequirement Prompt API for Gemini Nano: Enabled また、あらかじめ Gemini Nano のモデルをダウンロードしておく必要があります。アドレスバーに chrome://components/ と入力して Optimization Guide On Device Model の「アップデートを確認」をクリックします。 Gemini Nano を使ってみる それでは、Gemini Nano を使ってみましょう。以下のコードをコンソールに貼り付けて実行します。 const canCreate = aw
関数型まつり：新たな関数型プログラミングのテックカンファレンスを開催します！ - 関数型まつり運営ブログ
こんにちは！関数型まつり 運営チームの池田です。 このたび、ScalaMatsuriが進化し、新しい関数型プログラミングのカンファレンス「関数型まつり」を開催することをお知らせいたします！🎉 関数型まつりとは？ 関数型まつりは、プログラミングにおける「関数型」の思想や技術にフォーカスした新しいテックカンファレンスです。 言語に限定されることなく、あらゆるプログラミング言語の壁を越えて、関数型プログラミングというものについて広く学び共有する場です。たとえば、あなたがHaskellを愛する開発者でも、JavaScriptで関数型っぽく書いているフロントエンドエンジニアでも、あるいは「関数型って興味あるけどよくわからない」という初心者でも、きっとこのイベントで新しい発見があるはずです。 イベント詳細 イベント名 関数型まつり 開催時期 2025年夏頃 開催場所 都内 なぜ「関数型まつり」を今や
フレームワーク「Svelte」「Solid」が話題。画期的だった仮想DOMと脱仮想DOMへの流れ 2024年4月8日 執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表
OCHaCafe Season8 #2の資料です。 https://ochacafe.connpass.com/event/308830/ セッションアーカイブ動画：https://youtu.be/Ywd2J3GZ8wQ
Next.js の App Router を中心に解説した書籍を執筆しました。「実践 Next.js —— App Router で進化する Web アプリ開発」という本です（3/16 刊行）。本稿では書籍の概要と、App Router が何を解決するのかについて紹介します。 書籍の概要 書籍で解説しているサンプルコードは、public リポジトリで既に公開しています。前半、第 1 章〜第 4 章では App Router の基礎を抑えるための練習用リポジトリを使用します。後半、第 5 章〜第 10 章では、写真を投稿する SNS「Photo Share」という架空アプリの実践的リポジトリを使用します。 第 1 章：Next.js の基礎 第 2 章：Server Component とレンダリング 第 3 章：App Router の規約 第 4 章：Route Handler 第 5
自前のJSX実装を作るために必要な全ての知識
JSX対応ライブラリをTypeScriptで作る方法を解説します。古い知識は省きつつも、必要な知識を全てお伝えします。
【フルスタックエンジニアへの道！】ReactとTypeScriptの修行をした話 - Findy Tech Blog
こんにちは、ファインディでFindy Team+（以下Team+）を開発しているEND（@aiandrox）です。 普段はバックエンドの開発をメインで担当しているのですが、3ヶ月間フロントエンドの開発に挑戦する機会がありました。短い期間でしたが、フロントエンドテックリードから直接指導してもらいながら実装をすることで、フロントエンドの開発を一人でできるくらいに慣れることができました。 今回は、その経験と学びについて書いていきます。 フロントエンドに挑戦する前の自分について フロントエンドに挑戦することになった経緯 フロントエンドを学ぶ上で助けられたこと フロントエンドのノウハウが溜まった記事の充実 開発ツールが揃っている テックリードとマンツーマンでタスクをやっていく react.devの輪読会 つまづいた点 タスク粒度を適切に分割すること Team+のフロントエンドの責務の考え方 Type
はじめに App Router はこれまでの React や Pages Router による書き方と大きく異なります。これは、React Server Components（RSC） というアーキテクチャが導入され、開発の考え方が大きく変化したからです。そのため、App Router を理解するためには RSC の理解が必要になります。 しかし、私は RSC の理解に苦戦しました。 この記事は、そんな私が RSC の理解を深めるために様々な記事から学んだ内容を言語化したものです。 まず初めに、CSR や SSR といったこれまでのレンダリング手法について復習し、これらが抱える問題を確認します。その後、その問題を解決する RSC が何者なのか？を理解します。 CSR の復習 React では CSR 戦略が用いられてきました。 CSR では、クライアントが受け取るのは次のような中身のない空
執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「独習」シリーズ、「これからはじめるReact実践入門」、「改訂3版 JavaScript本格入門」他、
最近になって Frontend Ops の傭兵として活動を始めました。 Frontend Ops 実践のモデルケースとして、 株式会社GiXo様で Next.js 仕事に取り組ませいただきました。今回、その内容を公開する許可を頂けたので、事例として公開させていただきます。 依頼主 株式会社GiXo様 以下、敬称略 相談内容 フロントエンド関連のリポジトリで、Next.js のビルドが遅くなってしまった。 重いことに起因して Vercel CI で OOM で確率的に落ちるようになった。CIが信用できなくなり、とりあえず再ビルドするクセがついてしまって、生産性が落ちている。 モノレポ内にとくに重いアプリケーションが一つあり、これを調査・解決してほしい。 仮ゴール: VercelCI 上のビルド時間を半分OOM が発生しないようにしたい 調査フェーズ リポジトリの閲覧権を頂き、プロジェクト構成
原氏の自己紹介原旅人氏：じゃあ始めます。私、株式会社ログラスでクラウドエンジニアというタイトルでやっている、原と申します。このたびは、このようなところに呼んでいただきありがとうございます。 今日は、「RustをAWSで活用しよう！」と。「AWS」って、実は「Lambda」の話なんですが、こういったことで話をしようと思います。 自己紹介は先ほどしていただいたので、ほぼ省略です。（スライドを示して）実は松本さん（松本健太郎氏）と私はここに書いてある検索エンジンの会社で一緒に働いていて、私がRustをやるきっかけを作ってくれたのも、実は司会者の松本さんです。 株式会社ログラスについて今はログラスという会社にいて、クラウドエンジニアという名前で、クラウドインフラ、セキュリティ、開発・ビジネス支援、データ基盤、その他のそういうことをやっています。最近はAWS IaCとか「Terraform」とか、そ
こんにちは。決済プロダクトでQAエンジニアをしているrenです。freee QA Advent Calendar2024の23日目です。 今回は、決済プロダクト開発にテストアーキテクチャを設計した事例について紹介します。 テストアーキテクチャとは テストアーキテクチャによって解決したい課題 テストアーキテクチャ設計のステップ 1. この振る舞いを担保するためには、どのようなテストが必要だろうか？という問いを立てる 2. 抽象化して考えるための概念を学ぶ 3. テストアーキテクチャを描き、議論する テストアーキテクチャ設計のインパクト 実装改善に関する気づき テストの構造とソフトウェアの構造に関する気づき 自分たちのテスト活動の課題に関する気づき チーム開発の支援を通じた工数上のインパクト テストアーキテクチャがもたらす価値 今後の展望 [appendix]今回設計したテストアーキテクチャの
import { ChangeEvent, FormEvent } from "react"; export default function Form() { const showError = (message: string) => (e: FormEvent<HTMLInputElement>) => { if (e.currentTarget.validity.valueMissing) { e.currentTarget.setCustomValidity(message); } else if ( e.currentTarget.validity.patternMismatch && e.currentTarget.name === "postcode" ) { e.currentTarget.setCustomValidity("郵便番号正しく入力してね"); } else
Next.js（App router）における開発しやすいディレクトリ構成の例 - TechDoctor開発者Blog
初めまして、テックドクターでフロントエンド開発を担当している大瀧です。 ディレクトリ構成はコードの可読性やスケーラビリティに関わる重要な要素であると思っています。 しかし、フロントエンドのディレクトリ構成はベストプラクティスが確立されておらず、わりと悩むポイントです。 そこで今回は、Next.jsのApp routerにおいて、弊社で採用しているディレクトリ構成を共有します。この記事がディレクトリ構成に悩む開発者の助けになれば幸いです。 ディレクトリ構成の自由度が高すぎる問題 さきほど「フロントエンドのディレクトリ構成はベストプラクティスが確立されていない」と書きましたが、特にApp routerのディレクトリ構成については、公式ドキュメントで以下のように記載されています。 There is no "right" or "wrong" way when it comes to organi
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 先日The Registerを見ていたらアジャイル開発の失敗率は268%も高い Study finds 268% higher failure rates for Agile software projectsという記事が目に入りました。 The RegisterはITニュースサイトで、日本で言うところのITmediaやWIRED、GIGAZINEみたいなところですかね。 その記事は元記事を紹介しているもので、『元記事はImpact Engineeringの宣伝ではあるが、アジャイル開発は期待ほどうまくいかないという疑念を抱かせるのにも
DuckDB-Wasm + 生成AI on Next.js で、どなたでも、いますぐ、地理空間情報の分析ができましてよ
本日のデモ 本日のソースコード タイトルには、文字数の限界で、DuckDB-Spatialという言葉を入れられなかったですわ。 もちろん、今回も、DuckDB-Wasmに加えて、DuckDB-Spatialも活用していますわよ。 はじめに わたくしは、学術的研究として、生成AIによるSQLクエリ生成、そして、生成AIによる地理空間情報の分析と可視化、といった事例が既に多数あることは知っていますわ。 しかしながら、いったい、どれだけの研究者が、そうした研究を、実際にどなたでもが触ることのできるWebアプリケーションやスマートフォンアプリケーションなどのソフトウェアプロダクトとしてデプロイして、本気で世界を変えたいという情熱を持っているのでしょうかしら？ わたくしは、どのようなアイデアも、ソフトウェアプロダクトとして、どなたでも試せるようにデプロイしてこそ、ようやく世界を変える第一歩目だと考え
こんにちは。アクセシビリティ本部のアクセシビリティエンジニアの五十嵐です。SmartHRでは主にアクセシビリティテスターが見つけた課題を技術的な観点から改善したり、根本的な問題を解決するための仕組みづくりを担当しています。 さて、Meta が開発する UI ライブラリとして長い間人気を博している React ですが、2024年4月に最新版であるバージョン 19 のRC版が公開されており、注目を集めています。 バージョン 19 では "use client" や "use server" でも知られる Server Components を含む様々な機能が含まれる予定ですが、この記事では、そんな React バージョン 19 をアクセシビリティの観点からキャッチアップし、特に便利になりそうな点や、注意が必要になりそうな点などを見ていきます。 forwardRef が不要になった 仮想 DOM
git worktreeを使ってプルリクレビューを効率化した話 - freee Developers Hub
共通マスタ基盤チームにおけるソフトウェアエンジニアのyugoです。 共通マスタ基盤チームは、従業員、商品、取引先といった製品横断で利用できるマスタデータを一元管理し、ユーザーにfreeeプロダクトにおける統合体験を提供できる基盤開発をミッションとしております。 そんな共通マスタ基盤チームチームですが、製品横断で利用されるとだけあり、日々の開発フローでPRレビューの割り込みが多いです。そんな中で、開発フローにgit worktreeを導入してみて、個人的にはPRレビューの割り込み作業時に割と使いやすかったので紹介します。 git worktreeを使うに至る背景 実はfreeeで働く以前、前職で先輩シニアエンジニアが「レビューするときにgitのstagingにあげていない自分の変更を、stashしたり、テキトーにcommitしてからrebaseするなりするの嫌だったら、worktree使った
「サッと助けてくれるエンジニア」は、試行錯誤の質が高い。 nrs氏に聞く「経験の積み方」 | レバテックラボ（レバテックLAB）
「サッと助けてくれるエンジニア」は、試行錯誤の質が高い。 nrs氏に聞く「経験の積み方」 2025年1月14日 GMOインターネットグループ デベロッパーエキスパート 成瀬 允宣 2017年9月GMOインターネットグループ株式会社入社。テックリードとしてWebアプリケーションプロダクト開発に従事するほか、社内研修や小学校プログラミング教育に携わる。また技術広報としてカンファレンス等でソフトウェア開発・設計を主軸に講演活動を行う。著書『ドメイン駆動設計入門 ボトムアップでわかる！ドメイン駆動設計の基本』（翔泳社）。 エラーやバグ、パフォーマンス不良などの不具合が発生したときに、最後に必ず解決してくれるエース的な存在のエンジニアに助けられた経験のある人は多いのではないでしょうか。 GMOインターネットグループのnrsさんは、まさにそんなエースの一人。今では、大抵の不具合では早急に原因を特定し、
自社データ × ChatGPTで社内AIを構築するRAG ツール｜Doox β版をリリースしました - Qiita
TLDR 社内のデータを元に質問への回答を LLM が生成する仕組み（RAG）を構築するためのサービスを開発しました。 β 版として無料で公開しているので是非使ってみてください。 サーバーレスな構成で Next.js を動かしている。技術のキャッチアップは大変だ。 背景 仕事をしていると社内の規定 / 製品情報 / 過去の履歴 .. などに関する問い合わせは日常的に発生するものだし、その工数は結構ある。通常は Wiki を作ってナレッジを共有するが、結局「近い人や担当に聞く」という行為はなかなか減らない。 色々な企業が、社内のデータを元に質問への回答を LLM が生成する仕組み（RAG）を独自に開発しているようで、技術ブログとかに書いている方も多い。 社内向け RAG の構築を SaaS プロダクトで提供したら各社の社内の問い合わせ工数と独自に RAG を構築するコストを下げられて嬉しいん
AWS上のNext.js App RouterとCDNキャッシュ利用の課題と解決策 - Findy Tech Blog
こんにちは。 Findy Toolsの開発をしている林です。 私たちのプロジェクトではフロントエンドのフレームワークにNext.js App Routerを使っており、AWSのECSへデプロイして運用しています。 そして、一部のレンダリングの処理が重いページのキャッシュを実装する際に、直面した課題と解決策を紹介します。 Next.jsのキャッシュ機構について 今回実現したいこと 課題と解決策 課題1: Next.jsの機能では要件に合わない 解決策1: CloudFrontのみでキャッシュ 課題2: エラーページがキャッシュされる 解決策2: Lambda@Edgeを用いたCache-Controlヘッダー制御 まとめ Next.jsのキャッシュ機構について まず、Next.jsのキャッシュ機構について簡単に説明します。 Next.jsではサーバサイドで使えるキャッシュ機構が次の3種類あり
今Rails 8アプリを作るなら何も足さないバニラ味にしよう（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: 37signals Dev — A vanilla Rails stack is plenty 原文公開日: 2024/12/20 原著者: Jorge Manrubia -- 37signalsの首席エンジニアです 日本語タイトルは内容に即したものにしました。 今の世の中で、Railsアプリを新しく作るゆとりに恵まれているならば、バニラアプリとして作る1、すなわち依存関係を何も足さないのが、私たちからのオススメです。 Rubyの依存関係は、よほどの理由がない限りRailsに追加しない。 Railsで生成したGemfileは、極力手つかずのままにしておく。 JavaScriptの依存関係をRailsに追加するのは、Ruby依存関係の場合以上に慎重に検討する。 Reactなどのフロントエンドフレームワークも、それらにJSONを送り込
※一番下に追記あり 理由社内政治的に言えば負け組に属するし昇給に期待できないのとメンタル面の複合的な理由で頑張り切れなくて成果も出ずモチベーションが下がってる。 今後のベースアップも望み薄な状況になったので給与同水準で今後頑張れそうなところに入りてぇなぁ。 希望現状と同水準の年収500万、それ以上もらえるのならうれしい。 完全リモートワーク。出向などはなし。 ITSとかのまともな健康保険組合に属している。 スキルセットWeb系といえばWeb系。Androidアプリ開発もやってたけど今はWebの運用保守まわり。 就職して10年くらい流れに身を任せてなぁなぁに過ごしてきたので何も身についてる気がしない。 以下のスキルもだいたいが腰をいれてやろうと思えばできる、なレベル。 ・まぁわかる k8s, Java(SpringBoot), PHP(5.3くらいまでの話) 業務でバックエンド周りの保守を触
v0とは v0（ブイゼロ）は、「Next.js」フレームワークの開発元としても有名なクラウドプラットフォーム企業Vercelが開発した、主にWebサイトやアプリケーションのUI（ユーザーインターフェース）コンポーネントの設計と開発を支援することを目的としたAIツールだ。 テキストプロンプトを入力するだけで、Webサイト用のUIコンポーネント（主にReactベース）やLP（ランディングページ）のコーディングができるのが本来の用途だが、最近はプレゼンテーション資料やその他のデザイン素材の作成にも利用できるということで注目を浴びている。 さっそく実際に使ってみることにしよう。 アカウント作成と料金プラン： v0を利用するには、まずVercelのアカウントを作成し、v0のFreeプランに登録する必要がある。 まずはv0の公式サイトにアクセス。
This guide is open source, please go ⭐️ it on GitHub and make suggestions/edits there! https://github.com/FrontendMasters/front-end-handbook-2024 1. Overview of Field of Work This section provides an overview of the field of front-end development/engineering. 1.1 — What is a (Frontend||UI||UX) Developer/Engineer? A front-end developer/engineer uses Web Platform Technologies —namely HTML, CSS, and
エンジニアの成長に技術力は必要条件であって十分条件ではない - 文系新卒エンジニアが大規模開発から得た技術以外の3つの成長 - Speee DEVELOPER BLOG
※この記事は、2024 Speee Advent Calendar 23日目の記事です。 昨日の記事はこちら tech.speee.jp はじめに こんにちは、SpeeeのDX事業部でHousiiというサービスのアプリケーション開発をしている24新卒の北田です。大学では法学部で文系の出身でしたが、現在はReactとRailsを使用したフルスタック開発に携わっています。 入社から半年が経ったあたりで、私はサービス開始以来最大規模の新規開発のリードという機会を任されることになりました。このプロジェクトを通じて、私は「エンジニアの成長に必要なのは技術力だけではない」ということを強く実感しました。 そこで、この記事では、以下の3つの観点から、エンジニアの技術以外の成長について共有させていただきたいと思っています。 事業視点での判断力：機能を「作る」前に「判断する」ことの重要性 技術的な判断力と実装
この記事は freee Developers Advent Calendar 2024 の7日目です。 adventar.org みなさん、こんにちは！freee 外部連携基盤エンジニアのおっそーです。 最近、採用イベントや面接などで、学生の方・社会人の方どちらともお話する機会が増えてきました。その中には、未経験からエンジニアを目指す方やまだ経験が浅い方も多くいらっしゃいます。 わたしは25歳で社会人になると同時に未経験からエンジニアになり、ポテンシャル枠（※自称）でフリーに転職してきましたので、そんな6年間を振り返りつつ、どうやって一人前に近づいてきたかや、フリー*1に来たらどのような成長が得られるのかを書いていきたいと思います。 ※フリーの募集ポジションに「ポテンシャル枠」があるわけではありません。募集ポジションは https://jobs.freee.co.jp/entry/care
はじめに どんな人向けの記事？ LLM に興味のある方 Next.js に興味のある方 生成 AI を使った Web アプリ開発に興味のある方 概要 私は Claude に出会うまでは、Next.js の知識がゼロでした（名前すら知らなかった）。 そんな私が、ここ 2,3 週間で Next.js でアプリを 5 つ作ったのですが、本記事ではその背景や詰まったときの対処法、得られた知見などを備忘録的に書き留めておきます。 最近作った Web アプリ（参考） この記事では Web アプリの詳細については述べませんが、どの程度のレベルのものかの参考にしていただければと思います。 LLM の Shaberi3 ベンチマーク結果可視化アプリ リスクを考慮した株価・新 NISA 資産運用シミュレータ Mac（Apple Silicon）の LLM 推論速度可視化アプリ ※残り 2 つは本業用の超ニッチ
Join the O'Reilly online learning platform. Get a free trial today and find answers on the fly, or master something new and useful. Learn more Betty Jean Jennings and Frances Bilas (right) program the ENIAC in 1946. Via the Computer History Museum Eventually, interpreted languages, which are much easier to debug, became the norm. BASIC, one of the first of these to hit the big time, was at first s
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【React】なぜコンポーネントの中でコンポーネントを作るのは良くないのか？
TVerのWebフロントチーム内製化への道のりとこれから - TVer Tech Blog
ファインディの爆速開発を支えるモノレポ管理ツール「Nx」について - Findy Tech Blog
会社紹介の中でも技術スタックしか気にしてないんだろ？
コード×AI ーソフトウェア開発者のための生成AI実践入門
Hotwire for Frontend devs
話題の画像生成AI「FLUX.1」 人気サービス「Midjourney」との違いは (1/3)
Chrome の 組み込み AI Gemini Nano を試してみる
フレームワーク「Svelte」「Solid」が話題。画期的だった仮想DOMと脱仮想DOMへの流れ
基礎から学ぶNext.js
実践Next.js - App Router への理解を深めるために -
React Server Componentsを理解したい
「第4のブラウザ言語」WebAssemblyが変えるフロントエンド開発 | レバテックラボ（レバテックLAB）
ジャイアントパンダに注意 - Next.js のビルド改善 (株式会社GiXo様)
AWS活用の自由度を上げる「Lambda」を「Rust」で活用 メモリの使用量を抑えつつ、プログラムの作成も簡単に | ログミーBusiness
テストアーキテクチャの実践 - freee Developers Hub
ほぼJSなしで完璧なReactフォームをつくる
『アジャイル開発の失敗率は268%も高い』のコメント欄が面白かったので紹介するよ - Qiita
React 19 で変わるアクセシビリティ周りの技術 - SmartHR Tech Blog
手に職がない35歳エンジニアが如何にしたら転職できるか考えてほしい
プレゼン資料が一発で出せると話題 AIツール「v0」の使い方 (1/7)
The Front End Developer/Engineer Handbook 2024
エンジニアになりたかった6年前のわたしへ - freee Developers Hub
Next.js知識ゼロから生成AI頼みでWebアプリを作って思ったこと
The End of Programming as We Know It