JavaScriptでライブラリを使わない開発を経験すべき！サンプルコードも紹介

「ライブラリを使わないコードの書き方を理解しておいたほうがいい？」

「ReactやjQueryを使わない書き方の見本を知りたい」

JavaScriptだけでサービスを開発する手法を、バニラJSといいます。

ライブラリやフレームワークといったものを読み込まないため、低スペックのパソコンでも軽快に動くのが特徴です。

信頼性の高いドキュメントであるMDNの解説によると、バニラJSのみでライブラリの機能を再現できるケースも増えていると説明されています。

Webアプリ開発を目指すなら、身につけておきたい技術です。

また、バニラJSに取り組むと開発者にとって重要な能力が育つため、学習を始めた人にもおすすめです。

本記事では、Webアプリ開発の経験があるみずがめが、以下の内容を紹介します。

バニラJSに取り組むと成長する3つの能力
JavaScriptで重要な3つの要素
コピペで動くJavaScriptコード

この記事を最後まで読むことで、JavaScriptのコーディング（コードを書く）を体験できます。

記事後半では、サンプルコードを掲載しているため、手順を確認しながら進めてみてください。

JavaScriptでライブラリを使わないと身につく3つの能力
JavaScriptでライブラリを使わない開発で重要な3つの要素
JavaScriptでライブラリを使わない書き方3STEP

JavaScriptでライブラリを使わないと身につく3つの能力

プログラミング経験がない人は、バニラJSに取り組むことで、以下の3つが大きく成長します。

システムの把握能力
情報の管理能力
エラー特定能力

とくにエラーの原因を特定する能力は、ライブラリやフレームワークを使っていると成長しにくい特徴があります。

1.システムの把握能力

JavaScriptだけで開発すると、アプリの仕組みを深く理解できます。

ライブラリやフレームワークは、誰でも導入するだけで、最低限のサービスが構築できるセットです。

そのため、基礎が固まっていない段階から利用すると、どのコードがシステムに関係しているのか把握できず、プログラミングスキルが伸びにくくなる可能性があります。

しかし、バニラJSで開発すると、パーツとパーツの連動を体験できるため、深い理解が得られます。

JavaScriptを使うなら、便利なセットを組み込む前に、基本的な命令文を復習しておいてください。

2.情報の管理能力

基本的な命令文を使って開発すると、情報を整理整頓する力が育ちます。

ライブラリやフレームワークが自動で行っていた処理を、自分の手で1つずつ組み込むため、見やすさを意識するようになるからです。

たとえば「map」「filter」「reduce」などの配列操作では、コーデイング中に情報の数や順番を確認します。

ファイルは、適切な階層に配置しないと動かないため、デバック（正常に動かない時の修正作業）で保存されている場所を照らし合わせていく習慣が身につきます。

あえて便利な機能を使わずに開発することで、情報を整理する癖が身につきます。

3.エラー特定能力

バニラJSに取り組むと、サービス開発で遭遇するエラーの原因を直感的に捉えられます。

自分のミスの場合、見たことがあるエラーメッセージが出るため修正が容易です。

見たことがないエラーは、ライブラリやフレームワーク関係の問題だと推測できます。

基本的な命令文を覚えれば、エラーの種類をおおまかに特定する知見が育ちます。

みずがめ

多分これがエラーの原因だろうな、と予測できると精神的にも楽になりますよ！

開発に必要な「自力で解決する能力」につながるため、ライブラリを使って開発した人よりプログラマーとして高い能力を獲得できるでしょう。

JavaScriptでライブラリを使わない開発で重要な3つの要素

自分のパソコンで動作するシンプルなアプリは、以下に示す3つの要素を押さえるだけで作れます。

イベント
状態
DOM

アクション（イベント）により、データ（状態）が変化し、表示画面（DOM）に反映されるのが処理の流れです。

1.イベント

イベント（Event）とは、ボタンをクリックしたり、キーボードで文字を入力したりするユーザーの行動を指します。

以下は、ボタンをクリックしたときに動作するスタンダードなコードです。

button.addEventListener('click', () => {})

スイッチがオンになる条件を定義するのがイベントの役割です。

2.状態

状態（State）とは、今の状況を表しており、変わることがあるデータを指します。

代表的なものは以下のとおりです。

