JavaScriptライブラリ「React」の解説書。動くコンポーネントを作りつつ記法解説とツールやライブラリの紹介をする。 Webフロントエンドの「今」を学びたい人へ！ Facebookが開発したJavaScriptライブラリ「React」の解説書。2013年にオープンソース化されたReactですが、ここ数年で大きな変更が加えられ、またReactを取り巻くエコシステムも大きく変化しました。本書では実際に動くコンポーネントを作りながら、最新のReactの記法について解説しつつ、最新のツールやライブラリも紹介します。初心者から中上級者まで、Reactの今をすばやく学習することができます。 JavaScriptライブラリ「React」の解説書。動くコンポーネントを作りつつ記法解説とツールやライブラリの紹介をする。

絶対に挫折しない最高の1冊！ Reactをイチから学びたい方にオススメの1冊です！ 【本書のポイント】 UdemyのReactコースで最高評価獲得の著者がモダンJavaScriptの基礎からTypeScriptの実践的な内容までしっかり解説！ 著者が2年以上勉強会を主催し初学者と話す中で分かった、多くの人が感じるReactの挫折ポイントを解決する構成！ 現場のシチュエーションベースのストーリーで技術解説をしているので、実務で必要となる知識を意識しながら学習を進められる！ 「#挫折しないReact本」で学習した感想をシェア！！ Chapter1 React を始める前に知っておきたいモダンJavaScript の基礎 1-1 モダンJavaScript 概説 1-2 DOM、仮想DOM 1-3 パッケージマネージャー(npm/yarn) 1-4 ECMAScript 1-5 モジュールバンドラー、トランスパイラ 1-6 SPA と従来のWeb システムの違い .. . Chapter1 まとめ Chapter2 モダンJavaScript の機能に触れる 2-1 const、let での変数宣言 2-2 テンプレート文字列 2-3 アロー関数 ( ) => { } 2-4 分割代入 { } [ ] 2-5 デフォルト値 = 2-6 スプレッド構文 2-7 オブジェクトの省略記法 2-8 map、filter Chapter2 まとめ Chapter3 JavaScript でのDOM 操作 3-1 JavaScript によるDOM アクセス 3-2 DOM の作成、追加、削除 3-3 JavaScript によるDOM 操作実践 Chapter3 まとめ Chapter4 React の基本 4-1 React 開発の始め方 4-2 JSX 記法 4-3 コンポーネントの使い方 4-4 イベントやスタイルの扱い方 4-5 Props 4-6 State（useState） 4-7 再レンダリングと副作用（useEffect） 4-8 export の種類 Chapter4 まとめ Chapter5 React とCSS 5-1 Inline Styles 5-2 CSS Modules 5-3 Styled JSX 5-4 styled components 5-5 Emotion 5-6 Tailwind CSS Chapter5 まとめ Chapter6 再レンダリングの仕組みと最適化 6-1 再レンダリングが起きる条件 6-2 レンダリング最適化1（memo） 6-3 レンダリング最適化2（useCallback） 6-4 変数のmemo 化（useMemo） Chapter6 まとめ Chapter7 グローバルなState 管理 7-1 グローバルなState 管理が必要な理由 7-2 Context でのState 管理 7-3 その他のグローバルstate を扱う方法 Chapter7 まとめ Chapter8 React とTypeScript 8-1 TypeScript の基本 8-2 API で取得するデータへの型定義 8-3 Props への型定義 8-4 型定義の管理方法 8-5 コンポーネントの型定義 8-6 省略可能な型の定義 8-7 オプショナルチェイニング（Optional chaining） 8-8 ライブラリの型定義 Chapter8 まとめ Chapter9 カスタムフック 9-1 カスタムフックとは 9-2 カスタムフックの雛形を作成 9-3 カスタムフックの実装 Chapter9 まとめ 付録 React × TypeScript 実践演習

2019/3発刊「React.js＆Next.js超入門」の改訂版。改訂内容は新バージョン対応。挫折した人もついていける内容 React.jsの入門者向け書籍です。2019/3発刊「React.js＆Next.js超入門」の改訂版となります。改訂内容は新バージョン17対応、新しい周辺ツールやデータベースサービスへの対応となります。対象読者はJavaScriptの入門書を読み終えた層で、React.jsの経験がなくても読めるようにしました。既存の入門書などで挫折した人でもついていけるように、手順を可能な限り省略せず、手取り足取り教えていく形で説明しています。 本企画はReact.jsの入門者向け書籍です。対象読者はJavaScriptの入門書を読み終え、React.jsの経験がない層で、そういった人が挫折しないよう手取り足取り教える内容になっています。

React/React Hooksの基礎が学べる！ 　　本書では、 ・React/React Hooksの基本の習得 ・React/React Hooksを利用した簡単なアプリの作成ができる をゴールとし、つまずきやすいポイントを確認しながらReact/React Hooksが学べる1冊です。 　Reactの学習を進める上でつまずく原因はJavaScriptへの理解不足であることがほとんどではないかと考え、本書の冒頭ではJavaScriptの基礎について多めにページを割いています。 　JavaScriptの基礎を固めた上でReact/React Hooksを学んだあとは、TODOアプリの作成に挑戦してみましょう。 　また、Chakra UIを使って、Reactアプリのスタイリングも解説しています。 ■対象読者 ・JavaScriptは少し書けるがさらにスキルアップしたい人 ・React/React Hooksを書けるWebデザイナー／フロントエンドエンジニアを目指す人 ・React/React Hooksでアプリの開発を行ってみたい人 ・React公式サイトの内容を、少し難しいと感じた人 ・Reactを一度学習してみたが、挫折してしまった人 ・Reactを始めてみたいけど、どうしたらいいかよくわからない人 ■序文より 　Reactの始め方を間違えて挫折してしまう人は案外多いのではないでしょうか。 　数年前まで、勤務先での私のメイン業務はデザイン兼マークアップ（HTML/CSS/jQuery）でした。 　そんな中、担当していたWebサイトのフロントエンドが次々とReact化していく流れとなり、Webデザイナーが担当してきたフロントエンド分野においてもReactスキルへの需要が高まりました。 　とにかく早くReactを身に付たい、React力を武器にしたいと考え、張り切って勉強を始めたのですが、最初は難しくてワケがわからず泣きたくなるほどでした。React公式サイトを見ながら懸命に勉強しましたが、なかなか理解が進まず何度も心が折れそうになりました。 　散々遠回りしましたが、Reactを学習するためのスタート地点に立つためにはJavaScriptの基本をきちんと習得していることが前提であることに気付き、思い切ってif文から勉強をやり直しました。その結果、Reactが少しずつ理解できるようになり、いつの間にかReactが大好きになった現在に至ります。 　Reactの学習を進める上でつまずく原因はJavaScriptへの理解不足であることがほとんどではないかと考え、本書の冒頭ではJavaScriptの基礎について多めにページを割きました。そして悪戦苦闘しながらReactを書けるようになるまでに学んだことやつまずいたポイントについて、できるだけ噛み砕いて丁寧に説明することを心がけました。 　 CHAPTER 1　Reactを始めるために必要なJavaScriptの知識 CHAPTER 2　Reactの基礎知識 CHAPTER 3　Reactを試してみよう CHAPTER 4　Reactの基本をマスターしよう CHAPTER 5　React Hooksを基礎から理解する CHAPTER 6　TODOアプリ作成にチャレンジしよう！ CHAPTER 7　Chakra UIでアプリにデザインを組み込む

Atomic DesignによるモダンUIコンポーネント開発 JavaScriptライブラリReact ＋ Atomic Designの導入によるコンポーネントの設計から実装まで。 現場で使える、実務に役立つ知識とノウハウを習得したいエンジニアのための、React実践書です。 Reactはフロントエンド開発に革新的な影響を与えました。従来のJavaScriptライブラリと比較して、構築へのアプローチが変わり、今後のUI開発に対する大きなヒントとなり得ます。本書はその「今後のUI開発」の視点から、Reactを解説していきます。 Chapter01「Web開発の動向」は現在のWeb開発の最新動向を解説し、「品質」「コスト」「スケジュール」の観点から、開発プロジェクト成功のために「設計」が必要で、重要であることを確認します。 Chapter02「Reactの基本」は、Reactの概要から実行させるための環境構築、記述方法、JSXなどを解説します。 Chapter03「Atomic Design」では、注目度の高いUIデザインの設計手法であるAtomic Designを解説します。論理的な観点でUIを俯瞰して、抽象化と具象化をポイントに、今後求められるWeb開発に向けたデザインの設計を解説します。 Chapter04「ソースコードのビルド」ではビルド作業の実際を解説します。モジュールバンドラーwebpackなどの使い方も解説します。 Chapter05「コンポーネントの実装」では、今後のUI開発の基本であるコンポーネントに関して、実装方法を解説します。 Chapter06「CSSの実装」では、UI構築において重要な要素となるCSSによるスタイリングについて、構造化設計に沿った実装方法を紹介します。CSS in JSやPostCSSなどを取り上げます。 Chapter07「ロジックの実装」では、UIロジックの根幹にあたる状態管理に焦点を定め、Reactを強力に支援するReduxアーキテクチャを例に、組み込み方法とその構造を解説します。 Chapter08「プロダクトの品質」では、さまざまな視点から品質向上ならびに品質維持に繋がる手法と実現するツールを紹介します。テストフレームワークJestやenzymeを使ったテストの方法、Lintツールによる構文チェック、flowを使った型チェッカー、スタイルガイドツールStorybookの活用などを解説しています。 リアルな開発現場から生まれた、実践ノウハウを凝縮した1冊です。 Chapter 1　Web開発の動向 1　現在の課題とその背景 　　　1　Webフロントエンドを取り巻く環境 　　　2　デザイナーとエンジニア 　　　3　開発現場の悩み 　　　4　フロントエンジニアの理想像 2　開発者が考えるべきこと 　　　1　ブラウザ実装 　　　2　HTMLとCSS 　　　3　CSSが抱える問題 3　設計の必要性 　　　1　今までのWebフロントエンドコード 　　　2　コードは生き物 Chapter 2 Reactの基本 1　Reactの概略 　　　1　Reactの特徴 　　　2　React推奨の理由 2　基本構文と実行環境 　　　1　ECMAScript 　　　2　開発環境の準備 　　　3　オンラインエディタCodeSandbox 3　JSX 　　　1　JSXとは 　　　2　Babel 4　Reactの記述方法 　　　1　Components 　　　2　render 　　　3　Functional Components 　　　4　Props 　　　5　State 　　　6　イベント 　　　7　key 5　ライフサイクル 　　　1　Reactにおけるライフサイクル 　　　2　処理の流れ 　　　3　Functional Componentsのライフサイクル 　　　［コラム］Babel 7へのアップデート Chapter 3　Atomic Design 1　Atomic Designとは 　　　1　Atomic Designの基本概念 　　　2　Atoms 　　　3　Molecules 　　　4　Organisms 　　　5　Templates 　　　6　Pages 2　メリット 　　　1　デザインシステム 　　　2　開発におけるデザインの基準 3　コンポーネント開発のUIデザイン 　　　1　スタイリング 　　　2　レイアウト 　　　3　トーン＆マナー 4　Reactとの相性 　　　1　肥大化しないコンポーネント 　　　2　拡張性 　　　［コラム］Fragments Chapter 4　ソースコードのビルド89 1　ビルドする理由 　　　1　Node.js 　　　2　人間がやるべきこと・機械にやらせること 　　　3　開発環境の拡張性 2　webpack 　　　1　webpackの基本 　　　2　webpackのセットアップ 　　　3　webpack.config.js 　　　4　ローダー 　　　5　プラグイン 3　webpack-dev-server 　　　1　基本的な使い方 　　　2　Hot Module Replacement Chapter 5　コンポーネントの実装 1　ベストプラクティス 　　　1　PresentationalとContainer 　　　2　データの反映 　　　3　Local State 2　コンポーネントレベル 　　　1　Atomic Designとの照合 　　　2　Molecules・OrganismsとTemplates・Pages 　　　3　実運用と妥協点 3　プロジェクト構成 　　　1　コンポーネントディレクトリ 　　　2　UIライブラリの活用 4　サーバーサイドレンダリング 　　　1　サーバーサイドレンダリングとは 　　　2　Reactでのサーバーサイドレンダリングの実践 Chapter 6　CSSの実装 1　コンポーネント化とCSS 　　　1　従来のアプローチ 　　　2　解決すべき課題 2　CSS in JS 　　　1　CSS in JSの基本概念 　　　2　CSS modules 　　　3　styled-components 　　　4　styled-jsx 3　CSSの分離 　　　1　依存性の分離 　　　2　ローカルスコープの実現 　　　3　PostCSS 　　　［コラム］Portals Chapter 7　ロジックの実装 1　コンポーネントの状態管理 　　　1　フロントエンドが持つ状態とは 　　　2　従来の状態管理とFlux 2　Reduxの基本 　　　1　基本概念と3原則 　　　2　実装 　　　3　データフロー 3　Reduxの実践 　　　1　Reactコンポーネントとの接続 　　　2　Middleware 　　　3　Storeを元にしたUI制御 4　非同期処理 　　　1　Reduxにおける遅延処理 　　　2　redux-thunk 　　　3　redux-saga 　　　［コラム］Error Boundary Chapter 8　プロダクトの品質 1　品質の維持 　　　1　プロダクトの品質 　　　2　品質維持の必要性 　　　3　品質維持のポイント 2　コンポーネントのテスト 　　　1　テストフレームワーク 　　　2　Reactコンポーネントのテスト 　　　3　enzyme 　　　4　enzymeのレンダリング処理 3　Lint 　　　1　ESLint 　　　2　ESLintのセットアップ 　　　3　Rule 　　　4　stylelint 4　flow 　　　1　型の恩恵 　　　2　flow 　　　3　flowの実践 　　　4　型指定の応用と型定義 5　スタイルガイド 　　　1　スタイルガイドの必要性 　　　2　Storybook 　　　3　Storybookのセットアップ 　　　4　ストーリーファイルの作成 　　　5　アドオン

