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

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

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

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

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

本のキャプチャ

Webデザインの現場で使えるVue.jsの教科書
ISBN 978-4-274-22540-6
[Amazonでみる]
[楽天でみる]

著:
廣末 丈士、遠山 恭平
出版社:
オーム社
発売日:
2020/5/1

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

誌面のキャプチャ

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がたくさん掲載されているので、実務ですぐに役立ちます。

本のキャプチャ

Webデザインの現場で使えるVue.jsの教科書
ISBN 978-4-274-22540-6
[Amazonでみる]
[楽天でみる]

著:
廣末 丈士、遠山 恭平
出版社:
オーム社
発売日:
2020/5/1

献本の御礼

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

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

sponsors

top of page

©2024 coliss