MdNCORPORATION

初心者からちゃんとしたプロになる JavaScript基礎入門

西畑 一馬 著/須郷 晋也 著/岡島 美咲 著/扇 克至 著/岩本 大樹 著
定価 2,860円
(本体 2,600円+税10%)
※電子書籍の価格は各販売ストアにてご確認ください。
発売日 2020-03-25
仕様 B5変形判/256P
ISBN 978-4-8443-6964-6
JavaScriptとVue.jsの基本、さらにWebアプリケーションやUIの作成を習得できる教科書。本書は「1日30分からはじめる」をテーマに、Web制作にかかわる知識や技術を解説した「ちゃんとしたプロになる」シリーズの3冊目です。

本書で学べることは、主に次の3つです。

1つめは、JavaScriptの基本。
JavaScriptは広範な用途をもつ言語ですが、本書ではとくにWeb制作によく使われる命令や考え方を中心に解説しています。

2つめは、Vue.jsの基本。
現在のWeb制作では、フレームワークを利用した実装が一般的です。本書では、最もよく使われるフレームワークの一つであり、初心者にも習得しやすいVue.jsの基礎を身につけられます。

そして、3つめがWebアプリケーションやUIの実装の流れ。
実際にTodoアプリやタブパネル、モーダル、ハンバーガーメニュー、スライドビューアーなどのUIを構築しながら、Web制作におけるJavaScriptとVue.jsでの実装の流れをつかめます。

ぜひ本書を通じて、“現場のJavaScript力”の土台をしっかりと養ってください。

■ページ見本






目次

■Lesson 1 JavaScriptの基本
01 JavaScriptとは
  JavaScriptの仕様
  JavaScriptでできること

02 JavaScriptの開発に必要なもの
  最低限必要なツール
  ブラウザ
  エディタ

03 JavaScriptを書いてみよう
  JavaScriptを含むファイルを作成する
  Consoleを利用したデバッグ
  JavaScriptのコメントアウト

04 文字列や数値を表示してみよう
  変数を使ってみよう
  文字列の操作
  数値の操作
  変数をブラウザに表示

05 条件分岐を利用してみよう
  真偽値を使ってみよう
  比較演算子で真偽値を取得
  if文で条件分岐
  論理演算子で複雑な条件を指定しよう

06 配列を使ってみよう
  配列とは
  for文を使ってみよう
  配列を操作するメソッド
  配列を作成するメソッド
  配列の状態を取得するメソッド

07 関数を使ってみよう
  関数とは
  変数のスコープ
  関数式と関数宣言


■Lesson 2 JavaScriptのオブジェクト
01 JavaScriptで日付を扱おう
  Dateオブジェクト
  今日の日付を表示してみよう
  未来・過去の日付を表示してみよう

02 タイマーを作ってみよう
  タイマーアプリに必要なもの
  setTimeoutとsetIntervalを使う
  タイマーを作ってみよう

03 オブジェクトで複雑なデータを扱う
  オブジェクトとは(連想配列)
  オブジェクトの値をブラウザに表示する
  オブジェクトの文字を変更してみる
  オブジェクトにプロパティを追加してみる
  オブジェクトのキーだけを抽出する

04 配列とオブジェクトを組み合わせて複雑なデータを扱う
  配列内のオブジェクトの文字を表示する
  条件にマッチするオブジェクトのみを表示
  元の配列とは違う状態の配列を作る
  配列にオブジェクトを追加する


■Lesson 3 Todoアプリを作ってみよう
01 Todoアプリの概要
  Todoアプリを作ってみよう
  完成版のサンプルを確認する

02 Todoを作って表示する(Create/Read)
  Todoアプリのデータ構造を検討する
  扱うDOM要素を変数に登録する
  ページを開いたときに関数を実行する
  ブラウザのイベントをJavaScriptで扱う
  テキストフィールドに文字を出力する

03 Todoを完了済みにする(Update)
  Todoを完了済みにする
  Todoを完了にする
  未完了のTodoのみを表示する

04 Todoを編集する(Update)
  Todoを編集する

05 Todoを削除する(Delete)
  Todoを削除する


■Lesson 4 Vue.jsの基本
01 フレームワークを使ってみよう
  フレームワークとは何だろう
  Vue.js とは何だろう

02 Vue.jsの基本を知ろう
  はじめてのVueアプリを作ろう

03 Vue.jsの基本記法を確認しよう
  Vueインスタンスの作成
  データの登録・参照
  属性
  条件分岐
  ループ
  イベント処理

04 Vue.jsでアプリを作ってみよう
  Todoアプリを作ろう
  Todoリストを表示しよう
  Todoリストをフィルタリングしよう
  Todoの状態を切り替えよう
  Todoを追加しよう
  Todoを編集しよう


