すべてのカテゴリ

初めまして。kanehara32です。私自身、アプリ開発を受託・個人・準委任で行なっており、数多くのアプリを携わりフルスタックエンジニアとして活動しております。クラウド技術やSupabase/Vercel等を使用して運用コスト実装コストの削減が実現できるシステム開発を行なっています。AWS認定やGoogleCloudの認定、受賞歴もあったりと経験豊富なのでお客様と繋がれる機会がないかと思い、ブログを書いております。■「システムの運用費、高すぎませんか？」先日、ある企業の社長さんから相談を受けました。「月10万円もサーバー代払ってるけど、これって普通なの？」「開発会社に聞いたら『これが相場です』って言われたけど...」結論から言うと、その会社のシステムは月1万円で運用できるものでした。なぜこんなことが起きるのか。そして、どうすれば適正なコストで運用できるのか。今日は、私が実際に手がけた「コスト削減しながら性能アップ」の事例をご紹介します。■なぜ多くの企業が無駄なコストを払っているのか▼理由1：「昔ながらの技術」を使い続けている10年前の技術で作られたシステムは、10年前の料金体系のまま。でも技術は劇的に進化しています。《実例：ECサイトの場合》旧システム：・専用サーバー：月8万円・保守費用：月5万円・合計：月13万円新システム（Next.js + Vercel）：・運用費：月2万円（すべて込み）・性能：3倍高速・世界中から快適にアクセス可能▼理由2：「とりあえず大きめに」の罠「将来を見越して余裕を持って」この考えが、毎月の無駄な出費につながっています。最新技術なら、必要に応じて自

こんにちは！ココナラでシステム開発・MVP開発支援を出品している kanehara32 です。この記事を読んでくださっている皆様との新しいご縁を楽しみにしています。技術的なお悩みから、「こんなこと相談していいのかな？」という小さな疑問まで、どんなことでも構いません。まずは気軽にメッセージをいただければ、一緒に最適な解決策を考えさせていただきますコーヒーでも飲みながら話すような、そんな気軽な雰囲気でご相談いただければ嬉しいです。それでは、本題に入らせていただきますね。■はじめに：大切な社員を守りながら、事業を前進させるためにIT部署のマネージャーや経営者の皆さま、こんなジレンマを抱えていませんか？「新規事業のシステムを早く立ち上げたい」「でも既存システムの保守も止められない」「優秀なエンジニアに辞められたら困る」この問題、実は多くの企業が直面している課題です。私は10社以上の企業様のMVP開発をサポートしてきました。その経験から言えるのは、「適切なタイミングで適切なパートナーを選ぶことが、結果的に最も効率的」ということです。今回は、外注を検討すべきタイミングについて、現場の実例を交えながらお話しします。■外注を検討すべき5つのサイン▼1. エンジニアの離職リスクが高まっている危険度：★★★★★以下のような兆候が見られたら、早急な対策が必要です。・有給取得率が急激に上昇・1on1での不満や疲労の訴え・「転職」という言葉がちらつく・優秀な人材から順に退職の相談《実例：製造業A社のケース》新規事業のMVP開発で、エンジニア3名が半年で退職。・採用コスト：300万円×3名・引き継ぎによる

「既存のWebサイトをもっとスピーディに、インタラクティブにしたい」そんなニーズに応える技術として、React は非常に人気です。実際に私も、過去にReactを導入してサイトを全面刷新した経験があります。この記事では、Reactを使うメリット・実装時に意識すべきポイントを現役エンジニア目線で解説します。1. Reactを使うメリット・パフォーマンスが高い（仮想DOMによる高速レンダリング）・コンポーネント化で再利用性が高く、開発スピードが上がる・SPA（シングルページアプリ）によるスムーズな画面遷移・世界的に利用されており、情報量が多く学習リソースも豊富2. 実際の事例：サイト刷新プロジェクト以前、既存のWebサイトをReactで刷新したことで、以下の改善を実現しました。・ページ表示速度の大幅な改善・UI/UXが向上し、ユーザー滞在時間がアップ・保守や追加機能開発がスムーズになり、改修スピードが向上3. 実装時に気をつけたこと・コンポーネント設計を初期段階でしっかり行う・APIとの非同期通信（fetch/axios）の整理・検索に強い構造を意識（サーバーサイドでの事前レンダリングやmeta情報の最適化）Reactは動的な画面描画が強みですが、そのままでは検索エンジンが情報を拾いづらいこともあります。そのため、初期表示時に必要な情報をHTMLとして提供し、meta情報を適切に設定しました。4. Reactが向いている案件・動きの多いUIを持つWebアプリケーション・会員制サイトやダッシュボードなどのSPA・部分的なフロントエンドの刷新（既存サイトへの組み込み）まとめReactは「

