Webアプリを作るとき、ユーザーのプロフィール画像や商品写真、PDFなどを保存する仕組みは欠かせません。そんなときに便利なのが SupabaseのStorage機能 です。クラウド上に安全にファイルを保存し、アプリから取得・表示することができます。Supabase Storageの特徴任意のファイル形式に対応画像、動画、PDF、ドキュメントなど幅広く保存可能です。バケット単位での管理S3のように「バケット」を作り、その中でファイルを整理できます。認証ルールとの連携Supabaseの認証（Auth）と組み合わせることで、ログインユーザーだけがアクセスできるルールを設定可能です。CDNによる高速配信公開設定をすれば、外部からでもCDN経由でスピーディにアクセスできます。基本的な使い方バケットを作成Supabaseコンソールにログインし、「Storage」タブから新しいバケットを作成します。例：「avatars」という名前でプロフィール画像用のバケットを作成。ファイルをアップロードアプリからファイルをアップロードするには、JavaScript SDKを使います。// バケットにファイルをアップロード const { data, error } = await supabase.storage .from("avatars") .upload("user1/profile.png", file); 公開URLを取得公開用のURLを取得して、フロントエンドで表示することができます。const { publicUrl } = supabase.storage .from("avatars") .getPublicUrl("user1/profile.png"); 応用例ユーザーごとのプロフィール画像を保存ECサイトの商品画像を管理PDFやマニュアルのダウンロードリンクを配布ブログ記事のアイキャッチ画像を保存まとめSupabase Storageは、S3やFirebase Storageのようなクラウドストレージを、より簡単に導入できる機能 です。特に、認証機能（Auth）と組み合わせることで「ユーザーごとの専用フォルダ」を作り、安全にファイルを管理できます。「認証（Auth）」に続き、今回の「Storage」も、Supabaseの強力な武器のひとつ。これらを組み合わせることで、本格的なWebアプリを素早く構築できるようになります。

こんにちは！前回は「Supabaseの基礎」について学習記録としてまとめました。今回はその続きとして、ユーザー認証機能（ログイン） を試してみたことを書いていきます。Webアプリを作るうえで欠かせないのが「ユーザー管理」。会員制サイトや予約システム、ちょっとした掲示板でも「誰がログインしているか」を判定する必要があります。そこで大活躍するのが、Supabaseの Auth（認証機能） です。Supabase Auth の基本Supabaseには最初から「ユーザー認証」が組み込まれています。代表的な特徴はこんな感じです👇メール＋パスワード 認証がすぐに使えるOAuth認証（Google, GitHub など） を数クリックで追加できる認証済みユーザーは Supabase の管理画面から確認できるつまり「会員登録 → ログイン」までの仕組みがほぼ完成済みで、開発者はそれを呼び出すだけで使えるんです。実際に試した流れ僕が試した流れはシンプルで、以下のステップでした。Supabaseで新しいプロジェクトを作成ダッシュボードから Authentication → 設定を有効化.env.local に Supabase の URL と APIキーを設定フロントエンド（Next.js）から signUp と signIn を呼び出すコード例はこんな感じ👇（簡略版です）import { createClient } from '@supabase/supabase-js' const supabase = createClient( process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY ) // 新規ユーザー登録 const { data, error } = await supabase.auth.signUp({ email: 'test@example.com', password: 'password123' }) // ログイン const { data, error } = await supabase.auth.signInWithPassword({ email: 'test@example.com', password: 'password123' }) ほんの数行で「ユーザー登録」と「ログイン」が動くのは、正直すごいです。まとめSupabaseのAuthを触ってみて感じたのは、導入の手軽さ。Firebaseに比べても日本語の情報が増えていて、学習しやすい印象でした。ユーザー管理をゼロから作らなくていいメール認証やOAuthもすぐに追加できる管理画面でユーザーの動きが見えるのが便利「とりあえず会員制サイトを作ってみたい！」という学習者にはかなりおすすめです。

