ムラゴン ホーム
Astroの本質構造
Astroは「高速なWebサイトを作るための設計思想」が明確にあるフレームワークです。単なるテンプレートエンジンでもなければ、ReactのようなSPAフレームワークとも違います。ここを曖昧に理解していると、使い方を間違えます。 結論から言うと、Astroの本質は **「必要なものだけをクライアントに... 続きをみる
reactのムラゴンブログ
-
-
バニラでの記述でも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で作れるアプリ一覧
Reactは、Webアプリケーション開発で最も人気のあるフレームワークのひとつです。 コンポーネントという仕組みを使って、UI（画面）を部品のように組み立てられるため、規模の小さなアプリから大規模サービスまで幅広く開発できます。 この記事では、Reactで実際に作れるアプリの代表例をカテゴリごとにま... 続きをみる
-
#
react
-
サーバーレスアプリケーションで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で簡単ページ追加＆遷移を解説！
-
Next.js入門｜プロジェクトの新規作成からMUIの導入まで
-
[React] チュートリアル 学習記録アプリ Firebaseで認証・DB実装してみた （後編）
-
-
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で具体的にどのようなことができ... 続きをみる
-
#
ストレージ
-
SBC CM3588 NAS Kit 使用メモ（24）| roots のバックアップ修正
-
SBC CM3588 NAS Kit 使用メモ（23）| btrfs スナップショットのファイル復旧操作
-
SBC CM3588 NAS Kit 使用メモ（22）| スナップショット作成
-
IsMyHdOK：各種ストレージのベンチマークを計測
-
HDD Low Level Format Tool：ストレージをフォーマット・初期化
-
SBC CM3588 NAS Kit 使用メモ（21）| Nextcloud アクセスと共有設定
-
SBC CM3588 NAS Kit 使用メモ（20）| Nextcloud 構築の補足
-
SBC CM3588 NAS Kit 使用メモ（19）｜Nextcloud 環境構築
-
SBC CM3588 NAS Kit 使用メモ（18）｜NVMe スイッチオーバー構築の後編
-
SBC CM3588 NAS Kit 使用メモ（17）｜NVMe スイッチオーバー構築の前編
-
那珂川市で無料パソコン相談を行いました（2026年2月版）
-
SBC CM3588 NAS Kit 使用メモ（16）｜NVMe スロットとスイッチオーバーの調査
-
SBC CM3588 NAS Kit 使用メモ（15）｜Samba 用にファイルシステムを変更
-
Storage
-
【特集】RAM/SSD/HDDが爆上げ！半年で4万円超の出費増、実際に4TB SSDと8TB HDDを買い足した理由と選び方
-
- # 情報処理安全確保支援士
