ボタンを押したらメニューが開いたり、ポップアップしたり。
ホームページ制作において、そういった動きを実装する際、基本的にjavascriptを用います。
DTMでも、主にjqueryを使用して実装してきました。
しかしjqueryはファイルサイズが大きかったり、他のフレームワークの便利な部分を使っていきたいということもあり、jqueryから出来るだけvanilla.js(フレームワークを使わない書き方)やvue.jsへの移行を進めていこうという動きがありました。
私自身ももっとjavascriptを理解したいと思っていましたが、まず勉強して何に活かしたいのか。
そこを考えたときに、ホームページ制作の中で活かせる、かつ自分がやってみたいCanvasを用いたページの実装を勉強してみようと思いました。
Canvasとは
Canvasとは、ブラウザ上でのグラフィックスプログラミングを実現するjavascriptのAPIです。
画像が歪んだり、波打ったりしているデザインのサイトを見たことがある方も多いのではないでしょうか。
https://adidaschile20.com/white-tracksuit/2
https://yuta-takahashi.dev/
こういったサイトの実装には、Canvas APIが使用されています。
そこでCanvasとグラフィックスプログラミングについて理解したいと思い、今年の春、入門書籍を購入しました。
[ゲーム&モダンJavaScript文法で2倍楽しい]グラフィックスプログラミング入門
私がいいと思ったのはjavascriptとブラウザの機能を使ったグラフィックス系実装について手を動かして学べるところです。
Canvasを用いたページの実装に興味のある方には、とても面白い本だと思います。
本書では、
・グラフィックスプログラミング > コンピュータグラフィックス(CG)の世界について
・Canvasを扱うためのjavascriptの基礎（ES2015入門）
・サイト上でグラフィックを描くCanvas2Dについて
・Canvasを用いたゲーム開発
・Canvasを用いた画像処理（ノイズ除去、エッジ検出、ネガ、モザイク）
について解説されていますが、私がこの本で得た大きいものは、Canvasを用いて何ができるのかがわかった事です。
実装を経験することも大切ですが、まずは何が出来るのか出来ないのか、どんな場合に何を使うべきなのかを判断できるようになることで、社内やお客さんへの提案ができるようになっていくのだと思います。
出来ることがわかっていれば、やり方はそのあと調べてもいい。
今はネット上で沢山の情報に出会うことができる時代ですし、便利なライブラリも増えています。
そういった情報の取捨選択や、ライブラリなど便利なツールの選定ができる判断基準を、自分の中に育てていきたいなと思った本でした。
