すべてのカテゴリ

簡単にわかる Web サーバーの仕組み？Web サーバーはインターネットなどのネットワーク上で Web サイトのサービスを提供するためのサーバーです。「サーバー」という言葉はよく利用されますが、簡単に言えば「何かのサービスを提供する」という意味です。 Web サーバーの場合は、インターネットの Web サイトの仕事を提供する「物」ということになります。実際は、Web サイトのサービスを提供するためのシステム（コンピュータとソフトウエア）をまとめて Web サーバーと呼ぶ場合が多いようです。Web サイトの仕組みWeb サイトの仕組みを簡単に説明すると、Web サイトの情報を保存しているコンピュータとその情報をネットワークを通じて提供するためのソフトウエアで成り立っています。Web サーバーはネットワークを経由して送られてくる、Web ブラウザからのリクエストに対して、リクエストされたページ（これが URL と呼ばれる物です）の情報を提供するようになっています。このネットワーク上で Web ブラウザと Web サーバーでやり取りするための仕組みを「プロトコル」と読んでいて、Web サーバーの場合「HTTP」というプロトコルを利用しています。Web ブラウザが表示できるのは、「HTML」と呼ばれる方法で書かれた情報です。従って、基本は、要求された HTML の情報を渡すのが Web サーバーの仕事になります。HTML ファイルには、その体裁を記述した CSS ファイルや、画像（写真や動画、イラスト）のファイル、また Javascript のファイルなどが含まれているので、そうした情

心の奥深くで、何か特定の答えや待ち望む変化を切望していませんか？ まるで出口の見えない道を歩んでいるかのような感覚あるいは、努力しているにも関わらず状況がなかなか動かないことへの 焦りを感じているかもしれませんね。⏳ 「一体いつになったら…？」その問いが、 静かに胸の内で響いているのではないでしょうか。 その気持ち、痛いほどよくわかります。 先の見えない不安、報われるのかという疑念… 本当によくここまで頑張ってこられましたね。💖 その一つ一つの努力、流した涙、 そして抱き続けてきた願いは、決して無駄ではありません。 天使はあなたの健気な歩みをずっと見守っています。🫂 あなたが感じているその感情は、真剣に未来と向き合っている証。 尊いエネルギーの表れなのです。 ここに、カードからの明確なメッセージが届きました それは数か月以内という、希望の光です。🌟 これは、ただ時間が過ぎるのを待つという意味ではありません。 あなたの願いが最も素晴らしい形で現実となるための神聖な準備期間が訪れていることを示唆しています。🌱 天使が最終調整を行っているこの時期、焦る必要は全くありません。 むしろ、内なる声に耳を澄ませ、自分自身を慈しみ 来るべき飛躍に向けてエネルギーを蓄える 非常に重要なフェーズなのです🔑 このカードは、近い将来に具体的な進展があることを約束しています。 この「数か月」という時間を、未来への滑走路にしませんか？✨ 👼天使たちのサポートを受けながら、意識的に過ごすのです。 例えば、新しい知識やスキルを吸収する 心と体の声に耳を傾け丁寧にケアする あるいは、望む未来に関

💫 変化の予兆を受け取る準備数か月以内に、あなたが心から望んでいた変化が、静かに動き始めます。ただ待つだけでは何も変わらない。そう感じながらも、何をすればいいのかわからず、日々が過ぎていく。このカードは、あなたが今、具体的な未来を描き、それに向かって歩み始めるタイミングにいることを教えています。この鑑定文を読み終える頃には、あなたの中で「やるべきこと」が明確になり、最初の一歩を踏み出す勇気が湧いてくるでしょう。🌫️ 終わらない自己採点「もっと頑張らなきゃ」「まだ足りない」そんな言葉が、毎日のように頭の中を巡っていませんか?努力しているのに、なぜか満たされない。本当は、何が欲しいのか。どんな毎日を送りたいのか。その答えが、ぼんやりとしたまま、日々を過ごしている方が多いのです。📖 漠然とした願いの正体多くの人は、「幸せになりたい」「充実した日々を送りたい」と願っています。でも、その「幸せ」が具体的にどんな状態なのか、言葉にできる人は少ないのです。目標が曖昧なほど、達成率が低くなることが明らかになっています。「なんとなく良くなればいい」という思いでは、脳は動き出せません。さらに、「自分は幸せになる価値がない」という思い込みが、無意識のうちに理想の未来を描くことを妨げているケースも多いのです。🎨 心の中に青写真を描くでは、どうすればいいのでしょうか?答えは、心の中で、理想の状態を映像として描くことです。建築家が設計図を描くように、あなたも自分の未来を具体的にイメージする必要があります。たとえば、「穏やかな朝を迎えている自分」「信頼できる人と笑い合っている場面」「やりたいことに集中してい