やさしく学べる、入門書の決定版！ ３万部突破のベストセラーが充実のアップデート！ JavaScriptをこれから始める人にも、前に挫折したことのある人にも。 手を動かしてサンプルをひとつずつ作っていくことで、知識だけでなく、 現場で活きる、応用・実践につながる基礎力が「この一冊で」身につきます。 ポイント１「サンプルが楽しい。」 よくある“勉強のためのサンプル”を可能な限り排除し、「こういうの見たことある！」「こういうのが作ってみたかった！」というような、実際に仕事に使えそうなサンプルを集めました。なので、最初の「やるぞ！」というモチベーションを維持したまま、最後のページまで読み進めることができます。 ポイント２「つまずきポイントを徹底カバー。」 初学者がつまずきやすい・挫折しやすいポイントを丁寧に拾って「これはどういうこと？」に対処する解説を用意しています。 共感しながら読み進められる文章で「絶対に挫折しない・させない」内容に仕上げました。 【第２版の主な改訂内容】 ・ECMA Scriptの新規格に対応。新しい機能・文法のうち、入門者でも取り組みやすく便利なものを紹介 ・書籍内の情報を2019年の状況にあわせて全面的にアップデート ・3～6章のサンプルを更新。解説内容をより丁寧にわかりやすくブラッシュアップ ・7章は全面刷新し、より現代的・実践的なテクニックを学べる内容に 【こんな方におすすめ！】 ・HTMLとCSSは何となくわかっていて、JavaScriptもやらないと…と思いつつなかなか手がつけられない方 ・「フロントエンドエンジニア」という言葉に惹かれる方 ・Web業界に入りたい方、または入りたての方 ・「他のWebデザイナーに差をつけたい！」というWebデザイナーの方 ・「フロントエンドエンジニアやWebデザイナーとまともにコードの話をしたい！」というWebディレクターの方 やさしく学べる、入門書の決定版！ Chapter1 イントロダクション 1-1 これからJavaScriptを始める皆さんへ 1-2 JavaScriptってどういうもの？ 1-3 JavaScriptの「プログラミング」と動作の仕組み 1-4 各章の概要 1-5 用意するツール 1-6 サンプルデータのダウンロード 1-7 テンプレートを準備して、いざ出発！ Chapter2 アウトプットの基本 2-1 コンソールにアウトプット ～開発ツールを使ってみよう 2-2 JavaScriptはどこに書く？ ～タグとJavaScriptの記述場所 2-3 ダイアログボックスを表示する ～window.alert() 2-4 HTMLを書き換える ～要素を取得する・コンテンツを書き換える Chapter3 JavaScriptの文法と基本的な機能 3-1 確認ダイアログボックスを表示する ～条件分岐（if） 3-2 入力内容に応じて動作を変更する ～変数、定数 3-3 動作のバリエーションを増やす ～条件分岐（else if） 3-4 数当てゲーム ～比較演算子、データ型 3-5 時間で異なるメッセージを表示する ～論理演算子 3-6 １枚、２枚、３枚…と出力する ～回数が決まっている基本の繰り返し 3-7 コンソールでモンスターを倒せ！ ～回数が決まっていない繰り返し 3-8 税込価格を計算する ～ファンクション 3-9 FizzBuzz ～算術演算子 3-10 項目をリスト表示する ～配列 3-11 アイテムの価格と在庫を表示する ～オブジェクト Chapter4 インプットとデータの加工 4-1 フォームの入力内容を取得する ～入力内容の取得とイベント 4-2 わかりやすく日時を表示する ～Dateオブジェクト 4-3 小数第◯位で切り捨てる ～Mathオブジェクト Chapter5 一歩進んだテクニック 5-1 カウントダウンタイマー ～時間の計算とタイマー 5-2 プルダウンメニューで指定ページへ ～URLの操作、ブール属性の設定 5-3 プライバシーポリシー承認パネルを作る ～クッキー（cookie） 5-4 イメージの切り替え ～サムネイルのクリックによる画像の切り替え 5-5 スライドショー ～ここまでの知識を総動員 Chapter6 jQuery入門 6-1 開閉するナビゲーションメニュー ～要素の取得とclass属性の追加・削除 6-2 ドロワーを作ってみよう ～CSSと組み合わせてアニメーションを実現 6-3 空き席状況をチェック ～AjaxとJSON Chapter7 外部データを活用したアプリケーションに挑戦！ 7-1 あなたはいまどこ？ ～位置情報（navigator.geolocation） 7-2 Web APIを使ってみよう ～OpenWeatherMap APIで天気予報

新しいフロントエンドの入門書決定版！ 本書はReact/Next.jsとTypeScriptを用いてWebアプリケーションを開発する入門書です。 WebアプリケーションフレームワークNext.jsはReactをベースに開発されています。 高速さに裏付けされた高いUXと、開発しやすさを両立しているのが特徴です。 本書では、Next.jsの開発をより快適・堅牢にするTypeScriptで開発を進めます。 Next.jsによるアプリケーション開発の基礎、最新のフロントエンドやWebアプリケーションの開発方法が学べます。 1 Next.jsとTypeScriptによるモダン開発 1.1 Next.jsとTypeScript 1.2 フロントエンド開発の変遷 1.2.1 JavaScript黎明期とjQueryの人気 1.2.2 SPAの登場とMVC/MVVMフレームワーク column. SPA普及の裏で貢献したHistory API 1.2.3 Reactの登場とコンポーネント指向・状態管理 1.2.4 Node.jsの躍進 column. CommonJSとESモジュール column. Deno 1.2.5 AltJSの流行とTypeScriptの定番化 1.2.6 ビルドツールとタスクランナー 1.2.7 SSR/SSGの必要性 1.2.8 Next.jsの登場と受容 1.3 モダンフロントエンド開発の設計思想 1.3.1 フロントエンド技術の複雑化 1.3.2 コンポーネント指向とは column. FluxのライブラリRedux 1.3.3 Next.jsがなぜ必要になってきているか column. Vue.jsとNuxt.js column. Next.jsの対応ブラウザ column. Reactコンポーネントの復元 - Hydration 2 TypeScriptの基礎 2.1 TypeScriptの基礎知識 2.1.1 TypeScript登場の背景 2.1.2 TypeScriptとVisual Studio Code 2.1.3 TypeScriptとJavaScriptの違い 2.1.4 TypeScriptコマンドラインツールによるコンパイル 2.2 型の定義 2.2.1 変数 2.2.2 プリミティブ型 2.2.3 配列 2.2.4 オブジェクト型 2.2.5 any 2.2.6 関数 2.3 基本的な型の機能 2.3.1 型推論 2.3.2 型アサーション 2.3.3 型エイリアス 2.3.4 インタフェース 2.3.5 クラス 2.4 実際の開発で重要な型 2.4.1 Enum型 2.4.2 ジェネリック型 2.4.3 Union型とIntersection型 2.4.4 リテラル型 2.4.5 never型 2.5 TypeScriptのテクニック 2.5.1 Optional Chaining 2.5.2 Non-null Assertion Operator 2.5.3 型ガード 2.5.4 keyofオペレーター 2.5.5 インデックス型 2.5.6 readonly 2.5.7 unknown 2.5.8 非同期のAsync/Await 2.5.9 型定義ファイル 2.6 TypeScriptの開発時設定 2.6.1 tsconfig.json 2.6.2 Prettier 2.6.3 ESLint 2.6.4 コンパイルオプション column. コーディングスタイルガイド column. TypeScriptのコンパイラ column. import type 3 React/Next.jsの基礎 3.1 React入門 3.1.1 Reactの始め方 3.1.2 Reactの基本 3.1.3 Reactのコンポーネントを作成する 3.2 Reactにおけるコンポーネント 3.2.1 React要素 3.2.2 コンポーネント（Reactコンポーネント） column. 関数コンポーネントとクラスコンポーネント 3.3 Reactにおける型 column. FCとVFC 3.4 Context（コンテキスト） 3.5 React Hooks（フック） 3.5.1 useStateとuseReducer―状態のフック 3.5.2 useCallbackとuseMemo―メモ化のフック 3.5.3 useEffectとuseLayoutEffect―副作用のフック column. React18におけるuseEffect・useLayoutEffectの挙動 3.5.4 useContext―Contextのためのフック 3.5.5 useRefとuseImperativeHandle―refのフック 3.5.6 カスタムフックとuseDebugValue 3.6 Next.js入門 3.6.1 プロジェクトのセットアップ 3.6.2 プロジェクトの基本的な構成 3.7 Next.jsのレンダリング手法 3.7.1 静的サイト生成（SSG） 3.7.2 クライアントサイドレンダリング（CSR） 3.7.3 サーバーサイドレンダリング（SSR） 3.7.4 インクリメンタル静的再生成（ISR） 3.8 ページとレンダリング手法 3.8.1 Next.jsのページとデータ取得 3.8.2 SSGによるページの実装 3.8.3 getStaticPropsを用いたSSGによるページの実装 3.8.4 getStaticPathsを使った複数ページのSSG column. useRouter―ルーティングのためのフック 3.8.5 SSRによるページの実装 3.8.6 ISRによるページの実装 3.9 Next.jsの機能 3.9.1 リンク 3.9.2 画像の表示 3.9.3 APIルート 3.9.4 環境変数/コンフィグ 3.9.5 React/Next.jsとライブラリの互換性 4 コンポーネント開発 4.1 Atomic Designによるコンポーネント設計 4.1.1 Presentational ComponentとContainer Component 4.1.2 Atomic Design 4.1.3 Atoms 4.1.4 Molecules 4.1.5 Organisms 4.1.6 Templates 4.1.7 Pages 4.2 styled-componentsによるスタイル実装 4.2.1 styled-componentsをNext.jsに導入 4.2.2 styled-componentsを用いたコンポーネント実装 4.3 Storybookを使ったコンポーネント管理 4.3.1 Storybookの基本的な使い方 4.3.2 Actionを使用したコールバックのハンドリング 4.3.3 Controlsタブを使ったpropsの制御 4.3.4 アドオン 4.4 コンポーネントのユニットテスト 4.4.1 Reactにおけるユニットテスト 4.4.2 テスト環境構築 4.4.3 React Testing Libraryによるコンポーネントのユニットテスト 4.4.4 非同期コンポーネントのユニットテスト column. Next.js 11以前のstyled-components/jest導入 5 アプリケーション開発1～設計・環境設定～ 5.1 本章で開発するアプリケーション 5.1.1 アプリケーションの仕様 5.1.2 アプリケーションのアーキテクチャ 5.2 開発環境構築 5.2.1 Next.jsのプロジェクト作成 5.2.2 styled-componentsの設定 5.2.3 ESLintの設定 5.2.4 Storybookの設定 5.2.5 React Hook Formの導入 5.2.6 SWRの導入 5.2.7 React Content Loaderの導入 5.2.8 Material Iconsの導入 5.2.9 環境変数 5.2.10 テスト環境構築 5.2.11 JSON Serverの設定 5.2.12 CSS in JSライブラリ 6 アプリケーション開発2～実装～ 6.1 アプリケーションアーキテクチャと全体の実装の流れ 6.2 APIクライアントの実装 6.2.1 fetcher関数 6.2.2 APIクライアントの関数 6.2.3 アプリケーションで使用されるデータの型 6.2.4 開発環境のためのAPIリクエストプロキシ 6.3 コンポーネント実装の準備 6.3.1 レスポンシブデザインに対応したコンポーネント 6.3.2 Wrapperコンポーネントの実装 6.4 Atomic Designによるコンポーネント設計の実施 6.4.1 Atomic Designに沿ってコンポーネントを分割する 6.5 Atomsの実装 6.5.1 ボタン―Button 6.5.2 テキスト―Text 6.5.3 シェイプイメージ―ShapeImage 6.5.4 テキストインプット―Input 6.5.5 テキストエリア―TextArea 6.5.6 バッジ―Badge 6.6 Moleculesの実装 6.6.1 チェックボックス―Checkbox 6.6.2 ドロップダウン―Dropdown 6.6.3 ドロップゾーン―Dropzone 6.6.4 イメージプレビュー―ImagePreview 6.7 Organismsの実装 6.7.1 カート商品―CartProduct 6.7.2 グローバルスピナー―GlobalSpinner 6.7.3 ヘッダー―Header 6.7.4 商品カード―ProductCard column. データURIスキーム 6.7.5 商品投稿フォーム―ProductForm 6.7.6 サインインフォーム―SigninForm 6.7.7 ユーザープロファイル―UserProfile 6.8 Templatesの実装 6.8.1 レイアウト―Layout 6.9 ページの設計と実装 6.9.1 サインインページ 6.9.2 ユーザーページ 6.9.3 トップページ 6.9.4 検索ページ 6.9.5 商品詳細ページ 6.9.6 買い物カートページ 6.9.7 出品ページ 6.10 コンポーネントのユニットテストの実装 6.10.1 ボタンのユニットテスト 6.10.2 ドロップダウンのユニットテスト 6.10.3 ドロップゾーンのユニットテスト 6.10.4 ヘッダーのユニットテスト 6.10.5 サインインフォームのテスト 6.10.6 商品投稿フォームのテスト 7 アプリケーション開発3～リリースと改善～ 7.1 デプロイとアプリケーション全体のシステムアーキテクチャ 7.2 Heroku 7.3 Vercel 7.3.1 Vercelへのアプリケーションのデプロイ 7.4 ロギング column. ログレベル 7.5 SEO 7.5.1 メタタグ 7.5.2 パンくずリスト 7.5.3 sitemap 7.5.4 robots.txt 7.6 アクセシビリティ 7.6.1 セマンティック 7.6.2 補助テキスト 7.6.3 WAI-ARIA 7.7 セキュリティ 7.7.1 フロントエンド開発における脆弱性とその対策 column. CSRF column. Permissions-Policy column. X-XSS-Protectionヘッダー column. セキュリティテスト column. Next.jsのバックエンドの考え方 column. Next.jsの認証 Appendix Next.jsのさらなる活用 A.1 決済ツールStripe A.1.1 Stripeのセットアップ A.1.2 Stripe APIの利用 A.1.3 Stripeの公式ドキュメント A.2 StoryShots―UIスナップショットテスト A.2.1 StoryShotsとは A.2.2 storyshots-puppeteer―スナップショットイメージによるUIテスト A.3 AWS AmplifyへのNext.jsアプリケーションのデプロイ A.3.1 Next.jsアプリケーションのAWS Amplifyへのデプロイ A.3.2 SSGを使用したNext.jsアプリケーションのAWS Amplifyへのデプロイ A.4 国際化ツールi18n A.4.1 パスによる言語ルーティング A.4.2 next-i18nを使ったテキストのi18n対応

