すべてのカテゴリ

初めまして。kanehara32です私自身、アプリ開発を受託・個人・準委任で行なっており、数多くのアプリを携わりフルスタックエンジニアとして活動しております。クラウド技術やSupabase/Vercel等を使用して運用コスト実装コストの削減が実現できるシステム開発を行なっています。AWS認定やGoogleCloudの認定、受賞歴もあったりと経験豊富なのでお客様と繋がれる機会がないかと思い、ブログを書いております。■システムの運用費、本当にその金額が適正ですか？「毎月のシステム費用が重い...」「でも、これが相場なのかな...」そんな風に思いながら、高額な運用費を払い続けていませんか？私がこれまでお手伝いしてきた企業様の多くが、実は必要以上のコストを払っていました。特に5年以上前に作られたシステムをお使いの場合、最新技術への移行で大幅なコスト削減が期待できます。今回は、私が実際に手がけている「Next.js + Supabase」という組み合わせが、なぜコスト削減に効果的なのかをご説明します。■従来型システムと最新技術の費用比較▼一般的な中規模システムの運用費（月額）《従来型（オンプレミス/レガシーシステム）》・データベースサーバー：15-30万円・アプリケーションサーバー：10-20万円・バックアップ・冗長化：5-10万円・セキュリティ・監視：5-10万円・保守・運用人件費：20-50万円合計：55-120万円/月（年間660-1440万円）《Next.js + Supabaseの場合》・Supabase（DB/認証/API）：0.5-5万円・Vercel（ホスティング）：0.

