内容紹介
ノンエンジニアでもわかる! やさしいVue.js入門書
Web デザイナー・Web 担当者・初級のフロントエンジニアなど、「Web の見た目」を作る人に向けたVue.js の入門書です。
ノンエンジニアでもむりなく読み進められるように、難しいことは極力省いて、図を用いながらできるだけ平易に解説していきます。
Vue.jsは、使いこなせればさまざまなことが実現できます。しかし本書では、Vue.js のおおまかな仕組みと、最低限の動かしかたを理解することを目的とします。まずは使ってみて、手を動かしながら感覚を掴んでいく、というイメージです。
「Vue.jsのガイドを読んでみたけれど、うまくイメージできなかった」「他の書籍を読んでみたけれど、高度でついていけなかった」という方におすすめです。
必要とする前提知識は、HTML とCSS のみです。なるべくやさしい表現と図を用いて、Vue.js とはなにか、どう役に立つのかを明確にしたのち、JavaScript の基礎知識、Vue.js の作法を丁寧に解説します。
JavaScriptはコピペでしか触ったことがない、という方でも安心して読み進めてください。
<vue.js とは?>
JavaScript フレームワークのひとつ。JavaScript 自体のコードを書かなくても、HTML やCSS の基礎的な知識があれば低い学習コストでさまざまな機能が実装できます。ノンエンジニアでも導入しやすいことから、Web デザインの現場で使われ始めています。
<本書の特徴>
・フロントエンド開発の未経験者や初級者を想定して、基礎的なところから平易に解説していきます。
・HTML、CSS、JavaScriptのファイルのみで即実行できるサンプルを多数掲載します。初級エンジニアの入門にも最適です。
<本書のサポートページ>
https://thirosue.github.io/ohm-vue-sample/
このような方におすすめ
◎ Webデザイナーをはじめとする、Webアプリケーション開発に携わる非エンジニア
○ 上記メンバーとVue.jsを使った開発に取り組んでいるチームリーダー、エンジニア
○ 初級のフロントエンドエンジニア
目次
主要目次
Chapter 1 スタートアップ ~なぜVue.js が必要なのか?~
Chapter 2 Vue.jsのためのJavaScriptの基礎
Chapter 3 Vue.js デザインのキホン
Chapter 4 簡単なUIを作ってみよう
Chapter 5 現場で使えるUIデザインレシピ集
詳細目次
Chapter 1 スタートアップ ~なぜVue.js が必要なのか?~
1-1 UI/UX を高めるVue.js の強み
1 UI/UX の簡単なおさらい
2 そもそも Vue.js とはなにか?
3 素早いフィードバックが UX の向上に寄与
4 導入が容易で高性能
5 Vue.js を使うとなにができるのか?
1-2 代表的なJS フレームワークReact との違いは?
1 React とは多くの類似点がある
2 Vue.jsはHTML をテンプレートとして使える
3 短時間で習得できる Vue.js のメリット
1-3 はじめの一歩を踏み出そう! ~ Hello Vue.js!! ~
Chapter 2 Vue.jsのためのJavaScriptの基礎
2-1 デベロッパーツールでおみくじアプリを動かそう
1 おみくじアプリを開いてみよう
2 おみくじアプリの動作を変更してみよう
2-2 JavaScript で計算してみよう
1 算術演算子
2 比較演算子
3 論理演算子
Column JavaScript のtrue とfalse について
2-3 処理の基本「条件分岐(if)」と「繰り返し(for)」をおさえよう
1 条件分岐(if)
2 繰り返し処理(for)
Column forEach について
2-4 処理をまとめる便利な「関数」を学ぼう
1 関数の定義はこうする
2 関数の引数について
3 アロー関数 ~短い構文で処理を記述~
Column Ecmascriptとは?
2-5 HTML 要素を特定する「セレクター」を学ぼう
1 要素セレクター ~タグ名をもとに該当するHTML要素を取得~
2 ID セレクター ~ ID 属性をもとに該当のHTML要素を取得~
3 クラスセレクター ~class 属性をもとに該当のHTML要素を取得~
4 要素の絞り込みの方法
Column 参考URL
2-6 動作のきっかけとなる「イベント」を学ぼう
1 画面操作で発生する「イベント」
2 イベントの基本
3 各種イベントを学ぶ
4 イベントのバブリング(伝播)とは?
Chapter 3 Vue.js デザインのキホン
3-1 はじめに ~ Vue.jsの特徴をおさえよう~
1 Vue.jsを使える状態にしよう
2 リアクティブとは? ~複雑な処理なしで即座に反応できる~
3 Progressive Framework(プログレッシブ・フレームワーク)とは?
3-2 Vue.jsのキホン
1 Vue.js を利用するには?
2 テンプレートへのテキスト展開
Column methods とcomputed について
Column ディレクティブとは
3 属性値のテンプレートへの展開
4 スタイル(class と style)のテンプレートへの展開
5 テンプレートの制御(条件分岐と繰り返し)
6 イベント制御について
Column Vue.js のthis
3-3 ライフサイクルフック ~変化に応じて処理を組み込もう~
3-4 入力フォーム ~「双方向バインディング」で開発を効率化しよう~
1 v-model の使い方
2 テキストボックスのバインディング
3 テキストエリアのバインディング
4 チェックボックスのバインディング
5 ラジオボタンのバインディング
6 セレクトボックスのバインディング
7 「修飾子」について
8 ウォッチャ ~項目間の関連性チェックを実施~
3-5 トランジション ~アニメーションを容易に実現する機能を使おう~
1 トランジションとは?
2 カスタムクラスによるトランジション
3 JavaScript フックによるトランジション
4 CSS アニメーション
5 初期描画時のトランジション
6 要素間のトランジション
7 リストトランジション
8 ライブラリ連携について
Chapter 4 簡単なUIを作ってみよう
4-1 おみくじアプリをVue.js に置き換えよう
1 Vue.jsの読み込みとプロパティの定義
2 ボタンクリックイベントの指定
4-2 入力フォームを使いやすくしよう
1 コードの解説と表示例
2 フィルターを実装する
4-3 商品一覧を表示し、ソート・フィルター処理をしよう
1 ソート・フィルターについて
2 商品データを定義する
3 data オプションを定義する
4 算出プロパティを定義する
5 sort() 関数について
6 メソッドを定義する
7 HTML の完成
8 フィルターを実装する
4-4 2択方式の「診断コンテンツ」を作ろう
1 アプリの概要
2 診断コンテンツのHTML
3 診断コンテンツのCSS(トランジション)
4 dataオプションを定義する
5 算出プロパティを定義する
6 shift() メソッドについて
7 メソッドを定義する
4-5 「もっと見る」で、大量のコンテンツを追加表示させてみよう
1 処理の概要
2 定数を定義する
3 「もっと見る」のHTML
4 dateオプションを定義する
5 メソッドを定義する
6 Array.concat() メソッドについて
7 Array.slice() メソッドについて
8 mounted ライフサイクルについて
9 「もっと見る」のCSS
Chapter 5 現場で使えるUIデザインレシピ集
5-1 ショッピングカート ~数量を変更すると価格が変動するフォームを作ろう~
1 カート機能に必要な要件
2 アイコンを準備する
3 商品データを定義する
4 一覧とカートの HTML と CSS を記述
5 ボタンクリックでカートに追加できるようにする
6 カートをコンポーネント化する
7 コンポーネント間の通信を実現する
5-2 LightBox ~モーダルウィンドウで拡大画像を表示するUI を作ろう~
1 LightBox に必要な要件
2 一覧をコーディングする
3 トランジションで気持ちのよいインタラクションを実現する
5-3 ソート・フィルターのカスタマイズ ~サイドメニューとアニメーションを追加しよう~
1 ソート・フィルターの要件
2 商品名を絞り込む
3 価格を絞り込む
4 色を絞り込む
5 ソート順を切り替える
6 コンテンツ一覧を表示する
7 コンテンツリストの並べ替えにアニメーションをつける
5-4 アコーディオンパネル ~パネルがスライド表示されるUI を作ろう~
1 アコーディオンパネルの概要
2 slot について
3 名前付きスロットの動作確認
4 コンポーネント化する
5 基本の HTML
6 開閉用の JavaScript を記述する
7 開閉のアニメーションを設定する
5-5 入力フォーム・バリデーション ~色々なパターンを作ろう~
1 入力フォームの概要
2 エラーコンポーネントを定義する
3 基本のHTML
4 郵便番号検索ができるようにする
5 フォームの追加・削除
6 バリデーションを定義する
5-6 インクリメンタルサーチ ~文字入力ごとに検索結果を絞り込む仕組みを作ろう~
1 市区町村データを準備する
2 ローカル環境でエラーが発生する場合
5-7 タブ切り替え ~タップに応じ文章が展開されるUI を作ろう~
1 基本の HTML
2 クリックで表示/非表示を切り替える
3 動的コンポーネントを使った場合
4 API を使った場合
5-8 モーダルウィンドウ ~他のウィンドウ操作を受け付けないUI を作ろう~
1 表示・非表示の動作を作成する
2 モーダルコンポーネントを作成する
3 CSS を設定する
5-9 カルーセルパネル ~画像を左右にスライドさせるUI を作ろう~
1 カルーセルのベースを作成する
2 コンポーネント内の data オプションについて
3 スライドアニメーションをつける
4 カルーセルパネルを自動的にスライドさせる
索引
続きを見る