理学療法士として専門的知識と責任感を持ち「ひとりひとりの患者さん」と丁寧に向き合った経験と、サービス／アプリ開発で「何万人ものユーザー」に価値を届ける挑戦。その 二つのフィールドを融合 させながら、“人に寄り添うテクノロジー” を形にしている開発者です。🌱 原点 ―― 理学療法士で得た“寄り添う力”リハビリの現場で「痛みが軽くなった！」という笑顔に出会うたび、次の改善アイデアが湧いてきました。しかし 一対一では支援できる人数に限界 があります。“もっと多くの人を同時にサポートしたい”──その想いが私をITの世界へ導きました。🚀 開発者への転身 ―― コードで広がる可能性コードが動き、ユーザーの体験や指標がすぐに変わる。理学療法士時代に直接フィードバックを受け取っていた感覚が、開発の高速 PDCA に引き継がれています。ユーザーの声を吸い上げ、次のリリースに活かすことこそ私の原動力です。◇提供できること • Web／モバイルアプリ開発企画からリリース・運用までワンストップで対応します。React／Next.js ／TypeScript／Firebase／AWS／Teraformなどフルスタックで実装可能です。 • 既存サービス改善データ解析で課題を洗い出し、UX 診断から機能追加・パフォーマンス最適化まで伴走します。 • 業務効率化ツールの開発公開APIを統合したウェブサイトや、事務系の定型作業を自動化・半自動化いたします。使い方が不明な場合は、使い方サポートまで行えます。また、運用においてもご依頼いただける体制を整えております。• プロトタイプ開発企画したアプリケーションのプロ

現代のWebアプリケーション開発では、パフォーマンス、スケーラビリティ、開発効率が重要な要素となっています。特にNext.js、Vercel、Supabaseの組み合わせは、これらすべての要素を高いレベルで実現する強力なスタックとして注目を集めています。Next.jsの技術的特徴と利点Next.jsはReactベースのフレームワークで、現代的なWebアプリケーション開発を大幅に効率化します。レンダリング戦略の柔軟性Next.jsの最大の特徴は、複数のレンダリング方法を提供している点です：サーバーサイドレンダリング（SSR）: リクエスト時にHTMLを生成し、動的コンテンツに最適静的サイト生成（SSG）: ビルド時にHTMLを生成し、静的コンテンツで最高のパフォーマンスを実現インクリメンタル静的再生成（ISR）: SSGの速度とSSRの柔軟性を組み合わせた革新的な手法サーバーコンポーネント: クライアントサイドJavaScriptを削減しつつ、動的コンテンツを提供これらのレンダリング戦略を適切に組み合わせることで、SEOとパフォーマンスを両立させたアプリケーションが実現可能です。APIルートによるバックエンド統合Next.jsのAPIルートは、フロントエンド開発者にとって非常に強力な機能です。pages/apiディレクトリ内にファイルを作成するだけで、サーバーレスAPIエンドポイントを構築できます。これにより、同じプロジェクト内でフロントエンドとバックエンドの両方を構築でき、開発フローが大幅に効率化されます。Vercelによるデプロイメントの最適化Vercelは、Next.jsの

はじめにNext.jsとSupabaseの認証機能を連携させる際、特に行レベルセキュリティ（RLS）を活用する場合、APIルートの使用は技術的な制約によって推奨されません。本記事では、Supabase SSRライブラリを使用した正しい実装方法について、サーバーコンポーネントでのSupabaseクライアントの使用方法に焦点を当てて解説します。Supabase SSRライブラリの概要2023年後半に導入された「supabase/ssr」は、Next.jsのApp Routerとの統合を強化した新しいパッケージです。従来の認証ヘルパーライブラリに代わるものとして、より一貫性のある認証体験を提供します。このパッケージは、サーバーコンポーネント用のクライアント生成関数、クライアントコンポーネント用の関数、そしてミドルウェア用のセッション更新機能を提供しています。サーバーコンポーネントでのクライアント初期化の重要性サーバーコンポーネントでSupabaseクライアントを初期化する際は、Next.jsのクッキーAPIを活用して認証情報にアクセスすることが重要です。サーバーコンポーネント用のクライアント生成関数には、クッキーの読み取りと設定のための機能を含める必要があります。この設定により、クライアントは認証情報を含むクッキーを読み取り、認証済みリクエストを送信できるようになります。また、認証情報の更新時にはクッキーを適切に設定することも可能になります。サーバーコンポーネントでの認証とデータアクセスサーバーコンポーネントでSupabaseを使用する際の基本的な流れは以下の通りです：① サーバー用

