最初のウェブアプリを作成する：シンプルなノートアプリとワードカウンター

コーディングを始めるのは、考慮すべき無数の言語、フレームワーク、方法論があるため、 intimidating に感じるかもしれません。すべてをAIに外注する方が簡単に思えることもあるでしょう。しかし、安心してください。ウェブのプログラミングはシンプルで楽しく、何よりも完全に無料です！

あなたが作るもの

このチュートリアルに従って、テキストメモを保存し、それらの文字数や単語数をカウントするシンプルなウェブアプリを作成します。

このアプリはデータを保持するため、ページを更新したり再度開いたりしてもテキストを記憶します。これは、後で参照したい住所やURLなどのテキストを保持する便利な方法であることを意味します。

これはまた、文字や単語をカウントする機能もあり、文字列（テキスト）を扱うための便利な入門となります。もちろん、このアプリは非常にシンプルです。それがポイントです。しかし、このチュートリアルを通じて、ウェブアプリを構築するための基本的な概念を学び、その後は世界があなたの舞台となるでしょう。

どのようにそれを構築するか

ウェブアプリは大きく異なりますが、通常は3つのコア技術、つまりHTML、CSS、JavaScriptが関与しています。これらの技術は非常に重要な役割を果たしており、始める前に理解しておくべきです。

HTML（ハイパーテキストマークアップ言語）は、コンテンツの構造を定義することを可能にします。これを使用して、テキストの意味に応じてマークアップし、それが段落か見出しかリストの項目であるかを示すことができます。
CSS: カスケーディングスタイルシートは、コンテンツのスタイリングを可能にします。ハイパーテキストマークアップ言語を使用して、特定の段落を緑色にしたり、すべてのリンクを太字にしたり、メイン記事の隣にサイドバーを配置することができます。
JavaScript: このプログラミング言語を使用すると、ウェブページに機能を追加できます。ボタンをクリックするとドキュメントの一部を表示したり隠したりしたり、完全なワープロソフトやビデオゲームを実装したりすることができます。

web.devサイト（Chromeチームのメンバーによって作成された）とMDN、Mozilla Developer Networkは、コアウェブ技術に関する素晴らしい情報源です。

アプリの構造

あなたが作るアプリは、index.html、styles.css、およびscript.jsの3つの簡単なファイルで構成されます。

アプリを実行するための特別な要件はありません。必要なのはウェブブラウザだけです。バックエンド機能はないため、PHPのようなスクリプト言語やローカルウェブサーバーは必要ありません。作業が完了したら、index.htmlファイルを直接ブラウザで開けばすべてが動作します。

このアプリは、JavaScriptがファイルシステムにアクセスできないため、特定のディスクファイルに書き込むことなくテキストを保存することが重要です。これは、クッキーの強力な代替手段であるWeb Storage APIを使用して行われます。

ノートテイカーの作り方

次の3つのファイルを同じディレクトリに作成し、index.htmlをウェブブラウザで開いてください。あるいは、このGitHubリポジトリからファイルをダウンロードすることもできます。

HTMLを使って構造を構築する

index.htmlファイルは、アプリのコンテンツ構造をHTMLで定義します。それには、ブラウザがそれらを組み合わせて完成した製品を作成できるように、他の2つのファイルへの参照が含まれています。

すべてのHTMLドキュメントと同様に、最上位の構造にはメタデータを含むヘッダーセクションと、ページに表示される実際のコンテンツを含むボディセクションが含まれています。

        <!DOCTYPE html>
<html>
<head>
    ...
</head>
<body>
    ...
</body>
</html>

ヘッダー内のメタデータは非常に短く、ページのタイトル（ブラウザのタイトルバーに表示されるもの）とstyles.cssファイルへの参照だけが含まれています。

            <title>Text</title>
    <link rel="stylesheet" href="styles.css" />

体はもっと複雑ですが、重要な部分はほんのいくつかです。

            <div id="counter">
        words: <span id="words">0</span>
        /
        characters: <span id="chars">0</span>
    </div>
    <textarea id="text" autofocus="1"></textarea>
    <script src="script.js"></script>

div要素（「division」）にはアプリの単語数と文字数が含まれています。それはウェブアプリの上部に配置され、テキストが変更されるたびに更新されます。

id属性に注意してください。これは操作にとって重要です。idの値は一意でなければならず、アプリが特定の要素を識別するために使用できます。これにより、これらの要素をスタイリングしたり、機能を追加する際にターゲットにしたりすることができます。

テキストエリアは、ブラウザでプレーンテキストを入力できる組み込みのフォーム要素です。autofocus属性を使用すると、ページが読み込まれるとすぐに入力の準備が整います。最後に、ページはjavascriptファイルscript.jsを参照しています。

この時点で、index.htmlファイルをブラウザで開くことができます。今は何も機能しませんし、見た目も正しくありませんが、各段階でアプリが基本的に期待通りに動作しているかを確認するためには便利です。

CSSを使って物事を美しく見せる

CSSを使用すると、ウェブページの一部のスタイルを変更できます。それらの部分をターゲットにして、フォントサイズや背景色などのプロパティの値を指定します。このサンプルアプリは、そのインターフェースが非常に基本的なので、細かく調整されたデザインはあまり必要ありません。それにもかかわらず、少しスタイルを加えることで、粗い部分を少し整理することができます。

