Aikの技術日記

技術的な進捗とか成果とかを細々と投稿するブログです。時々雑記も。

トップ > Webプログラミング > CODEPREPで勉強しよう その6

CODEPREPで勉強しよう その6

Webプログラミング

その1(CODEPREPとは/学習予定ブック紹介)はこちら
その2(Sass,Bootstrap,Fontawesome編)はこちら
その3(HTML&CSS実践編 前編)はこちら
その4(HTML&CSS実践編 後編)はこちら
その5(JavaScript編 前編)はこちら
その7(Three.js,moment.js,Canvas編)はこちら
その8(React,Vue.js編)はこちら
その9(Rust,GoogleMap,Webカメラ編)はこちら
その10(Ruby,Scala編)はこちら
その11(CODEPREPやってみた感想等)はこちら

CODEPREP勉強中です

CODEPREPで勉強ライフを謳歌中の筆者です。
最近怠惰も極まり、当初決めていた計画からもうかなり溜まっているんですよねぇ…。
当初は1日1個だったブック消化数も、やってないのが溜まりに溜まり…。
今では1日で3個くらいブックをやらないと予定通りには終わらないくらいに。

まぁ…愚痴ってても何も進みませんからね、黙々と進めていきましょう！

今回も、前回に引き続き主にJS周りのブックを攻めていきたいと思います。
以下のブックのうち、前回で1(ES6編)〜4(Ajax編)まで進んだので、今回は5(オブジェクト指向編)〜9(2Dゲームモーション)までやっちゃいますよ！

  1. JavaScript入門 ES6編
  2. JavaScript基礎 jQueryトラバーサル編
  3. JavaScript演習 jQueryトラバーサル編
  4. JavaScript基礎 Ajax編
  5. JavaScript基礎 オブジェクト指向編
  6. JavaScriptでオブジェクト指向を理解する
  7. 正規表現を理解する
  8. JavaScriptの正規表現を理解する 演習
  9. JavaScriptで学ぶユニットテスト
  10. CSS3+jQueryでつくる2Dゲームモーション

それでは学んだブックの感想やらまとめをば…。

各ブックの感想など

いつもの様に、各ブックで学んだことのまとめや感想などを書き連ねていきたいと思います。

JavaScript基礎 オブジェクト指向編

今回のブックでは、JSでじゃんけんゲームを作りながらオブジェクト指向について学んでいく…といった感じでした。
※オブジェクト指向に関してはこちら(Wikipedia)

なおCODEPREPさんでは「Javaで学ぶオブジェクト指向」というブックもあるらしく…。
今回行ったブックは、このJS版とのこと。
ちなみに素のJSにはclass概念がないので、普通のJSではなく、ES6の仕様に基づいたJSを書いていきました。

JSのクラスの記述方法と、Javaのクラスの記述方法が結構似ていた事や、既にJavaでオブジェクト指向に関しては何となく掴めていたこともあったため…。
結構サクサクこなせる事ができました。いい復習になった感じです。

また、今回作ったじゃんけんゲームをCODEPENに起こしてみたので、そちらをここに載せておきます。
CODEPREPさんでは出力をコンソール上でしていたので、jQueryを使ってhtmlで出力させるようにしました。

See the Pen Janken-JS by Aik (@aik0aaac) on CodePen.

クラス構造…もといオブジェクト指向の考え方は、大規模なシステムを作る際には非常に頼りになるものですからね…。
自分も早くマスターしてみたいです！

JavaScriptでオブジェクト指向を理解する

今回のブックでは、オブジェクト指向の考え方を踏まえたCanvasアニメーションを作成しました。
これを作りながらオブジェクト指向について理解する…といった感じですね。
出来上がったCanvasアニメーションもとても綺麗なもので、結構嬉しくなっちゃいました。

なお今回は、ES6仕様のJSではなく…素のJSを使って書いていきました。
正直先にやった「JavaScript基礎 オブジェクト指向編」よりも前にこのブックをすべきでしたね…。

