IT鐵人賽完走の感想
今日は鐵人賽の最終日だ。最後の締めくくりの部分があまりうまく収まらなかったと感じているし、時間の都合で十分に紹介しきれなかった内容も多い。
30日間連続で投稿するチャレンジは本当に簡単なことではなかった。また似たような機会があれば、突発的な事態が起きても慌てて記事を締めくくることのないよう、事前にしっかりと準備をしておくべきだと痛感した。
また、今回のチャレンジのテーマは、これまでまったく触れたことがなかったWebGLと3Dグラフィックスだった。最初の10日間の学習で基礎知識を身につけられると思っていたが、実際にはWebGLシェーダーの応用と実装を理解し、three.jsのAPIを活用するなど、相応のグラフィックス理論の補強が必要であり、それがあって初めてフレームワークを自在に使いこなせるようになるのだと分かった。
しかし10日間の学習ではまったく足りなかった。GLSLの記述を理解するだけでもかなりの時間がかかり、ましてや実際の計算に応用するとなると尚更だ。すでにフレームワークが低レイヤーの処理を請け負ってくれているとはいえ、さらに高度な、あるいは強力な活用をしたいなら、その裏側の動作をより深く理解しなければならない。
A-Frameの部分については、また時間を見つけて少しずつ補完していく予定だ(時間があればの話だが QQ)。将来的にも3Dの道を進み続け、フロントエンドの画面表現をより豊かにしていきたいと思っている。
これには間違いなく時間の積み重ねと練習が必要だし、これまでのフロントエンド開発よりも挑戦しがいがある。しかし、この30日間で過去にはまったく知らなかった知識を本当にたくさん学ぶことができた。かつては敬遠していたシェーダーも、今では書けるようになり、読めるようにもなった。three.jsのAPIについても基本的な理解と認識が得られた。同時にWebVRの発展にも目を通し、A-Frameというフレームワークを知ることもできた。
この30日間は、まさに最も充実した1ヶ月だったと言える(笑)。このシリーズ記事にはまだまだ不完全な部分がたくさんあると自覚しているが、読者の皆さんが少しでもここから何らかの知識を得られたなら幸いだ!
後記
佳作を受賞した。僕の2016年の総括と言えるだろうか。きちんと記録に残せていないことがあまりにも多すぎた。
エントリー通知を見たときは、実はかなり迷った。フロントエンド界隈では予想通り、今年はreactやreduxを書く人が間違いなく多いだろう。それなら、ずっと触れてみたかったけれど触れてこなかったWebGLに挑戦してみるのもいいのではないか?
昔から画面上のインタラクションにはずっと興味があったが、エンジニアにとってアニメーションなどのロジックを扱うのは面倒で退屈なことでもある。この1ヶ月で学んだことは通常のWebサイト開発とはかけ離れており、実際の開発に応用できる機会さえほとんどないかもしれない(納期のプレッシャーだけでも手一杯なのに、誰がエフェクトまで気にするというのか?)。それでも、こうした知識を学び、自分の視野を広げることができたのは、やはり良いことだったのではないだろうか。
フロントエンドに対してデータの可視化(データビジュアライゼーション)を求める企業がますます増えている。かつては退屈で味気ないと思われていたものが、ビッグデータの時代になって重視され始め、その方向で求められるのがCanvasやWebGLの操作スキルだ。今では多くのフレームワークが低レイヤーのAPIをラップしてくれているが、フロントエンドエンジニアである以上、やはり低レイヤーに対する基本的な理解を持っておく必要がある。さもないと、いつの日か「抽象化の漏れ」に足をすくわれることになるのだから。
関連記事
- Three.js で僕の部屋を表現する 僕が React Three Fiber を使って実際の自分の部屋をブラウザ上に再現し、実世界のオブジェクトを目録に見立て、空間の記憶を通してここ数年の生活と仕事について語った話。
- フロントエンドで画像を扱う際に注意すべきこと Jake Archibaldの記事を起点に、現代のレスポンシブ画像の書き方を整理する。なぜwidth/heightを付ける必要があるのか、CSSのaspect-ratioはいつ使うべきか、AVIFとWebPの選び方、そしてpicture/source/srcsetを使ったモバイル向け画像の切り替えについて。
- CSS field-sizing — たった1行のCSSでフォーム要素を自動リサイズする かつてtextareaの自動高さ調整は、JavaScriptでscrollHeightを監視するしかなかった。しかしCSSのfield-sizing: contentなら、わずか1行で代替でき、textarea、input、selectに対応している。本記事では従来のやり方のペインポイントと、field-sizingの使い方をまとめる。
- リンクの下線をもっと見栄え良くする:text-underline-offset デフォルトでは下線と文字が近すぎて、このスタイルを好まないデザイナーもいるし、僕自身もあまり綺麗ではないと感じていた。