JavaScript フレームワーク入門

概 要

JavaScriptフレームワークの選定ガイドである本書は、AltJSの筆頭に位置づけられるTypeScript、パッケージ管理のnpmとBower、モジュールバンドラーであるwebpackの解説も加えて、デファクト標準のjQuery、MVVMアーキテクチャーのVue.js、MVCアーキテクチャーのBackbone.js、コンポーネント指向のAngular、React、Aureliaという六つの代表的なフレームワークを取り上げます。今後のJavaScriptフレームワークの方向性もわかります。

著者 掌田津耶乃
価格 本体2800円(税別)
ISBN 978-4-7980-4784-3
発売日 2016/9/15
判型 B5変
ページ数 376
CD/DVD
ダウンロード
表紙イメージ
購入 アマゾンで購入する
楽天で購入する

※リンク先によっては、販売ページが用意されていないことがあります。あらかじめご了承ください。

新しいウィンドウで開く 書籍購入のご案内

サポート

サポート情報は以下からご参照下さい。

サポート情報へのリンク

目次

Chapter 1 JavaScriptとフレームワーク

1-1フレームワークの基本

JavaScriptとWebの進化

すべてはJavaScriptが実現する!

フレームワークは必要か?

JavaScriptフレームワークの仕組み

JavaScriptのフレームワークの種類

1-2開発環境とJavaScriptフレームワーク

フレームワークの利用法

ダウンロード配布の利用

パッケージマネージャについて

CDNという選択

JavaScriptの開発環境について

基本はVisual Studio Codeか?

Chapter 2 jQuery

2-1jQueryの基礎知識

jQueryとは?

jQueryサイトについて

jQueryのバージョンについて

jQueryの利用法

npmを利用する

Bowerを利用する

2-2jQueryによるDOM操作

DOM操作の基本を用意する

jQueryの基本は、$関数

textとhtml

clickイベントとフォームの入力

ラジオボタンの選択処理

リストと複数項目の選択

スタイルを操作する

クラスの操作

2-3より複雑な操作を行う

エレメントの作成と追加

エレメントで囲む

Ajaxによるデータ受信

getによるデータ取得

JSONデータを受け取る

視覚効果とshow/hide

アニメーション後の処理

fadeIn/fadeOut/fadeToggle、slideUp/slideDown/slideToggle

これからの学習

Chapter 3 TypeScript

3-1TypeScriptの基本

JavaScriptの問題点とは?

TypeScriptとは?

TypeScriptのインストール

コンパイラの使い方

コンパイルされたコード

Visual Studio Codeでの利用

3-2TypeScriptの基本文法

値と変数

型名を指定しないと?

var、let、const

配列の宣言

型のエイリアス

列挙型(enum)について

タプル(Tuple)型について

タプルと配列

3-3関数とオブジェクト指向

TypeScriptの関数定義

オプション引数について

オーバーロードについて

総称型(Generics)について

可変長引数について

アロー関数について

関数を引数に使う

3-4クラス型オブジェクト

classによるクラス定義

クラスを作成する

クラス定義の内容

アクセス修飾子について

プロパティとアクセサ

クラスの継承

メソッドのオーバーライド

クラスプロパティとクラスメソッド

インターフェイスについて

これからの学習

Chapter 4 Vue.js

4-1Vue.jsの基本

JavaScriptにおけるMVC(MVVM)

Vue.jsとは?

Vue.jsのインストール

Bowerの利用

ファイルをダウンロードする

CDNを利用する

4-2Vue.jsを利用する

HTMLファイルを用意する

スクリプトを作成する

Vueオブジェクト

HTML側からVueに値を設定する

イベントとメソッドの利用

HTMLの表示

JavaScript式を使う

フィルターを使う

4-3Vue.jsを更に使いこなす

Computedプロパティ

Get/Setの作成

スタイルクラスのバインド

スタイルの変更

条件付き表示「v-if」

繰り返す「v-for」

ダイナミックにリストを表示する

コンポーネントの作成と利用

propsによる値の受け渡し

テンプレートの利用

カスタムディレクティブ

この先の学習

Chapter 5 Backbone.js

5-1Backbone.jsの基本

JavaScriptとMVC

Backbone.jsについて

Backbone.js利用に必要なもの

Backbone.jsの利用法

npmによるインストール

Bowerの利用

5-2Backbone.jsの利用

Backbone.jsを使う

Viewオブジェクトの利用

renderメソッドについて

jQueryを使わないコード

5-3Viewの活用

構造化されたコンテンツの操作