人気のWebフロントエンドフレームワーク「Vue.js」がバージョンアップして「Vue 3」となり、TypeScriptの標準採用、新機能Composition API、Vite、Piniaの搭載など、大幅に機能が更新・強化されました。それに伴い、Vue 3では、従来のOptions APIを利用したコンポーネント開発とは異なる開発手法が必要となります。本書では、Composition APIによるコンポーネント開発やPiniaによる状態管理、Vue RouterによるSPA開発、非同期処理やユニットテストなどを新機能を駆使して解説しており、Vue 3によるフロントエンド開発手法が1冊ですべて身に付く内容になっています。 ■導入編 ●第1章　フロントエンド開発の潮流とVue 1.1 JavaScriptの変遷とフロントエンド開発の登場 1.2 フロントエンドフレームワークとVue ●第2章　ViteとVueプロジェクト 2.1 Vueプロジェクト作成の準備 2.2 Vueプロジェクトの作成と実行 2.3 Vueプロジェクト作成の質問とVite ●第3章　Vueプログラミングの基本 3.1 Vueのコンポーネントと基本構文 3.2 リアクティブシステム 3.3 リアクティブデータ用意のバリエーション 3.4 Vueプロジェクトの構成と動作原理 ■基本編 ●第4章　データとイベントのディレクティブ 4.1 データバインディングのディレクティブ 4.2 イベントのディレクティブ ●第5章　双方向データバインディングとその他のディレクティブ 5.1 双方向データバインディング 5.2 その他のデータバインディングのディレクティブ ●第6章　制御のディレクティブ 6.1 条件分岐のディレクティブ 6.2 ループのディレクティブ 6.3 リスト操作 ●第7章　スクリプトブロックのバリエーション 7.1 ウォッチャー 7.2 ライフサイクルフック 7.3 script setupの本当の姿 7.4 Options API ●第8章　コンポーネント間連携 8.1 子コンポーネントの利用 8.2 コンポーネントの独立性とCSSの扱い 8.3 親から子へのコンポーネント間通信 8.4 Props の応用 8.5 子から親へのコンポーネント間通信 8.6 ProvideとInject ●第9章　子コンポーネント利用のバリエーション 9.1 子コンポーネントをカスタマイズするSlot 9.2 複数のSlotを実現する名前付きSlot 9.3 データの受け渡しを逆転させるスコープ付きSlot 9.4 動的コンポーネント ●第10章　Vue Router 10.1 シングルページアプリケーション 10.2 Vue Router の基本 10.3 ルートパラメータ 10.4 スクリプトブロックでのルーティング制御 10.5 Vue Routerのその他の機能 ●第11章　Pinia 11.1 Piniaの基本 11.2 引数を使う一歩進んだPiniaの利用方法 11.3 アクションの応用 ■応用編 ●第12章　非同期処理 12.1 非同期処理の基本 12.2 IndexedDB 12.3 Webアクセス ●第13章　ユニットテスト 13.1 ユニットテストとVitest 13.2 コンポーネントのテストの基本 13.3 コンポーネントのテストの応用 13.4 コンポーネント間通信のテスト