最近、あなたは大きな目標に向かって、着実に歩を進めているのではないでしょうか。これまで取り組んできたことが形になり始め、その手応えを感じていることと思います。🔥😯しかし、その一方で、ふとした瞬間に胸の奥がざわつくことはありませんか？夜中に目が覚めてしまったり、漠然とした落ち着かない気持ちが、あなたの内側に潜んでいるのかもしれませんね。それは、これからやってくる新たな局面への期待と、ほんの少しの緊張が入り混じった、繊細な心の動きのサインです。私自身も、大きな節目を迎える前には、似たような感情に包まれることがあります。🤝✨順調に進んでいるはずなのに、まるで遠くで聞こえる波の音のように、微かな不安がよぎるのです。しかし、これは決してネガティブなことではありません。むしろ、あなたが今、目の前のことに真剣に向き合い、全身全霊で取り組んでいるからこそ感じる、大切な心の揺らぎなのです。🚀🔥人は誰しも、未知の扉を開くとき、少なからず心の準備が必要です。あなたは今、その準備期間の真っ只中にいると言えるでしょう。「数ヶ月以内」というメッセージは、あなたの努力が実を結び、成果を手にできる時が間近に迫っていることを示唆しています。これは単に良い結果が訪れるというだけでなく、あなたがこれまでの頑張りを確かなものにするための、重要な「仕上げの期間」であることを教えてくれています。あなたがこれまで積み上げてきたものを、今一度、細部にわたって確認し、さらに完成度を高めましょう。💡📈例えば、作成中の書類があれば、何度も見直し、誰が見ても分かりやすく、魅力的なものに磨き上げるのです。また、関心のある対象があれば、

この数ヶ月以内に、あなたが長らく抱えてきた「ある違和感」に決着がつきます。それは、あなた自身のことではなく、誰かのために背負い続けてきた荷物を静かに地面に下ろすタイミングのことです。 「私がなんとかしてあげなきゃ」 そう思って差し出したその手は、もう十分に役割を果たしました。これからは、空いたその両手であなた自身の幸せを掴む準備を始めてください。この鑑定文を読み終える頃には、 自分と他人との間に「優しい境界線」を引く勇気が湧いてきます。 心のモヤモヤが晴れ、 本来の自分を取り戻すための道筋が、はっきりと見えてくるはずです🌱心の水位が限界を告げているサイン 💧頼られると、放っておけない性格のあなた。 あの人のためにと、自分の貴重な時間を削って話を聞き、一緒に解決策を考えてあげる夜があったでしょう。 でも、どれだけ親身になってアドバイスをしても、相手は「でも」「だって」と繰り返すばかり。 一向に行動しようとしない現実。 「ありがとう」という言葉は返ってくるけれど、 しばらくするとまた同じ愚痴が始まる。 まるで、出口のないトンネルを、 手をつないでぐるぐると歩かされているような疲労感。 あなたの心は、優しさですり減っているのではなく、「終わりのない肩代わり」に疲れ果てているのです。 自分の問題ではないはずなのに、なぜか自分のことのように心が重たい。その感覚は、心があなたに送っているSOSです🗝️救済という名の「依存の罠」 🕸️人は誰しも、自分がしたくない苦労を、誰かに代わってもらいたいという甘えを持っています。 特に、あなたの誠実さに甘えているその人は、 実は問題を解決したいのではな