入力欄の文字
カウンターの数字
リストの内容

今どうなっているかを表すデータと考えてください。

3.DOM

DOMとは、HTML（テキストファイル）をもとにブラウザがパソコンのメモリ上に生成するツリー構造のデータのことで、ブラウザを閉じたり更新したりすると消えます。

DOMを構成する部品を、DOM要素と呼びます。

以下の例では、ページがDOM、タイトルや入力欄がDOM要素です。

ページ（DOM）
 ├─ タイトル（DOM要素）
 ├─ 入力欄（DOM要素）
 ├─ ボタン（DOM要素）
 └─ リスト（DOM要素）

JavaScriptは、このDOMに対して要素の「取得」「作成」「変更」「追加」「削除」などの操作が可能です。

表示されたDOM要素を書き換えることを、DOM操作と呼びます。

以下のコードは「イベント」「状態」「DOM」をすべて使ったシンプルなものです。クリックするとカウントが1つ上がります。displayはDOM要素です。

※このコードをメモ帳やエディターに張り付け保存しても動きません。あくまで「イベント」「状態」「DOM」の関係を理解するものとして扱ってください。

let count = 0; // ← 状態（今の数）

button.addEventListener('click', () => { // ← イベント
  count++; // ← 状態を変更
  display.textContent = count; // ← DOM操作（更新）
});

JavaScriptでライブラリを使わない書き方3STEP

ボタンを押すと項目が追加される基本的なJavaScriptを作成します。

メモ帳を起動する
コーディングする
動作を確認する

Windowsに備わっているメモ帳をベースにDOM操作コードを解説します。低スペックのノートパソコンでも開発可能なため、チャレンジしてみてください。

みずがめ

Windows 10、Windows 11どちらでも同様の操作で開発できますよ！

1.メモ帳を起動する

パソコンを起動して、画面左下にある「ここに入力して検索」にマウスを合わせて一度クリックしてください。

検索窓に「メモ」と入力します。検索候補に「メモ帳」が表示されます。

下の画像のように「開く」をクリックすると、メモ帳が起動します。

以下の画像は、メモ帳が起動した状態です。起動できたら、次のステップに進んでください。

2.コーディングする

メモ帳を起動できたら、バニラJSでコーディングしていきます。

以下は、入力欄に入れたフレーズ（状態）をリストに追加するDOMのテストコードです。

メモ帳に貼り付けてみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>DOM操作を体験・勉強するためのアプリケーション</title>
    <style>
        body { font-family: sans-serif; padding: 30px; }
        #favorite-list { margin-top: 10px; }
        .item { color: darkblue; font-weight: bold; }
    </style>
</head>
<body>

    <h1>DOM操作のテスト</h1>

    <input type="text" id="favorite-input" placeholder="フレーズを入力して！">
    <button id="record-add-btn">記録する</button>

    <ul id="favorite-list">
        <!-- 情報が追加されていく-->
    </ul>

    <script>
        // 1. DOM操作＝ユーザーが入力した値（状態）を取得する
        const input = document.getElementById('favorite-input');
        const button = document.getElementById('record-add-btn');
        const list = document.getElementById('favorite-list');

        // 2. イベント＝ユーザーがクリックしたときの動き
        button.addEventListener('click', () => {
            //3. 状態＝初期値の設定
            const text = input.value;

            if (text !== "") {  //入力欄に文字があるとき

                // 4. DOM操作＝liのタグを新しく作って入力文字を入れる
                const li = document.createElement('li'); //リスト作成
                li.textContent = text; //文字をリストに入れる
                li.classList.add('item'); // CSSのクラスを付与

                // 5. DOM操作＝リストに追加
                list.appendChild(li); //ここでリストに表示される

                // 6. DOM操作＝入力するエリアを空にする
                input.value = "";
            } else {    //入力欄が空の場合
                alert("フレーズを入力して！");
            }
        });
    </script>
</body>
</html>

最初の行から20行までは、HTMLコードで書かれており、入力欄とボタンを設置しています。23行目の「<script>」からJavaScriptコードです。

取得したデータをそのまま表示するだけなので、状態（今を表すデータ）は「const text = input.value;」のみです。

コードをすべて貼り付けると、以下の画像と同じ状態になります。