また、今回作ったCanvasアニメーションもCODEPENに起こしてみたので、そちらをここに載せておきます。
こちらもそのまま載っけるのは…と思い、ちょっとコードは改変してあります。
※調子に乗って色々機能付け加えたせいで、書くのに結構時間かかっちゃいました…。

See the Pen Canvas-animation-particles-fly-inthesky by Aik (@aik0aaac) on CodePen.

また、JSに関する細かなことも学べたので、備忘録がわりにここに書いておきますφ(･･

JSで関数をオブジェクトとして生成

JSで関数をオブジェクトとして生成するには、下記のように記述するそうです。

var Object1 = function(){
  this.name = "";
}

今回のブックでは、オブジェクトを上記の様に宣言しておりました。
というか今一度JSドキュメントを見てみたら「JSにおける全ての関数は、実はこのFunctionオブジェクトである」と書かれてました…まじかい。
※参考記事: Function - JavaScript | MDN

JSでプロトタイプ宣言

JSでプロトタイプ宣言(個々のインスタンスが参照するためのメソッド)は下記のように記述するそうです。

var Object = function(){ }
Object.prototype.greeting = function(){
  console.log("Hello!");
}

オブジェクトの振る舞いをオブジェクト内に書くのではなく、プロトタイプ宣言を使って書く感じですね。
ちなみに今回のブックでは、プロトタイプ宣言を使ってオブジェクトの初期化を行っていました…下記の様に。

var Object = function(){
  return this.set();
}
Object.prototype.greeting = function(){
  console.log("Hello!");
}

正規表現を理解する

今回のブックでは、正規表現記法をJSでコーディングしながら学んでいきました。
JSに則ったものなので、JS独自の書き方等もあるかもしれませんが…大体は一緒だと思います。

また、今回のブックだけで色んな正規表現の記法を1つ1つ学べたので…。
忘れないうちにまとめておこうかと思います。
ただ、量が量なだけに別記事にまとめようかなと…正規表現の沼は深そうです。

JavaScriptの正規表現を理解する 演習

先に行ったブックを学習済みであること前提の、正規表現にまつわる様々な演習問題を解くブックでした。

正規表現は一癖も二癖もあって難しく…。
それに、普通のソースコードと違って間に可読性向上のための空白も入れられないので見辛いの何の。
1つの課題に煮詰まってくると、段々正規表現記法が記号の羅列に見えてきて…もうちんぷんかんぷんでした。

しかし…！
以前Atomに導入した、正規表現記法の文を図示してくれるパッケージ「Regex Railroad Diagram」を使えば自分が書いた正規表現がどんなものか、一目瞭然に！

"Regex Railroad Diagramで図示された正規表現図"
こんな感じで表示してくれる

…ちょっとズルかもしれませんが、既存の素晴らしいツールを有効活用させてもらうのは悪いことじゃない…ですよね！
こちらのお陰で何とか全ての課題をクリアできました…やったぁ！

そして今回取り組んだ課題ですが…。
先にも言った正規表現に関するまとめ記事の方に、実用例として一部抜粋して載っけようと思ってます。
ついでに「Regex Railroad Diagram」で図式化された画像も一緒に貼っておこうかと！

あ、でもせっかくなので1個くらいはこちらに載せておこうかと…。
もしこの課題に迷ってる方がおりましたら、参考になれば幸いです。
※ただ、あまり効率の良いコードとは言えないと思いますが…。

課題-整数または少数の判定

与えられた文字列が0または正の整数または正の小数であるかを判定する関数isZeroPositiveNum()を書く課題です。
01の様に、正の正数の前に0が付くものや、01.2の様な整数部の前に0が付くもの、全角数字は弾きます。

ソースコードはこちら↓

function isZeroPositiveNum(){
  var regexp = /^0$|^[1-9]+[0-9]*$|^[1-9][0-9]+\.\d+$|^[0-9]\.\d+/;
  return regexp.test(str);
}

「Regex Railroad Diagram」で図式化した画像はこちら↓
"正規表現の図示"

んん〜、やはり図示されると分かりやすいですなぁ。
そして自分の記述の効率の悪そうな感じも分かりますなぁ…orz
もし「こういう記法だと良いと思うぜ！」等ありましたら是非是非コメントとかお願いします…(´；ω；｀)ｳｯ…。

JavaScriptで学ぶユニットテスト

今回のブックでは、JasmineというJavaScriptのテストフレームワークを用いながら、ユニットテストについて学んでいきました。
ちなみに今回のブックでは、Jasmineのテストをブラウザ上で実行し、結果をHTML形式で出力する形をとってましたが…。
通常はnode.jsなどのCLI(コマンドラインインターフェース)からテスト実行することが多いとのこと。

とりあえずブックは全て済ませてきたのですが…。
ユニットテストの学習というかは、Jasmineの学習といった内容でした。
Jasmineで何をやれるのかは分かったのですが、肝心のユニットテストについてはほんわりとしか理解できず…。

一応CODEPREPさんのブック中に、下記の様に書かれていたのですが…。

ユニットテスト(単体テスト) とは、プログラム上の個々のユニットが正しく動作することを確認する作業のことです。
JavaScriptの場合は、関数 が最小のユニットなる場合が多いです。
通常ユニットテストとは、手作業で行うテストのことも含みますが、本ブックではテスト自動化ツールを使ったユニットテストについて取扱います。

四角いところも丸く掃けない筆者としては、ユニットテストを徹底的に調べたくなっちゃうわけで。
ついでにJasmine自体や、Jasmineの様なJavaScriptのテストフレームワークが他にもないか調べてみました。

…ただ、こちらもまぁ、量が膨大になりそうなので…。
ユニットテストに関して1記事、JavaScriptのテストフレームワークに関して1記事といった様に別記事にまとめようかと。

CSS3+jQueryでつくる2Dゲームモーション

今回のブックでは、CSS3とjQueryを用いて、ブラウザ上でキャラクターの2Dゲームモーションを動作させるものを作りました。
CSS3の「CSSスプライト」を使って色々していく感じっぽいです…！

こちらのブックは、自分がこの度CODEPREPさんで勉強するにあたり、学ぶのをいっちばん楽しみにしていたものです…やっとこれが出来るぅ!
もうやっててすっごく楽しかったです…幸せすぎた!

また、CSSスプライトはSassと非常に相性が良さそうだなとも思いました。
扱う画像サイズを変数化し、background-positionでずらす感じかなぁ…と。
この辺りについてはまた別記事に書くとします…また長くなってしまいそうですしね。

そして今回作ったものもCODEPENに起こしてみたので、そちらをここに載せておきます。
こちらもそのまま載っけるのは…と思い、ちょっとコードは改変してあります。
※調子に乗って色々機能付け加えたせいで、書くのに結構時間かかっちゃいました…。

※すみませんCODEPENが完成する前に記事を書き上げてしまったので、また後日追記します…少々お待ちを!

なお、今回使用した画像についてですが…。
Dropboxさんの共有リンク機能の中に「ブラウザでファイルのレンダリングを強制する」オプションが付けられるそうで…。
この機能を使うとプレビューページを飛ばして、リンク付けしたファイルを直接表示できる様になるとのこと。
こちらの機能を使って画像を表示させました。本当今の時代はなんでもできますなぁ…。
※参考(Dropboxヘルプ): 共有された Dropbox リンクのダウンロードを強制する | Dropbox ヘルプ

次回の記事について

次回記事では、Three.js,moment.js,Canvas辺りに関するブックを見ていきたいと思います。
特にCanvasは少し気になってた分野なので…楽しみです！

ではでは|дﾟ)

#CODEPREP

aik0aaac 読者になる

広告を非表示にする
関連記事
```
コメントを書く