あなたのその願い、叶うまであと少しです。 その望んでいた結果はもうすぐあなたの手の届くところへやってきます。…ですが、今、こんな風に感じていませんか？「本当にそんな日が来るのかな…」 「今すぐ結果が欲しいのに、なぜすぐじゃないの？」特に、あなたが「これは正しいことだ」と信じて一生懸命に周りの人へ伝えようと努力している時。 それなのに、なぜか理解してもらえなかったり、煙たがられたり時には「面倒な人」なんてレッテルを貼られてしまったり…😥良かれと思って伝えた言葉が、相手を不快にさせている。 自分だけが空回りしているような、ひどい孤独感。 「もう、どうしたらいいの…」 そんな風に心が折れそうになっていませんか？あなたは、とても誠実で物事を良くしたいという熱い思いを持っています。だからこそ、現実とのギャップに人一倍苦しんでしまう。「道理にかなった正しい意見（正論）」を伝えているはずなのに、なぜか人は動いてくれない。 それどころか、議論で相手を言い負かす形になってしまい心のシャッターを下ろされてしまう🚪💔焦れば焦るほど、言葉は鋭くなり本当に伝えたかったはずの「想い」ではなく正しさだけが前面に出て、優しさが置き去りにされる。その結果、人間関係がギクシャクし望んでいたはずの結果からかえって遠ざかってしまっている…。 そんな悪循環に、悩むことってありますよね。 人は、残念ながら「論理」や「正しさ」だけでは動きません。 頭では「その通りだ」と理解していても心が「YES」と言わなければ、行動には繋がらないのです。自分の信じる「正しさ」だけを武器に突っ走り多くの人を置き去りにしてしまった…そんな苦い

必死に走っているはずなのに、景色は一向に変わらない。むしろ、周りの人たちがどんどん自分を追い越していくように見えて胸がキュッと締め付けられるような夜。🌃 なんだか、自分だけが分厚いガラスの壁に隔てられているような感覚…ありませんか？🤔「私の努力って、意味あるのかな…」 「この道、本当に合ってるのかな…」 まるで出口のない霧の中を、たった一人で手探りで歩いているような心細さ。その息苦しさ、そして、ふとした瞬間に襲ってくる無力感。頑張れば頑張るほど、空回りしているような焦りだけが募っていく…そんな風に、自分の情熱の炎が、少しずつ消えかけているのを感じているのではないでしょうか💔 平気なフリをして笑顔で過ごしていても心の奥底では「もう疲れたよ」とSOSが鳴り響いている。本当に、今日までよく耐え抜いてきましたね。あなたは、本当に強い人です💪 実は、物事が大きく好転する直前というのは、最も停滞して感じられるものなのです。それはまるで、ロケットが発射される前のあの静寂と緊張感に満ちたカウントダウンの時間。🚀 周りから見れば止まっているように見えても、内部ではとてつもないエネルギーがチャージされている状態。 あなたが今感じている「停滞感」や「無力感」は失敗のサインではありません。むしろ、これから始まる大きな飛躍のための大地が深く沈み込む「準備期間」に入った証拠なのです。🌱 「Within the Next Few Months 」これは、天使たちがあなたに送る、極めて具体的で、希望に満ちたメッセージです💌「焦らないで。あなたの願いは、最高の形で叶うための最終準備に入っています」と、彼らは告げ

