これからはじめる人のJavaScript/Vue.jsの教科書

関連サイト

本書の関連ページが用意されています。

• 商品ページ

内容紹介

「JavaScriptを学ぼう」

そんなふうに思っても、「JavaScript」は現在では、非常に関連技術の多い言語になっています。JavaScript関連のキーワードを上げてみると、「ECMAScript / TypeScript / Vue.js / Nuxt.js / React / Angular / jQuery」など、上げていったらキリがないほどです。

これらはそれぞれ「JSライブラリー」とか「JSフレームワーク」などと呼ばれているJSの周辺技術ですが、現在のウェブサイト制作や、ウェブアプリ開発では、これらの周辺技術の理解が必須になっています。

本書は、こういった事情に合わせて、今JavaScriptを学ぶなら、この周辺技術は必須だと筆者が考える以下の内容について解説しています。

・JavaScript
・ECMAScript
・Vue.js
・TypeScript

これだけでも非常にカバー範囲が広く、1冊に納めるのは容易ではありませんが、それでもこれらの知識は抑えておいて欲しいという筆者の願いから、1冊に詰め込みました。

ぜひ本書を通じて、JavaScriptの魅力と現在のJavaScript開発のトレンドを抑えて頂けると幸いです。これからのウェブ開発にお役に立つことを願っています。

（「はじめに」より一部修正）

「Chapter1 JavaScriptを学ぶための準備をしよう」では、JavaScriptを学ぶための環境構築を行います。といっても、Google Chrome（ウェブブラウザー）と、Visual Studio Code（エディター）をインストールするだけの簡単な準備です。

「Chapter2 JavaScriptの基本を学ぼう」では、JavaScriptを基本からみっちり学びます。四則演算、制御構造、変数、配列、関数といった基本的なところから、イベントリスナーの使い方、クラスの定義、モジュール、非同期通信、Cookieの使い方など、JavaScriptを実務で使う際には必須となるような実践的な内容まで学びます。EcmaScript2015の文法で学びますが、必要に応じて古い文法についても説明しています。

「Chapter3 TypeScriptの基本を学ぼう」では、TypeScriptについて知っておきたいことを一通り学びます。TypeScriptの基本的な使い方から、関数、さまざまな型、クラス宣言、インターフェイスの使い方などまで解説します。

「Chapter4 Vue.jsの基本を学ぼう」では、現在制作の現場でよく使われているライブラリであるVue.jsについて学びます。基本的なディレクティブの使い方を学んだあと、メソッドやコンポーネント、ミックスインの定義方法を学び、それらを使って実用的なプログラムを作ります。

「Chapter5 Vue CLIでアプリを作ろう」では、Vue CLIを使って、簡単なメモ管理のアプリケーションを作成します。プロジェクトの作成から始まり、ルーティングを設定し、新規追加・一覧・編集・削除の機能を作っていきます。Vuexを使って、データの保存も行います。最後にはコンポーネントを作って共通のパーツを追加するところまで行います。

書誌情報

• 著者: たにぐちまこと
• 発行日: 2020-04-24 (紙書籍版発行日: 2020-04-24)
• 最終更新日: 2020-04-24
• バージョン: 1.0.0
• ページ数: 288ページ(PDF版換算)
• 対応フォーマット: PDF
• 出版社: マイナビ出版

対象読者

著者について

たにぐちまこと

「ちゃんとWeb」をコーポレートテーマに、「ちゃんと」作ることを目指したWeb制作会社。WordPressを利用したサイト制作や、スマートデバイス向けサイトの制作、PHPやJavaScriptによる開発を得意とする。また、YouTubeやUdemyでの映像講義や著書などを通じ、クリエイターの育成にも力を入れている。
主な著書に『これからWebをはじめる人のHTML&CSS, JavaScriptのきほんのきほん』（マイナビ出版刊）や、『マンガでマスタープログラミング教室（監修）』（ポプラ社）など。

目次

Chapter 1 JavaScriptを学ぶための準備をしよう

• Chapter 1-1 JavaScriptの基本的な開発環境を整えよう
• Chapter 1-2 ECMAScriptとJavaScript
• Chapter 1-3 「犬」で学ぶオブジェクト指向

Chapter 2 JavaScript の基本を学ぼう

