筆者のスペック

ソフトウェア開発の経験は全くありません。
（PerlやVBAでちょっとしたプログラムを作った事はありますが、それでソフトウェアエンジニアを名乗るのも、どうかと思います。）

半導体の論理設計の経験はあります。Verilog、C言語、アセンブラはやっていました。
でも、それをやっていたのは10年以上前。
それ以降は、派遣で職を転々としたり、引きこもりになったり、と言った所です。

現在はプロフィールの通りです。

成果物

Github Pagesを使って公開してみました。

IE11では動きません。
IE11では、NodeListをforEach出来ないのが理由らしいです。これを書いている時に初めて知りました。

ただ、chromeとfirefoxで動けば良いや、という考えなので、特に気にしない事にします。

github（ソースコード）はこちら。
https://github.com/frameair/myprofile

使用言語

html5, scss, typescript

ただし、scssとtypescriptについては、特に使わなくても良かったのかなぁ、と思っています。
特にtypescriptは、殆ど使っていないようなものです。
javascriptでそのまま書いても変わらなかったと思います。

技術的な解説

背景で雪に見える様なものを、下から上に飛ばしています。
このロジックについて、ソースコードを示します。

const background = document.querySelector('#background');

const randNum = (center, deltaMax, deltaMin) : number => {
    const min = center + deltaMin;
    const max = center + deltaMax;

    const rand = Math.random();
    const result =  rand * ( max - min ) + min;

    return result;
}

// snowを用意する。
for (let i = 0; i <= 20; i++) {
    const snow = document.createElement('div');

    snow.classList.add('snow');       
    snow.dataset.no = i.toString();

    const animateDuration = 5000;

    const startLeft = randNum(50, 40, -40);
    const endLeft = randNum(startLeft, 30, -30);
    const endTop = randNum(0, 20, 0);
    const delayTime = randNum(0, 500, -500);
    const size = randNum(20, 10, -5);

    snow.style.height = `${size}px`;
    snow.style.width = `${size}px`;

    const animate_state1 = {
        opacity: [1, 0],
        top: ['100vh', `${endTop}vh`],
        left: [`${startLeft}vw`, `${endLeft}vw`],
    };

    const animate_state2 = {
        duration: animateDuration,
        easing: 'linear',
        delay: delayTime
    }

    setTimeout((e) => {
        snow.animate(animate_state1, animate_state2);
        background.appendChild(snow);

        setInterval(() => {
            const startLeft = randNum(50, 40, -40);
            const endLeft = randNum(startLeft, 30, -30);
            const endTop = randNum(0, 20, 0);
            const delayTime = randNum(0, 500, -500);
            const size = randNum(20, 10, -5);

            snow.style.height = `${size}px`;
            snow.style.width = `${size}px`;

            animate_state1.top = ['100vh', `${endTop}vh`];
            animate_state1.left = [`${startLeft}vw`, `${endLeft}vw`];
            animate_state2.delay = delayTime;

            snow.animate(animate_state1, animate_state2);
        }, animateDuration)
    }, i * 500)
}

div要素を20個用意します。
div要素は予め、cssで◯の形にして、filter: blurでボカシをかけてあります。

animationは、animateメソッドを使って実現しています。
最初は、cssのkeyframesを使って実現しようと思ったのですが、ランダムな場所に要素を移動させる方法が解らなかったので、cssを使うことは諦めました。
代替方法を探していた時に見つけたのが、animateメソッドです。

使い方は割愛します。下記のMDNを見て下さい。
https://developer.mozilla.org/ja/docs/Web/API/Element/animate

ただし、これはEdgeをサポートしていません。
~~そのうちEdgeもChroniumベースになるのだからサポートしなくて良いとは思いますが……~~

Edgeに対応させる為、ライブラリとして、web-animations.jsを使用しています。
github: https://github.com/web-animations/web-animations-js

これを使う事で、Edgeに対応させる事が出来ました。

後、Safari（MacOS, iOS）では未検証です。
MacもiPhoneもiPadも持っていないので、検証の予定もありません。

Androidでは検証してみました（Huawei P20 lite）
ただし、animationが重いです。冷静に考えたら当たり前ですよね……。

終わりに

ソフトウェアの勉強をしていましたが、これまで成果物と言える様なものは、何一つ作っていませんでした。
そういう意味では、これが初めての作品なのかも知れません。

これまで、プログラミングを勉強する事はあっても、成果物を作ると言う事はしてきませんでした。

しかし、この年齢になって、ようやくやる気もが少しだけ出てきた様に思います。
もうアラフォーという年齢で、プログラマーになるのは無理でしょうけど、趣味の１つとして、プログラミングと関わって行きたいと思っています。

今回は技術的な部分には殆ど触れませんでした。
この次に記事を書く際には、技術的な事を書きたいと思っています。

ポートフォリオを作った話

筆者のスペック

成果物

使用言語

技術的な解説

終わりに