Aikの技術日記

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

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

CODEPREPで勉強しよう その7

Webプログラミング

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

CODEPREP勉強中です

今日も今日とてCODEPREPで勉強ライフを謳歌中の筆者です。

最近CODEPREPのブックをやる日が多く…というかほぼこれしかしてない感じに。
でもお陰でやりたいブックをもりもりやれてるし、ブックをやってて興味が出た分野を改めて調べ、理解も深められてます。
そう思うと、結構充実した日々を過ごせてるのかもしれませんね( ＊｀ω´)

まぁ前口上はさておき、今回はThree.jsやmoment.js、そしてCanvas系統のブックをやっていこうかなと思います。
具体的には下記のブックを…。

  1. Three.jsではじめる3Dグラフィックス基礎
  2. moment.jsを理解する
  3. はじめてのCanvas
  4. Canvasでつくるクリスマスメッセージ

Three.jsもmoment.jsも事前知識が全くない状態で取り組むので、若干不安はありますが…まぁやってみないと分からないですからね。
それでは学んだブックの感想やらまとめをば!

各ブックの感想など

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

Three.jsではじめる3Dグラフィックス基礎

今回は「Three.js」という3Dグラフィックス用ライブラリを使い、3Dグラフィックスを見ていく章でした。

※本ブックではVer:r79のものを扱いました。
ちなみに2018/09/18時点のThree.js最新版はVer:r96です。

Web上で3Dグラフィックスがいじれるのは本当に魅力的な事なんだなと実感しました…。
Three.jsは提供されてるメソッドも豊富で、結構楽にやりたい事が実装できるのも魅力ですな。

なお、Three.jsの公式サイトには、同ライブラリを使ったプロジェクトもたくさん紹介されております。
芸術的なモデル作成やゲーム、その他の分野と幅広く用いられているようです。
中には目をみはるクオリティのものもあるため、ぜひ一度見てみてください。

※面白そうなプロジェクトをメモ書きにいくつか残しておきます。
Heraclos, and the quest he never ever asked for
https://worlddraw.withgoogle.com/
Poly
OUIGO - Let's play
@Cabbibo
Within: Extraordinary Stories in Virtual Reality

また、公式サンプルもなかなか素晴らしいものばかりなので是非是非。
クリエイター心をくすぐられますお…！
three.js examples

ちょっと脱線しちゃいましたね…話を戻しましょうか。
本ブックでは、Three.jsの基礎的な部分をかなり学ぶことができました。
詳しい事はまた別の記事に書く形式を取りたいと思います…相変わらず長くなりそうなのでね。

また、最後には演習?として、本ブックで学べる部分を使った、簡単なThree.jsアニメーションも作りました。
こちらを少し改良したものをCODEPENに起こしましたので、貼っておきます。

See the Pen Three.js-test by Aik (@aik0aaac) on CodePen.

いつか、先に紹介したプロジェクトみたく、素晴らしいコンテンツを作り上げてみたいものです…！

moment.jsを理解する

今回は日付時刻を扱うJSライブラリ、「moment.js」の使い方等を見ていくブックでした。
※Moment.jsの公式サイトはこちら: Moment.js | Home

なお、本ブックではv3.2.0のものを扱いました。
ちなみに2018/09/18時点のMoment.js最新版はv2.22.2です。

今回のブックでも様々なことを学べましたが…。
今回はちょっと嗜好を変えて、学んだことの詳細に関してをCODEPENに上げることにしました。
下記に貼っておきますので、参考に…。

See the Pen GXwRyz by Aik (@aik0aaac) on CodePen.

さて、ここで終わってしまうのも味気ない…ので…。
というか、筆者が気になって調べて見た項目があるので、それについて少しお話をば。

moment.js以外の日付ライブラリ

今回のブックを学んで思ったのは、「moment.js以外にも日付周りを扱うJSライブラリはないか?」と言う事。
と言うわけで探して見たら、やっぱりありました。ライブラリ名は「data-fns」。
date-fns - modern JavaScript date utility library

GithubのStar数(お気に入り数みたいなもの)はMoment.jsより少ないものの、なかなか良さげなライブラリではありそうです。
(参考: 2018/09/18時点での両者のStar数はMoment.jsが38625個、data-fnsは13540個となってました)

おまけにdata-fnsのGihubIssuesに、Moment.jsとdata-fnsとの違いを議論しているものも。
Add a brief comparison with Moment.js? · Issue #275 · date-fns/date-fns · GitHub
なかなか長いIssueとなっており、読み応えある一品となっております。

また、上記Issueの中にこんなGithubリポジトリへのリンクもありました…。
どんなものかがタイトルで分かるって言うね。
GitHub - you-dont-need/You-Dont-Need-Momentjs: List of functions which you can use to replace moment.js + ESLint Plugin

