初めてのウェブアプリを作成: 素早く簡単なメモ + カウンター 📝⚡

最初のウェブアプリを作成: メモ + カウンターを簡単かつ迅速に 📝⚡

プログラミングを始めるには、考慮すべき言語、フレームワーク、方法論が非常に多く、大変に思えるかもしれません。すべてを AI に委任する方が簡単だと思われる場合もあります。心配しないで！ Web プログラミングはシンプルで楽しい上に、何より完全に無料です。 🌐✨

何を構築するのか

このチュートリアルに従うことで、テキストメモを保存し、文字数と単語数をカウントするシンプルな Web アプリケーションを作成できます。

アプリはデータを保持するため、ページを再読み込みしたり再度開いたりしてもテキストが記憶されます。つまり、アドレスや URL など、後で参照したいテキストを簡単に保存できるようになります。📄🔗

カレンダーエントリや URL リストなどのメモを表示するシンプルなテキストベースの Web アプリケーションの例。

また、文字数や単語数もカウントするので、文字列 (テキスト) 処理の入門として最適です。もちろん、アプリは非常にシンプルです。それが目的です。しかし、このチュートリアルでは、Web アプリケーション開発の基礎を学習し、世界があなたの思い通りに変わります。 🦪💻

どうやって構築するつもりですか?

Web アプリケーションは非常に多様ですが、通常は HTML、CSS、JavaScript という 3 つの主要なテクノロジが使用されます。始める前に、それぞれの役割を理解しておくことが重要です。 📚

HTML: ハイパーテキストマークアップ言語を使用すると、コンテンツの構造を定義できます。これを使用すると、テキストをその意味に応じてマークし、たとえば段落、見出し、リスト内の項目であるかどうかを示すことができます。
CSS: カスケードスタイルシートを使用すると、コンテンツのスタイルを設定できます。この言語を使用すると、段落を緑色にしたり、すべてのリンクを太字にしたり、メイン記事の横にサイドバーを配置したりできます。 🎨
JavaScript: このプログラミング言語を使用すると、Web サイトに機能を追加できます。ボタンをクリックするとドキュメントの一部が表示されたり非表示になったりするように設定したり、本格的なワードプロセッサやビデオゲームを実装したりできます。 🎮

彼ウェブサイト開発（Chromeチームのメンバーによって書かれました）そして MDN、Mozilla 開発者ネットワークは、基本的な Web テクノロジーに関する優れた情報源です。

HTML、CSS、JavaScript の学習リソースを備えた web.dev サイトのホームページ。

アプリの構造

構築するアプリは、index.html、styles.css、script.js という 3 つのシンプルなファイルで構成されます。 🗂️

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

JavaScript はファイルシステムにアクセスできないため、このアプリはテキストをディスク上の特定のファイルに書き込まずに保存することに注意することが重要です。クッキーの強力な代替手段である Web ストレージ API を使用します。 🍪💾

ノートテイカーの構築方法

同じディレクトリに次の 3 つのファイルを作成し、Web ブラウザーで index.html を開きます。または、以下のサイトからファイルをダウンロードすることもできます。このGitHubリポジトリ。 📥

HTMLで構造を構築する

index.html ファイルは、アプリのコンテンツの構造を HTML で定義します。ブラウザが最終製品でそれらを結合できるように、他の 2 つのファイルへの参照を含めます。

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

html>
<html>
<頭>
    ...
頭>

<体>
…
体>
html>

ヘッダー内のメタデータは非常に簡潔で、ページタイトル (ブラウザーのタイトルバーに表示されます) と、styles.css ファイルへの参照のみが含まれています。

    <タイトル>文章タイトル>
    <リンク 相対=「スタイルシート」 href=「スタイル.css」 />

体はより複雑ですが、重要な部分はわずかです。

    <分割 id="カウンタ">
        言葉： <スパン id=「言葉」>0スパン>
        / 文字数: <スパン id=「文字」>0スパン>
    分割>

<テキストエリア id="文章" オートフォーカス=「1」>テキストエリア>

<スクリプトソース=「script.js」>スクリプト>

div 要素には、アプリの単語数と文字数が含まれます。これは Web アプリの上部に配置され、テキストが変更されるたびに更新されます。

操作に不可欠な id 属性に注意してください。 ID の値は、アプリが特定のアイテムを識別するために使用できるように、一意である必要があります。これを行うと、これらの要素のスタイルを設定したり、機能を追加するときにターゲットを設定したりするのに役立ちます。

テキストエリアは、ブラウザに簡単なテキストを入力できる組み込みフォーム要素です。 autofocus 属性を使用すると、ページが読み込まれるとすぐに書き込みを開始できます。最後に、ページは JavaScript ファイル script.js を参照します。

この時点で、ブラウザで index.html ファイルを開くことができます。現時点では何も機能せず、見た目も良くありませんが、各段階でアプリをテストして、基本部分が期待どおりに動作することを確認することは役に立ちます。

