JavaScriptからPHPへのAPIリクエスト: POSTメソッドの実践ガイド

# JavaScriptからPHPへのAPIリクエスト: POSTメソッドの実践ガイド

## 1. XMLHttpRequestを使った方法

### JS側のコード

“`javascript
// XMLHttpRequestオブジェクトを作成
var xhr = new XMLHttpRequest();

// POSTメソッドとAPIのエンドポイントを指定してリクエストを初期化
xhr.open(‘POST’, ‘https://your-server-endpoint.com/api’, true);

// リクエストヘッダーを設定
xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);

// リクエストの状態が変わったときのイベントハンドラを設定
xhr.onreadystatechange = function() {
// リクエストが完了し、レスポンスが成功だった場合
if (xhr.readyState == 4 && xhr.status ==

DOMの仕組みと構造を知る

## なぜ知る必要があるか？
JavaScriptを使ってWebページに動きを付けるには、DOMの操作が必要。でもその前に、DOMの仕組みと構造を知らないと、どうやって操作したら良いか混乱する

## DOMとは何か？
「Document Object Model」の略で、Webページ全体のコンテンツはオブジェクトだった。そして、JavaScriptから特定のオブジェクトにアクセスすれば、Webページに動きを付けることが出来る
つまりDOMは、JavaScriptからHTMLの「どこ」に「何」をするかを実現するための仕組みである

## DOMはどんな特徴があるか？
**①枝分かれした木構造になっている(DOMツリーと呼ぶ)**

“`index.html





Jest toEqualとtoStrictEqualの違いについて理解する

# 目次
1. 背景
2. toStrictEqualとは
3. サンプルコード

# 背景
toStrictEqualをjestのdocumentで見て気になった為です。

# toStrictEqualとは
– undefinedの要素が考慮されます
– [2]は[2, undefined]とは等しくないです。
– {a: undefined, b: 2}は{b: 2}とは等しくないです。
– 配列の疎密がチェックされます。例えば、[, 1]は[undefined, 1]とは等しくないです。
– オブジェクトの型がチェックされます。例えばフィールドaとbを持つクラス・インスタンスは、フィールドaとbを持つリテラル・オブジェクトとは等しくないです。

# サンプルコード
こちらのリポジトリで確認可能です。
[jest-strict-equal](https://github.com/yamatai12/jest-strict-equal)

“`StrictEqual.test.ts
class Class {
name: string;
construct

【javascript】シンプルで使いやすい！createselectbox関数を使ったセレクトボックスの作成ガイド

## javascriptについて初心者エンジニアに向けて、createselectbox関数を使ったセレクトボックスの作成ガイド

こんにちは。今回は、javascriptについて初心者エンジニアに向けて、createselectbox関数を使ったセレクトボックスの作成ガイドを紹介します。セレクトボックスは、ユーザーが選択肢から選ぶことができるui要素であり、ウェブページやアプリケーションの開発においてよく利用されます。createselectbox関数は、javascriptでシンプルで使いやすいセレクトボックスを作成するための関数であり、初心者エンジニアでも簡単に利用することができます。

### 参考ブログ記事
1. [javascriptでセレクトボックスを作成する方法](https://murashun.jp/blog/20191025-01.html)
2. [javascriptでセレクトボックスを動的に追加・削除・読み込み](https://uxmilk.jp/14160)

## createselectbox関数の導入と基本的な使い方
createselectbo

Local Storageを使ってCardコンポーネントの並べ替え結果を保存する

## はじめに
さて，今回は前回の続きです．背景やレイアウトの実装は[こちら](https://qiita.com/Hayato-7812/items/fd2431fac570a367ad9b)の記事に記載したので，まだ読んでいない方はこちらの記事からご覧ください．

今回は**Cardコンポーネントの並べ替え結果をLocal Storageに保存する**ことを目標に実装を進めていきます．この機能を実装することによって

– ユーザー(クライアント)が個々で並べ替えたコンポーネントによるレイアウトを次回サイト訪問時にも変わらず確認することができる

という点で便利です．(インターン先で開発しているアプリケーションには必須の機能でした)

今回はこの機能の実装方法を調査したことと合わせて，メモとして記載したいと考えています．

とはいえ，前回の時点でレイアウトの部分は既に実装してあるので，今回の記事はそこまで大きなボリュームにはなりません．

## Local Storageとは

[前回の記事にも記載](https://qiita.com/Hayato-7812/items/fd24

Jimdoのブログ記事一覧をトップページに表示させたい

ジンドゥークリエイターで、ブログ記事一覧を表示させる方法です。

2023年10月時点では機能します。
（今後、Jimdoの仕様変更があれば機能しなくなるかもしれません。）

“`

【JavaScript】JSPとJavaScriptのテンプレート文字列の衝突

日本語に苦戦しているSYOです。 `JSP`を用いた開発中、`JSP`と`JavaScript`のテンプレート文字列の衝突問題に遭遇しました。 この記事では、`ChatGPT`を利用して、`JSP`と`JavaScript`の連携時のテンプレート文字列の使用方法と注意点に関するメモを共有します。 # テンプレート文字列とは まず、テンプレート文字列（テンプレートリテラル）について簡単に紹介します。 テンプレート文字列は`JavaScript ES6`から導入された新しい文字列リテラルの形式で、バックティック（`）を使って文字列を定義します。 この特徴を利用すると、文字列内に変数や式を直接埋め込むことができ、複数行の文字列も簡単に作成することができます。 例： ``` var name = "Radiohead"; var greeting = `こんにちは、${name}さん！`; console.log(greeting); ``` 結果： ``` こんにちは、Radioheadさん！ ``` # JSPとJavaScriptのテンプレート文字列の衝突 `JS

質問システムのポートフォリオ解説(React+Express)

概要

eduaasという質問システムを作成しました
ソースコード　GitHub:

開発環境

フロントエンド:Node.js フレームワーク:React
バックエンド: Node.js フレームワーク:express
データベース: mysql2
現在ローカル環境で作成しています。

1.質問書き込む

![スクリーンショット 2023-10-09 18.19.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2518441/6ff1a036-7ab9-e27c-e1e2-56dfb96

[React]React IframeでHTMLの情報を表示する

## はじめに React Ifameを使って、HTMLを表示するURLを表示する方法を書いていきます。 ## 参考 こちらがドキュメントになります。 https://www.npmjs.com/package/react-iframe ## React Iframeをインストール まずは、以下のコマンドでReact Iframeをインストールしていきます。 ```: ターミナル npm install react-iframe ``` packege.jsonを確認します。 ```:packege.json "dependencies": { "react-iframe": "^1.8.5", }, ``` ## コードに適用する React Ifameを使用するには、以下のようなコードにします。 今回は、News APIで取得できるURLを使用します。 ``` import Iframe from "react-iframe";