料理が好きな人々にとって、レシピをシェアしたり検索したりすることは日常的な楽しみです。そこで私は、Next.jsを使って料理レシピを簡単に共有できるアプリを作成しました。このアプリでは、ユーザーが簡単にログイン・新規登録を行い、自分の作ったレシピを投稿して、さらに他のユーザーが材料からレシピを検索できる機能も提供しています。さらに、作成したレシピをSNSで簡単にシェアできる機能も追加しました！1. Firebase認証を使ったログインと新規登録アプリの最初のステップとして、Firebaseを使ったユーザー認証機能を実装しました。ユーザーはメールアドレスやGoogleアカウントを使って簡単にログイン・新規登録ができ、自分専用のレシピ投稿ページを持つことができます。Firebase Authenticationは、ユーザー管理を簡素化し、信頼性のあるログイン機能を提供してくれました。2. レシピ検索APIユーザーが投稿したレシピは、材料名やカテゴリーで簡単に検索することができます。検索機能は、APIを使用してデータベースからレシピを取得し、リアルタイムで表示される仕組みです。これにより、ユーザーは自分のキッチンにある材料を入力するだけで、関連するレシピをすぐに見つけることができます。3. レシピ投稿とSNSシェア機能レシピを作ったら、他のユーザーとシェアしたくなりますよね。このアプリでは、ユーザーが自分のレシピを簡単に投稿でき、さらに作成したレシピはSNS（Facebook、Twitterなど）でシェアできる機能も搭載しています。SNSでシェアすることで、友達やフォロワーとレシピを

・概要Next.jsは、ReactをベースとしたJavaScriptのフレームワークです。Next.jsを使うことで、高速で快適なWebアプリケーションを簡単に作ることができます。また、検索エンジン最適化（SEO）がしやすく、開発者の作業効率も向上します。企業によっては、大規模なWebアプリケーションの開発にNext.jsを採用しています。Reactを使ったことがある人なら、Next.jsも簡単に学ぶことができます。・導入企業例ZOZO TechnologiesBASEMercariLINEAirbnbUberNetflixTwitchGitHubHuluNikeなど誰もが知っている大手企業が数多くNext.jsを採用してWebサイトを作成しています。・なぜNext.jsが選ばれているのか？高速で快適なWebアプリケーションを簡単に作ることができ、また検索エンジン最適化（SEO）がしやすく、開発者の作業効率も向上するため、多くの企業で採用されています。具体的には、Next.jsは、ユーザーがページを閲覧するたびにサーバーから必要な情報を取得することができるため、ページの表示速度が速くなり、ユーザーが快適に操作できるようになります。また、サーバーサイドレンダリングにより、検索エンジンがWebサイトのコンテンツを正確に把握し、ランキングを上げることができます。さらに、Next.jsは、Reactの環境をベースにしているため、Reactを使ったことがある人なら、簡単に学ぶことができます。また、豊富なコミュニティやドキュメントがあり、開発者が必要とする情報を手軽に入手できるため、開発の

Docker 上で Next.js のアプリを動かすこの記事では、Docker のコンテナ（container）内で、Next.js のアプリを動かす手順を紹介します。要領は前回紹介した、Docker を使って Web ホスティングを動かす場合と同じです。Next.js のアプリを作成するDocker の設定を行う前に、「中身」の Next.js のアプリを作成します。 まずは、テンプレートとして、「create-next-app」のスクリプトを利用してテンプレート（デモ）のプロジェクトを作成します。$ npx create-next-app next_sample Next のアプリで Typescript を利用するために Typescript の設定を行います。 Typescript を利用した方が、変数の型の定義が明確になって、インターフェースなどのミスが起こりにくいので、この連載では Typescript の利用を推奨しています。$ touch tsconfig.json$ npm install --save-dev typescript ＠types/react ＠types/node 基本的な設定が完了したら、開発用のサーバーを立ち上げて、テンプレート（デモ）プロジェクトの動作を確認します。$ npm run dev　これで、Next アプリ側の基本的な設定は完了です。Docker の設定続いて、作成したでもプロジェクトを Docker のコンテナ（container）で動かすための設定を行います。Docker の設定は、Dockerfile に Docker

テキストベースでの対応で気を使うところ1. リロードしてメッセージが来ていないかどうか常に確認するこれはスマホアプリでトークルームを立ち上げていると自動でメッセージがあると追加されて分かりやすいですが、パソコンだとリロードしないといけないです2. 何か質問事項などを受けた際には「確認します」とだけメッセージを送り必ずボールは向こうが持つようにする3. １コマで問題を解決してもらうために答えを伝えてから説明する方が勧めやすい場合があるなど、色々知見を得ました

公開してもいいよと了承いただいたので、アップしました。今年１発目にお声がけいただいたプロジェクト。UIやプログラムの分割にこだわりを持つお客さま。何度かやりとりさせていただき、ある程度のものが完成しました。今回も勉強になりました。コンポーネントはマテリアルデザインベースのMaterial UIを採用しました。というわけで、Reactエコシステムのど真ん中案件でした。「rehop.dev/app0」契約しているサーバーです。メニュータブの動きが好きです。ぜひアクセスしてお試しください。