2010年の刊行から約100,000部の実績を誇るロングセラーを、ECMAScript 2022に対応した内容で200ページ増の大幅改訂。最新の基本文法から、開発に欠かせない応用トピックまで解説します。JavaScriptらしく書くために大切なオブジェクトの扱い方や、大規模開発でさらに実用的になったオブジェクト指向構文を学び、しっかりと動くプログラムの作り方を本質から理解できます。 Chapter 1 イントロダクション 1.1 JavaScriptとは？ 1.1.1 JavaScriptの歴史 1.1.2 復権のきっかけはAjax、そしてHTML5の時代へ 1.1.3 JavaScriptライブラリからフレームワークの時代へ 1.2 標準JavaScript「ECMAScript」とは？ 1.2.1 ECMAScriptのバージョン 1.2.2 ECMAScript仕様策定の流れ 1.2.3 ブラウザーの対応状況 1.3 JavaScript実行環境のもう1つの選択肢 Node.js 1.3.1 Node.jsとは？ 1.3.2 実行環境によって利用できる機能は異なる 1.4 JavaScriptアプリを開発／実行するための基本環境 1.4.1 準備すべきソフトウェア 1.4.2 Visual Studio Codeのインストール 1.4.3 サンプルファイルの準備 1.5 ブラウザー付属の開発者ツール 1.5.1 開発者ツールを概観する 1.5.2 HTML／CSSのソースを確認する -［要素］タブ 1.5.3 通信状況をトレースする -［ネットワーク］タブ 1.5.4 スクリプトをデバッグする -［ソース］タブ 1.5.5 ストレージ／クッキーの内容を確認する -［アプリケーション］タブ 1.5.6 ログ確認／オブジェクト操作などの万能ツール -［コンソール］タブ Chapter 2 基本的な書き方を身につける 2.1 JavaScriptの基本的な記法 2.1.1 JavaScriptで「こんにちは、世界！」 2.1.2 文字コードのルール 2.1.3 JavaScriptをHTMLファイルに組み込む - script要素 2.1.4 文（Statement）のルール 2.1.5 コメントを挿入する 2.2 変数 2.2.1 変数を宣言する 2.2.2 識別子の命名規則 2.2.3 よりよい命名のための指針 2.2.4 定数を宣言する 2.3 データ型 2.3.1 データ型の分類 2.3.2 論理リテラル（boolean） 2.3.3 数値リテラル（number） 2.3.4 文字列リテラル（string） 2.3.5 配列リテラル（array） 2.3.6 オブジェクトリテラル（object） 2.3.7 関数リテラル（function） 2.3.8 未定義値（undefined）とヌル値（null） Chapter 3 値の演算操作を理解する - 演算子 3.1 演算子とは？ 3.2 算術演算子 3.2.1 加算演算子（+） 3.2.2 インクリメント演算子（++）とデクリメント演算子（--） 3.2.3 小数点を含む演算には注意 3.3 代入演算子 3.3.1 基本型と参照型による代入の違い -「=」演算子 3.3.2 定数は「再代入できない」 3.3.3 分割代入（配列） 3.3.4 分割代入（オブジェクト） 3.4 比較演算子 3.4.1 等価演算子（==） 3.4.2 厳密な等価演算子（===） 3.4.3 小数点数の比較 3.4.4 条件演算子（?:） 3.5 論理演算子 3.5.1 ショートカット演算（短絡演算） 3.6 ビット演算子 3.6.1 ビット論理演算子 3.6.2 ビットシフト演算子 3.6.3 例：ビットフィールドによるフラグ管理 3.7 その他の演算子 3.7.1 配列要素、プロパティを削除する - delete演算子 3.7.2 値の型を判定する - typeof演算子 3.7.3 補足：型の変換 3.8 演算子の優先順位と結合則 3.8.1 優先順位 3.8.2 結合則 Chapter 4 スクリプトの基本構造を理解する - 制御構文 4.1 制御構文とは？ 4.2 条件分岐 4.2.1 条件式の真偽で処理を分岐する - if命令 4.2.2 複数の条件式で多岐分岐を表現する - else if命令 4.2.3 if命令の入れ子 4.2.4 補足：中カッコの省略は要注意 4.2.5 条件式を指定する場合の注意点 4.2.6 式の値によって処理を分岐する - switch命令 4.3 繰り返し処理 4.3.1 条件式によってループを制御する - while／do...while命令 4.3.2 補足：無限ループ 4.3.3 指定回数だけループを処理する - for命令 4.3.4 連想配列の中身を順に処理する - for...in命令 4.3.5 配列の要素を順に処理する - for...of命令 4.3.6 配列を反復処理するための専用メソッド 4.4 ループの制御 4.4.1 ループを途中で終了する - break命令 4.4.2 特定の周回をスキップする - continue命令 4.4.3 入れ子のループをまとめて中断／スキップする - ラベル構文 4.5 制御命令のその他の話題 4.5.1 例外を処理する - try...catch...finally命令 4.5.2 例外をスローする - throw命令 4.5.3 JavaScriptの危険な構文を禁止する - Strictモード 4.5.4 デバッガーを起動する - debugger命令 Chapter 5 基本データを操作する - 組み込みオブジェクト 5.1 オブジェクトとは？ 5.1.1 オブジェクト＝プロパティ＋メソッド 5.1.2 オブジェクトを生成するための準備 - new演算子 5.1.3 メソッド／プロパティの呼び出し - ドット演算子 5.1.4 静的プロパティ／静的メソッド 5.1.5 組み込みオブジェクトとは 5.2 文字列を操作する - Stringオブジェクト 5.2.1 文字列の長さを取得する 5.2.2 文字列を大文字⇔小文字で変換する 5.2.3 部分文字列を取得する 5.2.4 文字列を検索する 5.2.5 文字列に特定の部分文字列が含まれるかを判定する 5.2.6 文字列の前後から空白を除去する 5.2.7 文字列を置き換える 5.2.8 文字列を分割する 5.2.9 文字列が指定長になるように指定文字で補足する 5.2.10 文字列をn回繰り返したものを取得する 5.2.11 文字列をUnicode正規化する 5.3 数値リテラルを操作する - Numberオブジェクト 5.3.1 Numberオブジェクトの定数 5.3.2 数値形式を変換する 5.3.3 文字列を数値に変換する 5.3.4 基本的な数学演算を実行する 5.4 日付／時刻値を操作する - Dateオブジェクト 5.4.1 日付／時刻値を生成する 5.4.2 日付／時刻要素を取得する 5.4.3 日付／時刻要素を設定する 5.4.4 日付／時刻値を加算／減算する 5.4.5 日付／時刻の差を求める 5.4.6 日付／時刻値を文字列に変換したい 5.5 値の集合を管理／操作する - Arrayオブジェクト 5.5.1 配列を生成する 5.5.2 要素を追加／削除する 5.5.3 配列に複数要素を追加／置換／削除する 5.5.4 配列から特定範囲の要素を取得する 5.5.5 配列の内容を検索する 5.5.6 入れ子の配列をフラット化する 5.5.7 配列内の要素を結合する 5.5.8 配列内の要素を移動する 5.5.9 配列ライクなオブジェクトを配列化する 5.5.10 配列を複製する 5.5.11 配列の要素を並べ替える 5.5.12 配列の内容を順に処理する 5.5.13 配列を指定されたルールで加工する 5.5.14 任意の条件式によって配列を検索する 5.5.15 条件式に合致する要素が存在するかを判定する 5.5.16 配列から条件に合致した要素だけを取得する 5.5.17 配列内の要素を順に処理して1つにまとめる 5.6 連想配列を操作する - Mapオブジェクト 5.6.1 マップを初期化する 5.6.2 マップの値を設定／取得する 5.6.3 マップから既存のキーを削除する 5.6.4 マップからすべてのキー／値を取得する 5.6.5 Object⇔Mapを相互変換する 5.6.6 弱い参照キーのマップ 5.7 重複しない値の集合を操作する - Setオブジェクト 5.7.1 セットを初期化する 5.7.2 セットの値を追加／削除する 5.7.3 セットの内容を取得／確認する 5.8 正規表現で文字列を自在に操作する - RegExpオブジェクト 5.8.1 正規表現の基本 5.8.2 RegExpオブジェクトを生成する 5.8.3 文字列が正規表現パターンにマッチしたかを判定する 5.8.4 正規表現パターンにマッチした文字列を取得する 5.8.5 正規表現オプションでマッチングの方法を制御する 5.8.6 正規表現のマッチング結果をまとめて取得する 5.8.7 正規表現で文字列を置き換える 5.8.8 正規表現で文字列を分割する 5.8.9 例：正規表現による検索 5.9 その他のオブジェクト 5.9.1 JavaScriptでよく利用する機能を提供する - Globalオブジェクト 5.9.2 オブジェクト⇔JSON文字列を相互に変換する - JSONオブジェクト 5.9.3 シンボルを作成する - Symbolオブジェクト Chapter 6 繰り返し利用するコードを1ヵ所にまとめる - 関数 6.1 関数の基本 6.1.1 ユーザー定義関数が必要な理由 6.1.2 ユーザー定義関数の基本 6.1.3 関数名 6.1.4 仮引数と実引数 6.1.5 戻り値 6.2 関数を定義するための3種の記法 6.2.1 Functionコンストラクター経由で定義する 6.2.2 関数リテラルで定義する 6.2.3 アロー関数で定義する 6.2.4 関数定義の際の注意点 6.3 変数はどの場所から参照できるか - スコープ 6.3.1 スコープの基本 6.3.2 仮変数のスコープ 6.3.3 スコープから見たvar／let命令 6.3.4 スコープに関わるその他の注意点 6.4 引数のさまざまな記法 6.4.1 JavaScriptは引数の数をチェックしない 6.4.2 引数の既定値を設定する 6.4.3 可変長引数の関数を定義する 6.4.4 スプレッド構文による引数の展開 6.4.5 名前付き引数でコードを読みやすくする 6.5 関数呼び出しと戻り値 6.5.1 複数の戻り値を返したい 6.5.2 関数自身を再帰的に呼び出す - 再帰関数 6.5.3 関数の引数も関数 - 高階関数 6.5.4 「使い捨ての関数」は匿名関数で 6.6 高度な関数のテーマ 6.6.1 テンプレート文字列をアプリ仕様にカスタマイズする - タグ付きテンプレート文字列 6.6.2 変数はどのような順番で解決されるか - スコープチェーン 6.6.3 その振る舞いオブジェクトの如し - クロージャ Chapter 7 JavaScriptらしいオブジェクトの用法を理解する - Objectオブジェクト 7.1 オブジェクトを生成する 7.1.1 オブジェクトをリテラルで表現する 7.1.2 コンストラクター経由でオブジェクトを生成する - new演算子 7.1.3 より詳しい設定付きでオブジェクトを生成する 7.2 オブジェクトの雛型「プロトタイプ」を理解する 7.2.1 プロトタイプの基本 7.2.2 プロトタイプチェーンの挙動を確認する 7.2.3 プロパティを追加／更新／削除した場合の挙動 7.3 すべてのオブジェクトの雛型 - Objectオブジェクト 7.3.1 オブジェクトをマージする 7.3.2 オブジェクトを複製する 7.3.3 プロパティを操作する 7.3.4 不変オブジェクトを定義する Chapter 8 大規模開発でも通用する書き方を身につける - オブジェクト指向構文 8.1 クラスの基本 8.1.1 最もシンプルなクラスを定義する 8.1.2 クラスに属する情報を準備する - プロパティ 8.1.3 クラスに属する処理を準備する - メソッド 8.1.4 クラスを初期化する - コンストラクター 8.1.5 静的プロパティ／静的メソッドを定義する 8.1.6 文脈によって中身が変化する変数 - thisキーワード 8.1.7 既存のクラスにメソッドを追加する 8.2 利用者に見せたくない機能を隠蔽する - カプセル化 8.2.1 カプセル化とは？ 8.2.2 プライベートメンバーの実装 8.2.3 ゲッター／セッター 8.2.4 補足：不変クラスを定義する 8.3 既存のクラスを拡張する - 継承 8.3.1 継承の基本 8.3.2 基底クラスのメソッド／コンストラクターを上書きする 8.3.3 基底クラスのメソッドを呼び出す - superキーワード 8.3.4 継承以外のクラス再利用の手段 - 委譲 8.3.5 補足：ミックスイン 8.3.6 オブジェクトの型を判定する 8.4 アプリを機能単位にまとめる - モジュール 8.4.1 モジュールを定義する 8.4.2 モジュールを利用する 8.4.3 import命令のさまざまな記法 8.4.4 export命令のさまざまな記法 8.5 オブジェクト指向構文の高度なテーマ 8.5.1 列挙可能なオブジェクトを定義する - イテレーター 8.5.2 列挙可能なオブジェクトをよりかんたんに実装する - ジェネレーター 8.5.3 オブジェクトを基本型に変換する 8.5.4 オブジェクトの基本的な動作をカスタマイズする - Proxyオブジェクト Chapter 9 HTMLやXMLの文書を操作する - DOM（Document Object Model） 9.1 DOMの基本を押さえる 9.1.1 マークアップ言語を操作する標準のしくみ「DOM」 9.1.2 文書ツリーとノード 9.2 クライアントサイドJavaScriptの前提知識 9.2.1 要素ノードを取得する 9.2.2 文書ツリー間を行き来する - ノードウォーキング 9.2.3 イベントをトリガーにして処理を実行する - イベントドリブンモデル 9.3 属性値やテキストを取得／設定する 9.3.1 属性値を取得する 9.3.2 属性値を設定する 9.3.3 属性値を削除する 9.3.4 要素のプロパティを取得／設定する 9.3.5 JavaScriptからスタイルを操作する 9.3.6 テキストを取得／設定する 9.4 フォーム要素にアクセスする 9.4.1 入力ボックス／選択ボックスの値を取得する 9.4.2 チェックボックスの値を取得する 9.4.3 ラジオボタンの値を取得する 9.4.4 ラジオボタン／チェックボックスの値を設定する 9.4.5 複数選択できるリストボックスの値を取得する 9.4.6 アップロードされたファイルの情報を取得する 9.5 ノードを追加／置換／削除する 9.5.1 innerHTMLプロパティとどのように使い分けるか 9.5.2 ページに新たなコンテンツを追加する 9.5.3 既存のノードを置換／削除する 9.5.4 HTMLCollection／NodeListを繰り返し処理する場合の注意点 9.6 より高度なイベント処理 9.6.1 イベントリスナーを削除する 9.6.2 イベントに関わる情報を取得する - イベントオブジェクト 9.6.3 イベント処理をキャンセルする 9.6.4 イベントの動作オプションを指定する 9.6.5 イベントリスナーに任意の追加情報を引き渡す Chapter 10 クライアントサイドJavaScript開発を極める 10.1 ブラウザーオブジェクトで知っておきたい基本機能 10.1.1 ブラウザーオブジェクトの階層構造 10.1.2 ブラウザーオブジェクトにアクセスするには 10.1.3 確認ダイアログを表示する - confirmメソッド 10.1.4 タイマー機能を実装する - setInterval／setTimeoutメソッド 10.1.5 ウィンドウサイズ／位置などの情報を取得する 10.1.6 コンテンツのスクロール位置を設定／取得する - scrollXxxxxメソッド 10.1.7 表示ページのアドレス情報を取得／操作する - locationオブジェクト 10.1.8 履歴に沿ってページを前後に移動する - historyオブジェクト 10.1.9 JavaScriptによる操作をブラウザーの履歴に残す - pushStateメソッド 10.2 デバッグ情報を出力する - consoleオブジェクト 10.2.1 コンソールにログを出力する 10.2.2 知っておくと便利なログメソッド 10.3 ユーザーデータを保存する - Storageオブジェクト 10.3.1 ストレージにデータを保存／取得する 10.3.2 既存のデータを削除する 10.3.3 ストレージからすべてのデータを取り出す 10.3.4 ストレージにオブジェクトを保存／取得する 10.3.5 ストレージの変更を監視する 10.4 非同期通信の基本を理解する - Fetch API 10.4.1 SPAとは？ 10.4.2 Fetch APIの基本 10.4.3 リクエスト時にデータを送信する 10.4.4 異なるオリジンにアクセスする 10.4.5 補足：クロスドキュメントメッセージングによるクロスオリジン通信 10.5 非同期処理を手軽に処理する - Promiseオブジェクト 10.5.1 Promiseオブジェクトの基本を押さえる 10.5.2 非同期処理を連結する 10.5.3 複数の非同期処理を並行して実行する 10.5.4 Promiseの処理を同期的に記述する 10.5.5 非同期処理を伴う反復処理を実装する 10.6 バックグラウンドでJavaScriptのコードを実行する - Web Worker 10.6.1 ワーカーを実装する 10.6.2 ワーカーを起動する Chapter 11 現場で避けて通れない応用知識 11.1 コマンドラインからJavaScriptコードを実行する - Node.js 11.1.1 Node.jsのインストール 11.1.2 JavaScriptファイルの実行 11.1.3 ライブラリをインストールする 11.1.4 ライブラリの復元 11.2 アプリのテストを自動化する - Jest 11.2.1 テストコードの基本 11.2.2 実行コマンドの準備 11.2.3 単体テストの実行 11.2.4 テスト実行時の役立つオプション 11.3 フロントエンドアプリの開発環境をすばやく立ち上げる - Vite 11.3.1 Viteの特徴 11.3.2 Viteの基本 11.3.3 本番環境向けのビルドを実施する 11.3.4 JavaScript以外のリソースにも対応 11.4 JavaScriptの「べからず」なコードを検出する - ESLint 11.4.1 ESLintの基本 11.4.2 リアルタイムに解析結果を確認する 11.4.3 ESLintルールのカスタマイズ 11.5 ドキュメンテーションコメントでコードの内容をわかりやすくする - JSDoc 11.5.1 ドキュメンテーションコメントの記述ルール 11.5.2 ドキュメントの生成 Column VSCodeの便利な拡張機能（1） - Trailing Spaces VSCodeの便利な拡張機能（2） - Regex Previewer 本書の読み進め方 - 著者からのメッセージ ブラウザー環境でJavaScriptのコードを実行する - paiza.IO VSCodeの便利な拡張機能（3） - JavaScript (ES6) code snippets VSCodeの便利な拡張機能（4） - IntelliSense for CSS class names in HTML よく見かけるエラーとその対処法 VSCodeの便利な拡張機能（5） - Code Spell Checker VSCodeの便利な拡張機能（6） - Todo Tree 知っておきたい！JavaScriptの関連キーワード（1） - altJS 知っておきたい！JavaScriptの関連キーワード（2） - TypeScript ECMAScript期待の機能 VSCodeの便利な拡張機能（7） - Bookmarks 知っておきたい！JavaScriptの関連キーワード（3） - WebAssembly 知っておきたい！JavaScriptの関連キーワード（4） - コンポーネント指向 VSCodeの便利な拡張機能（8） - SFTP 知っておきたい！JavaScriptの関連キーワード（5） - Web Components 知っておきたい！JavaScriptの関連キーワード（6） - importmaps script要素の知っておきたい属性（1） - async属性 script要素の知っておきたい属性（2） - integrity属性 VSCodeの便利な拡張機能（9） - 拡張テーマ script要素の知っておきたい属性（3） - integrity属性の作り方 script要素の知っておきたい属性（4） - crossorigin／referrerpolicy属性 本書を読み終えた後に

