はじめに

ひとこと

アクセスしていただきありがとうございます。
タイトルの通り、３年近くバニラJSしか書いていなかった話です。
タメになるかどうかは分かりません。

えっ、味を占めていないかって？まさか...

（お時間があればぜひ読んでください。おそらく面白いです。）

目的

バニラJSでコーディングしていたことで得られた知見を共有すること（）

検証済みの環境

JavaScript ES2021～

ご注意

この記事の情報は 2024/09/01現在 のものです

1.前書き

筆者は高校に入学したと同時に、部活でプログラミングを始めました。
HTMLとCSSを一通り学習し、一人で簡単なウェブページをつくれるようになりました。
そして自然とウェブページに機能を実装したいと思うようになり、JavaScriptの学習を始めました。
（今もですが）ここまで独学だったこともあり、一度、挫折しながらも百人一首を4択から選んで覚えるウェブアプリをつくり、高校で公開しました。
その後も学習を続け、高校2年生の夏ごろに全体で1000行ほどのウェブアプリを完成させました。

...そう、メモ帳で。

「メモ帳でコーディングしていた話」より引用

その後も様々なシステムやアプリなどを開発しました。
どれも大きくはないですし、単一の機能しか持たないものも多くあります。
それでも、現在までに開発したものは50ほどに上ります。

...そう、バニラJSで。

2.３年近くバニラJSしか書いていなかった話

なぜ、そうなったのか

独学で、つくりたいものをつくることから始めたから

~~当時の彼女にかっこいいと思われたいがために~~ 関数の戻り値が分かっていない状態 で「百人一首を4択から選んで覚えるウェブアプリ」をつくり始めました。
そのため、初心者向けの本や一連の記事に沿って学習することをしなかったのです。
ですので、次のステップとしてライブラリを導入するということすら知りませんでした。

エディタがメモ帳だったから（笑）

そんな私も、ある時にライブラリなどの存在を知りましたが、既定のプロパティなどが大量に追加され、ものによっては書き方も大きく変わると知り、メモ帳では厳しいと判断しました。

アウトプットが多かったから

高校2年生の春に、ICT化を担当して欲しいと誘われ生徒会執行部のような組織に参加しました。

「メモ帳でコーディングしていた話」より引用

組織で必要なシステムなどをひたすら開発していたため、インプットよりもアウトプットが圧倒的に多く、ライブラリなどを学習する時間がありませんでした。

そもそも必要でもなかったから

執行部のためのシステムは、種類と数は多かったですが1つ1つの規模は小さくバニラJSでも事足りていました。

設計の変遷

３年近くバニラJSしか書いていない人の設計がどのように変わっていったかです。

～2ヶ月目くらい

function Root() {
    function Great() {
        console.log("Helllo world");
    }

    //...
}

初心者あるあるだと思いますが、筆者も変な勘違いや思い込みをしていました。
その結果、まさかの 1つの関数にすべてのコードを内包 していました。

このレベルで、「百人一首を4択から選んで覚えるウェブアプリ」を完成させ公開したので、ある意味ではすごいですね。
~~恋の力は偉大~~

～9ヶ月目くらい

function Great() {
    console.log("Helllo world");
}

function Search(tragetName) {
    //...
}

機能を関数に分けてつくり、それを呼び出して使うことなどを覚えました。
しかし、関数を再利用できる状態ではない（ただ複数の関数に分けただけ）などの、まだまだ習熟度が浅い状態でした。

～15ヶ月目くらい

const Cell = {
    val: '',
    getValue: function() {
        retrun this.val
    }
}

オブジェクト指向を理解し始めました。
中級者あるあるだと思いますが、例えば変数の命名規則などの「理解できなくても何とかなるけど、理解した方がいい」ことを理解し実践できるようになりました。

～2年目くらい

const App = {
    project: {
        sheet: {
            cell: {

            }
        }
    }
}

オブジェクト指向をさらに極めました。
と同時に、上記のコードのような、jsのobjectを使ったコーディングに限界を感じていました。

～3年目くらい

function Great(text) {
    // Typeオブジェクトを宣言済み
    if (Type.isNotStr(text)) {
        return false
    }

    //...
}

Cを学習し、その影響を強く受けました。
（TypeScriptを知っていましたが）JSで引数の型をチェックしてみたり、動的型付け言語の限界を感じたり...と。

今でも印象的だったのが、CのポインタのようなことがJSではできないと知り、言語の限界に直面したことです（そのような実装を避けるべきかもしれませんが）。

～4年目くらい

例えばウェブアプリをつくる上では、jsはHTMLやCSSと切り離せない関係であり、jsの変数が更新されたらHTMLやCSSも更新したいのは日常茶飯事です。
そこで、そのようなことができないかと自作でライブラリを開発し始めました。
少しは形になりましたが、実用的からは程遠く、参考しようとReact.jsについて調べてみると、同じことをしているではありませんか。
~~偉大な先人と同じ思想だった！と浮かれていました~~
そのまま、自作のライブラリを開発し使ってもよかったのですが、今後のことも考えてReact.jsを始めました。

～現在

~~静的型付け言語に浮気しています。（C#ってすごい）~~
現在はReact.jsを中心に開発しています。

3.後書き

おそらく、とても遠回りしてしまっていると思います。

ですが、それによって得られたこともあります。
筆者の中で一番印象的だったのが、基本・応用情報技術者試験の「モジュール結合度」について勉強したとき、 当たり前じゃない？ と思えたことです。
プログラミングは独学ですし、もちろん情報系の試験も初めてです。
インターネットの優れた記事に誘導されたのかもしれませんが、自力で体系化した技術を身につけられていたと知り、少し嬉しかったです。

（自称・中級者の個人的な意見ですが、生成AIなどに頼りきっていては、やっていけないと思います。少なくとも体系的な知識や技術を調べたときにサッと理解できるくらいには、基礎を固めるべきだと思います。）

おわりに

最後までお読みいただきありがとうございます。
初心者の方は、まずは初心者向けの一連の記事や本に沿って学習することをおすすめしますが、ただサンプルコードを写すのではなく、ご自身で考えながら学習されるとより上達できると思います。