最後に、data-fnsに関する参考記事も貼っておきます。
こちらの記事ではdata-fnsを用いた、素敵なデモコードも掲載されておりました…分かりやすさの極み！
いきなり公式ページを読むのもな…と言う場合に是非。
日付処理ライブラリ「date-fns」でプレミアムフライデー！ - Qiita

はじめてのCanvas

今回はHTML5の新機能、「Canvas」について学んでいきました。

まぁCanvasについてはその6-JavaScriptブック後編であった、「JavaScriptでオブジェクト指向を理解する」ブックで少しだけ学んでしまってたのですが…。

でもあのブックはCanvasの学習ブックではなかったですからね。
今回の記事でCanvasにおける基本的な事柄をほぼ全て網羅できてる感があります。
具体的には下記のようなことを学べました。

  • Canvasでの描画準備
  • Canvasで線/四角形/円/文字を描く
  • Canvasオブジェクトの角度を変える
  • Canvasオブジェクトに影やグラデーションをつける
  • Canvasオブジェクトを動かしてみる(Canvasアニメーションに相当?)

まぁCanvasアニメーションは重たいイメージが…JSでゴリゴリ動かさないといけないですからね。
SVGの方が軽そうなイメージあるけど、実際の所どうなんだろう…と思って色々調べてみました。

Webアニメーション実装法について

そもそもWebアニメーションを実装する方法としては、CanvasやSVG以外にも色々あるわけで。
HTML5が実装される以前、JSで実装されていた「DOMアニメーション」や、今流行り(?)の「CSS3アニメーション」、最後に「WebGLアニメーション」があります。
※参考記事: https://backyard.imjp.co.jp/articles/web_animation3

それぞれの技術…特に最近になって使われるようになった技術(Canvas/SVG/WebGL/CSS3)に関しては、様々な外部ライブラリが存在しております。
例えばCanvasだとcreateJSやpixiJS、WebGLアニメーションだとThree.jsとかが有名どころですかね。

それぞれの技術で得意な部分と苦手な部分があるので…。
それぞれの技術を使い分けていくのが一番良いっぽいです。

具体的な使い分けについては、Google Developersの記事にその指標的なのが載っていたので…それを参考にするといいかもです。
CSS アニメーションと JavaScript のアニメーションの比較  |  Web  |  Google Developers

また、色々と調べていくと「Canvasアニメーション VS SVGアニメーションどちらがいいか」的な記事を多く見かけました。
Canvas と SVG の使い分けに関する考察 | Microsoft Docs
http://memo.sdn-project.net/post/157007315019/canvas
SVGとCanvasの特性の違いをチャートの実装を使って比較する - Qiita

類似してCanvasアニメーションやSVGアニメーションは、どちらを使うか悩んで〜といった記事も多くありました。
まぁWebGLアニメーションでUI周りの動作を制御…とか、あまり聞きませんしね。もっとハイレベルなイメージ…。
CSS3アニメーションでは、CanvasアニメーションやSVGアニメーションレベルの動きはできませんし…これらは棲み分けが割とされてるのかもしれませんね。

Canvasでつくるクリスマスメッセージ

今回のブックでは、下記のようなCanvasアニメーションを作りました。
作る際は、オブジェクト指向の考え方を意識しながら製作していきました。

※こちらに関してもいつものように、CODEPREPさんで学んだコードをちょっと改変したものを載せてます
まぁ今回はちょっとどころの改変ではないのですが…

See the Pen eLQGdX by Aik (@aik0aaac) on CodePen.

それにしてもやはり、Canvasアニメーションは重たく感じちゃいますな…。
pixiJSとかの外部ライブラリのデモだと、かなりぬるぬる動いてたなぁと思い出したので…。

試しにpixiJSで、今回作ったCanvasアニメーションと同様のものを作ってみました…が、思うような動きをするプログラムにはなれず…。
単純に勉強不足なだけだとは思いますが…。

See the Pen bubble-upper_by-PixiJS by Aik (@aik0aaac) on CodePen.

このPixiJSの入門記事を見ると、テクスチャ画像を動かして色々している記事がすごく多くて…。
公式DEMOも、そんな感じのが多かったですからね。

今回みたいに、canvas自体で図形を描画して…と言うのではなく、予め用意された画像を動かしたりなんだりするのに便利なライブラリ、というのかもしれません…。
まぁともあれ、PixiJSを使った方が素で書くよりもずっと楽には書けたので…。
Canvasアニメーションをする際は、外部ライブラリに頼ってみるのも良いかもです。

ちなみに何とこのpixiJS、spineも使えちゃうみたいで…すごい！
関連性は薄いですが、RPGツクールMVというゲームエンジンソフトは、レンダリングにpixiJSを採用しているらしく…このソフトでもSpineが使えるみたいです。ﾎｴ-( ﾟдﾟ)

次回の記事について

次回記事では、React,Vue.js辺りに関するブックを見ていきたいと思います。
ここら辺も名前は聞いたことあるけど実際やってない〜的なものばかりなので…非常に楽しみです！

ではでは|дﾟ)