「JavaScript脱初心者」を目指す人に向けた一冊です。「とりあえず動くコード」から脱却するための勘所をまとめました。 「とりあえず動くJavaScript」から脱却したい人へ！ 初級者から中級者へのステップアップ指南書 JavaScriptは「なんとなく」「勘で」書いても動いてしまうことがある一方で、 独特の癖があり奥が深いため、初心者から脱するのが難しい言語です。 本書は「入門者向けの本は一冊読み終わったけど、もっと良いコードを書きたい」 「バグの出にくいコードの書き方を知りたい」という開発者のために、 JavaScriptで特につまずきやすい部分を丁寧に解説します。 ■対象読者 ・フロントエンドのスキルアップを目指す現役エンジニア ・フロントエンドエンジニアとしての転職／異動を考えるJavaScript初級者 ・職業としてのエンジニアを目指し、独学でJavaScriptを勉強したいと考えている学習者 　（現場経験がなくとも自身で初歩的な学習を完了している学習者であれば、 　本書の対象読者となりえます） ■つまずきやすいため紙面を割いているトピック ・非同期処理（async/await、Promise） ・AJAX（Fetch API） ・this ・スコープ ・プリミティブ型／オブジェクト型と参照 ■その他取り上げているトピック ・クロージャ ・ES5からES6 ・Node.jsとnpm ・トランスパイル ・DOM ・例外 STEP0　肩慣らし 0-1　JavaScriptの操作の基本を確認する 0-2　JavaScriptで表示を操作する 0-3　JavaScriptで複数の要素を操作する STEP1　動くアプリケーションを作ってみる 1-1　仕様の確認～簡単な動作確認をしよう 1-2　経過時刻をカウントし、見た目を整えよう 1-3　カウント停止を実現し、バグに対応しよう 1-4　ドンドン増えるログを出してみよう 1-5　リファクタリングして柔軟性を上げよう 1-6　DOM（Document Object Model）の概念を知ろう STEP2　ES6を学習する 2-1　JavaScriptのバージョンについて 2-2　ステップ1のアプリケーションをES6対応にリファクタリング 2-3　クラスについて知ろう 2-4　ステップ1のアプリケーションにクラスを適用する STEP3　ES6で書いていく 3-1　仕様の確認～画像を一枚表示しよう 3-2　複数画像を順番に表示できるようにしよう 3-3　画像を自動で更新し見た目を整えて完成 STEP4　押さえておくべきJavaScriptの言語特性について 4-1　スコープ 4-2　等価演算子（==）と厳密等価演算子（===） 4-3　this 4-4　undefined STEP5　Node.jsとnpmを知ろう 5-1　Node.jsとは 5-2　npmとは 5-3　Node.jsのインストール 5-4　npmパッケージを導入する 5-5　http-serverを起動する 5-6　ローカルインストールについて STEP6　AJAXを使ってみよう 6-1　AJAXとは 6-2　JSONに触れてみよう 6-3　AJAXを体験してみよう 6-4　サンプルアプリケーションを作成してみよう 6-5　コードをリファクタリングしてみよう 6-6　CORSについて STEP7　その他のJavaScriptの特性 7-1　無名関数 7-2　即時関数 7-3　クロージャ 7-4　例外 7-5　プリミティブ型／オブジェクト型と参照 STEP8　非同期処理について知ろう 8-1　同期・非同期 8-2　async/await 8-3　Promise 8-4　非同期処理でよくある悩みへの対応 8-5　課題 STEP9　トランスパイル～レガシーブラウザへの対応～ 9-1　トランスパイルとは 9-2　トランスパイラを導入してみよう 9-3　トランスパイルを実行してみよう 9-4　Polyfillについて STEP10　総合演習 10-1　仕様の確認～クイズデータ取得と確認 10-2　各画面を作成しよう 10-3　クイズを表示しよう 10-4　クイズの正解率を集計しよう 10-5　解答に制限時間を設定してみよう 10-6　見た目を整えて完成 APPENDIX 付録A　コードがうまく動かない時・デバッグについて 付録B　知っておくべき知識

基礎固めに最適の「手を動かしておぼえる」JavaScript定番入門書。必要な知識がしっかり身につく。 JavaScript“標準教科書”が人気講師の書き下ろしで新登場！ 初心者から経験者まで。上達するために 「押さえておきたい基礎知識」総ざらい JavaScriptの独学に最適な標準教科書として、長年にわたって読まれてきた 『独習JavaScript』。オンライン学習スクールUdemyの人気講師、CodeMafiaこと、 外村将大 氏による完全書き下ろしで新登場です！ 本書では、JavaScriptでプログラミングを行う際に必要となる、 基本的な知識／概念／機能、文法／プログラムの書き方を、 さまざまなサンプルプログラムを例示しながら、詳細かつ丁寧に解説します。 プログラミングの基礎知識がない方でも、解説→例題（サンプル）→理解度チェック という3つのステップで、JavaScriptの基礎を完全習得できます。 【本書「はじめ」により抜粋】 JavaScriptは、初心者にもわりあい馴染みやすい（プログラムを書くのが比較的簡単な） 半面、本格的なプログラムを書こうとすると途端に難易度が上がるプログラミング言語です。 それは、他のプログラミング言語ではあまり見られない、JavaScript特有の言語仕様が関係 しています。そのため、本書ではそれらの「落とし穴（JavaScript のクセや動作原理など）」 についても、図解とともに丁寧に解説しています。 私自身、初心者だったときに「なぜそのように動くのか？」まで解説してくれる書籍に 出会えず、JavaScriptの本質的な部分を理解するのにとても苦労しました。その経験を踏まえ、 初心者の方でもJavaScriptの本質をきちんとつかめるよう本書を執筆しました。 -------------------- 【ポイント】 ●JavaScriptの独学に最適な教科書として好評の『独習JavaScript』最新版。 　初心者がJavaScriptを学ぶにふさわしい一冊 ●JavaScriptでプログラミングを行う際に必要となる基本的な知識／概念／機能、 　文法／書き方を、網羅的かつ体系的に習得できる JavaScriptの入門者、これからJavaScript言語で開発を始めたい初学者から、再入門者、 学生・ホビープログラマまで、「一からJavaScriptを学びたい」 「JavaScriptプログラミングの基本をしっかり身につけたい」という方におすすめの一冊です。 Chapter 1　イントロダクション Chapter 2　JavaScript開発の基礎 Chapter 3　変数とデータ型 Chapter 4　演算子 Chapter 5　制御構文 Chapter 6　関数 Chapter 7　スコープ Chapter 8　thisキーワード Chapter 9　クラス Chapter 10　組み込みオブジェクト Chapter 11　コレクション Chapter 12　反復処理 Chapter 13　非同期処理 Chapter 14　DOM Chapter 15　イベント Chapter 16　モジュール Chapter 17　Node.js

最新情報を網羅し全面的に改訂された決定版。動きが速い分野の記述を大幅に削除し、JavaScript言語について徹底して解説。 サイ本で知られるJavaScriptの改訂版！ 旧版出版から9年を経て、最新情報を網羅し全面的に改訂されたJavaScriptの決定版です。大きく変更されたES6 （ES2015）以降は、大規模な変化はこの先しばらくないと言われています。旧版にあったjQueryも含めて動きが速いクライアントフレームワークについての記述を大幅削除し、安定したJavaScriptの言語について徹底解説します。

ブラウザのレンダリングのしくみから計測と最適なチューニングまで、速さのための基礎知識と実践技術をあますことなく解説。 第1章 ウェブパフォーマンスとは何か 第2章 ブラウザのレンダリングの仕組み 第3章 チューニングの基礎 第4章 リソース読み込みのチューニング 第5章 JavaScript実行のチューニング 第6章 レイアウトツリー構築のチューニング 第7章 レンダリング結果の描画のチューニング 第8章 高度なチューニング 第9章 認知的チューニング Appendix SVGのパフォーマンス特性

ステップバイステップでマスターする、Next.jsによる「これからの」Web制作 Reactベースのフレームワーク、Next.jsによるWeb構築の基本と実践を、ステップバイステップで学べる本。 本書は、これまでHTML&CSSを使ってきたものの、Reactにはちょっと手を出せなかった方を対象に、実際にブログを作成しながら、Next.jsを使ってサイトを構築できるようになることを目指しています。 Next.jsはReactの環境が簡単に整い、サイトも構築でき、静的生成やサーバーサイドレンダリングも試せます。学ぶ環境としても、経験を積む環境としても、そして実務のための環境としてもバランスよく整っているといえます。 Next.jsの基本的な機能が理解できることはもちろん、Reactの基本やReactでのCSSの扱いもしっかり解説しています。 ●構成 Chpater1　ReactとJSX Chpater2　コンポーネント Chapter3　CSS Modulesとスタイル Chpater4　レイアウトのスタイル Chapter5　画像とアイコン Chapter6　メタデータ Chapter7　外部データの利用 Chapter8　記事データの表示 Chapter9　動的なルーティング Chapter10　React Hooks（フック） ●本書で制作するサンプルサイトについて 本書ではNext.jsを使用して、ブログサイトをステップ・バイ・ステップで構築していきます。Next.js、React、JavaScript、CSS Modules、styled-jsxの活用方法や設定をわかりやすく見ていくため、ミニマルでシンプルなデザインにしてあります。Figma のデザインデータとして、デザインシステム（コンポーネント＆デザイントークン）もセットで用意していますので、実装時の参考にしてください。記事データの管理にはヘッドレスCMSのmicroCMSを利用します。 Chpater1　ReactとJSX Chpater2　コンポーネント Chapter3　CSS Modulesとスタイル Chpater4　レイアウトのスタイル Chapter5　画像とアイコン Chapter6　メタデータ Chapter7　外部データの利用 Chapter8　記事データの表示 Chapter9　動的なルーティング Chapter10　React Hooks（フック）

イチからわかる!Reactの仕組みと使い方。Reactのコンセプト、コンポーネント、JSX、活用テクニック、一歩進んだ使い方を解説! 1 Reactとは?(Reactの概要と特長 Reactを使うために必要な準備 ほか) 2 Reactのコンポーネント(コンポーネント定義の基本 内容が変化するコンポーネント ほか) 3 JSXの基本(JSXの概要とメリット JSXの中で使うJavaScript ほか) 4 Reactを使いこなす(Reactで使うフォーム フォームのサブミットとバリデーション ほか) 5 Reactの一歩進んだ使い方(アドオンによる機能拡張 アニメーションの基本テクニック ほか)

