JavaScript

シンプルなWebアプリを作ってみる(with JavaScript)

はじめに

JavaScriptを利用してAPIから値を取得し、画面へ反映する方法を共有するため、シンプルなWEBアプリを作ってみる会を行うこととした。

サーバを作る(with Node.js + express)

nodeの準備

$ npm init

nodeライブラリのインストール

$ npm install express body-parser cors

サーバのコード(app.js)を実装

const express = require('express');
const cors = require('cors');
const app = express();
const PORT = 4000; // ポート番号を4000に

app.use(express.json());
app.use(cors());

let items = [];

// Create
app.post('/items', (req, res) => {
  const { name, price, description } = req.body;
  const newItem = {
    id: Date.now(),
    name,
    price,
    description,
  };
  items.push(newItem);
  res.status(201).json(newItem);
});

// Read
app.get('/items', (req, res) => {
  res.json(items);
});

// Launch server
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

サーバの起動

$ node app.js

起動した結果、いかが表示されたので、期待通り実装できたことが確認できた

$ node app.js 
Server is running on port 4000

データを入れてみる

curl -X POST -H "Content-Type: application/json" -d '{"name": "Apple", "price": 100, "description": "apple"}' http://localhost:4000/items
curl -X POST -H "Content-Type: application/json" -d '{"name": "Banana", "price": 150, "description": "banana"}' http://localhost:4000/items
curl -X POST -H "Content-Type: application/json" -d '{"name": "Cherry", "price": 200, "description": "cherry"}' http://localhost:4000/items

データを見てみる

ブラウザでhttp://localhost:4000/itemsにアクセスしてみると、上記で登録した内容が表示される

WEBサイトを作る

下準備（nodeとwebサーバ起動用のモジュールをインストール）

$ cd front
$ npm init
$ npm install http-server

フロントエンドのコード(index.html)作成

「商品」と「個数」を入力したら、合計金額を表示する

商品の金額などの情報は、サーバから取得する

入力系
- プルダウン
  - 商品選択用
  - 個数選択用
- 実行ボタン
出力系
- div(結果入力用)
処理
- 初期化（前準備）
  - Itemクラスの作成
  - Items変数の作成
- fetchを使ってサーバから値を取得する★
  - fetchによるAPI呼び出し
- 商品選択用プルダウンの中身を作る
- 個数選択用プルダウンの中身を作る
- 実行ボタンの動作を作る
  - 「商品選択用」と「個数選択用」プルダウンから入力値を取得
  - 取得内容から商品の価格 x 個数を計算
  - 計算結果を画面へ表示

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- 商品選択用プルダウン -->
  <select id="name"></select>

  <!-- 個数選択用プルダウン -->
  <select id="count"></select>

  <!-- 実行ボタン -->
  <input id="calculate" type="button" value="実行">

  <!-- 結果入れ -->
  <div id="result">(ここに結果が入ります)</div>

<script>
  // 初期化（前準備）
  class Item {
    constructor(name,price,description){
      this.name = name;
      this.price = price;
      this.description = description;
    }
  }
  let Items = [];

  // fetchを使ってサーバから値を取得する★
  fetch('http://localhost:4000/items')
    .then(response => response.json())
    .then(data => {
      // サーバから取得した値をItemsに入れる

      data.forEach(item => {
        Items.push(new Item(item.name, item.price, item.description));

        // 商品選択用プルダウンの中身を作る
        const option = document.createElement('option');
        option.textContent = item.name;
        option.value = item.name;
        document.getElementById('name').appendChild(option);
      })
    })


  // 個数選択用プルダウンの中身を作る
  for (let i = 1; i <= 100; i += 10) {
      const option = document.createElement('option');
      option.textContent = i;
      option.value = i;
      document.getElementById('count').appendChild(option);
  }

  // 実行ボタンの動作を作る
  document.getElementById('calculate').addEventListener('click', () => {
      const selectedItemName = document.getElementById('name').value;
      const selectedItem = Items.find(item => item.name === selectedItemName);
      const count = parseInt(document.getElementById('count').value, 10);
      const result = selectedItem.price * count;
      document.getElementById('result').textContent = `Total price: ${result}`;
  });

</script>

</body>
</html>

hirobel

4月 25, 2023

JavaScript, 勉強会

WordPressの勉強1/3
ゴール設定
- ゴール設定
  1. スタティック（静的）なWebサイトを構築できる
    HTMLの基本
    ページ遷移方法
    ホスティング方法
    CSS
    JavaScript
  2. スタティックなサイトをWordPress化できる
    環境作成
    wp-env
    テーマ作成
    最小限のテーマ
    index.php
    style.css
    テンプレート
    固定ページテンプレート
    投稿ページテンプレート
    ：
  3. ブロックエディタを利用して簡単にユーザが投稿を編集できるようにする
    ユーザ向け
    ダッシュボードからどうブロックエディタで編集するか
    開発者向け
    ブロックエディタのテンプレート構築方法
スタティック（静的）なWebサイトを構築する方法

HTMLの作成

最もミニマムなHTMLのコードは次の通り
```
<!DOCTYPE html>
<html lang="ja">
<head>
  <title>Document</title>
</head>
<body>
  Test.  
</body>
</html>
```
↑のコードを動かすと次の通り

タグと要素
- <body>タグ内に書いたものが画面に表示される
- <div>は開始タグである
- </div>を終了タグである
- <div>Text</div>テキストを開始タグと終了タグで囲んだものをHTML要素という
ブロック要素とインライン要素
- HTML要素にはブロック要素とインライン要素がある
- <div><p><h1>はブロック要素である
- <span><a>はインライン要素である
- ブロック要素とインライン要素を並べて書くとレイアウトに次のような差が生じる
ページ遷移

このような2つのページがあるとする

index.html, index2.htmlにaタグを次のように用意すると、ページ遷移できる
<!DOCTYPE html> <html lang="ja"> <head> <title>Document</title> </head> <body> <h1>Page1</h1> <div>block</div> <div>block3</div> <div>block4</div> <span>block5</span> <a href="index2.html">go to index2.html</a> </body> </html>
<!DOCTYPE html> <html lang="ja"> <head> <title>Document</title> </head> <body> <h1>Page2</h1> <div>block</div> <div>block3</div> <div>block4</div> <span>block5</span> <a href="index.html">go to index.html</a> </body> </html>
動作イメージは次の通り

ホスティング
- <div><span><a>があれば、とりあえずサイト作れる
- 作ったサイトをインターネット上へ配置などしないと、アクセスできない
- 配置するには、サーバを借りるか、自分のマシンをインターネットに公開する必要になる
- 自分のマシンをインターネットに公開するのは危険なので、サーバを借りるのがよい
- 最も安価にサーバを借りるのであれば、レンタルサーバがオススメ
  - 従量課金制と月額課金制のサービスがある
- 例：さくらのレンタルサーバ | 高速・安定WordPressなら！無料2週間お試し https://rs.sakura.ad.jp/
CSS
- <style>タグを利用して表示スタイルを変更できる
- スタイル変更のためには、何を、どうするという2つを指定する必要がある。
- 何を→セレクタ
- どうする→プロパティ
```
<style>
  h1 {
    color: red;
  }
</style>
```
セレクタ
- 要素の指定方法
- 要素名で指定する場合：h1{}, div {}, span {}
- 要素のidで指定する場合：#title, #section1, #text1
- 要素のclassで指定する場合：.title, .section, .text
- その他：div > div > .text
失敗例

styleを当てたいところ以外にも当たってしまう

成功例

div > div > .textにすることで当てたい部分だけstyleを当てる

プロパティ
- いろいろある
- MDNをみるといい
- CSS リファレンス – CSS: カスケーディングスタイルシート | MDN https://developer.mozilla.org/ja/docs/Web/CSS/Reference
JavaScript
- JavaScriptはブラウザ上で動作できるプログラミング言語
- DOM操作によってWEBサイトの内容を動的に変更したり、クリックなどのイベントを発生させるのに使うことができる
- <script>タグを利用してJavaScriptのコードを実行できる
例えばこんな感じ

実行すると、「div > div > .text’」のセレクタに対応する要素が’hoge’になる

サンプルコードは以下（動作は全部同じ）
<script> let val = 'hoge'; alert(val); let elm = document.querySelector('div > div > .text'); elm.innerHTML = val; </script>
<script> function main() { let val = 'hoge'; alert(val); let elm = document.querySelector('div > div > .text'); elm.innerHTML = val; } main(); </script>
<script> const main = () => { let val = 'hoge'; alert(val); let elm = document.querySelector('div > div > .text'); elm.innerHTML = val; } main(); </script>
動作イメージは次の通り
hirobel

11月 1, 2022

JavaScript
[WIP]JavaScriptで操作を自動化する
はじめに

JavaScriptについて、初心者の方向けに基本的な機能の実装方法を試してみたのでご紹介します。

要素
- 変数
- DOMオブジェクト
- 配列
- 繰り返し
- 条件分岐
やってみたこと

普段繰り返し行っているブラウザの操作を自動化
hirobel

6月 15, 2021

JavaScript, Programming