Javascriptのライブラリ、フレームワークにReact、Next.jsがありますがそれぞれ関数を効率よく機能させるために使うhooksがありますよね？今回は自分にとっても学習と参考用までに使い方を解説してみます。🔁 フック（Hooks）とは？Reactの機能で、コンポーネント内で状態（state）を使う → useStateライフサイクル処理 → useEffectアニメーションや座標更新など → useFrame（React Three Fiber）モデルの読み込み → useGLTF（drei）などを使うときに「フック」として書きます。✅ フックを書く場所（大原則）function MyComponent() {  // ✅ OK：関数の最上部に書く  const [count, setCount] = useState(0)  // ❌ NG：if 文やループの中では使えない  if (count > 0) {    // useState() ←ここに書いたらエラー！  }  return <button onClick={() => setCount(count + 1)}>+</button>}🧠 なぜ関数の中に書くの？Reactは「フックの呼び出し順」によって状態を管理しています。そのため、必ず「関数コンポーネントのトップレベル（直下）」に書く必要があります。🦋 たとえばさっきの例：function FlyingButterfly({ seed = 0 }) {  const ref = useRef()  const {

# はじめに前回、Next.js について調べてみたので、今回はよく使うアカウント認証について、アプリケーションを作ってみようと思います。Next.js を開発している Vercel が作っている NextAuth.js を使用します。# アプリを作ってみるsample という名前でアカウント認証付きのアプリケーションを作成します。## 1. まずは、Hello world！```$ yarn create next-app --typescript$ cd sample$ yarn add next-auth$ yarn add -D [at]types/next-auth$ yarn dev```## 2. いらないファイルを削除以下のファイルを削除します。- sample/pages/api/hello.ts- sample/styles/Home.module.css## 3. API route を追加`pages/api/auth/[...nextauth].ts` を作成します。```import NextAuth from 'next-auth'import Providers from 'next-auth/providers'export default NextAuth({    providers: [        Providers.GitHub({            clientId: process.env.GITHUB_ID,            clientSecret: process.env.GITHUB_SECRET       

# はじめにNext.js は本番環境のための React フレームワークで主に以下のような特徴があります。1. 画像最適化2. 国際化ルーティング3. Next.js アナリティクス4. ゼロコンフィグ5. ハイブリッド SSG・SSR6. ISR（Incremental Static Regeneration）7. TypeScript サポート8. ファスト・リフレッシュ9. ファイルシステムルート10. API ルーティング11. ビルトイン CSS サポート12. コード分割とバンドリング今回は、これらの特徴について、説明していきたいと思います。# 特徴## 画像最適化ttps://nextjs.org/docs/basic-features/image-optimizationバージョン 10.0.0 より対応できるようになっています。閲覧しているブラウザによってリサイズしたり、WebPをサポートしているブラウザにはそれを配信したり、lazy load してくれたりします。### 使い方```jsimport Image from 'next/image'function Home() {    return (        <>            <h1>My Homepage</h1>            <Image                src="/me.png"                alt="Picture of the author"                width={500}

初めまして。kanehara32です。私自身、アプリ開発を受託・個人・準委任で行なっており、数多くのアプリを携わりフルスタックエンジニアとして活動しております。クラウド技術やSupabase/Vercel等を使用して運用コスト実装コストの削減が実現できるシステム開発を行なっています。AWS認定やGoogleCloudの認定、受賞歴もあったりと経験豊富なのでお客様と繋がれる機会がないかと思い、ブログを記載しております！■「AIに仕事を任せる」が現実になりました「ChatGPTは使ってるけど、システムに組み込めないかな...」「問い合わせ対応を自動化したい...」「大量の書類処理をAIにやらせたい...」そんなご要望が急増しています。実は、Next.js + LangChainという組み合わせを使えば、ChatGPTのようなAI機能を自社システムに組み込むことができるんです。しかも、思っているより簡単に、そして安価に。今回は、AI導入で業務がどう変わるのか、具体的にご紹介します。■AI導入で自動化できる業務の例▼1. カスタマーサポートの自動化《Before：人力対応》・問い合わせメール：1件15分・1日50件で12.5時間・回答品質にばらつき・夜間・休日は対応不可《After：Next.js + LangChain AI》・自動回答：即座に返信・24時間365日対応・回答品質が一定・人間は複雑な案件のみ対応削減効果：対応時間80%削減、顧客満足度向上▼2. 書類作成の自動化《Before：手作業》・見積書作成：30分/件・提案書作成：2時間/件・定型文書の使い回し・ミスのチェック

Firebase Cloud Firestoreの管理ツールをNextJSで実装する（１）前回の投稿では、Node.js のスクリプトで Firebase Cloud Firestore のバックアップとリストアをする簡単な例を紹介しました。しかし、コレクション名や保存するファイル名はハードコーディングしていたりしますので、実用的な実装とは言えません。 Node.js 自体はコマンドラインベースのスクリプトで GUI を実装するには、HTML ベースの Web ブラウザを使った実装になります。Node.js で管理用の PC に Web サーバーを立ててサーバー側でレンダリングを行えば GUI ベースでの管理ツールの実装も可能になります。 サーバー側でレンダリングをする場合、シンプルなケースはHandleBar などを使うことも可能です。 しかし少し複雑な処理や、動的なレンダリングをしたい場合は少し不便です。 そこで、何回かに分けて NextJS のフレームワークを利用して、管理用のローカルアプリを作る方法について解説を行う予定です。 NextJS はサーバーサイドのフレームワーク NextJS は、React をベースにしたサーバーサイドレンダリングのフレームワークです。 React 同様 JSX で記述してページを作成できるため複雑な表示や処理にも対応できます。 本来は Web サーバーを使ってサーバー側でレンダリングするような Web サイト（Web アプリ・Web サービス）を作る用途に利用される事が多いですが、PC 上で動作させて通常のデスクトップアプリの

今回は現在私が制作しているNext.jsのポートフォリオサイト制作に使われている主要技術とこれからの設計についてお話していきます。 この記事を読むことでNext.jsを学習してみたいやプログラミングの学習の参考にもなりますので最後まで読んでみてくださいね。 🧱 使用した主な技術と目的 技術用途Next.js　ルーティングやビルドが楽なReactベースのフレームワーク。SEO対策にも強い。 Three.js / React Three Fiber3Dモデルやアニメーションの描画をJSで制御。Three.jsのReact版。 DreiReact Three Fiberの補助ライブラリ。 Text, OrbitControls, useGLTFなどの便利なコンポーネントが揃っている。 GLBモデル　蝶やカーソル、アクセサリーなどの3Dモデルを表示。 CSS Modules / グラデ背景module.cssで自然な色合いの背景を設定。ページ全体のトーンを統一。 dynamic importクライアントサイドのみでThree.jsを動かすためのssr: false設定。 🦋 実装した機能と解説 1. 回転するメインモデル（main.glb） useFrame(() => { if (ref.current) { ref.current.rotation.y += 0.01 } }) copy 🔁 useFrame を使って、フレームごとにメインモデルを回転させています。 2. 公転するサブモデル（small.glb） const angle = (index / total) *