フレームワークの学習に必要なフロントエンド技術の基礎を体系的に解説 　フロントエンド向けアプリケーションフレームワーク（ React、Angular、Vue）の学習には、従来のWeb開発にはなかった「フレームワークごとの違い」、「未知の用語や概念」、「進化したJavaScript開発環境」など、最新のフロントエンド技術の知識が求められます。これらを、その都度調べていては効率が悪いだけでなく、知識が断片的になってしまいます。本書は、フレームワークの学習に必要なフロントエンド技術の基礎を体系的に解説し、この課題を解決します。 　なお、本書ではフレームワーク共通で必要な基礎知識と、フレームワークごとの主な違いを説明しており、React、Angular、Vueのどの学習にも役立ちます。一方、フレームワークごとのコード作成の詳細については説明していないので、各フレームワークの公式サイトや関連書籍などを参照してください。 Part01　フロントエンド技術の動向 第1章　従来型WebからモダンWebへ 　1-1 概要 　　1-1-1 最新フロントエンド技術の魅力 　　1-1-2 従来型Webとその課題 　　1-1-3 モダンWebとは 　　1-1-4 モダンWebの価値 　1-2 最新フロントエンドの仕組み 　　1-2-1 フロントエンドの内部処理 　　1-2-2 サンプルアプリで動作確認 　　1-2-3 複利計算アプリの画面フロー 　1-3 待ちなしでバックエンドと連携 　　1-3-1 バックエンドからダウンロード 　　1-3-2 バックエンドへアップロード 　　1-3-3 バックエンドと連携のまとめ 　1-4 1章まとめ 第2章　最新フロントエンド技術のデモ 　2-1 Google画像検索の無限スクロール 　　2-1-1 無限スクロールの操作デモ 　　2-1-2 無限スクロールの内部処理 　　2-1-3 Google検索がページ送りの理由 　2-2 待ち時間ゼロのデータ検索 　　2-2-1 データ検索アプリの紹介 　　2-2-2 条件による絞り込みデモ 　　2-2-3 絞り込み件数表示の仕組み 　　2-2-4 検索結果の一覧表示デモ 　　2-2-5 一覧表示の仕組み 　　2-2-6 詳細情報の表示デモ 　　2-2-7 詳細情報表示の仕組み 　2-3 画面の復元 　　2-3-1 画面復元対応アプリの紹介 　　2-3-2 画面表示の復元デモ 　　2-3-3 入力途中の復元デモ 　　2-3-4 画面復元の仕組み 　　2-3-5 画面保存の仕組み 　　2-3-6 画面復元の応用（Amazon商品検索） 　　2-3-7 画面復元の応用（バックエンドと連携） 　2-4 Webサイトのオフライン化 　　2-4-1 オフライン対応サイトの紹介 　　2-4-2 オフライン閲覧のデモ 　　2-4-3 オフライン送信のデモ 　　2-4-4 オフライン対応の仕組み 　　2-4-5 オフライン閲覧の内部処理 　　2-4-6 オフライン送信の内部処理 　2-5 2章まとめ Part02　フロントエンド開発の基礎知識 第3章　JavaScript開発環境 　3-1 別世界になったJavaScript 　　3-1-1 モダンWeb開発の出だしでつまずく要因 　　3-1-2 JavaScriptのバージョン 　　3-1-3 TypeScript概要 　3-2 TypeScriptの体験 　　3-2-1 プレイグラウンド概要 　　3-2-2 コード作成 　　3-2-3 JavaScriptへ変換 　　3-2-4 型チェック 　3-3 JavaScript実行環境node.js 　　3-3-1 node.js概要 　　3-3-2 node.jsの使い方 　　3-3-3 npm概要 　3-4 npmの体験 　　3-4-1 npmレポジトリ 　　3-4-2 npmプロジェクト作成 　　3-4-3 npmパッケージインストール 　　3-4-4 npm runスクリプトで実行 　3-5 3章まとめ 第4章　最新Webブラウザの機能 　4-1 大幅に機能拡張したブラウザAPI 　　4-1-1 API全体像 　　4-1-2 ブラウザAPIの概要 　　4-1-3 ブラウザAPIの仕様 　　4-1-4 ブラウザAPIのインターフェイス 　　4-1-5 ブラウザAPIのサポート状況 　4-2 JavaScriptライブラリの利用 　　4-2-1 JavaScriptライブラリの概要 　　4-2-2 UIライブラリ 　　4-2-3 グラフィックライブラリ 　　4-2-4 データストアライブラリ 　4-3 4章まとめ 第5章　アプリケーションフレームワーク 　5-1 フレームワーク概要 　　5-1-1 フレームワークの学習でつまずく要因 　　5-1-2 仮想DOM 　　5-1-3 データバインド 　　5-1-4 コンポーネント 　　5-1-5 状態管理ライブラリ 　　5-1-6 ルーター 　　5-1-7 ビルド 　5-2 個性をもつフレームワーク 　　5-2-1 フレームワークごとの特徴 　　5-2-2 フレームワーク選択の考え方 　　5-2-3 新規プロジェクトの作成（React） 　　5-2-4 フレームワーク独自の記述（React） 　　5-2-5 新規プロジェクトの作成（Angular） 　　5-2-6 フレームワーク独自の記述（Angular） 　　5-2-7 新規プロジェクトの作成（Vue） 　　5-2-8 フレームワーク独自の記述（Vue） 　5-3 5章まとめ 第6章　ネットワーク経由のAP（I Web API） 　6-1 Web API概要 　　6-1-1 Web APIの位置づけ 　　6-1-2 Web APIの仕組み 　6-2 Web APIを体験 　　6-2-1 WordPressのWeb API 　　6-2-2 デモサイトで動作確認 　6-3 Web APIのプログラミング 　　6-3-1 Web APIの呼び出し 　　6-3-2 非同期処理 　　6-3-3 認証 　　6-3-4 クロスドメインの制約 　6-4 6章まとめ Part03　フロントエンド技術の導入 第7章　導入のポイント 　7-1 実践的開発スキルの導入 　　7-1-1 スキル導入時の課題 　　7-1-2 効果的なスキル導入 　7-2 安定した開発環境の導入 　　7-2-1 バージョン管理の必要性 　　7-2-2 node.jsインストールのバージョン指定 　　7-2-3 npmインストールのバージョン指定 　7-3 7章まとめ 第8章　お役立ち情報 　8-1 よくあるトラブルと解決策 　　8-1-1 技術情報をうまく検索できない 　　8-1-2 コンポーネント分割の単位に悩む 　　8-1-3 iPhoneだけアプリが動作しない 　　8-1-4 モバイルデバイスで動作に問題がある 　　8-1-5 データアップロードで重複登録が発生 　　8-1-6 ログイン前にプログラムがロードされる 　8-2 フレームワーク可視化ツール 　　8-2-1 コンポーネント可視化ツールの概要 　　8-2-2 コンポーネントの可視化を体験（React） 　　8-2-3 コンポーネントの可視化を体験（Angular） 　　8-2-4 コンポーネントの可視化を体験（Vue） 　8-3 8章まとめ クロージング 付録1 ブラウザAPI仕様一覧

高性能・高機能CSSフレームワークとして高い人気を誇る「Bootstrap」がバージョン5になり、レガシーなIE対応やjQueryコードの完全排除、コンポーネントやフォームの刷新、CSS Grid対応などが行われた、より洗練されたモダンなフレームワークへと生まれ変わりました。本書は、Bootstrap 5の基本から、CSSクラスを利用したスタイリング、コンポーネントやJavaScriptを利用したUI実装などを解説、後半ではWebページのモックアップの実装方法やオリジナルフレームワークを作るためのカスタマイズ方法などもていねいに解説しているので、1冊でBootstrap 5の基礎から活用方法まで、すべて身に付く内容になっています。 ●第1章　イントロダクション 1.1 Web アプリケーションフレームワークの基本 1.2 Bootstrapの特徴 1.3 Bootstrapの歴史 1.4 Bootstrapの導入 1.5 Bootstrap Iconsの利用 ●第2章　Bootstrapのレイアウト 2.1 Bootstrapのグリッドシステム 2.2 カラムの自動レイアウト 2.3 レスポンシブなグリッドシステム 2.4 カラムの整列 2.5 カラムの並べ替え 2.6 レイアウトのためのユーティリティ ●第3章　基本的なスタイリング 3.1 タイポグラフィ 3.2 コード 3.3 画像 3.4 テーブル 3.5 図表 3.6 Reboot（リブート）による初期設定 ●第4章　基本的なコンポーネント 4.1 アラート 4.2 バッジ 4.3 プログレス 4.4 カード 4.5 スピナー 4.6 プレースホルダー ●第5章　ナビゲーションのコンポーネント 5.1 ナビゲーション 5.2 ナビゲーションバー 5.3 パンくずリスト 5.4 リストグループ 5.5 ページネーション ●第6章　フォームとボタンのコンポーネント 6.1 フォーム 6.2 入力グループ 6.3 ボタン 6.4 ボタングループ 6.5 ドロップダウン ●第7章　JavaScriptを利用したコンポーネント 7.1 BootstrapのJavaScriptプラグイン 7.2 カルーセル 7.3 折り畳み 7.4 モーダル 7.5 オフキャンバス 7.6 ポップオーバー 7.7 スクロールスパイ 7.8 トースト 7.9 ツールチップ ●第8章　ユーティリティとヘルパー 8.1 ColorsユーティリティとBackgroundユーティリティ 8.2 Bordersユーティリティ 8.3 Displayユーティリティ 8.4 Sizingユーティリティ 8.5 Spacingユーティリティ 8.6 Flexユーティリティ 8.7 Floatユーティリティ 8.8 PositionユーティリティとPositionヘルパー 8.9 Textユーティリティ 8.10 Vertical alignmentユーティリティ 8.11 その他のユーティリティクラスとヘルパークラス ●第9章　Bootstrapでモックアップを作る 9.1 サイト概要とファイルの準備 9.2 新規ファイル作成 9.3 ヘッダーの作成 9.4 ナビゲーションバーの作成 9.5 メインビジュアルの作成 9.6 コンテンツ01（ニュース）の作成 9.7 コンテンツ02（お店について）の作成 9.8 コンテンツ03（商品一覧）の作成 9.9 コンテンツ04（クーポン）の作成 9.10 コンテンツ05（インフォメーション）の作成 9.11 フッターの作成 9.12 リンクの設定と追加CSSの作成 9.13 下層ページ（お問い合わせ）の作成 ●第10章　Bootstrapのカスタマイズ 10.1 Bootstrapのオリジナルスタイルを上書きする 10.2 Sassを使ってカスタマイズする 10.3 CSS変数を利用する ●付録　Bootstrap 5移行ガイド

AWS Amplifyでフルスタックアプリケーションを高速開発 サーバーレス開発のデファクトスタンダード AWS Amplifyでフロント＝バックを一元開発！ 時代は「バックエンドで全てを処理する」から「バックエンドをAPI化しフロントエンドで処理する」というサーバーレスへ移行しつつある。そのデファクトスタンダードとなりつつあるのが「AWS Amplify」だ。データベースやアカウント管理などのバックエンドを管理するツール「AWS Amplify Atudio」により高度な知識がなくともバックエンドを効率よく開発管理できる。AWS Amplify + AWS Amplify Studioでクラウドベースアプリケーション開発を実現しよう！ 〜「本書まえがきより抜粋」〜 クラウド開発環境の本命「AWSAmplify」 AWSAmplifyは「バックエンドはAWSのサービスで実装」「フロントエンドはReactなどを使い、専用ライブラリでバックエンドと連携」という形でフロント=バックをきれいに一元管理します。また、バックエンドの開発のために「AmplifyStudio」という専用のWebベースアプリケーションが提供され、これによりサインインの管理、データベースやS3のファイルアクセス、Lambdaを使った関数の呼び出しなどをビジュアルに管理できるようにします。 ただし、これらを使いこなしてフロント=バックを一括で開発するためには、さまざまな技術を身につける必要があります。 AmplifyStudioの使い方はもちろん、AWSの主なサービスの使い方、フロントエンドのUI設計に用いるFigmaによるデザイン、さらにはフロントエンドのReactの技術も必要となるでしょう。これらを1つ1つ学んでいこうとしたら、すべてを理解するのはいつになるかわかりません。そこで、「AWSAmplifyによる開発に必要な技術を一冊で全て学ぶ」というコンセプトのもとに執筆したのが本書です。本書は、「とりあえずJavaScriptベースのプログラミングはなんとかわかる」という人を対象に、AWSAmplifyでアプリケーション開発を行うために必要となる技術全般をまとめて説明します。本書を読めば、AWSAmplifyで簡単なWebアプリケーションぐらいすぐに作れるようになるでしょう。 「すべてをクラウドに」――AWSAmplifyを使えば、それも実現不可能ではありません。本書でAmplifyを体験してみてくだ’さい。クラウドのイメージがひょっとしたら大きく変わるかもしれませんよ。 2022年7月　掌田津耶乃 Chapter1 AWS Amplifyを使おう 1.1. AWS Amplify を準備する 1.2. サンプルアプリを作成する Chapter2 Amplify Studioでバックエンドを設計する 2.1. React アプリケーションの作成 2.2. Amplify Studio とユーザー認証 2.3. データモデルの設計 Chapter3 FigmaによるUI設計 3.1. Figma の基本操作 3.2. Figma でデザインする 3.3. グラフィックの作成 3.4. データモデル用コンポーネントの利用 Chapter4 Reactによるフロントエンド開発 4.1. React アプリケーションの基本 4.2. React コンポーネントの設計 4.3. ステートフックと副作用フック 4.4. React コンポーネントを活用する Chapter5 DataStoreによるデータベースアクセス 5.1. コレクションコンポーネントの利用 5.2. React と DataStore の利用 5.3. モデルデータの操作 Chapter6 GraphQLによるデータの利用 6.1. Amplify Mock と GraphQL 6.2. コードから GraphQL を利用する 6.3. GraphQL によるデータの書き換え Chapter7 S3ストレージとLambda関数 7.1. Amazon S3 の利用 7.2. ファイルの基本操作 7.3. Lambda 関数の利用 7.4. Lambda から AWS の機能を使う Chapter8 JavaScriptベースによるフロントエンド開発 8.1. JavaScript ベースのアプリケーション作成 8.2. Amplify の機能を利用する 索引

