HTML5+CSS+JavaScriptプログラミングを初心者が読んだら
HTML5+CSS+JavaScriptプログラミングという、プログラムの勉強本を読んでみました。読んだのは、Kindle版の「ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング［改訂版］」です。
HTML5+CSS+JavaScript初心者として、以下のような気づきがあり非常に参考になりました。
- どうすればプログラミングは上達できるのか
- HTML5+CSS+JavaScriptのデバッグはどうやるのか
- HTML5+CSS+JavaScriptでどんなことができるのか
- 何となくHTML5+CSS+JavaScriptを読めるような気がしてきた
Kindle本
プログラミングの勉強をしようと考え、いろいろな書籍やオンライン本を探しました。
そこで目について、Kindle版の「ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング［改訂版］」を購入しました。
ゲームを作りながら楽しく学べるHTML5+CSS+JavaScriptプログラミング［改訂版］ (Future Coders（NextPublishing）)
- 作者: 田中賢一郎
- 出版社/メーカー: インプレスR&D
- 発売日: 2017/03/24
- メディア: Kindle版
- この商品を含むブログを見る
帯に書いている「高校生のための」という言葉には引っ掛かりつつも、初心者が読むにはちょうど良いかなと思いました。また、特別なソフトなど必要なく、「ブラウザですぐ始められる」というのは魅力的です。
内容としては、以下の章に分かれています。
- HTML入門
- CSS入門
- JavaScript入門
- Canvas
- ゲームプログラミングに挑戦
プログラミング上達法
プログラミング上達法というと大げさですが、最初に「はじめに」で次のことが書かれています。
「プログラムのスキル = コードを読む量 x コードを書く量」
まさにその通りだと思います。
プログラム言語の文法や仕様を学んだとしても、いきなりプログラムが書けるようにはなりません。私は過去にいろいろな言語を勉強してきましたが、JavaScriptの文法を学んでもすぐには自分で一からコーディングすることはできません。
先ずは、優れたプログラミングのコードを読めるようになる必要があります。そのために文法や仕様を勉強します。とは言え、勉強する量が多いので、焦らず徐々に覚えることにします。
次に、実際にコードをプログラミングします。別の勉強をオンラインでしたときに、コードをコピー&ペーストしていました。確かに、プログラムの動きを確認するということであればコピー&ペーストをした方が効率がいいです。しかし、プログラムを勉強するという観点では、あまり身に付きませんでした。やはり、自分でキーを叩いて手入力していくことによって、プログラムを実感することができます。
ただ、自分でコードを手入力すると、必ずタイプミスなどの間違いがあります。この本の最後の章で「ゲーム・プログラミングに挑戦」で10本のプログラムを作成しますが、ミスがないコードのプログラムは1本も入力できませんでした。しかし、そのお陰でデバッグのやり方はだいぶ身に付いたように思います。
結果として、この本を読んでいくにあたり、次の事を設定しました。
- 最後まで読み切る
- サンプルのコードは全て手入力する
- デバッグして必ず動くようにする
第1章から第4章
第1章から第4章までは、HTML(+Canvas)+CSS+JavaScriptでプログラムを作成するための基礎が説明されています。内容的には、第5章でゲームをプログラミングするために必要な基礎を理解するという感じです。
例えば、第1章のHTML入門の内容は、以下のようなものです。
- はじめてのHTML
- 画像の表示
- DOM(Document Object Model)
- イベント
- デバッグのコツ
取り敢えず、よくわからなくても読んでいって、イメージをつかむようにします。
ですので、HTMLタグの細かい説明を知りたいとか、JavScriptの変数定義のvarとletの違いを知りたいとか、より詳細が知りたい場合には、それぞれのより専門的な勉強本か、リファレンスなどを参照する必要があります。
私も、結果的に第3章のJavaScript入門のところで別の勉強本に移り、戻ってきて読んでいくことで理解が深まりました。
第5章
やはり面白かったのは、第5章の「ゲームプログラミングに挑戦」でした。
以下の10個のゲームを作成します。
- SnakeBite風のゲーム
- 洞窟の中を飛んでいくゲーム
- マインスイーパー風ゲーム
- ブロック崩し風ゲーム
- スペースインベーダー風ゲーム
- ミサイルコマンド風ゲーム
- アステロイド風ゲーム
- リアルタイム陣取りゲーム
- テトリス風ゲーム
- 記憶系ゲーム
これらのゲームの中には、昔々同じようなゲームをテーブルゲームで夢中になったものもあります。ですので、懐かしいうえに、こんな風に動いていたのかという驚きもあり面白かったです。
実際にプログラムしてみて
第5章で、サンプル・プログラムのコードを手入力して、ゲームのプログラムを作成します。サンプル・プログラムのコードの後に各部分の説明があるので、読みながら、手入力した内容にミスがないか確認します。それでも、実際に動かしてみると、動きません。
入力ミスの場合、簡単にわかる場合と、なかなかわからない場合とがあります。特に、入力ミスをしていた場所と、動作の記述されている場所とが一致していない場合には、苦労しました。
なので、以下の方法を駆使してデバックしました。
コード入力の考慮
必ず、入力ミスをしています。
その入力ミスを少なくする方法として、以下の2点を考えました。
入力ミスのパターン
入力ミスのパターンを覚えておいて、同じパターンのミスがないか探します。
覚えている限りでは、以下のようなパターンがありました。
- I(iの大文字)と1、l(Lの小文字)と1、I(iの大文字)とl(Lの小文字)、を間違える
- =(代入式)を書き忘れる
- {}、()のペアの間違い
- 大文字と小文字の間違い
- 変数名や関数名などの綴り間違い
- など
エディター
エディターは、Visual Studio Codeを使用しました。これだと、入力中に候補を表示してくれて、選択することで入力されます。そうすることで、キーのタイプ数も減りますし、入力ミスも減らすことができました。
特に、次のような機能が役立ちました。
- 変数を一度書くと、次に書くときにその変数名が候補として表示される
- '{'を入力すると'{}'や、'('を入力すると'()'が、ペアで入力される
- {}のペアが一致していないと、波下線が表示される
- 変数、関数など、種類によって文字の色が変わる
コードの変更
いろいろ自分で変更してゲームを変えることができるのですが、まずはサンプル・プログラムの通りに入力しました。
ただ、サンプル・プログラムのコードを手入力する際、次の点は変更しました。
- 変数定義は「var」を「let」にする
- 変数定義は1変数1行にし、コメントを付加する
- 各Functionにも、可能な限りコメントを書く
最後まで読んで
この勉強本を最後まで読んでみて、HTMLとCSSとJavaScriptでこんなことができるんだ、という驚きがありました。また、何となく感覚がつかめたので、次のフェーズに進んでもいいかな、という勝手な思いもわきました。
プログラミングがまったく初めてという方も、最初は何のこと？と思われるかもしれません。しかし、最後までやってみると、プログラミングの楽しさと興味がわくのではないでしょうか。