■Lesson 5 Vue.jsをWebサイトに組み込む
01 よくあるUIをVue.jsで作ってみよう
  タブパネルを作ってみよう
  モーダルを作ってみよう
  ハンバーガーメニューを作ってみよう

02 Vue.jsのプラグインを利用しよう
  Vue.jsのプラグインを利用しよう
  Swiperを読み込ませよう
  Swiperを使ってみよう

ダウンロードデータ

掲載コードのダウンロードについて
このたびは、『初心者からちゃんとしたプロになる JavaScript基礎入門』をご購入いただきまして、誠にありがとうございます。
以下に本書に掲載しているコードのダウンロードファイルをご用意しましたので、ご利用ください。

MdN_JavaScript_KisoNyumon(約0.4MB)


ダウンロードにあたってのご注意
・ダウンロードファイルは、ZIP形式で圧縮されています。Windows、Macそれぞれの解凍ソフトを使って圧縮ファイルを解凍してください。

・ダウンロードファイルには「はじめにお読みください.html」が同梱されていますので、ご使用の前に必ずお読みください。
ダウンロードファイル解凍時のご注意
Windowsをご利用の場合は、OS標準の機能ではダウンロードファイルをダブルクリックしても正しく解凍できない場合があります。データの閲覧に問題がある場合は、次の手順でファイルの解凍をお試しください。

[1]ダウンロードしたファイルを右クリック
[2]表示されたメニューから[すべてを展開...]を選択
[3]ファイルを解凍するダイアログが表示されるので、保存場所を選択して実行
[4]指定した場所にファイルが解凍される
・弊社Webサイトからダウンロードできるサンプルデータは、本書の解説内容をご理解いただくために、ご自身で試される場合にのみ使用できる参照用データです。その他の用途での使用や配布などは一切できませんので、あらかじめご了承ください。

・弊社Webサイトからダウンロードできるサンプルデータの著作権は、それぞれの制作者に帰属します。

・弊社Webサイトからダウンロードできるサンプルデータを実行した結果については、著者および株式会社エムディエヌコーポレーションは一切の責任を負いかねます。お客様の責任においてご利用ください。

・本書に掲載されているJavaScript等のコメントや改行位置は、紙面掲載用として加工しており、ダウンロードしたサンプルデータとは異なる場合があります。あらかじめご了承ください。

お詫びと訂正

初心者からちゃんとしたプロになる JavaScript基礎入門
お詫びと訂正のお知らせ
このたびは『初心者からちゃんとしたプロになる JavaScript基礎入門』をお買い求めいただきまして、誠にありがとうございます。

本書の掲載内容に誤りがございました。該当箇所は下記になります。
●33〜34ページ・図8・図10
最終行にconsole.log(myBoolean)のコードが抜けておりました。
●44ページ・図7
(誤)
[図7]sample06.js
   ↓
(正)
[図7]for文の書式
※図の見出しに誤りがあります
●74ページ・図5の表4行目
(誤・以下の記述が不要です)
setDay
※getDayは曜日を取得するメソッドであり、対になるsetDayメソッドは存在しません。曜日は日付によって自動的に決定されるためです。
●91ページ・図22のコード4〜6行目
(誤)
startButton.addEventListener("click", startTimer())
let stopButton = document.querySelector("#stop-button")
stopButton.addEventListener("click", stopTimer())
   ↓
(正)
startButton.addEventListener("click", startTimer)
let stopButton = document.querySelector("#stop-button")
stopButton.addEventListener("click", stopTimer)
※addEventListenerに関数を渡す際は、startTimerおよびstopTimer直後の()は不要です(ダウンロードデータは正しい状態です)
●97ページ・コード9行目
(誤)
<script src="sample05.js">
   ↓
(正)
<script src="sample07.js">
※リンクしているJavaScriptファイルのファイル名が誤っておりました(ダウンロードデータは正しい状態です)
●128ページ・図8
(誤)
/** DOM にイベントを設定する */
function bindEvents() {
  inputForm.addEventListener("submit", () => handleSubmit())
}
   ↓
(正)
/** DOM にイベントを設定する */
function bindEvents() {
  inputForm.addEventListener("submit", event => handleSubmit(event))
}
※handleSubmit関数へ渡す引数の記述が欠落しています(P119〜123に掲載されているコード、およびダウンロードデータは正しい状態です)
●228ページ・コード3行目
(誤)
if (_this.isOpenModal && target !== null) {
   ↓
(正)
if (_this.isOpenModal && target === null) {
※比較演算子の記述が誤っています


ご迷惑をおかけいたしまして誠に申し訳ございません。
訂正してお詫び申し上げます。

制作の基本からデザイン業界の最新状況まで! MdNのデザイン・グラフィック書8選

デザイン・制作・マーケティング Webでもう困らない! わかりやすくて知識が身につく8冊