Java Scriptで桜吹雪を起こしてみせました。

先日、桜の記事を書いたときに、桜 x プログラミングで、作品ができないかと考えました。

先日のプログラミング記事のイベントで作ったページがあるのでここに桜吹雪を吹かせられないかなとネットで調査しました。

自分でゼロから作らずに、先人たちの素晴らしいお力を借りようとした次第です。そして発見しました。素晴らしいクオリティの桜吹雪。

できればサイトに行って見てみてください。なんと時折春風が吹き桜がながされる様子が見えます。さらに桜には遠近感があり奥行きが感じられます。

https://alis-programming-event.firebaseapp.com/

手の込んだ作業がつめんであり風情を感じる完成度に仕上がっています。

コードは、下記のお二人のサイトから拝借しました。最初に作成されたのは２０１３年にベタのjava scriptで開発されています。それから７年も経った現在も素晴らしいクオリティで動作しています。

春風そよよ〜！桜の花びらがヒラヒラ舞い落ちる JavaScript だよー！
 

このコードを今風のReactのコンポーネントに仕上げられた方おられます。その方のコードを、拝見しReact導入はさらに容易になりました。

桜吹雪コンポーネント、作りました

ReactはJava Scriptのフロントエンドフレームワークの一つでFacebookが開発、オープン化して世界の多くのビジネス、個人サイトで使用されています。

Reactのコンポーネントは多くの場合、コピペしただけで動くのでとても好感を持って使用しています。たとえば今回の作品ですが、私はjsとcssの２つのコンポーネントをお借りして、下記の追記を既存のページに行っただけです。

import Sakura from "./Sakura"

...

render()
...
<Sakura/>

このあと少し微調整して仕上げた次第です。最近のスマホなどのフロントエンドは強力なので花びらの枚数を５０枚に増やすなどの魔改造をしています。

このあたりの安定した互換性はReactの魅力といえるでしょう。多くの場合に高い互換性を導入時に感じています。ありがたい。

ぜひこちらのサイトで春を感じつつプログラミングの記事を漁っていただけると幸いです。

この記事もMarisさんのイベントに捧げます。