デフォルトのブラウザスタイルを使用したメモ作成 Web アプリのビュー。すべてが左上隅にグループ化されて表示されます。

CSSで見た目を良くする

CSS を使用すると、Web ページの一部をターゲットにして、font-size や background-color などのプロパティの値を指定することにより、その部分のスタイルを設定できます。このサンプルアプリはインターフェースが非常に基本的なため、非常に洗練されたデザインは必要ありません。しかし、ちょっとしたスタイルで、その角の粗さを滑らかにすることができます。 🎨✨

まず、ボディのスタイルを設定して全体的なデザインを定義します。

体 {
    マージン: 0;
    パディング: 0;
    画面: グリッド;
    最小高さ: 100vh;
    グリッドテンプレート行: 最小コンテンツ 1fr;
}

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

カウンター行には、主に背景を通じて、テキストの残りの部分と区別するための基本的なスタイルがあります。

#カウンター {
    フォントファミリー: サンセリフ;
    背景色: #f7f7f7;
    テキスト配置: 中心;
    幅: 100%;
    パディング: 0.5em 0;
}

最後に、テキストエリアは、十分な余裕を持って読みやすいテキストが表示されるようにスタイル設定されます。カウントとテキストを分ける線は、実際にはこのテキスト領域の上部の境界線です。

テキストエリア {
    幅: 100%;
    身長: 100%;
    フォントサイズ: 16pt;
    パディング: 1で;
    ボックスサイズ: 境界ボックス;
    概要: 0;
    国境: なし;
    ボーダートップ: 1ピクセル 固体 #999;
}

カスタムスタイルのメモ作成アプリでは、上部に集計バーが表示され、その下にフルサイズのテキスト領域が表示されます。

JavaScriptで機能を追加する

構造とスタイルが決まったら、機能、つまりこのシンプルなアプリに実際に何かを実行させるコードを追加する準備が整います。 🛠️

最も単純なコードを書き始める前に、そのコードで何を実行したいのかを理解しておくことをお勧めします。この場合、一般的な要件はいくつかあります。

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

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

定数 単語 = 書類.getElementById()「言葉」);
定数 文字数 = 書類.getElementById()「文字」);
定数 テキストエリア = 書類.getElementById()"文章");

単語、文字、テキストは、ドキュメント内のそれぞれの要素の ID であり、HTML ファイルで id 属性を使用して割り当てられていることに注意してください。

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

テキストエリア.addEventListener()"入力", 関数(ev) { ローカルストレージ.setItem("文章"、ev.target.value); update_counts(ev.target.value); });

イベントリスナーは、特定のイベントが発生したときに JavaScript が自動的に実行する関数です。この場合、textarea ノードにリスナーをアタッチします。このリスナーは、「input」イベントが発生したときに実行されます。つまり、誰かがテキストエリアを操作したときです。

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

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

次に、同じテキストを渡して update_counts() を呼び出します。その機能については後ほど説明します。

テキストを保存したので、アプリを開いたり再読み込みしたりするときに、テキストを再度読み込む必要があります。別のリスナーを使用することでこれを処理できます。

ウィンドウ.addEventListener()"負荷", 関数(ev) {
    var テキスト = localStorage.getItem("文章"）;テキストエリア.値 = テキスト; update_counts(テキスト); });

このリスナーは、ブラウザウィンドウの最上位表現である window オブジェクトで発生する load イベントを処理します。ウィンドウが読み込まれると、getItem() を呼び出すと、ローカルストレージから保存されたテキスト値が返されます。このコードは、テキストエリアの値を読み込んだテキストに設定し、上記のリスナーと同様に、このテキストで update_counts() を呼び出します。

残りの作業は update_counts() 関数で実行されます。これは次のようになります。

関数 更新カウント(文章) { chars.innerHTML = text.length; words.innerHTML = text.split(' '）。長さ; }

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

text.split(' ') は文字列をスペース文字で分割し、結果を文字列の配列として返します。文字列と同様に、配列には配列内の要素の数を示す length プロパティがあります。

ただし、このコードをテストすると、いくつかのエラーに気付く場合があります。

単語の周囲にスペース文字がないため、行内の単語自体は正しくカウントされません。
テキストがまったくない場合は、分割の仕組みにより 1 つの単語が報告されます。

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

    words.innerHTML = text.split(/\s/）。フィルター（関数(n) { 戻る n != ''; }）。長さ;

この行を完全に理解できない場合は、MDNのページを参照してください。スプリットそしてフィルター.

わずか数個のファイルで、多くの便利な Web アプリケーションを構築できます。このシンプルなメモアプリを拡張して、さらに機能を追加することもできます。例えば、 window.location プロパティ現在の URL を取得し、localStorage.setItem に渡す名前を変更することで複数のメモをサポートします。 🗒️🌍