Web制作を始めてから「デザインどうしよう？」と悩むことが多かったのですが、最近ようやく Figma を使い始めました。今回はその学習記録として、感じたことや学んだポイントをまとめます。初めて触ったときの印象最初は「英語UIだし、レイヤーもどんどん増えて混乱…」という状態。四角や文字を置いても、すぐにごちゃごちゃして管理できませんでした。ただ、少しずつ ショートカット や 基本操作 を覚えていくと、「お、意外と直感的で使いやすいぞ！」と感覚が変わりました。学んだ3つのポイント1. コンポーネント化が便利すぎる同じボタンを何度も作るのは面倒。でもコンポーネントにしておけば、デザインを修正すると全ページに反映されるんです。最初は「どうせコピーでいいじゃん」と思ってましたが、大規模になると一括修正が効くのは本当にありがたい。2. オートレイアウトでレスポンシブを意識できるWeb制作だと「スマホでどう見えるか」が大事ですよね。オートレイアウトを使えば、テキストを増やしてもボタンの大きさが自然に調整されたり、要素の間隔が崩れにくかったりします。コードに落とし込むときのイメージもしやすくなりました。3. 共有リンクで誰とでも確認できる「できたデザインをどう見せよう？」と思ってましたが、FigmaはURLを送るだけでOK。わざわざ画像に書き出す必要もないし、共同編集もできます。チームやクライアントとやり取りするときに便利そうだと感じました。失敗談一番やらかしたのは、レイヤー管理を放置してしまったこと。後で見返すと「Rectangle 123」「Frame 45」みたいな名前が並んでて、自分でも何がどれかわからない…。今は「Button」「Header」みたいに名前をつけるようにしています。まとめまだまだFigma初心者ですが、「デザインが整理されていくのって気持ちいい！」と感じています。これからは実際のWeb制作の案件にも活かしていけそうです。次は デザインから実装にどうつなげるか（Tailwind CSSと組み合わせるなど） を学んでいきたいと思います。

こんにちは。今日は、最近人気の「Supabase」について書いてみます。僕自身、最初は「クラウドデータベース？難しそう…」と思っていたのですが、触ってみると想像以上に簡単で、初心者でも直感的に使えるサービスだと感じました。Supabaseって何？Supabaseは一言でいうと「アプリ開発に必要なバックエンド機能をまとめて提供してくれるサービス」です。コードを書いてゼロから仕組みを作るのではなく、用意された機能を組み合わせて使えるので、開発のスピードがぐっと上がります。Supabaseでできること1. データベースの管理PostgreSQLをベースにしたデータベースがすぐに使えます。Webアプリでよくある「ユーザー情報」「商品データ」「予約情報」などを表にして管理できます。GUIが整っていて、Excel感覚で確認できるのも嬉しいポイントです。2. ユーザー認証会員登録やログイン機能も、Supabaseで簡単に実装できます。メールアドレスやパスワードだけでなく、GoogleやGitHubなどのSNS認証もサポートしています。3. ストレージ画像やファイルを保存するストレージ機能もあります。例えば「プロフィール画像をアップロードする」「商品写真を管理する」といったことが、専用サーバーを用意せずに実現できます。4. リアルタイム機能データの更新をリアルタイムで反映できるのも特徴です。チャットアプリや在庫数の自動更新など、動きのあるサービスを作るときに便利です。初心者でも触れる理由僕が「Supabaseは初心者向け」と感じたのは、とにかく最初のセットアップがシンプルな点です。公式ドキュメントも丁寧で、最初の「Hello World」までがすぐに体験できます。「まずデータベースをつなぐ」「ユーザーを登録する」「画面に表示してみる」といった流れを通じて、自然とバックエンドの仕組みが理解できるのが魅力です。まとめSupabaseは「アプリを作りたいけど、サーバーとか難しそう」と感じる初心者にこそおすすめのサービスです。僕自身、触りながら「データベースってこういう風に使うんだ」と感覚的に学べました。これからWebアプリやサービスを作りたい方は、まずSupabaseに触れてみるといいと思います。

はじめにReactを学び始めたとき、正直「コンポーネントって、ただのHTMLの分割？」と思っていました。でも実際に触ってみると、ただの分割ではなく「UIを部品化して再利用できる仕組み」だと理解。この記事では、学習を通じて気づいたポイントをまとめます。Reactコンポーネントの基本Reactでは、UIを「コンポーネント」という単位で作ります。例えば、ボタンやカード、ヘッダーなどをひとつの部品として切り出せます。function Button(props) { return <button>{props.label}</button>; } 関数として定義できるprops を使ってデータを受け渡せる組み合わせてUIを構築できるこれがReactの基本的な考え方です。学んで気づいた3つのこと1. UIの再利用性が上がる同じデザインのボタンやカードを何度も書かずに、1つの部品として使い回せます。保守も楽になり「1箇所修正すれば全体が直る」安心感があります。2. 状態を持たせられるuseState を使えば、コンポーネント内で状態を管理できます。function Counter() { const [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + 1)}> カウント: {count} </button> ); } ただの見た目だけでなく「動きのある部品」として成長します。3. データフローの意識が大事親 → 子へとデータを渡す流れが基本。最初は「props drilling（親子でデータを受け渡しまくる）」で迷子になりましたが、流れを意識するだけで理解が深まりました。つまずいたポイント（失敗談）props drillingで混乱データがどこから来てるのか迷子になりがち。JSXに慣れるまで時間がかかったHTMLとJavaScriptが混ざった書き方が最初は不思議でした。コンポーネント分けすぎ問題細かく分けすぎると逆に管理しづらくなりました。まとめReactコンポーネントは「UIの部品化」と「状態管理」が理解のカギ。最初は戸惑いますが、慣れると「大規模開発でも整理されたコードが書ける」ことを実感します。👉 次は Hooks や Context API に進んでみるとさらに理解が深まります。

