JavaScriptを使用して簡単な辞書アプリケーションを構築する方法を学ぶ

JavaScriptは、Web開発者の間で最も人気のあるプログラミング言語の1つです。JavaScriptを学びながら、誰もがDOM操作を使用して基本と簡単なアプリケーションを構築することから始めます。

この記事では、JavaScriptとDOM操作を使用して辞書を作成する方法を学習します。この記事は、読む前にJavaScriptの基本を知っていることを前提としています。

APIを見てください

APIはApplicationProgrammingInterfaceの略です。APIは、アプリケーションがデータと機能を簡単かつ安全に交換できるようにすることで、ソフトウェア開発とイノベーションを簡素化します。

このプロジェクトはdictionaryapi.devAPIを使用します。これは、検索する単語に関連する複数の定義、音声学、およびその他の文法用語を提供する無料のAPIです。

APIへのリンクは次のとおりです。

https://api.dictionaryapi.dev/api/v2/entries/en/word

プロジェクトのフロントエンドレイアウト

このプロジェクトのフロントエンドレイアウトは、HTMLとTailwindCSSを使用して構築されています。以下に示すCDNを使用して、HTMLファイルにTailwindCSSをインポートできます。

HTMLページには、ユーザーが検索する単語を入力できる入力とボタンがあります。品詞、複数の定義、および単語を正しく発音するのに役立つ音声を表示するdivがさらに3つあります。デフォルトでは、これらの3つのdivの表示プロパティはnoneです。APIからデータがフェッチされると、これらのdivの表示プロパティはブロックに設定されます。

Dictionary

<>
type="text"
placeholder="Enter the word"
id="word"
class="
py-2
w-1/4
focus:outline-none
border-2 border-green-600
rounded
px-3
"
/>
<>
id="search"
class="bg-green-600 text-white text-xl px-4 py-2 rounded">
Search
 

このフロントエンドは次のようになります

JavaScriptを使用した機能の追加

APIを介してデータをフェッチして表示する前に、IDを使用してHTML要素にアクセスする必要があります。JavaScriptメソッドgetElementById（）を使用してIDにアクセスできます。

const word = document.getElementById("word"); const search = document.getElementById("search"); const display = document.getElementById("display"); const partOfSpeechDiv = document.getElementById("partOfSpeechDiv"); const partOfSpeechHeader = document.getElementById("partOfSpeechHeader"); const partOfSpeechPara = document.getElementById("partOfSpeechPara"); const meaningDiv = document.getElementById("meaningDiv"); const audioDiv = document.getElementById("audio"); const meaningHeader = document.getElementById("meaningHeader");

イベントリスナーの追加

HTMLページのinput要素には、wordという名前のIDがあります。input要素にアクセスした後、.value属性を使用してinput要素のテキストの値を取得できます。

検索ボタンのIDはsearchという名前です。クリックイベントリスナーを追加してイベントをトリガーし、関数呼び出しを行ってAPIを介してデータをフェッチする必要があります。

Async and Await

2017年以降、JavaScriptは非同期の概念を導入し、非同期リクエストの実行を待機しています。.thenと.catchの代わりにasync-awaitを使用して、promiseを解決および拒否します。

関連：同期プログラミングと非同期プログラミング：それらはどのように異なりますか？

search.addEventListener("click", async () => { try { let url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word.value.toLowerCase()}`; const res = await fetch(url); const data = await res.json(); displayData(data); } catch (error) { console.log(error); } });

async-awaitを使用してpromiseを操作するには、関数定義の前にasyncキーワードを追加する必要があります。また、リクエストを行ったり関数を呼び出したりするときは常に、その前にawaitキーワードを追加する必要があります。

await前の要求が完了しませんまで、キーワードは、機能のさらなる実行を一時停止します。

try-catchブロックでasync-awaitpromiseアクション全体を実行する必要があります。promiseがデータをフェッチできない場合は、catchブロックにエラーが表示されます。単語をAPIに渡す前に、正確な結果を得るために小文字にする必要があります。.lowercase（）文字列メソッドを使用して単語を変換できます。

fetchメソッドは、APIからデータを取得する必要があります。fetchメソッドがデータを取得している間、関数がその瞬間に一時停止するように、awaitキーワードを追加する必要があります。

データを取得した後、応答で.json（）メソッドを使用してJSON形式に変換する必要があります。

Webページにデータを表示する

データを取得してJSON形式に変換した後、Webページに表示する必要があります。displayData（）メソッドを呼び出して、それにデータを渡す必要があります。

API応答の構造は次のとおりです。

APIは、応答内の単語の品詞、複数の定義、および音声学を返します。

次を使用して、指定された単語のすべての定義を取得できます。

const meanings = data[0].meanings[0].definitions;

変数の意味は、指定された単語のすべての定義を含む配列です。

与えられた単語の品詞を取得するには：

const partOfSpeech = data[0].meanings[0].partOfSpeech;

.innerHTML属性を使用して、単語の品詞を追加できます。HTMLコードでは、品詞divにはデフォルトでdisplay noneのプロパティがありましたが、JavaScriptコードでは、データをフェッチした後、displayプロパティをblockに設定する必要があります。

定義の表示

meanListという名前の変数を作成する必要があります。この変数にすべての定義を追加した後、Webページに表示するために.innerHTML属性を割り当てる必要があります。

関連：HTML Essentialsチートシート：タグ、属性など

意味配列をループし、単一の定義とそれが存在するインデックスを追跡します。HTMLのparagraph要素内のmeaningList変数に単一の定義とインデックスを追加します。

ループから抜けたら、meaningDivの.innerHTML属性に渡す必要があります。

Webページにオーディオ要素を表示する

APIが受信する応答には、ユーザーが単語の発音を理解するのに役立つ音声学が含まれています。このサウンドをWebページに追加するには、オーディオ要素を作成し、その要素のsrc属性に音声を渡す必要があります。最後に、.innerHTML属性を使用してaudioDivにaudio要素を配置する必要があります。

const displayData = (data) => { console.log(data); const partOfSpeech = data[0].meanings[0].partOfSpeech; const meanings = data[0].meanings[0].definitions; partOfSpeechDiv.className = "bg-gray-100 px-2 py-3 flex flex-col w-1/4 justify-center items-center border-2 border-green-500 rounded block"; partOfSpeechHeader.innerHTML = "Part of Speech"; partOfSpeechPara.innerHTML = partOfSpeech; let meaningList = ``; meanings.forEach((meaning, ind) => { meaningList += `

${ind + 1}) ${
meaning.definition
}

`;
}）;
meanDiv.className =
"text-center w-1 / 4 bg-gray-100 my-6 border-2 border-green-500 rounded block";
meanHeader.innerText = "意味";
meanDiv.innerHTML = meanList;
aud = `

`;
audioDiv.className = "ブロック";
audioDiv.innerHTML = aud;
};

リストに別のプロジェクトを追加する

JavaScriptを使用して辞書アプリを作成する方法を学習したので、次は自分でいくつかのエキサイティングなプロジェクトを作成します。プロジェクトを構築すると、基本がブラッシュアップされるだけでなく、履歴書にプロジェクトが追加されます。

JavaScriptとDOM操作の概念に関するより多くの練習をお探しですか？スキルを強化するために構築できる別のプロジェクトがあります。