Publishing技術評論社の電子書籍サイトログインカート本サイトではJavaScriptを使用しております。JavaScriptが無効な状態ではご利用いただけません。本書は,2018年9月22日に発売された書籍の電子版です。EPUB:リフローリストツイート概要Vue.jsを初歩から実践まで徹底的に解説。使いやすくかつ,プロダクションでも活躍するVue.jsをVue.jsコントリビューターの著者らが解説する一番わかりやすい入門書です。小規模な適用例やjQueryからの移行サンプルに加え,大規模開発を想定したアプリケーション開発も体験できます。Vue.jsはGitHubで2017年最も人気のあったJavaScriptフレームワークに選ばれるなど大注目の技術です。川口和也(かわぐちかずや)Vue.jsコアチームメンバ。オープンソースソフトウェア活動に関わりながら,日本のVue.js日本ユーザーグループの代表であり,コミュニティの運営活動をしている。Enthusiast(エンスージアスト:熱狂者)でもある。Webフロントエンド技術以外に,関心のあるWebAssemblyなどの最新Web技術動向も追いかけている。フルタイムオープンソースソフトウェア開発者としての活動を模索中。kazupon喜多啓介(きたけいすけ)LINE株式会社にて,JavaScriptを中心にクライアントサイドの実装を担当。Vue.jsの柔軟性に注目し,業務・趣味を問わず活用している。GitHub:kitakTwitter:@kitak野田陽平(のだようへい)IBMにて電子情報開示関連のソフトウェア開発にQA及びフロントエンドエンジニアとして約5年間携わる。その後株式会社プレイドに入社し,CX(顧客体験)プラットフォームKARTEの開発を行う。GitHub:positiveflatTwitter:@positiveflat片山真也(かたやましんや)Vue.jsコアチームメンバーとして主にVue.js本体と周辺ライブラリのTypeScriptサポートに貢献。静的型付けやソースコード解析に興味を持っており,それらを活用することによる開発体験の向上を模索している。UIやインタラクションにも関心を持ち,CSSの勉強会の運営も務める。GitHub:ktsnTwitter:@ktsn手島拓也(てじまたくや)IBMやLINEにて主にWeb製品開発を約7年間担当。その後,共同創業者兼CTOとしてUPSTAYを設立,事業譲渡を経験。Asiaを設立し代表を務める。Nuxt.jsにおけるサーバーサイドレンダリングサポートダウンロード(2019年9月9日更新)以下のファイルをダウンロードできます。圧縮ファイルをダウンロードして,適宜展開してご利用ください。2019年9月9日,動作しなかったコードを修正しています。ダウンロードしなおしてください。本書の以下の部分に誤りがありました。ここに訂正するとともに,ご迷惑をおかけしたことを深くお詫び申し上げます。本来はグローバルメニューにログアウト・ログインメニュー実装後に下記のようにログイン関連の説明を追加すべきでした。上記グローバルメニューのHTML内で認証モジュールAuthを利用するために、Vueインスタンス生成時のdataプロパティにAuthを指定しましょう。画像が誤っていました。文言は同一ですがスタイルが一部異なります。画像が誤っていました。「りんご、イチゴ」と表記されるべき部分が「いちご、りんご」となっていました。5.2.3の「スコープ付きスロット」の例のHTML側の表記slot-scopeを使わないもの,使うものそれぞれ動作しますが,:keyの指定が抜けていました。serveに指定するファイル名が誤っていました。正しくはform.vueを開く箇所でした。初出の$optionsに対する説明のコメントが不足していました。kbnButtonコンポーネントの単体テストコード(disabledプロパティの値がfalseのテストコード)本来はテストコードでpropsDataを指定しなければいけない箇所で指定していませんでした。直前のテストコードでtrueにしているのを参照してください。表中の表記が誤っていました。3.3.1のコンポーネントの書式の誤りdefaultとすべき箇所が,defalutと誤っていました。正しくは以下の通りです。誤Consoleの出力から、ミックスイン→コンポーネントの順番フック関数が呼ばれていることが分かります。正Consoleの出力から、ミックスイン→コンポーネントの順番でフック関数が呼ばれていることが分かります。3.4.3の最後のJSFiddleのURL本来挿入されるべき,Vue.jsの読み込みが行われていませんでした。5.4.3のデータオブジェクト中のソースコードP.182の下段からP.183中段にかけての,my-buttonのコードに不足があり動作しませんでした。正しくは下記のコードです。CLIは、Vue.js向けのアプリケーション開発環境をセットアップなどの機能を提供する公式のコマンドラインツールです。CLIは、Vue.js向けのアプリケーション開発環境セットアップなどの機能を提供する公式のコマンドラインツールです。図中の番号表記が誤っていました。誤UserListコンポーネントのテンプレートとJavaScriptを回収していきます。正UserListコンポーネントのテンプレートとJavaScriptを改修していきます。スコープ付きCSSのメリット」のコードのbar.vueコードが誤っていました。正しくは下記のコードです。<p>これはBarコンポーネントです。Fooコンポーネントの利用。最後のコードブロックのコード例actionsとすべき個所がactionになっていました。正しくは下記のコードです。10.2.2のtest/unit/specs/components/molecules/kbnLoginForm.spec.js中のdescribeに与える文言メールアドレス形式のフォーマットを検証する部分で,itの第一引数に与える説明が誤っていました。文章が途中で抜けていました。誤プロジェクトして開発を行っています。正プロジェクトとして開発を行っています。1.5.1の単一ファイルコンポーネントのコード例templateの閉じタグが誤っていました。基本機能を紹介していきます。実行結果画面が誤っていました。正しくは下記画面です。画像をクリックすると大きく表示できます。誤ログインフォームやコメントフォームなナビゲーションバーなど。正ログインフォームやコメントフォーム、ナビゲーションバーなど。誤〜部分にレンダリングされます。ページを開いてからページ遷移が正〜部分にレンダリングされます。例として、ユーザー情報登録・閲覧が可能なアプリケーション用います。例として、ユーザー情報登録・閲覧が可能なアプリケーションを用います。4章の脚注7誤ES2015以降でプログラムを作成したい場合もWebpackの利用はほぼ必須です。正ES2015以降でプログラムを作成したい場合もwebpackの利用はほぼ必須です。動作はしますがバージョンが古いものでした。実際にコードと見ていきます。実際にコードを見ていきます。誤ブログエントリの要素付けのUIなどです。正ブログエントリのタグ付けのUIなどです。本来「:」とすべき個所が「!」になっていました。本来「:」とすべき個所が「!」になっていました。文字列をセットして、属性値と指定します。文字列をセットして、属性値を指定します。誤no_image画像も何も表示されなくなるはずです。image画像も何も表示されなくなるはずです。参照先が誤っていました。正しくは6.6.2以降で利用するコラムを参照します。先に利用した単一ファイルコンポーネントのFooコンポーネントとRootコンポーネントを以下のように変更します。スコープ付きCSSのメリット(後述)」の単一ファイルコンポーネントfoo.vueとroot.vueを以下のように変更し、bar.vueをそのまま利用します。サンプルを参照してください。スコープ付きCSSのメリット」のコードコラム内のfoo.vue,root.vueのコードがtemplate部分のみ抜粋する形になっていたため全体を掲載いたします。<p>これはFooコンポーネントです。<p>これはRootコンポーネントです。6.6.4のpug関連のパッケージをインストールする部分pug-plain-loaderの追加が必要です。7章の脚注*15「この例では、incrementAsyncを使わずに書くと以下のようになります」の一文は必要ありません。誤この例では、incrementAsyncを使わずに書くと以下のようになります。elementが必須になり,v-ifを用いた本書のサンプルは動作しなくなっていました。v2.6以降で動作を試したい場合は下記のようにv-showに修正して試してください。10.3.1のloginアクションハンドラに関するテスト(2019年5月10日更新)一部のコードがVue.js本体の変更に伴い動作しなくなっていました。タスクが下記のissue対応によって処理されるタイミングが変わってしまったため(MutationObserverによるmicroTask),イベントループでうまく処理されなくなってしまいました。ハンドリングすることで,アサーションできるように修正してください。diff形式で掲載しています。