Vue.jsの基本からよく見かけるUIの実装方法まで、JavaScriptが苦手な人向けに解説した入門書 -Vue.jsの教科書

Vue.jsの基本から、Webページやスマホアプリでよく見かけるUIの実装方法まで、やさしく丁寧に解説した入門書を紹介します。

HTMLとCSSはできるけどJavaScriptはいまいち、Vue.jsってよさそうだけど何から始めればよいか分からない、そんな人にぴったりの一冊です。Vue.jsの解説書にはJavaScriptの基礎知識が前提のものが多いですが、本書は異なります。

本書はある程度HTMLとCSSが使用でき、JavaScriptはちょっと苦手という人にお勧めです。特に、Vue.jsに一度挑戦してみたけど、JavaScriptがいまいちの私には無理だった、、、と挫折してしまった人に特にお勧めです。

そんな紙面をキャプチャで少しだけ紹介します。

Vue.jsは、使いこなせればさまざまなことが実現できます。本書で必要な前提知識はHTMLとCSSだけで、Vue.jsとは何か、どう役に立つのかを学び、JavaScriptの基礎知識、Vue.jsの使い方を身につけることができます。

本書は5章構成で、1,2章ではVue.jsの基礎を学びます。Vue.jsを使うと何ができるのか、Reactと何が違うのか、実際の例を見ながら解説されているので、よく分かると思います。

3章では、Vue.jsを使用する際の要点がまとめられています。コードを実際に書き、実行結果を見ながら、読み進めると理解が深まります。

ノンエンジニアでも無理なく読み進められるように、難しいことは極力省かれており、図を用いながらやさしく丁寧に解説されています。

Vue.jsの基本を身につけたら、4章ではVue.jsで実際に何ができるのかを簡単なUIを作成しながら学びます。Vue.jsのファイル構成や通常のJavaScriptで実装した場合との違いなどを確認します。

5章からいよいよメインと言ってもよいでしょう。Webページやスマホアプリで使用されるさまざまなUIをVue.jsで実装します。これらのコードはサポートサイトからダウンロードできます。

ショッピングカートでは、数量を変更すると価格が変わるフォームを作成します。

各UIの解説は10ページくらいで、図やコードも豊富に詳しく解説されています。

LightBoxでは、サムネイル画像をクリックするとモーダルウインドウで拡大画像を表示します。

アコーディオンパネルでは、複数のパネルがスライドで表示されるUIを作成します。

入力フォームでは、入力ミスや入力漏れをチェックするバリデーション機能を実装します。

Webデザインの現場で使えるVue.jsの教科書の目次

1. スタートアップ　～なぜVue.js が必要なのか？～

   UI/UXを高めるVue.js の強み

   代表的なJSフレームワークReactとの違いは？

   はじめの一歩を踏み出そう！　～ Hello Vue.js!! ～

2. Vue.jsのためのJavaScriptの基礎

   デベロッパーツールでおみくじアプリを動かそう

   JavaScript で計算してみよう

   処理の基本「条件分岐（if）」と「繰り返し（for）」をおさえよう

   処理をまとめる便利な「関数」を学ぼう

   HTML要素を特定する「セレクター」を学ぼう

   動作のきっかけとなる「イベント」を学ぼう

3. Vue.jsデザインのキホン

   はじめに　～ Vue.jsの特徴をおさえよう～

   Vue.jsのキホン

   ライフサイクルフック　～変化に応じて処理を組み込もう～

   入力フォーム　～「双方向バインディング」で開発を効率化しよう～

   トランジション　～アニメーションを容易に実現する機能を使おう～

4. 簡単なUIを作ってみよう

   おみくじアプリをVue.jsに置き換えよう

   入力フォームを使いやすくしよう

   商品一覧を表示し、ソート・フィルター処理をしよう

   2択方式の「診断コンテンツ」を作ろう

   「もっと見る」で、大量のコンテンツを追加表示させてみよう

5. 現場で使えるUIデザインレシピ集

   ショッピングカート　～数量を変更すると価格が変動するフォームを作ろう～

   LightBox　～モーダルウィンドウで拡大画像を表示するUI を作ろう～

   ソート・フィルターのカスタマイズ　～サイドメニューとアニメーションを追加しよう～

   アコーディオンパネル　～パネルがスライド表示されるUI を作ろう～

   入力フォーム・バリデーション　～色々なパターンを作ろう～

   インクリメンタルサーチ　～文字入力ごとに検索結果を絞り込む仕組みを作ろう～

   タブ切り替え　～タップに応じ文章が展開されるUI を作ろう～

   モーダルウィンドウ　～他のウィンドウ操作を受け付けないUI を作ろう～

   カルーセルパネル　～画像を左右にスライドさせるUI を作ろう～

JavaScriptの基礎知識があることを前提にした解説書とは異なり、JavaScriptを苦手としている人にも分かるようJavaScriptの基礎から解説し、Vue.jsの使い方まで身につく一冊です。実際に使用されるUIがたくさん掲載されているので、実務ですぐに役立ちます。

献本の御礼

最後に、献本いただいた担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

• お問い合わせ｜コリス