Posts11-20
Vue で SPA - ルーティング
現代の Web アプリの多くは SPA (エスピーエー、Single Page Application) と呼ばれる形式で作られています。これは、ページ遷移してもブラウザの再読み込みがなく、スムーズなユーザー体験を提供するアプリのことです。
... 読むVue コンポーネント間 データ受渡し: 子 -> 親
子から親へ:
emitでイベントを通知する子コンポーネントから親コンポーネントへデータを送り返したり、何らかの操作を親に伝えたりするには、 イベントを発行 (emit) します。子コンポーネントから「こういうことがあったよ !」と親に知らせるイメージです。
... 読むVue コンポーネント データ受渡し: 親 -> 子
コンポーネント間のデータの受渡し
コンポーネントは独立しているとはいえ、時には互いに情報をやり取りする必要があります。特に頻繁に行われるのが 親子コンポーネント間でのデータの受け渡し です。
... 読むVue コンポーネント 階層
Web アプリを効率的に開発するには、機能を小さな部品に分割して考えることが大切です。この部品こそが コンポーネント (Components) です。
コンポーネント とは
コンポーネントは、再利用可能な UI の塊です。例えば、EC サイトであれば、商品カード、カートのアイコン、検索バーなど、それぞれを一つのコンポーネントとして作成できます。
... 読むVue ディレクティブ 基本要素
Vue 3 Composition API エッセンス
Vue 3 では、Composition API という新しい API が導入され、より柔軟で再利用しやすいコードを書けるようになりました。それまでの Options API (
... 読むdata,methods,computedなどで区切る形式) に比べて、関連するロジックをまとめて記述できるのが特徴です。Vue とはどのようなものか
いよいよ、 Web アプリの「見た目」と「動き」を作る主役、Vue (ヴュー) について深掘りしていきます。 Vue は、学習コストが低く、直感的に使えるため、初心者にも非常におすすめのフレームワークです。
... 読むVue 初めてのプロジェクト作成
プロジェクトの作成
実際の Vue プロジェクトの作成に入りましょう。Vite というものが下支えしてくれるテンプレートで作成します。
コマンドプロンプトやターミナルで以下を実行してください。
... 読むフロントエンドフレームワーク 共通の考え方
Vue のようなフロントエンドフレームワークには、共通の考え方 (哲学) があります。
コンポーネント指向 (Component-Based)
コードの再利用性を高め、開発効率を良くしてくれます。
... 読むWeb アプリ 開発環境
Web アプリ開発を始めるには、いくつかのツールが必要です。
必要なソフトウェア
- Node.js + npm / Vite
- VS Code + いくつかのエクステンション
- ターミナルエミュレーター
- Web ブラウザ