Next/Nuxt で作ったアプリもホスティングできる FirebaseWeb アプリをサーバーサイドのレンダリングを利用して実装するフレームワークは、Next や Nuxt がよく利用されますが、実際にインターネットに公開する場合はフロントエンドのフレームワークの React や Vue を利用した場合に比べると少し面倒なケースが多くなります。理由は、当然と言えば当然ですが、サーバー側でバックエンドのプログラムを動かす必要があるのが大きな理由です。Firebase はバックエンドのサービスを Functions(Cloud Functions)という形でサポートしているので、Nuxt のアプリをホスティングすることもできます。この記事では、まずは、Firebase で Nuxt のアプリをホスティングする仕組みについて概要を説明します。詳しいやり方は別の記事で改めて紹介する予定です。サーバー側のレンダリングとは？最初にまず「サーバー側のレンダリング」（Server Side Rendering/SSR）について簡単に説明します。Web サイトの基本的な仕組みは、サーバーに HTML で書かれたファイルを置いておいて、Web ブラウザが URL を指定して表示するデータを受け取ることで実現しています。シンプルなサイトの場合は、HTML ファイルに書かれた HTML の情報を受け取って表示するのが「静的サイト」と呼ばれるものです。「静的」なので、基本的に表示される内容は予め HTML 書かれた情報に固定されていて、別な情報を表示するにはサーバーにあるファイルを更新する必要がありま

