おわりに - Vue フロントエンド開発入門
UI/UX - 大規模な CSS への対応
大規模なスタイルセットを記述する場合、CSS では限界があります。そこで登場するのが、CSS プリプロセッサ と呼ばれるツールです。その中でも代表的なのが SCSS (サス、Sassy CSS) です。
... 読むUI/UX - CSS でスタイル定義
CSS とは
Web ページの見た目を装飾するのが CSS (Cascading Style Sheets) です。HTML でページの骨格を作り、それに対して CSS で色、フォント、レイアウトなどを指定します。
... 読むUI/UX - デザインの基本的な原則
UI/UX - ユーザー視点デザイン
Web アプリを作る上で、コードが正しく動くことはもちろん重要です。しかしそれと同じくらい、あるいはそれ以上に大切なことがあります。ユーザーが使いやすいと感じる「見た目」と「操作性」 です。
... 読むWeb API を操作してみよう
データ送受信のフォーマット
Web API でのデータのやり取りでは、ほとんどの場合、JSON (JavaScript Object Notation) という軽量なデータ交換フォーマットが使われます。
... 読むWeb API とは何か
Web API
現代の Web アプリの多くは、単に静的な情報を表示するだけにとどまりません。外部のデータソースと連携しながら、情報処理を動的で柔軟なかたちで提供します。この「外部のデータソース」とやり取りするためのしくみが Web API です。
... 読むVue の TypeScript 親和性
Vue は TypeScript との相性が非常に良い
Vue 公式も TypeScript の利用を推奨しています。特に Vue 3 の Composition API は、TypeScript と非常に高い親和性を持っています。
... 読むTypeScript で型安全
型安全な開発
JavaScript (JS) は非常に柔軟な言語ですが、その柔軟性ゆえに、特に大規模なアプリ開発では予期せぬエラーやバグ発生のリスクが高くなります。そこで登場するのが、TypeScript (TS、タイプスクリプト) です。
... 読むVue の状態管理
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 ブラウザ
Web アプリ 基本構成
Web サイトや Web アプリ (Web アプリケーション) は、どのようにして私たちの PC (パソコン) やスマートフォンの画面に表示されているのでしょうか ? ここでは、そのしくみと、開発を始めるために必要な環境を整えましょう。
... 読むはじめに - Vue フロントエンド開発入門
Vue と実践的フローで学ぶ Web アプリ開発
ようこそ !
あなたは今 Web アプリ開発のワクワクする世界への一歩を踏み出そうとしています。Web サイトを見るだけでなく、Web アプリとして自分で動くものをつくれるようになるのは、きっととても楽しい体験になるでしょう。
... 読む
22 件の記事が見付かりました。