さて、あなたはウェブ開発者になりたいのですね？

あなたは50時間のチュートリアルを見ることもでき、あるいは何かを構築することもできます。

A Tap Counter はフロントエンド開発者にとっての標準的な「最初のプロジェクト」です。変数、関数、イベントリスナー、DOM操作といった全てをカバーします。

このガイドでは、コピー＆ペーストコードをあなたに提供しません。代わりに、タップカウンターが内部でどのように機能するか、その 論理 を説明します。

The Logic flow

A counter app does three things:

1. 状態: これは数字を記憶します (例: `count = 0`) 1. イベント：ボタンをクリックするのを待っています。 1. 更新: クリックされたときに、`count = count + 1`を実行し、画面を更新します。

ステップ 1: HTML（骨格）

あなたに必要なのは、数字を表示する場所とクリックするためのボタンです。

```

0

それだけです。醜いですが、存在する。

ステップ2：JavaScript（The Brain）

これは魔法が起こる場所です。

私たちはコンピューターに次のように伝えている必要があります。「ねえ、そのボタンを見つけてください。誰かがクリックしたら、数字を取得し、1を足し、もう一度表示してください。」

コードロジックは以下のようになります：

``` let count = 0; // The State

function increase() { count++; // Add 1 document.getElementById("number").innerText = count; // Update Screen } ```

ステップ3：LocalStorage（記憶）

コードの上の問題は？ページをリフレッシュすると、カウントが0に戻る。

役に立つカウンター（例えば、タスビーや行カウンター）を作成するには、記憶する必要があります。

ブラウザは、`localStorage`という小さなデータベースを持っています。

• 保存: 毎回クリックするたびに、ブラウザに「'count' を永続的に保存する」と伝えています。
• 読み込み: ページが読み込まれるとき、次のように尋ねます。「保存された番号はありますか？」もしあれば、そこから始めます。

なぜこのプロジェクトが重要なのか

Building a tap counter teaches you the fundamental concept of State Management.

あなたがタスクリスト、ショッピングカート、またはFacebookを構築している場合でも、それはすべて高度なTap Counterの洗練されたバージョンに過ぎません。

• Facebook Like Button? That’s a tap counter.
• Twitter Retweetカウント？それはタップカウンターです。
• Amazon Cart Item count? That’s a tap counter.

結論

さあ、ツールをただ使うだけじゃなく、自分で作ってみましょう。テキストファイルを開き、その十行のコードを書き込み、あなただけのカスタムカウンターが動き出すのを見てください。それは、より大きな世界への第一歩です。