JavaScript

スポンサーリンク
JavaScript

ReactとVueの違いとは?初心者向けにわかりやすく解説 – 1/8

ReactとVueは、どちらもユーザーインターフェース(UI)を構築するためのJavaScript技術です。現在のフロントエンド開発では、この2つの技術が非常に高い人気を持っています。この記事では、ReactとVueの違いを初心者向けに整理...
Vue.js

Vue入門の次に学ぶこと:Vue Router・Pinia・API通信の道筋 – 12/12

Vueの基本が分かったら、実務で必要になる周辺技術へ進みます。公式エコシステムが整っているVueの強みを活かし、学習順を整理します。複数ページ:Vue RouterページをURLで切り替えるなら Vue Router が定番です。学ぶとでき...
Vue.js

実践:VueでTODOアプリを作る(追加・表示・削除) – 11/12

Vue版のTODOアプリです。React回と同じ仕様で作るので、構文の違いがクリアになります。最小構成から始めて、コンポーネント分割の方向性も示します。仕様入力欄にTODOを入れる追加ボタンでリストに追加各行に削除ボタン任意:空文字は追加し...
Vue.js

Vueの配列表示:v-for と key でリストUIを作る – 10/12

Vueの一覧表示は v-for が基本です。keyの意味と、フィルタ表示の考え方も押さえます。v-forで表示する<script setup>const items = ["Apple", "Orange", "Banana"]</scri...
Vue.js

Vueのイベント処理:@click / @input を理解して書けるようにする – 9/12

Vueのイベントは @click のようなディレクティブで書きます。頻出パターンを押さえて、TODOアプリに繋げます。@clickの基本<button @click="handleClick">Click</button>handleCli...
Vue.js

Vueの状態管理入門:ref と reactive を使ってUIを更新する – 8/12

Vueのリアクティブデータを実装で体験します。カウント、トグル、フォーム入力の3パターンを押さえます(Reactのstate回と対応)。refの基本ref は単一値をリアクティブにします。<script setup>import { ref...
Vue.js

Vueのprops:親から子へデータを渡す – 7/12

Vueでもpropsは「親→子」のデータ受け渡しです。Composition API(script setup)での基本形と、propsを変更しないルールを押さえます。親から渡す<UserCard name="Taro" role="adm...
Vue.js

Vueコンポーネント:SFCで部品化して組み立てる – 6/12

Vueのコンポーネント(SFC: Single File Component)は、テンプレートとロジックを1つのファイルにまとめられるのが特徴です。分割の基準も含めて説明します。コンポーネント化の基準次のどれかに当てはまるなら分割を検討しま...
React

React入門の次に学ぶこと:API通信・ルーティング・状態管理の道筋 – 12/12

Reactの基本が分かったら、実務に必要な周辺技術へ進みます。この記事では何から学ぶべきかを「目的別」に整理し、学習順の迷子を防ぎます。次の壁:複数ページ(ルーティング)React単体は画面の部品化が得意ですが、URLごとにページを切り替え...
Vue.js

Vueテンプレート構文:{{ }} とディレクティブを最短で理解する – 5/12

Vueの最大の特徴はテンプレートです。この記事では「{{ }}」「v-bind」「v-if」「v-model」など最低限の文法に絞って紹介します。{{ }} で値を表示するテンプレート内では {{ }} を使って値を表示できます。<temp...
React

実践:ReactでTODOアプリを作る(追加・表示・削除)- 11/12

これまでの知識(コンポーネント、props、state、イベント、リスト表示)をまとめて使います。まずは最小のTODOを作り、次回以降の拡張にも耐える設計にします。完成イメージと仕様最小仕様は次の通りです。入力欄にTODOを入れる追加ボタン...
Vue.js

Vueプロジェクトの構造:App.vue と main.js を読む – 4/12

Vueも「どこに何を書くか」で迷子になりがちです。ここでは最重要ファイルの役割と、コンポーネントを追加する場所を整理します。重要ファイルの全体像Vite + Vueの典型構造は次の通りです。index.html:<div id="app">...
React

React | 配列表示:map と key を理解してリストUIを作る – 10/12

Reactで実用アプリを作ると必ず出てくるのが「配列→一覧表示」です。ここでは map と key の意味を理解し、削除・フィルタへつなげます。mapでリストを表示する配列を表示する基本は map です。const items = ["Ap...
Vue.js

Vue開発環境を作る:ViteでVue 3プロジェクトをセットアップ – 3/12

VueもViteでの開発が主流です。ここではプロジェクト作成から起動確認までを行い、つまずきポイントも整理します。必要なものNode.js(推奨:LTS)npmエディタバージョン確認:node -vnpm -vViteでVueプロジェクト作...
React

React | イベント処理:onClick / onChange を理解して実装できるようにする – 9/12

ReactのイベントはDOMイベントに似ていますが、書き方に独特のポイントがあります。ここでは頻出イベントの型を覚え、フォーム操作につなげます。イベントの基本:関数を渡すReactではイベントハンドラに「関数」を渡します。<button o...
Vue.js

Vueの仕組み:リアクティブシステムと再描画を理解する – 2/12

Vueを理解する鍵は「リアクティブ(反応する)なデータ」です。内部実装の詳細よりも、開発者がバグらせないための考え方に絞って説明します。リアクティブとはVueではデータ(state)が変わると、依存しているUIが自動で更新されます。これをリ...
React

React | stateとは?useStateで「画面が自動更新される」感覚を掴む – 8/12

React最大の山場です。ここで「stateを更新すると再レンダーが起きる」ことを体験し、フォーム入力・カウント・トグル表示の3パターンを押さえます。stateとは何かstateは「コンポーネントが持つ状態」です。ユーザー操作などで変化し、...
Vue.js

Vue.jsとは?初心者向けにわかりやすく解説 – 1/12

この記事ではVue.jsの位置づけ、Reactとの違い、学習の前提、そして本連載のゴールを整理します。Vue 3(Composition API)を前提に進めます。Vue.jsは何を解決するのかVue.jsは、UIを作るためのJavaScr...
React

React | propsとは?コンポーネントにデータを渡す方法 – 7/12

propsは「親から子へデータを渡す仕組み」です。まずは一方向データフローの基本を押さえ、よくあるミス(propsの書き換え)を避けます。propsの役割:再利用を成立させる同じUIでも表示する内容が違うことがあります。例えば「ユーザー名」...
React

Reactの基本:コンポーネントを作って分割する – 6/12

Reactの強みはコンポーネント分割です。この記事では「関数コンポーネント」「import/export」「分割の基準」を、実務でも使える形で説明します。コンポーネントはUIの部品Reactでは画面を部品化します。部品化の基準は次のどれかに...
スポンサーリンク
タイトルとURLをコピーしました