まず、全体のレイアウトを定義するためにボディをスタイルします:

        body {
    margin: 0;
    padding: 0;
    display: grid;
    min-height: 100vh;
    grid-template-rows: min-content 1fr;
}

このCSSはグリッドレイアウトを使用して、テキストエリアの上に単語数と文字数を狭い行に配置します。grid-template-rowsプロパティは、カウント行ができるだけ短く（min-content）なり、テキストエリアが残りのスペースを埋めるべき（1fr）であることを指定します。

カウンター行は、主に背景によって残りのテキストと区別するための基本スタイルを持っています。

        #counter {
    font-family: sans-serif;
    background-color: #f7f7f7;
    text-align: center;
    width: 100%;
    padding: 0.5em 0;
}

最後に、テキストエリアは読みやすいテキストを表示し、呼吸できる十分なスペースを持つようにスタイル付けされています。カウントとテキストを分ける線は、実際にはこのテキストエリアの上部のボーダーです。

        textarea {
    width: 100%;
    height: 100%;
    font-size: 16pt;
    padding: 1em;
    box-sizing: border-box;
    outline: 0;
    border: none;
    border-top: 1px solid #999;
}

JavaScriptで機能を追加すること

構造とスタイルが整ったら、機能を追加する準備が整います。このシンプルなアプリを実際に動作させるコードです。

最も簡単なコードを書く前に、何をしたいのかを理解することが賢明です。この場合、いくつかの一般的な要件があります:

入力されたテキストを保存し、必要に応じて再読み込みします。
文字数と単語数を更新して、リアルタイムの統計を提供します。

両方の要件は、ドキュメント内の要素を更新することを含みます。したがって、スクリプトは getElementById メソッドを使用してこれらのノードへの参照を取得することから始まります。

        const words = document.getElementById("words");
const chars = document.getElementById("chars");
const textarea = document.getElementById("text");

単語、文字、およびテキストは、HTMLファイルのid属性で割り当てられた、それぞれの要素のIDです。

次に、テキストが変更されたときにアプリが反応する必要があります:

        textarea.addEventListener("input", function(ev) {
    localStorage.setItem("text", ev.target.value);
    update_counts(ev.target.value);
});

イベントリスナーは、特定のイベントが発生したときにJavaScriptが自動的に実行する関数です。この場合、"input"イベントが発生する際に実行されるリスナーをテキストエリアノードにアタッチします。これは、実質的には誰かがテキストエリアと対話しているときです。

次に、Web Storage APIを使用して、ev.target.valueからテキストエリアの現在の内容を保存します。この構造では、evはリスナーをトリガーしたイベントを表すオブジェクトであり、ev.targetはそのイベントを受け取ったノード、ev.target.valueはそのテキストエリアのテキストです。

setItemメソッドは2つのパラメータを取ります：データに関連付けるキー名と、実際に保存するデータです。

その後、同じテキストを渡して update_counts() を呼び出します。その関数については後で説明します。

テキストを保存したので、アプリが開かれたり更新されたときに再度読み込む必要があります。それを別のリスナーを使って処理できます:

        window.addEventListener("load", function(ev) {
    var text = localStorage.getItem("text");
    textarea.value = text;
    update_counts(text);
});

これはウィンドウオブジェクトで発生するロードイベントを処理します。ウィンドウはブラウザウィンドウ自体のトップレベルの表現です。ウィンドウがロードされると、getItem()を呼び出すことでローカルストレージからテキストの保存値が返されます。このコードは、テキストエリアの値をロードされたテキストに設定し、前のリスナーと同様に、このテキストを使ってupdate_counts()を呼び出します。

残りの作業はupdate_counts()関数で行われ、次のようになります:

        function update_counts(text) {
    chars.innerHTML = text.length;
    words.innerHTML = text.split(' ').length;
}

テキストエリアとは異なり、通常のテキストには値プロパティがないため、代わりにinnerHTMLプロパティを設定します。文字列のlengthプロパティは単純な読み取り専用プロパティで、文字の数を教えてくれます。

text.split(' ') は、空白文字で文字列を分割し、その結果を文字列の配列として返します。文字列と同様に、配列には length プロパティがあり、配列内のアイテムの数を教えてくれます。

しかし、このコードを試してみると、いくつかのバグに気づくかもしれません:

それは行の独自の単語としてカウントされず、両側にスペース文字がないためです。
テキストが全くない場合、スプリットの動作によって一つの単語が報告されます。

最初の問題を解決するには、スペースの代わりに正規表現（\sは「空白文字」を意味します）で分割できます。二番目の問題を解決するには、結果から空の文字列を除外します:

            words.innerHTML = text.split(/\s/).filter(function(n) { return n != ''; }).length;

その行を完全に理解していない場合は、splitとfilterのMDNページを確認してください。

わずか数ファイルで多くの便利なウェブアプリを構築できます。このシンプルなノートアプリを拡張して、さらに多くの機能を追加することもできます。たとえば、window.locationプロパティを使用して現在のURLを取得し、localStorage.setItemに渡す名前を変えることで、複数のノートをサポートできます。