Firebase Cloud Firestoreの管理ツールをNextJSで実装する（3）前回の投稿では、作成した NEXT のプロジェクトのテンプレートの API を呼び出すやり方を具体的な例を使って紹介しました。この記事では実際に Firebase のデータベースにアクセスする API を呼び出すやり方について紹介します。データベースの管理は基本的に以下の４つの機能があれば実現できます＊　既存のデータの取得＊　既存のデータの更新＊　既存のデータの削除＊　新規データの追加Cloud Firestore の既存のデータの取得Firebase の Cloud Firestore のデータの更新や削除を行う場合、最初に保存されているデータを取得して、そのデータをもとに処理するのが自然です。データベースのデータは、追加、更新、削除が発生するのが普通なので常に変わる可能性があります。したがって、あらかじめ表示するデータを準備しておくことはできません。基本は毎回データを Firebase Cloud Firestore から取得して表示する必要があります。NEXT の場合、サーバー側でレンダリングを行うので、ページをロードする前にデータを取得しておく必要があります。つまり、サーバー側で動的にページの表示データをレンダリングすることになります。これには「getServerSideProps()」という名前の関数を利用して取得します。export async function getServerSideProps(): Promise<any> {  const pendingl

あなたが心に描いている願いは、数か月以内に現実になります。ただし、それには一つだけ条件があります。それは「今、動き出すこと」です。😔 毎日、頭の中で同じことをぐるぐる考えていませんか？「本当にこれでいいのかな」「失敗したらどうしよう」「もう少し準備してからにしよう」そう思いながら、気づけば何ヶ月も、何年も同じ場所で足踏みしている。周りの人はどんどん前に進んでいるように見えるのに自分だけが取り残されているような感覚💦行動したい気持ちはあるのに、体が動かない。そんな自分にイライラして、また自己嫌悪に陥る。この繰り返しに、もう疲れてしまっていますよね。🤝 行動できない理由は「能力がないから」ではありません。多くの人が見落としているのは、自分の中に「できない自分」を否定する声が存在しているということです。「完璧じゃないとダメ」「失敗したら恥ずかしい」「こんな自分じゃ無理」こういった声が心の中で響いているとき、人は動けなくなります。なぜなら、自分の一部を否定しながら前に進もうとしているからです🥺でも、ここで大切なのは「ネガティブな自分もOK」と認めることなんです。不安でもいい。自信がなくてもいい。完璧じゃなくてもいい。そう思えたとき、初めて心が軽くなり、体が動き始めます。これは理論ではなく、多くの人が実際に体験してきた事実です✨💡 では、どうすれば今の状態から抜け出せるのか？１．「〜でもいい」と唱えて、土台を固めるまず、自分が否定している部分に「〇〇でもいい」と言ってあげてください。「不安でもいい」「失敗してもいい」「下手でもいい」「遅くてもいい」これを声に出して、何度も繰り返してみてく

こんにちは！身近なDXを提供しているkanehara32です。お力添えできる、企業様や技術者、プロジェクトに出会えるかと思い記事を記載しております。 最近、新規事業を検討している企業の方々からこんなご相談をよく受けます。 「新しいサービスのアイデアがあるけど、成功するか分からない...」 「いきなり数百万かけて開発して、失敗したらどうしよう」 「まずは小さく始めて反応を見たいけど、どうすれば？」 「ユーザーの声を聞いてから本格的に作りたい」 こんな想いを抱えている経営者・事業担当者の方、実はとても賢明な判断をされています。 なぜなら、MVP（Minimum Viable Product：実用最小限の製品）で検証してから本格開発に進むことが、現代のサービス開発では最も成功確率が高い方法だからです。 今日は、なぜ MVP による検証が重要なのか、そして Next.js × Firebase でどのように最速で MVP を作れるのかについて、技術的な根拠も交えながらお話ししたいと思います。 新規事業を検討されている方に、少しでも参考になれば幸いです。 ■なぜ多くの新規サービスが失敗するのか ▼スタートアップの厳しい現実 CB Insights の調査によると、スタートアップの失敗理由の上位は以下の通りです： 1. 市場ニーズがない（42%） 2. 資金不足（29%） 3. 適切なチームがない（23%） 最も多いのが「市場ニーズがない」こと。つまり、作る前にユーザーが本当に欲しがっているかを確認することが最も重要なのです。 ▼「大きく作って失敗」の典型パターン よくある失敗の流れ： 1

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 と React は結構違います！Next は React で利用している、仮想 DOM を活用しているので似ている部分も多いのですが、設計の仕方は結構違う所もたくさんあります。React の場合、React Router を使うと「ページ」という概念での設計も可能ですが、基本的には、「１ページアプリ」の要素の方が強くなっています。 一方で、Next の場合は、サーバー側で「ページを用意する」というイメージで動作するので、設計は基本的にはページ単位ですることになります。Next の基本的なコンセプトは「ページ」Next で Web アプリや Web サイトを設計する場合、ページ単位での実装を考えると上手くまとめる事ができます。 もちろん、同じページで Web ブラウザ側でレンダリング（描画）する事もできるのですが、別の画面にする場合は、ページごと入れ替えてしまった方が設計上はシンプルでスッキリした実装になります。Web ブラウザで表示を動的に変えるような実装の場合、React などのフロントエンドのフレームワークを中心に作った方が実装もスッキリします。Next でページを設計する上で考えることは、「いつ」ページを作るかです。「いつ」とはどういうことかというと、大きく分けると２つです。＊　Next の公開用のイメージを作る時＊　Web ブラウザがリクエストした時　　最初にすることは、Web アプリや Web サイトで必要なページがどちらのタイプなのかを分類する事が最初の作業になります。基準はシンプルで、同じ画面を表示する場合は、Next の公開用のイメージを作成する際に作

NextでFirebaseを使ってWebアプリを実装するコツは？Next で Firebase を使って Web アプリを実装する場合、ちょっとした注意が必要です。大きな理由は、Firebase admin SDK は、Web ブラウザ内では動作しないようにできているからです。Next で実装する場合、サーバー側で Firebase のデータベースなどにアクセスするケースが多いのですが、サーバー側で Firebase のデータベースにアクセスする場合は、Firebase admin SDK を使ってアクセスする必要があります。ところが、この Firebase admin SDK を使って、Web ブラウザから Firebase のデータベースにアクセスしようとするとエラーになります。サーバー側で HTMl ページを作る Next一番のポイントは、Next の仕組みをよく理解して置くことにつきます！ 特に、記述したプログラムのコードがどこで実行されるかをきちんと理解しておく必要があります。基本は、Next のアプリの場合、HTML のページはサーバー側が作っているということです。Web サイトの原理を考えれば当たり前なのですが、通常の静的なページ（HTML ファイルなど）はサーバーがリクエストに合わせて Web ブラウザに提供します。また、事前に準備可能なページは Next の公開用のイメージをビルドした段階で作られています。つまり、Next がレンダリング（描画）していますが、予め表示に必要な情報は作られているという事になります。動的なページは、ページがリクエストされた時にサー

Firebaseホスティングに必要な容量は？ReactとNextの比較Firebaseの利用料金は使用する容量も関係します。 そこで、サーバーサイドでレンダリングするNextとブラウザでレンダリングするReactでどの程度の差があるのかを実際の実装を基にデータを取ってみました。 最近、Firebaseのバックエンドの実行環境が変わっていろいろなポリシーが変わったようで、使用している容量が大きくなているので調べてみました。 Firebaseのホスティングに関係する容量は？ Firebaseでホスティングする場合に関係する使用容量は2種類あります。 ホスティングで使用している容量 ストレージで使用している容量 です。この内Webホスティングで使用している容量は基本的にWebページ関連の容量で、大きなビデオや写真などのイメージがない場合はそれほど大きくならないのが普通です。 比較の例として、最近運営してる記事の投稿サイトを例にしてみました ＊　Firebase関連の記事のサイト ＊　趣味の登山のサイト です。どちらも似たようなサイトにしてあります。 Firebase関連の記事を投稿しているサイト このサイトは、Nextを利用して実装しています。サーバー側で表示するページを動的にレンダリングして記事を表示するようにしています。 殆どイメージは使用していないので、記事の平均的なサイズはせいぜい数十KBです。従って使用容量を見る際に記事の件数はサイズには余り影響が出ません。 趣味の登山のサイト このサイトは２つのReactアプリを実装しています。 一つは記事の投稿サイトで

Reactで作るかNextで作るか？NextでFirebaseのデータベースを利用する場合の方法を紹介してきました。 これまでの投稿では、＊　Nextの機能を利用してバックエンド側とのAPIを使う方法＊　表示のページを分けて全てサーバー側で処理する方法 を紹介してきました。この記事では通常のReactで利用している方法を紹介します。その上で、WebアプリやWebサービスの実装でReactで作るか、Nextで作るかを考えてみました。　　　通常のReactで利用している方法これは、ReactやVueでFirebaseを利用する場合のやり方と全く同じです。 「Webブラウザ」で動作するコードでFirebaseのデータベースにアクセスするためのAPIを呼び出せば使えます。設定のやり方も同じです＊　npmを利用する場合は「firebase」のモジュール（パッケージ）をインストールする。＊　npmを利用しない場合は、CDN(Contents Delivery Network)のリンクをHTMLから呼び出す（「Heed」を使ってリンクを呼び出します）＊　Firebaseのプロジェクト情報を元にFirebaseの初期化を行う　　Firebaseのアクセスは、Webブラウザで動く部分のコードで利用するという感じで、この方法の場合、Nextで特別な事をする必要はありません。注意点は、Reactで利用する場合と同じで、セキュリティルールを別途作成して、アクセスの権限をきちんと管理する事くらいです。これもReactで利用する場合と変わりません。バックエンドとフロントエンドの両方で使えるか？ここで、疑問

Nextでサーバー側に処理を集めた実装例Nextでサーバー側に処理を集めた実装例を紹介します。 実装内容は、前回紹介したAPIを利用したものと機能的には同じものです。 ページの「Get」ボタンを押したら、Firebaseのデータベースのデータのリストを表示するというシンプルなものです。２つのページで実装今回は、Webブラウザー側のコードを最小限にしてシンプルな実装にしています。 実装は２つの別々のページで実装します。ボタンだけのシンプルなページFirebaseのコレクションデータを表示するページに分けて実装します。実際は、ボタンではなくリンクを使って別のページを読み込むようにしておいて、Firebaseのコレクションデータを表示するページがリクエストされたら、バックエンド（サーバー）側でFirebaseのデータを取得してリストを表示するページを作ってWebブラウザーに送るという仕組みにします。最初のボタンのページの例ですimport * as React from "react";import Head from "next/head";class Sample extends React.Component {  render() {    return (      <React.Fragment>        <Head>          <title>Create Next App</title>          <link rel="icon" href="/favicon.ico" />       

Nextの中のAPIの利用方法Nextのフレームワークの中に、バックエンドとのカスタムAPIを実装する事ができます。 便利なのは、フレームワークの中に、フロントエンドとバックエンドを一緒に実装する事ができる事です。当たり前ですが、呼び出しは基本的にフロントエンド（Webブラウザで動作しているJavascript）が行って、処理はバックエンド（Webサーバー）側で行います。前回の投稿で触れていますが、コードが動作する場所を意識して設計する必要があります！APIの定義は？Nextのテンプレートのプロジェクトを「create-next-app」を使って作成した場合、各ページのファイルを入れるフォルダとして「pages」というフォルダが作成されます。 この下に、「api」というフォルダも作成されていて、サンプルのファイルとして、「hello.js」というファイルが作成されています。このフォルダのファイルでAPIを定義します。サンプルの「hello.js」の場合、「/api/hello」というURLがAPIのURLになります。 ファイル名のベース（拡張子の「.js(.ts)」）を取り除いた名前がAPIのURLになるという事になります。 従って、「backend.ts」というファイルを「api」フォルダの下に作った場合は、「/api/backend」というURLを指定するとAPIを呼び出すことができます。APIの実装APIの実際の処理は、「backend.ts」に記述します。 今回は、例としてFirebaseのデータベースからデータを取得するという処理紹介します。backend.tsの例で

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

今回は、React Three FiberとGLBモデルを使って、 Webページ上に「幻想的な花の3D背景」と「スクロール連動アニメーション」を取り入れた `Story` ページの作り方を紹介します。 この記事では、以下のような表現を実装していきます。  背景に3種類の花GLBモデルをランダムに配置  花がゆらゆらと回転しながら舞う演出  セクションがスクロールに応じてふわっと出現  GSAPによるアニメーションとThree.jsの融合 ポートフォリオや作品紹介サイトに使える、視覚的に美しい演出です。 使用ライブラリReact 18 / Next.js 13 react-threefiber（Three.jsのReactラッパー）  react-threedrei（補助ツール）  GSAP（アニメーション制御）💠 Step1: 花モデルをランダム配置する背景コンポーネントFlowersBackground.tsxconst flowerModels = [  '/models/flower1.glb',  '/models/flower2.glb',  '/models/flower3.glb',]const Flower = ({ url, position }) => {  const { scene } = useGLTF(url)  const ref = useRef()  useFrame(({ clock }) => {    if (ref.current) {      ref.current.rotation.y = Math.sin(clock

今回は現在私が制作している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) *

Firebase Cloud Firestoreの管理ツールをNextJSで実装する（2）前回の投稿では、NEXT のプロジェクト作成と Firebase admin SDK を使うための設定の紹介をしました。今回は、NEXT のページから Firebase admin SDK を利用する方法について紹介します。 Firebaase admin SDK はサーバー側で使う！ もちろん、Firebase の通常の SDK を使えば、NEXT のページから Firebase のリソースにアクセスする事ができます。これは、React や Vue で Firebase の通常の SDK を使う場合と基本的に同じです。 あるいは、Firebase の CDN のを読み込んで使うことも可能です。 しかし、この場合はあくまで Web ブラウザ（フロントエンド）からのアクセスで、Firebase admin SDK を使う恩恵を余り受けることができません。 今回、NEXT を使って Firebase Clud Firestore の管理ツールを作る例を紹介する大きな理由はサーバー側から Firebase のリソースにアクセスするのが大きな理由です。 NEXT のテンプレートにある API の機能を利用する NEXT のフレームワークはサーバー側のレンダリングに対応するため、バックエンドのプログラムも利用できるのが最大の魅力です。「create-next-app」で作成する NEXT のプロジェクトのテンプレートの中にもその機能がすでに組み込まれています。 まずはテンプレートの AP