「iOS/Androidの2つのアプリをもっと効率良く開発したい」 「ハイブリッドアプリだと、速度やUIがネイティブより劣ってしまいがち」 　こんな課題は、React Nativeを使えば解決できます。 　React Nativeは、iOS/Androidの両方のアプリをたった1つのスキルセットで開発できるJavaScriptライブラリです。本書は、ReactやReact Nativeが生まれた背景を見直しながら、React Nativeの基本はもちろん、ReactやTypeScript、アプリ設計・開発、テスト、リリースまで、React Nativeによるアプリ開発のすべてを解説。日本でまだ無名だった頃からReact Nativeを追い続けた著者陣が、現場実践をふまえて開発手法を伝授します。 　フロントエンドの方はもちろん、アプリ開発の技術選択を広げたいすべてのエンジニアにおすすめの1冊です。 ●はじめに ■■■第1章　React / React Nativeの概要とその背景 ■■1-1　Reactとは ■特徴1. Declarative ■特徴2. Component-Based ■コラム　コンポーネントベースを採用しているその他の標準化仕様・フレームワーク ■特徴3. Learn Once, Write Anywhere ■■1-2　Reactが必要とされた背景 ■React isn't an MVC framework ■React doesn't use templates ■Reactive updates are dead simple ■コラム　表示速度と仮想DOM ■■1-3　React Nativeが必要とされた背景 ■1.Native Experience ■コラム　ネイティブUIとブリッジ ■2.Learn Once, Write Anywhere ■3.Keeping Development Velocity ■■■第2章　TypeScriptとECMAScript 2015の基本を押さえる ■■2-1　TypeScriptとは ■型があることによる2つのメリット ■■2-2　TypeScriptの構文 ■明示的な型付け ■暗黙的な型付け ■基礎的な型 ■新たな型を作成する ■noUnusedParametersオプションとアンダーバー ■Optional Chaining ■Assertion Functions ■コラム　効率的な型付け ■■2-3　ECMAScript 2015の新記法 ■letとconstによる変数定義 ■Arrow Functions ■Default Parameter Values ■Template Literals ■Property Shorthand ■Computed Property Names ■Destructuring ■SpreadOperator ■classキーワード ■非同期処理 ■ES Modules ■■■第3章　開発環境の構築 ■■3-1　IDEの導入 ■コード編集ツールが満たすべき機能 ■■3-2　Visual Studio Codeのインストールと設定 ■Visual Studio Codeをインストールする ■TypeScriptの設定 ■コラム　Visual Studio Codeの設定とその対象 ■■3-3　React Nativeプロジェクトのセットアップ ■HomeBrewのセットアップ ■Node.jsのセットアップ ■yarnのインストール ■watchmanのインストール ■Xcodeのインストール ■CocoaPodsのインストール ■Java8のインストール ■Android Studioのインストール ■古いコマンドラインツールのアンインストール ■React Nativeプロジェクトの生成 ■環境診断 ■Android用の設定 ■■3-4　開発効率を向上させるプロジェクト設定 ■依存パッケージのバージョンを固定する ■コラム　セマンティックバージョニングとpackage.json ■Prettierの設定 ■ESLintの設定 ■EditorConfigの設定 ■■3-5　GitHubのセットアップ ■GitHubを用いた開発の流れ ■レビューを推奨する設定 ■■■第4章　React Nativeの基本 ■■4-1　React Nativeを使った開発 ■React Nativeを起動する ■TypeScriptファイルを1つにまとめるMetro Bundler ■RedBox／YellowBox ■■4-2　React Nativeのデバッグメニュー ■Reload ■Debug ■Show Inspector ■■4-3　コンポーネントでUIを作成する ■JSX文法で開発する ■コンポーネントを定義する ■式の評価 ■コラム　truthy/falsyとショートサーキット評価 ■フラグメント ■style propsによる装飾 ■Flexbox ■props ■state ■コラム　propsとstateの設計 ■副作用を持つコンポーネント ■Context ■ref ■■4-4　React Native標準コンポーネント ■Viewコンポーネント ■Textコンポーネント ■Imageコンポーネント ■sourceプロパティによる表示画像の指定 ■resizeMode propsによる拡大縮小時の挙動指定 ■背景画像を指定する ■ScrollView ■FlatList/SectionList ■Touchable系コンポーネント ■Buttonコンポーネント ■TextInputコンポーネント ■コラム　React HooksとCustom Hooks ■StatusBarコンポーネント ■ActivityIndicatorコンポーネント ■Switchコンポーネント ■■4-5　React Native標準ユーティリティー ■Alert ■AppState ■BackHandler ■Clipboard ■Dimensions ■Linking ■PermissionsAndroid ■Share ■Vibration ■■4-6　コミュニティから提供されているコンポーネント ■AsyncStorageモジュール ■SafeAreaViewコンポーネント ■ProgressView／ProgressBarAndroidコンポーネント ■■4-7　コンポーネントを作成する際の注意点 ■モバイルアプリの制限 ■propsとstateの更新頻度を抑える ■プラットフォームに沿ったコンポーネント作成 ■コラム　バンドルされたJSの取得方法 ■■4-8　コンポーネントにアニメーションをつける ■アニメーションの考え方 ■React Nativeにおけるアニメーション実装 ■効果的なアニメーション ■■■第5章　作成するアプリケーションの仕様策定 ■■5-1　リーンキャンバス ■■5-2　ユースケース ■■5-3　画面遷移を考える ■仕様書のラフ画 ■Initial ■ChooseLogin ■SignIn ■SignUp ■Home画面 ■Statics ■Detail ■UserInfo ■Loading ■アプリを実装する手順 ■■■第6章　テストによる設計の質の向上 ■■6-1　React Nativeのテストの2つの目的 ■要求や仕様を満たしていることを確かめるテスト ■設計改善のためのテスト ■■6-2　Jestによるユニットテスト ■コラム　テストで用いるパッケージの選択 ■最初のテスト実行 ■テストの書き方 ■テストを書く ■テストを書かない対象を見極める ■■6-3　CIを取り入れ安定した開発をする ■CircleCIのセットアップ ■■■第7章　Navigationの概要と実装 ■■7-1　画面遷移の基本 ■Webアプリケーションの画面遷移 ■モバイルアプリケーションのルーティング ■Navigationとは ■react-navigationの導入 ■学習環境を準備する ■構成を変更する ■■7-2　Stackを実装する ■Stackの実装 ■ライブラリの読み込み ■スタイルの定義 ■画面の作成 ■ルーティングの実装 ■NavigationContainerを使用する ■■7-3　Tabを実装する ■Tabの実装方法 ■Tabの種類 ■■7-4　Drawerを実装する ■■7-5　Optionsを定義する ■Optionsを定義する2つの方法 ■navigationOptionsを動的に変化させる ■options、screenOptionsで受け取れる引数 ■■7-6 headerModeとmode ■mode ■headerMode ■■7-7　サンプルを作りながら、ページ遷移を実装してみよう ■プロジェクトの準備 ■アプリケーションの起動 ■事前準備 ■作るべき画面を整理する ■画面パスを管理するためのファイル作成 ■定数化する理由 ■画面作成の事前の準備 ■各画面の作成 ■画面の接続 ■ルーティングの確認 ■Tabを組み合わせる ■TabNavigatorとStackNavigatorを組み合わせる ■DrawerNavigatorとStackNavigatorを組み合わせる ■ドロワー遷移する遷移先でタブが表示されないようにする ■Modalを組み込む ■複数のStackNavigatorを使う ■■■第8章　Atomic Designとコンポーネントの実装 ■■8-1　コンポーネント設計のメリット ■1.コンポーネントの再利用によって開発効率が向上する ■2.保守面のメリット ■3.関心の分離を実現できる ■4.テスト面におけるメリット ■■8-2　ユニットテストを実装する ■ライブラリを用意する ■スナップショットテスト ■動作のテスト ■■8-3　Atomic Designを理解する ■ボタンをAtomsとして分離する ■■8-4　アプリケーションのレイアウトを整える ■アプリケーションのテーマ設定 ■各画面に色を入れ込む ■StackNavigatorにテーマを適用する ■DrawerNavigatorへのデザイン適用 ■TabNavigatorにデザインを適用する ■■8-5　アプリケーションの画面を作り込む ■react-native-paperをインストールする ■CHOOSE_LOGINの実装 ■ChooseLoginの作成 ■Signupの作成 ■Signinの作成 ■Initialの実装 ■Homeの作成 ■Todoを作成する ■Inputの作成 ■Detailの作成 ■UserInfoの作成 ■Statisticsの作成 ■■■第9章　データフローの設計および実装 ■■9-1　Reduxとは ■特徴1. Single source of truth ■特徴2. State is read-only ■特徴3. Changes are made with pure functions ■どのような場合にReduxを使うのが有効か ■React Stateの限界 ■■9-2　Reduxの基本 ■Reducerのベース作成と初期状態の設計 ■Actionの設計 ■Storeの作成 ■Reduxの世界とReactの世界をつなぐ ■コラム　useSelector、useDispatchとconnectの比較 ■Reduxにおけるディレクトリー構造 ■Ducks ■■9-3　Reduxにおける非同期処理 ■ネットワーク通信の結果をActionに載せdispatchする ■Redux middleware ■middlewareを実装する ■コラム　便利なmiddleware ■ReduxにおけるStore設計 ■表示用データの生成 ■アプリケーションが動作する環境や状況の文脈データ ■ディレクトリー構成を整理する ■■9-4　アプリのデータフローの実装 ■必要パッケージのインストール ■ドメイン層の実装 ■todo管理モデル ■Ducks Moduleの定義 ■Storeの実装 ■Selectorの実装 ■Container Componentの実装 ■ルートコンポーネントの実装 ■その他、画面制御に必要なデータ ■■■第10章　Firebaseを使ったバックエンド連携 ■■10-1　Firebaseとは ■Firebase Authentication ■Firebase Cloud Firestore ■Firebase Analytics ■■10-2　Firebaseをアプリへ組み込む ■インストール ■認証を実装する ■データ同期を実装する ■ユーザートラッキングを実装する ■■■第11章　E2Eを実装する ■■11-1　E2Eテストとは ■E2Eテストの範囲 ■E2Eテストの対象基準 ■React NativeにおけるE2Eテストパッケージ ■■11-2　Detoxによる検証 ■依存パッケージのインストール ■プロジェクトへDetoxのインストール ■Detoxでの検証方法 ■Debug/Releaseビルド ■API ■■11-3　Detoxテストを実装する ■今回作成するテストケース ■Detoxでテストを実装する ■ChooseLoginまでのテストケース ■テスト：～Home ■画面遷移テスト：SignUpページ ■画面遷移テスト：SignInページ ■アカウント登録 ■サインアウト ■サインイン ■テスト：Todo追加 ■Todo完了 ■Todo更新 ■Todo削除 ■■11-4　CIでE2Eテストをおこなう ■Bitriseの利点と欠点 ■Bitriseのセットアップ ■Detoxビルドの追加 ■Bitrise Workflow ■■■第12章　アプリストアへの公開 ■■12-1　リリースビルド ■Firebaseの本番環境を作成する ■iOSのビルド設定 ■Androidのビルド設定 ■コラム　開発用とリリース用を共存させる ■■12-2　アプリをApp Storeに提出する ■アイコン設定 ■App IDの登録 ■アプリの登録 ■アプリの送信 ■アプリの登録の続き ■リリース ■■12-3　アプリをGoogle Play Consoleに提出する ■アプリの作成 ■ストアの掲載情報 ■アプリのリリース ■コンテンツのレーティング ■アプリのコンテンツ ■価格と配布 ■公開 ●さくいん

