JavaScriptシリーズVol.1【DOM操作とJSON】ゼロからJSを学ぶなら最新フレームワークより基礎を学ぶべき

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という設定が必要です。

そのサーバの違いを実体験して、エラーに戸惑わないようにします。

What You Will Learn!

• JavaScriptの構造：JavaScriptは、オブジェクト指向型の言語になります。 しかし、全てを学ぼうとすると、泥沼です(苦笑)。 そこで、最も使用頻度が高いwindow,document,eventを中心に学びます。
• オブジェクトのメソッド：オブジェクトには、メソッドがあります。メソッドは、ざっくり言えば関数です。 例えばログを排出する、html要素を取得する、そんなメソッドがあります。 上記システムを作るためのメソッドを学びます。
• JSONデータ：以前は、データを扱う形式としてXMLが主流でした。しかし、XMLは直感的に理解し難い問題もあり、 今は、JSONデータが主流になりつつあります。 このデータの読み込み、展開方法を学びます。
• JavaScriptの基本文法(繰り返し、条件分岐、配列)：他の言語と同様に、JavaScriptの基本文法は、 繰り返し処理,条件分岐処理,配列になります。 リストボックスの作成を始め、たっぷり使いますよ。
• 画面のイベント処理：画面に対して、何かアクションがあった場合、発生する処理です。 例えば、リストの値が変更する、ボタンがクリックされる等々です。 それらをイベントと呼び、その処理を学びます。
• JavaScriptの関数,無名関数,コールバック関数：他の言語同様、JavaScriptも関数が作れます。 ただ、JavaScriptでは、無名関数、コールバック関数と呼ばれる、 少々ややこしい(苦笑)関数も、頻繁に使います。 ここは初心者の躓きポイントです。ゆっくり学びましょう。

Who Should Attend!

• 特にバックエンドの技術者
• JavaScriptを疎かにしている方
• Webサイトを扱う方
• Webデザイナーと話をする方
• 趣味や副業で自分のWebサイトを持ちたい方
• DOM操作＋JSONを理解していないとフレームワークの仕組みがわからないと感じた方
• JavaScriptの基本文法を覚えたい方
• 画面のボタン操作のプログラムを書きたい方

TAKE THIS COURSE