SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

CodeZineニュース

【新刊紹介】『速習 Vue.js 3 - Composition API編』発売、Vue.js 3の新たな標準が学べる入門書

  • X ポスト
  • このエントリーをはてなブックマークに追加

  • X ポスト
  • このエントリーをはてなブックマークに追加

 執筆コミュニティ「WINGSプロジェクト」代表の山田祥寛さんによる、JavaScriptフレームワーク「Vue.js」の入門書『速習 Vue.js 3 - Composition API編』が4月27日に発売されました。本書は、新たな標準環境Vite、Pinia、Vitestなどに対応。Vue.js 3の使い方を13個のPartに分けて、サンプルコードとともに詳しく解説しています。サンプルをダウンロードして実際に動かしながら、人気のJavaScriptフレームワークを学んでみませんか?

 本書は、2020年9月に刊行された『速習 Vue.js 3』をVue.jsの新しいAPI「Composition API」対応で全面的に書き直したもの。Vue.js 3の使い方を13個のPartに分けて、サンプルコードとともに詳しく解説しています。導入から、SPA(Single Page Application)開発のための基礎知識まで、短時間で習得しましょう。

担当編集者からのコメント

 「「速習」シリーズ」は、WINGSプロジェクトが進めるAmazon Kindle電子書籍のシリーズ。短時間でサクッと読める、差分の知識を手軽に補う――をコンセプトとしています。2015年にリリースして以来、お陰様で巻を重ねて、本書で19冊目となります。

 その本書、「速習 Vue.js 3 - Composition API編」は、ビュー(見た目)に特化したシンプルなJavaScriptフレームワーク「Vue.js」の解説書です。

 Vue.js 3については、2020年に刊行した「速習 Vue.js 3」がありますが、その時からですら、Vue.jsを取り巻く環境は大きく変化しました。Vue.js 3で標準搭載されたComposition API(と、その省略記法であるsetup属性)がデフォルトの記法となりました。伴い、周辺ツールも大幅に刷新しています。

Vue.jsにおける関連ツールの変化
以前の標準 新たな標準 概要
Vue CLI create-vue(Vite) アプリ開発のためのCLIツール
Vuex Pinia 状態管理ライブラリ
Mocha/Jest Vitest テストライブラリ

 この辺は、別稿「Vue.jsの世代交代が到来! Vue 3デフォルト時代の「Vue.js開発新常識」」でも取り上げているので、併せてご覧いただくと良いかと思います。

 本書は、旧著では手薄であったComposition API(+setup属性)に全面的に対応すると共に、これらの新標準に対応した書籍です。

 とは言え、あくまで「速習」シリーズ。Vue.jsが初めて、という人でも、短時間でフレームワークプログラミングに馴染めるよう、「こんにちは、世界!」アプリからはじめ、SPA(Single Page Application)開発までを順序立てて解説しています。

 書籍の性質上、ベースとなるJavaScriptそのものの理解は前提となります。そちらの理解を補いたい方は、同著者の「JavaScript逆引きレシピ 第2版」(翔泳社)も併せて参照してください。

 ということで、本書が、皆さんがVue.jsに触れる一助となることを願っています。ご感想、ご意見をお待ちしております。以下、刊行前に先行で本書をお読みいただいた「春の嵐」さんからのレビューもどうぞ!

一般読者からのコメント(春の嵐さん)

 「速習」というシリーズ本で、Vueの.js入門者向け解説本です。Composition APIで説明されています。

 以前のVue.jsではVue CLI+Options APIが主に使われていましたが、今後はViteベースの新しいCLIツールcreate-vue+Composition APIを使うようです。

 本書は、その新しい方法で全編解説がなされています。

 本書を最初に開いた際、目次に見慣れない単語が並んでおり、難しそうに感じましたが、、実際に読んでみると、サクサク読むことができました。概念図や結果画面が多く掲載されており、数時間で目を通すことができました。

 その後再度、サンプルをダウンロードして動かしながら、読みました。薄さのわりに中身は結構濃いので、動作を確認しながら読んだ方がより理解が深められると思います。

 個人的には、「Part 9:組み込みコンポーネント」や「Part 12:Pinia」がとても興味深かったです。

 たとえば、「Transition」で、ToDoリストの項目追加時にアニメーションを付与し、見た目を少しリッチにできたり、「Suspense」で重い処理が完了するまで、ローディングメッセージを表示し、ユーザーの体感速度を調整できたりするのは、役立ちそうです。

 また「アクションサブスクリプション」でステートの内容をストレージに保存するのも、ちょうど開発で悩んでいたテーマだったので、さっそく使ってみたいと思いました。

 時折登場するNoteには、省略構文やサンプルコードの別解、注意事項などが説明されており、プラスアルファな情報が得られます。JavaScriptの解説は本書の範囲外ですが、調べるキッカケになりますし、本書で不足な点を調べるのに支障もありませんでした。

 これからVue.jsを始めるなら、最初の1冊に最適な本ではないでしょうか。

