プログラミングを始めるのは、言語やフレームワークの選択肢が多すぎて大変そうに思えるかもしれません。AI にすべてを任せようと考えるかもしれません。しかし、Web プログラミングは楽しく、アクセスしやすく、完全に無料です。
何を構築するか
このチュートリアルでは、テキストメモを保存しながら、そのメモ内の文字と単語をカウントするように設計されたシンプルな Web アプリケーションを作成します。
このアプリケーションはデータを永続的に保存し、ページを更新したり再度開いたりした後でもテキストを取得できるようにします。アドレス、URL、その他の重要なテキストにすばやくアクセスするための実用的なソリューションです。
さらに、このアプリは文字数と単語数を追跡し、文字列操作の優れた入門を提供します。このアプリケーションは基本的な設計ですが、このチュートリアルでは、基本的な Web アプリ開発スキルを習得し、コーディングの幅広い可能性を解き放ちます。
どのように構築するか
Web アプリケーションは多種多様ですが、通常は HTML、CSS、JavaScript という 3 つの重要なテクノロジが統合されています。これらの各コンポーネントは、Web 開発において重要な役割を果たします。
- HTML:これは Web アプリケーションの構造であり、コンテンツの構成方法を決定します。HTML は、テキストが段落、見出し、またはリスト項目のいずれであるかを定義します。
- CSS:カスケード スタイル シートはコンテンツにスタイルを追加し、色、フォント、レイアウトを変更できるようにします。CSS を使用して、要素を太字にしたり、境界線を調整したり、画面上で要素を配置したりできます。
- JavaScript:このプログラミング言語は、Web アプリケーションに機能を組み込むために不可欠です。JavaScript を使用すると、要素の表示/非表示やゲームなどの複雑なアプリケーションの構築など、インタラクティブなエクスペリエンスを作成できます。
アプリの構造
これから構築するアプリケーションはindex.html、、、styles.cssおよび という3 つの単純なファイルで構成されますscript.js。
このアプリを実行するのに高度な要件はなく、Web ブラウザだけで十分です。これはフロントエンド アプリなので、PHP などのバックエンド スクリプト言語やローカル サーバーは必要ありません。完了したら、index.htmlブラウザで開くだけでアプリの動作を確認できます。
このアプリは、Web Storage API を利用してテキストを保存し、JavaScript にはファイル システム アクセスがないため、ディスク ファイルに書き込むことなく情報を保持できるようにします。
ノートテイカーの構築方法
まず、同じディレクトリに必要な 3 つのファイルを作成します。または、この GitHub リポジトリからファイルをダウンロードすることもできます。
HTML で構造を構築する
このindex.htmlファイルはアプリのコンテンツ構造をレイアウトします。CSS ファイルと JavaScript ファイルへの参照が含まれており、ブラウザがそれらを統合してシームレスなエクスペリエンスを実現できます。
他の 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には、単語数と文字数が格納されます。この要素は上部に表示され、テキストが変更されると動的に更新されます。
属性の使用に注意することは重要ですid。属性の固有の値は、これらの要素のスタイル設定と機能のターゲット設定に役立ちます。
は、属性textareaを使用してユーザーがテキストを入力する領域を提供し、autofocusページの読み込み時に入力できる状態になっていることを確認します。最後に、HTML はファイルを参照しますscript.js。
この時点で、index.htmlブラウザで開きます。まだ機能せず、見た目も正しくないかもしれませんが、各段階で進捗状況を確認することは役に立ちます。
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 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 による機能の追加
基礎が整いましたので、アプリケーションに機能、つまりアプリケーションを動かすコードを組み込みます。
コーディングに取り掛かる前に、意図する機能の概要を説明することが重要です。このアプリケーションでは、次の 2 つの主な目的に焦点を当てます。
- 入力したテキストを保持して再読み込みします。
- 文字数と単語数を動的に更新します。
これらの関数は、特定のドキュメント要素の更新を必要とします。したがって、まず、次のメソッドを使用してこれらのノードへの参照を取得しますgetElementById。
const words = document.getElementById("words");
const chars = document.getElementById("chars");
const textarea = document.getElementById("text");
ここでwords、、、charsはtextareaドキュメント内のそれぞれのセクションに対応し、ID 属性によって識別されます。
次に、テキストが変更されたときにアプリが応答するように設定して、インタラクティブ性を導入します。
textarea.addEventListener("input", function(ev) {
localStorage.setItem("text", ev.target.value);
update_counts(ev.target.value);
});
このaddEventListenerメソッドは、指定されたイベントが発生したときにトリガーする関数をバインドします。この場合、ユーザーがテキストエリアを操作すると、「入力」イベントによって関数がトリガーされます。
次に、Web Storage API を使用して、 経由でアクセスされるテキストエリアの現在のコンテンツを保存しますev.target.value。setItemメソッドは、保存するデータにキーを関連付けます。
アプリの初期化または更新時にテキストが確実に読み込まれるようにするには、別のリスナーを追加します。
window.addEventListener("load", function(ev) {
var text = localStorage.getItem("text");
textarea.value = text;
update_counts(text);
});
このリスナーは、ウィンドウのロード イベントに応答します。ウィンドウがロードされると、保存されたテキストが取得され、それに応じてテキスト エリアの値が設定され、update_counts()単語数と文字数の更新が呼び出されます。
残りの機能はupdate_counts()関数内にあり、次のようになります。
function update_counts(text) {
chars.innerHTML = text.length;
words.innerHTML = text.split(' ').length;
}
テキストエリアとは異なり、プレーンテキストには値属性がないため、innerHTML代わりに プロパティが使用されます。length文字列の プロパティは、合計文字数を取得します。
テキストを単語に分割するには、 を使用しますtext.split(' ')。これにより、文字列が各スペース文字で分割され、単語の配列が生成されます。結果の配列の長さプロパティは、単語数を提供します。
ただし、このコードではいくつかの課題に遭遇する可能性があります。
- 行の前後にスペース文字がないと、行内の単語は正しくカウントされません。
- テキストが存在しない場合は、動作方法により単語が 1 つだけ不正確に報告されます
split。
最初の問題を解決するには、空白文字を考慮して正規表現で分割することを検討してください。2\s番目の問題を解決するには、空の文字列を除外します。
words.innerHTML = text.split(/\s/).filter(function(n) { return n! = ''; }).length;
便利な Web アプリケーションは、いくつかの基本ファイルだけで作成できます。window.locationプロパティを使用してURL にアクセスしたり、 に渡される名前を変更して複数のメモを保存できるようにするなど、追加機能を統合することで、このシンプルなメモ作成アプリを拡張できますlocalStorage.setItem。
追加の洞察
1. この Web アプリ チュートリアルの前提条件は何ですか?
必要なのは、HTML、CSS、JavaScript の基本的な知識だけです。テキスト エディター (VSCode など) や Web ブラウザーなどのツールも役立ちます。
2. この Web アプリを変更して機能を追加することはできますか?
もちろんです! このチュートリアルでは基礎を説明します。複数のメモを保存したり、メモを分類したり、検索機能を実装したりするなどの機能を追加できます。
3. Web Storage API はどのように機能しますか?
Web Storage API を使用すると、Web アプリケーションはブラウザにデータを保存できます。データはキーと値のペアで保存され、ブラウザを閉じた後も保持されるため、後で簡単に取得できます。
コメントを残す