こんにちは！今回は Google Maps APIの基本的な使い方 を整理します。カフェやサロンのWebサイト制作では「アクセスページに地図を表示したい」という要望が多くあります。そのときによく使われるのが Google Maps API です。Google Maps APIとは？Googleが提供する地図サービスを、Webサイトやアプリに組み込める仕組み。例えば：店舗の地図を埋め込み表示現在地からのルート表示複数店舗のピン表示などに使えます。APIキーの取得と管理Google Cloud Consoleで「Maps JavaScript API」を有効化APIキーを発行環境変数（.env.local）で管理NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=your_api_key_here ※ 公開するWebサイトで使う場合は ドメイン制限を必ず設定 して、不正利用を防ぐことが重要です。実装の流れ（Next.jsの場合）scriptタグでAPIを読み込むgoogle.maps.Map を使って地図を初期化useEffect(() => { const initMap = () => { new google.maps.Map(document.getElementById("map"), { center: { lat: 35.6812, lng: 139.7671 }, // 東京駅 zoom: 15, }) } const script = document.createElement("script") script.src = `https://maps.googleapis.com/maps/api/js?key=${process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY}&callback=initMap` script.async = true window.initMap = initMap document.head.appendChild(script) }, []) 注意点APIキーの公開範囲を制限（リファラー設定を忘れない）読み込み順エラーに注意（google is not defined が出やすい）無料枠ありだが、アクセスが多いと課金される可能性もあるまとめGoogle Maps APIを使えば、Webサイトに「本格的なアクセスページ」を実装できるAPIキーは .env.local で管理、必ず制限をかけるNext.jsでも簡単に組み込めるが、scriptの読み込み順に注意今後は、Google Calendar API や外部サービスとの連携に応用すると、予約サイトやイベントページにも展開できます。

こんにちは！今回は 環境変数（.envファイル） について書きます。Next.js や Supabase を使い始めたときに必ず出てくる「APIキーどう管理するの？」問題。私は最初、かなり混乱しました…。そもそも環境変数って？プロジェクトで使う 秘密情報（APIキーやDB接続情報） をコードにベタ書きせずに、安全に管理する仕組み。Next.js では、プロジェクト直下に .env.local ファイルを置くのが基本です。例：.env.localNEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key-here 学習初期の失敗談 😅最初にAPIキーを使おうとしたとき、私はこう書いてました。const supabase = createClient( "https://xxxxx.supabase.co", "your-anon-key-here" ) これを GitHub に push してしまい、「APIキーそのまま公開しちゃった！💦」という大失敗…。後で「環境変数を使うべきだった」と気づきました。Next.jsでの環境変数の使い方Next.js では .env.local に書いた内容は、自動で process.env から参照できます。ただし、クライアントサイドで使う変数は必ず NEXT_PUBLIC_ をつける ルールがあります。例：const supabase = createClient( process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY ) ポイント👇NEXT_PUBLIC_ → ブラウザから見える（公開OKなキー）それ以外 → サーバーサイドでしか使えない（秘密情報）GitHubに上げないための注意点.env.local は絶対に公開しちゃいけないので、GitHubに上げないように .gitignore に書いておきます。.gitignore.env.local これで安心！まとめAPIキーはコードに直書きせず、.env.local で管理クライアントで使うなら NEXT_PUBLIC_ をつける.gitignore で .env.local をリポジトリに含めない最初は「なんで process.env.NEXT_PUBLIC_〜 って長いんだ…」と思いましたが、慣れると安心感がすごいです。

こんにちは！前回の記事では、初めてGitHubにリポジトリを作成してプッシュするまでを学習記録としてまとめました。今回はその続きとして、GitHubに置いたNext.jsアプリをVercelにデプロイしてみた体験を整理します。「ローカルで作ったアプリがURLで世界に公開される」この瞬間は、めちゃくちゃテンションが上がりました！1. VercelにログインしてGitHub連携まずはVercelにアクセスし、GitHubアカウントでログインしました。「Add New... → Project」を選択GitHubのリポジトリ一覧から、先ほど作ったNext.jsのリポジトリを選択👉 ここで一つ目のつまずき。「リポジトリが出てこない！」という現象が…。調べたら、GitHub連携時に「全リポジトリへのアクセス権限」を付与していなかったのが原因でした。設定を直したら無事表示されました。2. デプロイの設定Vercelが自動でフレームワークを判定してくれるので、Next.jsだと基本は触らずにOK。Framework Preset: Next.jsRoot Directory: /（特にサブディレクトリでなければデフォルトのまま）Build Command: next buildOutput Directory: .next「Deploy」ボタンをクリック！3. 初めてのエラー体験「Deploy成功！」といきたかったのですが、最初はエラーで止まりました…。原因は 環境変数 .env.local を設定していなかったこと。ローカルでは.envファイルを使っていたのですが、Vercelは別途「Project Settings → Environment Variables」で設定しないと反映されません。👉 ここで学んだこと.env.local の内容は自動でアップロードされないVercel上で同じ値を入力してあげる必要がある4. 無事にデプロイ成功！環境変数を設定し直して再デプロイ。数十秒後、https://my-app.vercel.app/ のようなURLが発行されました！ローカルでしか動かなかったNext.jsアプリが、世界中どこからでもアクセスできるようになった瞬間は感動的でした。さらに便利なのが、GitHub連携していると git push するだけで自動で再デプロイしてくれること。修正 → push → 数分後には反映、という流れが本当に楽です。5. 学んだことまとめGitHub連携のときはアクセス権限に注意（リポジトリが表示されないこともある）環境変数はVercel側で設定が必要push すれば自動で再デプロイ → 作業効率が爆上がりさいごにNext.js × Vercel の組み合わせは、初心者でも「最速で公開」できる最強タッグでした。ただ、エラーになったときは焦ります。でも調べて一つずつ解決すれば、知識として積み上がっていく実感があります。次は カスタムドメインを設定して「自分のURL」で公開する」 に挑戦してみたいと思います。

こんにちは！今日は、私が初めて GitHub を使ってコードをアップロードしたときの学習記録を書きます。GitHubはプログラミングを学んでいる人なら必ずと言っていいほど使うサービスですが、私は最初「難しそう」「黒い画面苦手…」と敬遠していました。それでも挑戦してみたら、思ったよりシンプルで楽しかった！……ただし、いくつかつまずきポイントもあったので、それも含めてまとめます。1. GitHubでリポジトリを作成まずはGitHubの公式サイトにログインして、新しいリポジトリを作りました。「New repository」をクリックリポジトリ名を入力（例: my-first-repo）「Create repository」を押す👉 ここで表示される リポジトリURL（例: https://github.com/username/my-first-repo.git）が後で必要になるのですが、私は最初これをコピーし忘れて「あれ？どのURLだっけ？」と探す羽目に…。小さなことですが、焦らずコピーしておくと後が楽です。2. ローカルでGitを初期化次に、ターミナルでプロジェクトのフォルダに移動して以下を実行しました。git init これで、そのフォルダがGit管理下になり、「.git」という隠しフォルダができます。最初は「え？何も変わってないじゃん」と思いましたが、実は裏側でちゃんとGitが履歴を管理する準備をしてくれているんですね。3. ファイルをコミットする続いて、作ったファイルをGitに記録します。git add . git commit -m "first commit" ここでの失敗談：私は最初 git add をし忘れて git commit だけ叩いてしまい、On branch main nothing to commit, working tree clean というメッセージが出ました。「え？なんでコミットできないの？」と焦りましたが、原因は単純で ステージング（add）が抜けていた だけ。Gitは「何をコミットするのか」を明示的に伝えないと動かないんだな、と理解しました。4. GitHubとつなげてプッシュいよいよGitHubとつなげます。git remote add origin https://github.com/username/my-first-repo.git git branch -M main git push -u origin main これで完了！……と思ったら、ここでも失敗しました。error: src refspec main does not match any というエラーが出たんです。調べてみたら、コミットがまだ一度もされていない状態でpushしていたのが原因でした。つまり「空っぽのまま送ろうとしてエラー」だったわけです。解決方法は単純で、コミットをちゃんと作ってから再度push。無事にGitHub上にファイルが表示されたときは、ちょっと感動しました。5. 初めての成功体験と学びgit init → プロジェクトをGit管理にするadd → 「これを保存したいよ」と選ぶcommit → 選んだものを履歴に保存するpush → GitHubにアップロードするこの流れさえ押さえれば、GitHubへの最初の一歩は踏み出せます。失敗してみて気づいたのは、Gitはエラーが出てもちゃんと理由を教えてくれるということ。最初は意味不明に見えるエラーメッセージも、調べてみると「なるほど！」となるので、焦らずに一つずつ対処すれば大丈夫です。まとめGitHubのリポジトリ作成 → URLをコピーしておくgit init でプロジェクトを管理下にgit add を忘れるとコミットできない最初の push ではコミットが必要初めてGitHubにプッシュできたときは「自分もちゃんとエンジニアっぽいことしてる！」とテンションが上がりました。エラーも含めていい経験になったので、これからも学習記録として残していこうと思います。👉 次は「ブランチを作って安全にコードを管理する」を試してみたいです。