仕様

  • 書名:『速習 Vue.js 3 - Composition API編
  • 著者:山田祥寛
  • 出版社:WINGSプロジェクト
  • 頁数:271ページ
  • 定価:700円(税込)
  • 色数:4色
  • 発売日:2022年4月27日

目次

 はじめに

  • 対象読者
  • 動作確認環境について

 Part 1:イントロダクション

  • 1.1 JavaScriptフレームワークとは?
  • 1.2 jQueryの問題点とJavaScriptフレームワーク
  • 1.3 主なJavaScriptフレームワーク

 Part 2:はじめてのVue.js

  • 2.1 Vue.jsのインストール方法
  • 2.2 サンプルアプリの内容を確認する
  • 2.3 学習を進める前に

 Part 3:Vueアプリの基本ルール

  • 3.1 Vueアプリで「Hello, World」
  • 3.2 リアクティブシステム
  • 3.3 算出プロパティとメソッド

 Part 4:ディレクティブとデータバインディング

  • 4.1 ディレクティブによるデータアクセス - v-text
  • 4.2 {{…}}式を無効化する - v-pre
  • 4.3 文字列をHTMLとして埋め込む - v-html
  • 4.4 属性値にJavaScript式を埋め込む - v-bind
  • 4.5 値を一度だけバインドする - v-once
  • 4.6 要素にスタイルプロパティを設定する - v-bind:style
  • 4.7 要素にスタイルクラスを設定する - v-bind:class
  • 4.8 {{…}}式による画面のチラツキを防ぐ - v-cloak

 Part 5:イベント処理

  • 5.1 イベントの基本
  • 5.2 イベントオブジェクトを参照する
  • 5.3 定型的なイベント処理を宣言的に指定する - イベント修飾子
  • 5.4 キーボードからの入力を識別する - キー修飾子
  • 5.5 マウスの特定のボタンを検知する - マウス修飾子

 Part 6:フォーム開発

  • 6.1 フォーム開発の基本
  • 6.2 さまざまなフォーム要素の例
  • 6.3 バインドの動作オプションを設定する - 修飾子
  • 6.4 双方向データバインディングのカスタマイズ

 Part 7:条件分岐とループ

  • 7.1 式の真偽に応じて表示/非表示を切り替える - v-if
  • 7.2 式の真偽に応じて表示/非表示を切り替える - v-show
  • 7.3 配列/オブジェクトを繰り返し処理する - v-for
  • 7.4 v-forによるループ処理の注意点

 Part 8:コンポーネント連携

  • 8.1 コンポーネント連携の種類
  • 8.2 コンポーネントへのパラメーターの引き渡し - プロパティ
  • 8.3 子コンポーネントから親コンポーネントへの伝達 - カスタムイベント
  • 8.4 コンポーネント配下のコンテンツをテンプレートに反映させる - スロット
  • 8.5 子孫コンポーネントへの値の引き渡し - Provide/Inject

 Part 9:組み込みコンポーネント

  • 9.1 コンポーネントを動的に切り替える - <component>要素
  • 9.2 アニメーション機能を実装する - <Transition>要素
  • 9.3 テンプレート配下のコンテンツを任意の場所に反映させる - <Teleport>要素
  • 9.4 非同期処理の待ちメッセージを表示する - <Suspense>要素

 Part 10:ディレクティブ/プラグイン

  • 10.1 ディレクティブの自作
  • 10.2 プラグイン

 Part 11:ルーティング

  • 11.1 ルーターの基本
  • 11.2 パスの一部をパラメータ―として引き渡す - ルートパラメーター
  • 11.3 複数のビュー領域を設置する
  • 11.4 入れ子のビューを設置する

 Part 12:Pinia

  • 12.1 Piniaの組み込み
  • 12.2 Piniaによるカウンターアプリ
  • 12.3 Piniaストアの活用

 Part 13:ユニットテスト

  • 13.1 ユニットテストの基本
  • 13.2 ユニットテストのさまざまな手法
関連リンク

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
この記事の著者

CodeZine編集部(コードジンヘンシュウブ)

CodeZineは、株式会社翔泳社が運営するソフトウェア開発者向けのWebメディアです。「デベロッパーの成長と課題解決に貢献するメディア」をコンセプトに、現場で役立つ最新情報を日々お届けします。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/15871 2022/05/02 09:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング