JavaScriptシリーズVol.1【DOM操作とJSON】ゼロからJSを学ぶなら最新フレームワークより基礎を学ぶべき
バックエンド技術者に多いですが、 ついついJavaScript(JS)を疎かにしていた。しかし、近年のJSは凄い。そう。ここらで本格的にJSを学ぶべき。ただし、ゼロからなら、最新のフレームワークよりDOM操作＋JSON。裏の仕組みがわかる。
Ratings 4.31 / 5.00
What You Will Learn!
- JavaScriptの構造：JavaScriptは、オブジェクト指向型の言語になります。 しかし、全てを学ぼうとすると、泥沼です(苦笑)。 そこで、最も使用頻度が高いwindow,document,eventを中心に学びます。
- オブジェクトのメソッド：オブジェクトには、メソッドがあります。メソッドは、ざっくり言えば関数です。 例えばログを排出する、html要素を取得する、そんなメソッドがあります。 上記システムを作るためのメソッドを学びます。
- JSONデータ：以前は、データを扱う形式としてXMLが主流でした。しかし、XMLは直感的に理解し難い問題もあり、 今は、JSONデータが主流になりつつあります。 このデータの読み込み、展開方法を学びます。
- JavaScriptの基本文法(繰り返し、条件分岐、配列)：他の言語と同様に、JavaScriptの基本文法は、 繰り返し処理,条件分岐処理,配列になります。 リストボックスの作成を始め、たっぷり使いますよ。
- 画面のイベント処理：画面に対して、何かアクションがあった場合、発生する処理です。 例えば、リストの値が変更する、ボタンがクリックされる等々です。 それらをイベントと呼び、その処理を学びます。
- JavaScriptの関数,無名関数,コールバック関数：他の言語同様、JavaScriptも関数が作れます。 ただ、JavaScriptでは、無名関数、コールバック関数と呼ばれる、 少々ややこしい(苦笑)関数も、頻繁に使います。 ここは初心者の躓きポイントです。ゆっくり学びましょう。
Description
開発環境の準備
Visual Studio Codeというエディタソフトを使って開発を行います。
ソフトインストール、ライブサーバーの設定、ファイルの準備を行います。
JavaScriptの基本文法
JavaScriptも他の言語と同様に、その基本文法は以下です。
・繰り返し処理
・条件分岐処理
・配列
他の言語経験者は、さらっといけると思いますが、
初心者の方は、気合い入れていきましょう。
html中の値を取得する
Web画面には、頻繁に表が出てきますね。
その表中の値をどうやって取得するのか？
JavaScriptには、簡単に取得するプロパティがあります。
使用頻度も高いので、学習していきましょう。
htmlへの操作
htmlに対して、(JavaScriptで)何か操作する場合がありますね。
今回の例で言えば、セレクトボックスの値を変更したら、
その値とhtml上の金額から合計金額を計算する。
この基礎知識を身につけると、画面操作ができます。
JSONデータからWeb画面に一覧表を作る
支店名の中に、商品ID,商品名,価格のJSONデータがあります。
Web画面から、支店を選ぶとその支店に含まれるデータを読み込み、一覧表に作ります。
{
"日本橋本店": [
{ "id": "001", "name": "りんご", "price": "300" },
{ "id": "002", "name": "みかん", "price": "400" },
{ "id": "004", "name": "梨", "price": "250" },
{ "id": "005", "name": "洋梨", "price": "230" }
],
"新宿店": [
{ "id": "002", "name": "みかん", "price": "400" },
{ "id": "003", "name": "ぶどう", "price": "300" },
{ "id": "006", "name": "柿", "price": "200" }
],
"長野店": [
{ "id": "001", "name": "りんご", "price": "200" },
{ "id": "007", "name": "甘栗", "price": "300" }
]
}
fetch関数
上記のようなJSONデータを読み込むJavaScriptは、
fetch関数を使えば簡単です。
今回は、その基本的な使い方を覚えましょう。
fetch関数の同期と非同期
fetch関数と同期と非同期の問題が起きます。
同期と非同期とは、そもそも一体何なのか？
まずは、それを実体験して、その後にソースコードを作ります。
外部サーバからJSONデータを取得
外部サーバからJSONデータを取得して、JavaScriptを使って商品一覧表を作ります。
ただし、JSONデータを取得できるサーバはCORSという設定が必要です。
そのサーバの違いを実体験して、エラーに戸惑わないようにします。
Who Should Attend!
- 特にバックエンドの技術者
- JavaScriptを疎かにしている方
- Webサイトを扱う方
- Webデザイナーと話をする方
- 趣味や副業で自分のWebサイトを持ちたい方
- DOM操作＋JSONを理解していないとフレームワークの仕組みがわからないと感じた方
- JavaScriptの基本文法を覚えたい方
- 画面のボタン操作のプログラムを書きたい方