• Chapter 2-1 テンプレートをつくろう
• Chapter 2-2 画面に文章を表示しよう － document.write
• Chapter 2-3 警告ウィンドウで注意をひこう － alert
• Chapter 2-4 1年が何秒間かを計算しよう － 四則演算
• Chapter 2-5 秒数を知りたい日数をユーザーが入力できるようにしよう － 変数
• Chapter 2-6 現在の秒数を表示しよう － Date
• Chapter 2-7 今日の日付を表示する － テンプレート文字列
• Chapter 2-8 HTMLの中に文章を表示しよう － プロパティ（1）
• Chapter 2-9 タイトルを書き換えよう － プロパティ（2）
• Chapter 2-10 ユーザーの入力をチェックして警告を表示しよう － if
• Chapter 2-11 1から365までの数字を表示しよう － while、for
• Chapter 2-12 曜日を日本語で表示しよう － 配列
• Chapter 2-13 英単語と日本語の対応表を作ろう － ハッシュ（連想配列）
• Chapter 2-14 文字列の中からキーワードを検索しよう － indexOf
• Chapter 2-15 数字かどうかを判定しよう － isFinite
• Chapter 2-16 消費税を四捨五入して求めよう － Math.round
• Chapter 2-17 足し算ゲームを作ろう － Math.random
• Chapter 2-18 偶数か奇数かを判断しよう － 剰余算
• Chapter 2-19 よく使う処理をまとめる － 関数
• Chapter 2-20 クラスを定義しよう
• Chapter 2-21 JSONデータを読み込もう
• Chapter 2-22 ボタンのクリックに反応して、重複クリックを防ごう － addEventListener
• Chapter 2-23 テキストフィールドに値が入力されていなかったらエラーにしよう － blur
• Chapter 2-24 チェックボックスがチェックされているかを確認しよう － change
• Chapter 2-25 郵便番号の形式をチェックしよう － 正規表現
• Chapter 2-26 別のページに移動しよう － location.href
• Chapter 2-27 タイマーを作ろう － setnterval
• Chapter 2-28 JavaScriptを外部ファイルにしよう
• Chapter 2-29 JavaScriptで読み込んで使えるファイルを作ろう － モジュール
• Chapter 2-30 非同期通信でデータを読み込もう
• Chapter 2-31 ブラウザーに情報を保存しよう

Chapter 3 TypeScript の基本を学ぼう

• Chapter 3-1 ES2015を古いウェブブラウザーでも使おう
• Chapter 3-2 トランスコンパイラーの種類とTypeScript
• Chapter 3-3 TypeScriptを使ってみよう
• Chapter 3-4 TypeScriptで関数を使ってみよう
• Chapter 3-5 TypeScriptをもっと柔軟に使ってみよう

Chapter 4 Vue.jsの基本を学ぼう

• Chapter 4-1 Vue.jsとは
• Chapter 4-2 Vue.jsをインストールする
• Chapter 4-3 Vue.jsで画面に文章を表示する
• Chapter 4-4 クラスを付加して、装飾しよう － v-bind
• Chapter 4-5 フェードインしながら表示させよう
• Chapter 4-6 フォームの値をVue.jsと接続しよう － v-model
• Chapter 4-7 営業時間外の場合に警告を表示しよう － v-if
• Chapter 4-8 Vue.jsで1から365までの数字を表示しよう － v-for
• Chapter 4-9 Vue.jsで曜日を日本語で表示しよう － 配列
• Chapter 4-10 ボタンのクリックに反応して、重複クリックを防ごう － v-on
• Chapter 4-11 コンポーネントを作ろう
• Chapter 4-12 時計コンポーネントを作ろう
• Chapter 4-13 ミックスインでよく使う処理をまとめよう
• Chapter 4-14 足し算計算機をつくろう

Chapter 5 Vue CLIでアプリを作ろう

• Chapter 5-1 この章の概要
• Chapter 5-2 Vue CLIとは
• Chapter 5-3 新しいプロジェクトを作成しよう
• Chapter 5-4 ファイル構成を確認しよう
• Chapter 5-5 Vue Routerを利用してルーティング処理を入れよう
• Chapter 5-6 メモの追加画面を作成しよう
• Chapter 5-7 メモの追加画面を動作させよう
• Chapter 5-8 Vuexを使ってデータを保管しよう
• Chapter 5-9 一覧画面を作ろう
• Chapter 5-10 編集画面を作成しよう
• Chapter 5-11 保存ボタンがクリックされるまで、ストアが変更されないようにしよう
• Chapter 5-12 メモを削除しよう
• Chapter 5-13 共通パーツをコンポーネントで作ろう
• Chapter 5-14 ストアの内容を保存しよう