この記事の内容について
フロントエンドの第一歩としてJavaScriptの基礎学習を始めました。アウトプットとして、JavaScriptのオブジェクトやDOM操作などをまとめていこうと思います！
私はまだエンジニア歴1年未満の初学者なので、間違い等があればご指摘いただけると幸いです。
JavaScript 基礎編
JavaScript 応用編
効率的なページ遷移
通常のWebサイト
- ブラウザからサーバーへURLをリクエストする
- サーバーは必要な情報をブラウザへ渡す
- ブラウザはファイルを受け取って画面にページを描写する
ページ自体が全く異なるものであれば問題ないが、大部分は同じで一部分だけが異なるページへ遷移する場合は、全てのファイルを読み込み直すのはとても非効率であり、異なる部分だけをサーバーから受け取れば効率的である。
その問題を解決するため、JavaScriptから必要なデータのみを取得し、ページを部分的に書き換える手法を Ajax(エイジャックス) と呼ぶ。
データ形式JSONについて
JSONは人間に読み書きがしやすいデータ形式で、JavaScriptの記法をベースにしているため親和性が高く、よく使用されている。
JSONの記法例
{
"name" : "tarou",
"languages" : ["JavaScript", "PHP", "Phython"]
}
全体を波括弧({})で囲み、その中にコロン (:) で区切られたキーと値の組み合わせを並べるのが基本的な型である。キーと値の組み合わせは、末尾のカンマ (,) で区切りがつけられている。キーと値に使える文字に制限はないため、日本語でも構わないが基本的には英字で統一した方がコードが書きやすい。
また、キー名はダブルクオーテーション (") で囲む必要がある点は注意だ。
非同期処理
同期と非同期
一般的にプログラムは書いたコードの順番通りに上から下に実行される。一番最初のコードが完了するのを待ってから、下の行に移動し次のコードを実行していく。これを同期処理と呼ぶ。それに対して、コードの完了を待たずに次のコードを実行することを非同期処理と呼ぶ。
同期処理を再現する
// アラートが表示され、OKを押して閉じると、コンソールに「ログを出力」が表示される。
function syncAlert() {
alert('アラートを表示');
console.log('ログを出力');
}
syncAlert();
非同期処理を再現する
// アラートが表示されたときに、コンソールに「ログを出力」と表示される。
function asyncAlert() {
setTimeout(function () {
alert('アラートを表示');
}, 0);
console.log('ログを出力');
}
asyncAlert();
非同期通信
fetch（)通信の書き方
fetch(通信したいURL).then(function(response) {
return response.json();
}).then(function (json) {
// 任意の処理
console.log(json);
})
JSONファイルから文字列を受け取るWebページ
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="result"></div>
<script>
fetch('http://127.0.0.1:5500/15/sample.json').then(function (result) {
return result.json();
}).then(function (json) {
const result = document.querySelector('.result');
result.textContent = json.text;
})
</script>
</body>
</html>
async(アシンク) / await(アウェイト)で非同期処理を簡単に書く
async / awaitで書き換える
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="result"></div>
<script>
// async / awaitを使わない書き方
fetch('http://127.0.0.1:5500/15/sample.json').then(function (result) {
return result.json();
}).then(function (json) {
const result = document.querySelector('.result');
result.textContent = json.text;
})
// async / awaitを使用した書き方
async function showJsonText() {
const response = await fetch('http://127.0.0.1:5500/15/sample.json');
const resultBox = document.querySelector('.result');
resultBox.textContent = json.text();
}
showJsonText();
</script>
</body>
</html>