ムラゴン ホーム
reactのムラゴンブログ
-
-
Astroの本質構造
Astroは「高速なWebサイトを作るための設計思想」が明確にあるフレームワークです。単なるテンプレートエンジンでもなければ、ReactのようなSPAフレームワークとも違います。ここを曖昧に理解していると、使い方を間違えます。 結論から言うと、Astroの本質は **「必要なものだけをクライアントに... 続きをみる
-
バニラでの記述でもSassは使えるのか
結論から言うと、使えます。 SassはPHPやWordPress専用のものではなく、HTML＋CSSだけの、いわゆる“バニラ”な環境でも問題なく使えます。 誤解されがちですが、Sassは「特定のフレームワークに依存する技術」ではありません。あくまでCSSを効率よく書くためのプリプロセッサです。最終的... 続きをみる
-
Reactの contextmenu イベントでできること
Webアプリを作っていると、「右クリックしたときに何かしたい」と思う場面があります。 Reactでも、ブラウザ標準の右クリック（コンテキストメニュー）をフックして、独自の挙動を実装することができます。 この記事では、Reactの contextmenu イベントで何ができるのか を整理します。 co... 続きをみる
-
npm installの意味とは？
JavascriptやReactの学習をしていると、チュートリアルや教材でよく出てくるのが npm install（エヌピーエム インストール） というコマンドです。 なんとなく「とりあえず実行するもの」というイメージを持っている人も多いですが、npm installにはしっかり役割があります。 こ... 続きをみる
-
ベクトル系のデータベース（Vector Database）とは
最近、AIや機械学習の文脈で「ベクトルデータベース（Vector Database）」という言葉をよく耳にするようになりました。 特に、ChatGPTのような生成AIや、検索・レコメンド機能を作るときに欠かせない技術として注目されています。 この記事では、「そもそもベクトルデータベースとは何か」「な... 続きをみる
-
useRefの使いどき
Reactを学んでいると、useRefは「いつ使えばいいのか分かりづらいフック」と感じる人が多いと思います。 useStateとの違いが曖昧なまま使ってしまい、結果的にコードが分かりにくくなるケースも少なくありません。 この記事では、useRefを使うべき場面と、逆に使わないほうがいい場面を整理しま... 続きをみる
-
React Nativeとは
React Native（リアクトネイティブ）とは、JavascriptとReactの知識を使って、スマホアプリを開発できるフレームワークです。 主に iOSアプリ（iPhone） と Androidアプリ を、ほぼ同じコードで同時に作れるのが最大の特徴です。 Webサイトではなく、App Stor... 続きをみる
-
Reactの「レンダリング」とは何か？
Reactを学んでいると、必ず出てくる言葉が**「レンダリング」**です。 でも、 何をもって「レンダリングされた」と言うのか いつレンダリングが起きているのか ここが曖昧なまま進んでしまう人も多いです。 この記事では、Reactにおけるレンダリングの意味を、できるだけ噛み砕いて解説します。 一言で... 続きをみる
-
実務で必要なReactの力
Reactを勉強していると、 「useStateは分かった」「コンポーネントも書ける」 ここまでは比較的すぐに到達します。 でも、実務でReactを使うとなると、必要になる力は少し変わってきます。 この記事では「現場で本当に求められるReactの力」を整理します。 1. コンポーネント設計の力 実務... 続きをみる
-
-
Resendでできること
Webサービスやアプリを作っていると、 「ユーザーにメールを送りたい」という場面は必ず出てきます。 例えば、 会員登録後の確認メール 予約完了のお知らせ パスワード再設定メール お問い合わせへの自動返信 こういったアプリから送るメールを、 シンプルかつ安全に実装できるのが Resend です。 Re... 続きをみる
-
Vite（ヴィート）とは？
Vite（ヴィート）とは、Webアプリ開発をとても高速かつ快適にしてくれる開発ツールです。 主に React・Vue・Svelte などのモダンなフロントエンド開発で使われています。 一言でいうと、 「開発中の表示がめちゃくちゃ速い環境を用意してくれる仕組み」 です。 初学者向けに一言で説明すると ... 続きをみる
-
ReactからNext.jsに入る最適なタイミングとは
Reactを学習していると、必ず一度はこんな疑問が出てきます。 「Next.jsっていつから触ればいいんだろう？」 「Reactをもっと極めてからの方がいい？」 「今Next.jsに行くのは早すぎる？」 結論から言うと、Next.jsに入る“正解のタイミング”は人によって違います。 ただし、いくつか... 続きをみる
-
shadcn/uiとは
shadcn/ui（シャドシーエヌ・ユーアイ）とは、React（主にNext.js）向けのUIコンポーネント集です。 ただし、一般的なUIライブラリとは少し考え方が違います。 最大の特徴は、 「コンポーネントをnpmで入れるのではなく、コードを自分のプロジェクトにコピーして使う」 という点です。 公... 続きをみる
-
Next.jsの学習コストについて
React を触り始めた頃、多くの人が最初につまずくのが 「Next.jsって何？Reactと何が違うの？そして勉強するの大変？」 という部分だと思います。 この記事では、Next.js の学習コストを“正直に”かつ“現実的に”解説します。 ■ Next.jsは「Reactをやりやすくする便利セット... 続きをみる
-
#
react
-
仕様駆動をやってみて分かったこと — docsを正本にした日から、実装中の「これでいいか」は誰の判断か
-
Colorism v2: 効率的な色彩学習アプリの進化
-
サーバーレスアプリケーションでreactを動かす方法
-
2026年の主役【Agentic AI】自律型AIが切り拓く未来と8つの最前線！
-
Reactの歴史と設計思想の変遷：UI構築を再定義した10年
-
Reactとそのフレームワーク周辺の最新動向 2025年6月版
-
[Next.js] Supabase カレンダーメモアプリ チュートリアル (後編)
-
[Next.js] Supabase カレンダーメモアプリ チュートリアル (前編)
-
[Next.js] 学習記録アプリ Firebase認証・DB実装 Zennで書籍化してみました
-
[React] 学習記録アプリ with Firebase、Zennで書籍化してみました
-
Next.js 入門｜ Props を「分割代入」で書く
-
HTMLとJavascriptの組み合わせではなく、Reactを使うメリットは何ですか。
-
Next.js 入門｜ Props でコンポーネントに値を渡す
-
Google Cloud Shell が素晴らしすぎる
-
Next.js入門｜App Routerで簡単ページ追加＆遷移を解説！
-
-
Reactで作れるアプリ一覧
Reactは、Webアプリケーション開発で最も人気のあるフレームワークのひとつです。 コンポーネントという仕組みを使って、UI（画面）を部品のように組み立てられるため、規模の小さなアプリから大規模サービスまで幅広く開発できます。 この記事では、Reactで実際に作れるアプリの代表例をカテゴリごとにま... 続きをみる
-
Chakra UIとは
React向けのモダンなUIコンポーネントライブラリ。 一言でいうと、「デザインが苦手でも“それっぽい綺麗なUI”がすぐ作れる便利セット」。 1. Chakra UIが生まれた理由 ReactでUIを組むとき、ボタン・入力フォーム・モーダル…など全部を自前でデザインしようとすると、地味にしんどい。 ... 続きをみる
-
ReactでCSSを当てる方法
React で開発をしていると、必ず「スタイルをどう管理するか」という問題にぶつかります。HTML＋CSS の世界とは違い、React には複数の書き方があり、それぞれメリット・デメリットがあります。この記事では、現場でもよく使われる主要なスタイリング方法をわかりやすく整理して紹介します。 1. 通... 続きをみる
-
-
Reactを使うと受けられる恩恵とは
Web開発の世界では多くのフレームワークやライブラリが存在しますが、その中でも長く支持され続けているのが React。Facebook（現Meta）が開発し、世界中のプロダクトで使われていることから、信頼性の高い技術として定着しています。 では、Reactを使うことで、開発者はどんな恩恵を受けられる... 続きをみる
-
-
Next.jsでできること
Next.js（ネクストジェイエス）は、Reactベースで動くフレームワークで、モダンなWebサイトやサービスの開発でよく使われています。 「効率よく作れる」「高速」「SEOに強い」など、今のWeb制作に必要な要素をまとめてサポートしてくれるのが特徴です。 ここでは、Next.jsで実際にどんなこと... 続きをみる
-
MUI（Material UI）とは——Reactで“整ったUI”を最短距離で届けるためのデザインシステム
MUI（旧Material-UI）は、GoogleのMaterial Design思想をベースにしたReact向けUIライブラリ群です。ボタンやフォーム、ダイアログといった基礎パーツから、データグリッドなどの高度なコンポーネントまで幅広く提供し、デザインの一貫性と開発スピードを両立させます。現在は「... 続きをみる
-
React Developer Toolsとは
React Developer Tools（リアクト・デベロッパー・ツールズ）は、React で構築されたウェブアプリケーションを効率的に開発・調査・デバッグするための公式ブラウザ拡張機能です。Google Chrome や Microsoft Edge、Firefox など主要なブラウザに対応して... 続きをみる
-
Testing Libraryとは
Testing Library は、JavascriptやReactなどのフロントエンド開発で使われる「UIテスト用ライブラリ」の総称です。 React Testing Library など、特定のフレームワーク向けのパッケージも用意されていますが、共通して 「ユーザー視点でのテスト」 を重視してい... 続きをみる
-
Reactでホームページを作るのはあり？
ホームページ制作というと、WordPressや静的HTMLが定番ですが、近年はReactを使って作るケースも増えています。ここでは「Reactでホームページを作るのはありか？」という視点から、その特徴や向いているケースを整理してみます。 Reactでホームページを作るメリット 1. コンポーネント化... 続きをみる
-
AstroとReact、サイト構築の際のメリット
Webサイト制作の現場では、近年 Astro と React が大きな注目を集めています。どちらもモダンな開発体験を提供しますが、目的や得意分野が異なるため、選択によって制作フローや完成後のパフォーマンスに大きな違いが生まれます。ここでは、両者の特性とメリットを整理します。 Astroの特徴とメリッ... 続きをみる
-
Next.jsとReactの違いとは
Web開発の世界では、ReactとNext.jsはどちらも非常に人気の高い技術ですが、それぞれが担う役割や得意分野は異なります。この記事では、Reactそのものと、それをベースにしたNext.jsの違いを整理します。 ReactはUIを作るためのライブラリ ReactはFacebook（現Meta）... 続きをみる
-
Reactで作れるもの
React はUI（ユーザーインターフェース）を構築するためのライブラリなので、 「画面が動的に変化する」「ユーザー操作が多い」ものに特に向いています。 具体的にどんなものが作れるか、代表例をいくつか紹介します。 1. Webアプリケーション SNS系アプリ 例：Twitter風の投稿・いいね・コメ... 続きをみる
-
Reactで出来ること
Reactは、Facebook（現Meta）が開発したJavascriptのライブラリで、現在は世界中で幅広く利用されています。WebアプリやWebサイトを効率的かつ柔軟に作るための仕組みが揃っており、モダンなフロントエンド開発に欠かせない存在です。ここでは、Reactで具体的にどのようなことができ... 続きをみる
-
#
WEB
-
TikTok「CUE CUE CUTE」と後輩くんのweb.
-
web.更新とFC会員増加数
-
おめでとう、おめでとう
-
外部からアクセスできないDMZという設定は可能ですか？
-
websocketについて解説してください。
-
共通テストと本読まなくちゃ～雑談でござりまする～
-
ダークウェブで使われているプロトコルの仕様
-
POST通信とは
-
pythonのみでwebサーバを建てる方法
-
Webディレクターが再び“手を動かす”理由
-
KestrelとIISの違い
-
webサイトにURL入力欄がある場合、どのような方法でオープンリダイレクト攻撃をすることができますか？
-
webサーバのキャッシュの機能は、画面ごとに取りますか？
-
消費者金融 おすすめ
-
VSCodeでEmmetのlang設定を「lang=ja」に変更する方法
-
-
#
Excel
-
「変則的AQL風クイズのスコア表」をいろいろと改良してみました(笑)
-
【パスワードを忘れた】VBA(マクロ)パスワードの解除方法 Excel(エクセル)
-
#今日のお弁当 久しぶりにやらかした
-
エクセル（Excel）で作った資料をPDFで出力する方法
-
【Excel】セルの内容ごとドラッグアンドドロップ（移動）できない！
-
Excelを操作するPythonライブラリopenpyxl
-
研修会受付締め切り
-
マンション標準管理規約「国内管理人」！新規用語は試験で問われやすい！
-
大学で使うPCにMicrosoft 365 Apps（Office）をインストールしたい
-
早咲き大輪系 クレマチス
-
AIに聞いてもうまくいかなくて萎えてしまった。検索ツールをアレンジするはずが。
-
ggrksから得られたもの
-
30代無職｜Excelで業務効率化して評価された話
-
Excel分析は「ピボット」｜ 前月比・前年比・構成比を出す鉄板3パターン
-
早朝から走り、午後からエクセルデータを整理 〜バイク三昧〜
-