最近の開発で必須のフロントエンド。Vue.jsやAngularやReactなど複雑化する内容をすっきり理解し効率的な開発を。 ■さまざまな開発支援ツールを使いこなし■ ■効率的に開発をするための基礎知識■ -- ■変わり続けるプラットフォームで■ ■変わらないことを学ぶ■ ------------------------------------------------------------------------- 根幹を支えるエコシステム "Node.js" / コンポーネント指向のフレームワーク・ライブラリの基本の考えを知り使いこなす "Vue.js" "Angular" "React" / コンパイラ "Babel" / モジュールバンドラー "webpack" / JavaScript 代替言語 "TypeScript" / 状態管理・データレイヤ "Redux" / 単方向のデーターフロー "Flux" / 静的解析ツール "Prettier" "ESLint" / ユニットテスト "Mocha" "Jest" "Karma" / 解析とABテスト "Google Analytics" "Google Optimize" / エラーイベント検知 "Sentry" / チーム作業する "スクラム" / 変わり続ける "Webプラットフォーム" 複数の開発支援ツールから「なぜそれを使うのか」選択する基準を理解する！ ■Part 1 導入編　なぜ使うかを知る ●Chapter 1 フロントエンドエンジニアの歴史 1-1　Web の始まりと HTML 1-2　Web と HTML で何ができるようになったのか 1-3　ブラウザ戦争と標準化 1-4　ブログの流行とインターネットインフラ 1-5　静的な UI から動的な UI へ 1-6　「フロントエンドエンジニア」という専門職 1-7　Node.js による開発基盤の構築 1-8　ECMAScript 規格更新に伴う周辺事情の活性化 1-9　止まらないフロントエンド ●Chapter 2 フロントエンドエンジニアに求められるスキル 2-1　「フロントエンドエンジニア」が取り組む実務 　　想定される実務例 2-2　JavaScript の成長と要求の変化 2-3　変容する中で維持すべき開発者の姿勢 　　「Web は止まらない、求められる技術要素も止まらない」 　　パブリックな存在として 2-4　本書におけるフロントエンドエンジニア像 ●Chapter 3 フロントエンドにおける一般的なツール群 3-1　Node.js とその周辺のエコシステム 　　パッケージマネージャー 　　Node.js がもたらす恩恵 3-2　コンパイラ・モジュールバンドラー 　　コンパイラ：Babel 　　モジュールバンドラー：webpack 　　Babel, webpack が解決すること 3-3　JavaScript 代替言語：TypeScript 　　TypeScript の特徴 　　コンパイラとしての TypeScript 　　TypeScript によって解決できること 3-4　フレームワーク・ビューライブラリ：Vue.js, Angular, React 　　Vue.js 　　Angular 　　React 　　コンポーネント指向のフレームワーク・ライブラリであること 3-5　状態管理・データレイヤ：Redux 　　ブラウザにおける状態管理は煩雑である 　　クライアント MVC 　　簡易的なクライアント MVC 　　フロントエンドで抽象化されるモデル、扱ううえでの課題とは 　　役割があいまいになる Controller 　　Flux というアプリケーションアーキテクチャパターン 　　Redux：データの一極管理 　　Redux が解決できること 3-6　CSS：CSSメタ言語、設計手法、CSS-in-JS 　　CSS を取り巻く現状 　　各ブラウザの対応状況について 　　CSS の表現力を高めた Sass、CSS メタ言語 　　JavaScript で作成された PostCSS 　　CSS 設計手法 　　CSS を弱点を補うためには 3-7　静的解析ツール：Prettier, ESLint 　　Prettier 　　ESLint 　　ほかのリンターやチェッカーについて 　　静的解析ツールが可能にすること 3-8　ユニットテスト：Mocha, Jest, Karma 　　ユニットテストとフロントエンド開発 　　Mocha Jest Karma それぞれどういった特性があるのか 　　ユニットテストやテストフレームワークが解決できること ●Chapter 4 開発の現場における仕事の進め方 4-1　アジャイルといった考え方 4-2　スクラムという開発手法 4-3　個人との対話と他者との協調 　　プロダクトオーナー 　　スクラムマスター 　　デザイナー 　　サーバサイドエンジニア 　　テストエンジニア・テスター 　　コミュニケーションハブとして 4-4　変化に対応しながら提供するサイクルを上げる ■Part 2 実践編　どう使うかを学ぶ ●Chapter 5 開発環境 5-1　既存アプリケーションの開発環境構築 　　Docker のインストール 　　Node.js のインストール 　　Yarn のインストール 　　API サーバの起動 　　クライアントの起動 5-2　既存機能の把握 　　どんなアプリケーションなのかを知る 　　アプリケーションが抱える課題を探る ●Chapter 6 設計と実装 6-1　フロントエンド環境の構築 　　Yarn の利用準備 　　webpack のインストール 　　Babel のインストール 6-2　TypeScript の導入 　　TypeScript のインストール 　　Babel 経由で TypeScript のコンパイルを行う 　　既存コードを TypeScript で書き換える 　　コンパイルエラーを解消する 6-3　コードの分割 　　処理を別ファイルに切り出す 6-4　Jest を利用したユニットテスト 　　Jest のインストール 　　jest.config.js の設定 　　描画された DOM の検査 6-5　React の導入 　　React のインストール 　　JSX のためのコンパイル設定 　　JSX で要素を表示する 　　webpack-dev-server のインストールと設定 　　jQuery で書いたコードを React に書き換える 　　イベントハンドラの記述 6-6　Enzyme を使ったコンポーネントのテスト 　　Enzyme のインストール 　　Jest の設定 　　React Component をテストする 6-7　styled-components の導入 　　styled-components のインストール 　　CSS から styled-components への移行 ●Chapter 7 CI/CD によって受けられるメリット 7-1　CI/CD によって受けられるメリット 　　CI/CD について 　　GitHub Actions を始める 　　ESLint を導入し動作させる 　　CI で自動化するメリット 7-2　パフォーマンスと改善 　　パフォーマンスの問題とは 　　基礎的なパフォーマンス知識：クリティカルレンダリングパス 　　Lighthouse を利用した定期的なパフォーマンス計測 　　強力な武器はない、ひとにはひとのパフォーマンス ■Part 3 応用編　より深く学ぶために知る ●Chapter 8 解析とモニタリング 8-1　サービスの成長とともに開発する 　　仮説検証、AB テストの目的 　　ツールの導入： Google アナリティクス 　　ツールの導入： Google オプティマイズ 　　プロダクトコードに組み合わせる 　　サードパーティスクリプトとの兼ね合い 8-2　ユーザーモニタリング・エラーイベント監視 　　ユーザーを取り巻く環境を知る 　　ブラウザで起きるエラーイベントなどからユーザーを知る 　　エラーイベント検知のため Sentry を導入する 　　Sentry の動作とコードへの組み込み 　　React Error Boundary を利用する 　　収集したエラーイベントを役立てる ●Chapter 9 チーム開発と Web への貢献 9-1　チームで働く 　　あらためてスクラムという開発手法について 　　スクラムを採用したチームに入ったら 　　ストーリー：スプリントプランニング 　　タイムボックスという考え方 　　ストーリー：スプリントが開始する 　　デイリースクラム 　　ストーリー：スプリントの終わり 　　振り返り 　　チーム開発とはテクニカルスキルではない 9-2　コミュニティへの貢献活動 　　OSS への貢献はコードコミットだけではない 　　できることから OSS へコミットする 　　寄付する、翻訳するといった違ったアプローチ 　　Web というプラットフォームに貢献する 9-3　Web プラットフォームに関わるフロントエンド開発者として 　　仕様を知るには 　　ライトにキャッチアップする 　　フロントエンド技術を楽しむために

最近のWebサイトを見ると、まるで普通のアプリケーションのように自在に画面が変化します。これはWebサイトをJavaScriptで操作しているからです。一見、難しそうですが、Reactと呼ばれるフレームワークを使えば簡単に本格的なWeb開発ができます。本書は、リアクティブと呼ばれる機能を実現するフレームワーク「React」の使い方とReactを強化するRedux、Next.jsなどのプログラムの基本を解説した入門書です。いますぐはじめましょう！

UIライブラリ「React」のモバイル版React Native（リアクト・ネイティブ）のやさしい入門書です。 　AndroidアプリとiOSアプリを同時に開発するツールやフレームワークには種々ありますが、最近注目されているのが、Facebook製のReact Native（リアクト・ネイティブ）です。元々Facebookが開発したUIライブラリ「React」の思想を受け継ぎ、JavaScriptで簡単に開発できる点が人気の理由。今後、日本でも普及が進むと見られるReact Nativeのやさしい入門書です。 　本書は、非推奨になったListViewを代替するFlatListやSectionListも解説！　最新情報に対応しています。また、サンプルアプリをExpo Snackで公開しているので、 React Nativeの開発を今すぐ体験できます！ Chapter 1 インストールとセットアップ Chapter 2 React Nativeの基本をマスターする Chapter 3 UIコンポーネント Chapter 4 レイアウトを考える Chapter 5 プラットフォーム固有の機能 Chapter 6 グラフィックの描画 Chapter 7 タイマー、アニメーション、データアクセス Chapter 8 サンプルアプリの開発

これから始めて、JavaScriptもVue.jsもTypeScriptも理解しよう！ 「JavaScriptを学ぼう」 そんなふうに思っても、「JavaScript」は現在では、非常に関連技術の多い言語になっています。JavaScript関連のキーワードを上げてみると、「ECMAScript / TypeScript / Vue.js / Nuxt.js / React / Angular / jQuery」など、上げていったらキリがありません。 これらは「JSライブラリー」とか「JSフレームワーク」などと呼ばれているJSの周辺技術で、現在のウェブサイト制作や、ウェブアプリ開発では、これらの周辺技術の理解が必須になっています。 本書は、こういった事情に合わせて、今JavaScriptを学ぶなら、この周辺技術は必須だと筆者が考える以下の内容について解説しています。 JavaScript／ECMAScript／Vue.js／TypeScript ぜひ本書を通じて、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を使って、データの保存も行い、コンポーネントを作って共通のパーツを追加するところまで行います。 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 ストアの内容を保存しよう

PHPプログラミングの標準教科書『独習PHP』が、最新のPHP8に対応して登場！ 5年ぶりのメジャーバージョンアップに合わせて大幅改訂！ PHP8の基本構文から、クラス、DB連携、セキュリティ対策まで、しっかり習得。 PHPプログラミングの標準教科書『独習PHP』が、最新のPHP8に対応。 PHPでWebページ／アプリケーションを開発する際に必要な基礎的な知識、 PHPの基本構文から、クラス、データベース連携、セキュリティまで、 詳細かつ丁寧に解説します。 解説→例題→練習問題（理解度チェック）という3つのステップで、 PHPによるWebアプリ開発の基礎・基本テクニックをしっかり習得できます。 実際にサンプルコードを入力し、動作を確かめながら学習することで、 いっそう理解が深まります。 「PHPを一から学びたい・しっかり基礎固めをしたい」 「PHPでWebアプリを作りたい」という方におすすめの1冊です。 第1章　イントロダクション 第2章　PHPの基本 第3章　演算子 第4章　制御構文 第5章　組み込み関数 第6章　ユーザー定義関数 第7章　標準クラスライブラリ 第8章　リクエスト情報 第9章　データベース連携 第10章　オブジェクト指向構文 第11章　高度なプログラミング

大学・専門学校での実習用テキストシリーズ。PHPの基礎から丁寧に解説。実習を通してPHPの基本を身につけられる。 大学・専門学校での実習用テキストシリーズ。PHPの基礎から丁寧に解説。実習を通してPHPの基本を身につけられる。１冊を通して１つのプロジェクト（オンライン宿泊予約システム）を完成させる内容の実習。 もくじ 序章　はじめに 　１．本書で開発するオンライン予約システムについて １章　Webアプリケーションの概要 　１．サーバーとクライアント 　２．リクエストの種類 　３．Webアプリケーション開発環境について ２章　HTML５によるWebページ作成 　１．HTMLの基礎知識 　２．CSSの基礎知識 ３章　PHPの初歩 　１．PHPの基本 　２．PHPのスクリプトをHTMLに埋め込む 　３．型と変数 　４．制御構造 　５．配列・連想配列 ４章　データベースの利用 　１．データベースとは 　２．データベースの作成 　３．SQLでのレコード抽出 　４．SQLでのレコード挿入 　５．SQLでのレコード更新 　６．SQLでのレコード削除 ５章　オンライン予約システムの実装～トップページから部屋詳細表示～ 　１．トップページの実装 　２．部屋一覧ページの実装～すべての部屋表示 　３．部屋一覧ページの実装～タイプ別の部屋表示 　４．部屋詳細ページの実装 　５．処理コードの共有化 　６．データベース設定の共有化 ６章　オンライン予約システムの実装～予約機能～ 　１．空室確認を行う 　２．空室の部屋情報を表示する 　３．予約詳細情報画面を作成する 　４．予約詳細入力画面を完成する 　５．予約最終確認画面までの流れを作成する 　６．予約完了画面を作成する ７章　オンライン予約システムの実装～予約管理機能～ 　１．すべての予約情報の一覧表示を行う 　２．指定した日付区分の予約情報の一覧表示を行う 　３．削除機能を実装しよう 　４．ログイン機能を実装する 終章　おわりに 　１．完成したオンライン予約システムと今後について さくいん