initializeによる初期化

イベントの利用(eventsプロパティ)

新たなエレメントの生成

テンプレートの利用

複数Viewの連結

5-4Modelの利用

ModelとREST

XAMPPについて

データベースを作成する

PHPプログラムを用意する

Modelオブジェクトについて

Collectionオブジェクトについて

データを表示する

main.jsを完成させる

fetchとlistenToの仕組み

IDで検索する

データを新規追加する

この先の学習

Chapter 6 Angular

6-1Angularの基本

Angularとは?

Angularの特徴

Angularの準備

npmによるNode.jsプロジェクトの作成

npm installする

Angular CLIを使う

Angularのロード

CDNの利用

6-2Angularを利用する

Webページを作成してみる

my-appコンポーネントの作成

コンポーネントの基本ソースコード

main.tsの作成

main.tsの処理について

コンポーネントはどこで認識されるか

6-3コンポーネントを使いこなす

外部から値を挿入する

テンプレートに値を渡す

複数のコンポーネントを利用する

フォームの利用とモデル

フォームを作成する

コンポーネントとモデルの作成

main.jsを修正する

テンプレートファイルを利用する

テンプレートファイルの作成

チェックボックスとラジオボタンの利用

コンポーネントでの<select>の利用

テンプレートの修正

スタイルをバインドする

クラスを操作する

コンポーネントを作成する

この先の学習

Chapter 7 React

7-1Reactの基本

Reactとは?

Reactを入手する

Reactを利用する

CDNを利用する

npmを利用する

Create-React-Appの利用

7-2Reactを利用する

HTMLファイルを用意する

MyComponentの作成

コンポーネント作成の流れを整理する

JSXを使わない方法

propsによる値の受け渡し

スタイルの設定

Create-React-Appによるアプリケーションについて

7-3Reactを更に理解する

複数コンポーネントを組み合わせる

イベントの利用

入力フィールドとstateプロパティ

State利用の流れを整理する

チェックボックスとラジオボタン

<select>の利用

ダイナミックなリストの生成

mapの働き

<ol>によるダイナミックリスト

Virtual DOMにアクセスする

ECMAScript 6によるコンポーネントクラスの作成

この先の学習

Chapter 8 Aurelia

8-1Aureliaの基本

Aureliaとは?

Aureliaを用意する

プロジェクトの内容

アプリケーションの実行

8-2Aureliaの利用

サンプルWebページをチェックする

コンポーネントについて

双方向バインディング

イベント処理について

SPAのページ管理(ページ切り替え)

NavBarの作成

app.htmlの修正

app.tsの修正

ルーティングの設定

8-3Aureliaを使いこなす

チェックボックスとラジオボタン

JavaScript側の処理を作成する

選択リストの利用

ValueConveterについて

Number Formatterを作る

Number Formatterを利用する

日付と時刻のValueConverter

Date Componentの作成

Date Componentを利用する

コンポーネントに属性を追加する

属性を持ったmy-tagの作成

カスタム属性の利用

my-attr属性を作成する

my-attr属性を利用する

カスタム属性に値を設定する

コンテンツの利用は?

HttpClientの利用

HttpClient利用のコンポーネント

other.htmlの変更

この先の学習

Chapter 9 パッケージ管理ツール

9-1Node.jsとnpm

npmなんていらない!?

Node.jsとnpm

Node.jsを用意する

npmを利用する

npmのアップデート

npmによるインストール

インストールされたフレームワークの利用

package.jsonについて

npmの初期化

パッケージを追加する

9-2Bowerの利用

Bowerとは?

Bowerでインストールする

bower.jsonについて

bower.jsonの基本形

パッケージをbower.jsonに追加する

9-3webpack

webpackとモジュールバンドラー

Webページを用意する

webpack.config.jsの作成

webpackでビルドする

style-loader/css-loaderをインストールする

この先の学習

Chapter 10 JavaScriptフレームワークの今後

10-1フレームワークの未来

JavaScriptフレームワークはまだ「若い」

jQueryは盤石?

Vue.jsとBackbone.jsの今後は?

Angularはデファクトスタンダードとなるか?

ReactはNo.1決定?

Aureliaの実力は未知数?

TypeScriptとAltJSの未来

10-2JavaScriptの未来

もっとも注目すべきはECMAScript 6

JavaScript以外の言語は?

asm.jsからWebAssemblyへ

パッケージマネージャとモジュールバンドラー

Webコンポーネントの時代は来るか?

開発環境の今後

JavaScriptは「なんでもあり」

PR

秀和システム