【学習ログ】MDN JavaScript チュートリアル (9 回目)

はじめに

MDN JavaScript コーナー
┃
┗ チュートリアル
　 ┣ 完全な初心者向け
　 ┃ ┣ JavaScript の第一歩
　 ┃ ┣ JavaScript の構成要素
　 ┃ ┃
　 ┃ ┗ JavaScript オブジェクトの紹介
　 ┃ 　 ┣ オブジェクトの基本
　 ┃ 　 ┣ 初心者のためのオブジェクト指向 JavaScript
　 ┃ 　 ┣ オブジェクトプロトタイプ
　 ┃ 　 ┣ JavaScript の継承
　 ┃ 　 ┣ JSON データの操作
　 ┃ 　 ┣ オブジェクト構築の実践（本日の学習箇所）
　 ┃ 　 ┗ 評価：バウンスボールのデモへの機能の追加（本日の学習箇所）
　 ┃
　 ┣ 中級者向け
　 ┗ 上級者向け

チュートリアルで習った事の概要は下記の通りです。

オブジェクトの使い方とオブジェクト指向のテクニックを、ブラウザウィンドウ内でボールが跳ねるプログラムの作成を通して練習する。

上記で作ったプログラムに対して、機能を追加する。機能の追加を通して、JavaScript オブジェクトとオブジェクト指向のインスタンス生成を理解しているかテストする。

(1) オブジェクト構築の実践

Canvas API と requestAnimationFrame
- 画面にボールを描くのに使用した API 。
<canvas>要素
- HTML で Canvas API を使った処理が反映される。
getContext()

javascript var canvasField = canvas.getContext('2d');
- getContext() メソッドを使って描画していくためのコンテキストを取得します。得られる変数(canvasField)はキャンバスの描画可能領域を直接表現しており、ここに二次元の形状を書き込む事ができます。
window.innerWidth
- ブラウザーのビューポート(ウェブページが表示される領域)の幅を取得できるプロパティです。
window.innerHeight
- ブラウザーのビューポート(ウェブページが表示される領域)の高さを取得できるプロパティです。
ボールを描画する際に利用したプロパティ
- beginPath() メソッド
  - 図形などの描画を開始すると宣言する際に使用
- fillStyle プロパティ
  - 図形などの色を指定する際に使用
- arc() メソッド
  - 円弧を定義する際に使用
- fill() メソッド
  - beginPath() から描き始めた線描を終了し、描いた領域を前に fillStyle で指定していた色で塗り潰す指示を伝える
fillRect()
- 長方形を定義するメソッド

(2) 評価：バウンスボールのデモへの機能の追加

追加する機能等は、下記のとおり。
- ボールに当たったら（捕まえたら）ボールを食べてしまう円
- ボールと円が継承できるオブジェクトを作成
- 残ったボールが数えられるカウンター

「(2) 評価：バウンスボールのデモへの機能の追加」でボールに当たったらボールを食べる円の定義までは出来たのですが、loop() 関数の更新（「プログラムに邪悪な円を持ち込む」）と「スコアカウンターの実装」部分の実装が上手くいかず、解決方法が分からなかったです。

「(2) 評価：バウンスボールのデモへの機能の追加」の「ヒントとtips」に記載されている通り、かなり難しい内容でした。また、実装が上手くいかない部分がちょくちょくあり、どうしたら良いのか途方に暮れるとともに悔しかったです。

今回は一度このチュートリアルを抜けて次へ進み、JavaScriptの理解を深めてまた再挑戦したいと思います。（悔しい！！！！！）

最後までご覧頂きありがとうございました。