2/4

クリーンコード

類似語

update - modify, change

send - deliver, dispatch

命名規則・省略

3-4単語なら略さないほうがいいかも

a11y - accessibility
i18n - internationalization
先頭から末尾の文字数になっている

デザイン

ワイヤーフレームに引っ張られすぎない

おそらく自分が最も難しく感じていること。
ワイヤーフレームはあくまで情報設計と心得てはいるのだが、なかなか。

やはり行政書士の例サイトは、堅い感じでよいのでワイヤーフレームっぽさがちょうどよいのだが、より軽やかなサイトでは画面いっぱいのヒーローを7割で左右に寄せたり、文字を手書きにしたり、タイトルを背景大文字に変えたりできるのに。

セキュリティ

オリジン

スキーム名、ホスト名、ポート番号の組み合わせを オリジン という。
オリジンが違うものをクロスオリジンという。

クロスオリジンのリソースへのアクセスを制限する仕組みを「同一オリジンポリシー」と呼ぶ。

同一オリジンポリシー

ブラウザはデフォルトでオン。

（色々あるが主な例→）JSからfetchを使ったクロスオリジンへのリクエストはブロックされる。
制限をオフにするにはCORSを利用する。

また、HTMLで読み込む<script><link><img>などなどからオリジンをまたぐアクセスは制限されていない。
CORSとcrossorigin属性を使えば制限できる。

ハンズオン

user.htmlとattacker.htmlを用意し、hostsファイルでsite.exampleとlocalhostを紐づけた。

site.example/attacker.htmlからsite.example/user.htmlをiframeで読み込むと、同一オリジンなので、scriptから操作可能。
localhost/attacker.htmlからだと、クロスオリジンなので、scriptから触ろうとしても同一オリジンポリシーにより弾かれた。

Three.js

オーロラ 肝

• 視線方向(rayDirection)を使って、for文でオーロラっぽい発光色をサンプル。
  手前ほど強く、奥ほど弱く積算。
• rayDirection自体は、vertexShaderでmodelPosition.xyz - cameraPosition;として渡っている。
• オーロラの模様は回転付き2Dノイズで作っている。

オーロラ 手順

for文内の話。コードは簡易化してる。

ステップごとのサンプル位置を作る

ゴールはvec3 sampleWorldPosition = rayDirection * rayParameterを作る。
なのでrayParameterを作る。

rayParameter = fi / rayDirection.y で、yが0(水平方向)ほどrayParameterが大きくなるようにする。
これで水平方向ほど遠く見えるようになる。

そして、rayParameterにnoiseを加えてぼかす。

noiseで明るさ兼アルファを作る

noiseStrength = triNoise2d(sampleWorldPosition.zx * uScale, rotationMatrix)

rotationMatrixは、ループ外で
rotationMatrix = get2dRotateMatrix(uTime * uSpeed)
としている。

高さで色をグラで

mix(uColor1→uColor2→uColor3→uColor4) を smoothstep で繋いで、縦方向（ステップ方向）に色が滑らかに遷移する。

流体シミュレーションリベンジ

難しい箇所をGPUComputationRendererに変換してリベンジする。何度かやったので、今度は理解できるはず。と信じよう。