ウェブ開発

開発情報サイト

ウェブサイト開発サービス

私たちは以下を提供します:

カスタマイズされたウェブサイトのデザイン

独自の Web サイトデザインを提供して、ブランドイメージとビジネスニーズを確実に満たし、ユーザーエクスペリエンスと魅力を向上させます。

レスポンシブ Web 開発

デスクトップ、タブレット、携帯電話など、複数のデバイスに適応する Web サイトを作成して、最高の閲覧エクスペリエンスを提供します。

ECプラットフォーム構築

製品の表示、ショッピングカートシステム、オンライン決済の統合など、完全な e コマース機能をサポートし、オンラインでの販売を容易にします。

バックエンドシステム開発

データベース管理、API統合、サーバー構成など、安定的かつ効率的なバックエンドシステムを構築し、Webサイトのスムーズな運用をサポートします。

ウェブサイト最適化サービス

Web サイトの速度の最適化と SEO の最適化を実行し、Web サイトのパフォーマンスと検索エンジンのランキングを向上させ、より多くのトラフィックを引き付けます。

ウェブサイトのメンテナンスと更新

ウェブサイトのセキュリティと最新の情報を確保するために、定期的なウェブサイトのメンテナンスとコンテンツ更新サービスを提供します。

技術サポートとコンサルティング

弊社では、いつでも技術サポートを提供し、問題を解決し、ウェブサイトの運用効率を向上させるための専門的なコンサルティングを提供します。

Webページ：Webページの企画・デザイン。 Webページのプレゼンテーションデザインと制作

Web応募システム：オンラインランキング、キャリア・ライフマネジメントヘルパー、語学学習スマートヘルパーなどの各種応募システム。

.NET,C++,Java,PHP,JSP,JavaScript Programming Oracle DB, Microsoft SQL, MySQL, MariaDB

HTML

HTML (Hypertext Markup Language) は、Web ページを構築するための基本的な標準言語です。 Web ページの構造とコンテンツを定義し、さまざまなタグを通じてテキスト、画像、リンク、その他のマルチメディアを組み合わせます。

インフラストラクチャー

標準の HTML 要素は、開始タグ、コンテンツ、終了タグで構成されます。例えば：<p>これはテキストです</p>。タグをネストして、階層的な DOM ツリー構造を形成できます。

一般的なタグのカテゴリ

テキストラベル:h1～h6は見出し、pは段落、brは改行を表します。
タグのリスト:ul は順序なしリスト、ol は順序付きリスト、li はリスト項目です。
リンクと画像:a タグはハイパーリンクの作成に使用され、img タグは画像の埋め込みに使用されます。
容器ラベル：div とspan は、レイアウトとスタイルの制御に使用されます。

物件申請

タグには追加情報を提供する属性を含めることができます。一般的なプロパティは次のとおりです。

プロパティ名	使用説明書
href	リンクの宛先 URL を定義します。
src	画像またはメディアのソースパスを定義します。
alt	画像が表示できない場合の代替テキスト。
class / id	CSS スタイルの選択または JavaScript 操作に使用されます。

セマンティックタグ

最新の HTML はセマンティクスを重視し、ヘッダー、フッター、記事、ナビゲーションなどのタグを使用します。これは、検索エンジンの最適化 (SEO) に役立つだけでなく、Web ページの読みやすさとアクセシビリティも向上します。

CSSとJavaScriptとの関係

HTML はコンテンツ構造を担当し、CSS は視覚的なスタイルを担当し、JavaScript はインタラクティブな動作を担当します。 3 つを組み合わせることで、最新の完全な Web アプリケーションを形成できます。

HTMLの色の名前

以下に、HTML でサポートされている標準の Web カラー名を示します。これらの名前は CSS または HTML 属性で直接使用でき、ブラウザーはそれらを対応する数値に自動的に解析します。

基本的な色

カラープレビュー	英語名	16進コード
	Black	#000000
	White	#FFFFFF
	Red	#FF0000
	Blue	#0000FF
	Yellow	#FFFF00
	Lime	#00FF00
	Cyan / Aqua	#00FFFF
	Magenta / Fuchsia	#FF00FF

グレー系

プレビュー	名前	コード
	LightGray	#D3D3D3
	Silver	#C0C0C0
	DarkGray	#A9A9A9
	Gray	#808080
	DimGray	#696969
	SlateGray	#708090

ピンクと赤

Pink (#FFC0CB)
LightPink (#FFB6C1)
HotPink (#FF69B4)
DeepPink (#FF1493)
Crimson (#DC143C)
Tomato (#FF6347)
DarkRed (#8B0000)

青と緑

SkyBlue (#87CEEB)
DeepSkyBlue (#00BFFF)
RoyalBlue (#4169E1)
Navy (#000080)
ForestGreen (#228B22)
SeaGreen (#2E8B57)
Teal (#008080)

オレンジ、黄色、茶色の色

	Orange	#FFA500
	Gold	#FFD700
	Khaki	#F0E68C
	Chocolate	#D2691E
	SaddleBrown	#8B4513

JavaScript

JavaScriptの特徴

JavaScript は、フロントエンドおよびバックエンド開発で広く使用されている、効率的で柔軟な動的なスクリプト言語です。 JavaScript の主な機能は次のとおりです。

1. 動的型付け言語

JavaScript は動的に型指定される言語であり、変数の宣言時にデータ型を指定する必要はありません。これは、変数の型がプログラムの実行中に動的に変更される可能性があることを意味します。

値 = 10 とします。 // 数値型に初期化される
値 = "こんにちは"; // 文字列型に変更可能

2. オブジェクト指向のサポート

JavaScript はオブジェクト指向をサポートしており、プロトタイプの継承オブジェクトの継承と再利用を実現する方法。これにより、JavaScript でオブジェクトをより柔軟に定義および操作できるようになります。


let person = {
name: "Alice",
greet: function() {
    return "Hello, " + this.name;
}
};

3. 関数はオブジェクトです（高階関数）

JavaScript では、関数はパラメータとして渡したり、返したり、変数に割り当てたりできるオブジェクトでもあります。この機能は、多くの関数型プログラミングパターンをサポートします。

関数挨拶(名前) {
「こんにちは、」 + 名前を返します。
}
Hello = 挨拶しましょう。
console.log(sayHello("アリス")); // 関数は変数として使用できます

4. 非同期操作のサポート

JavaScript は、特に非同期操作をネイティブにサポートしています。Promiseそしてasync/await非同期動作の処理がより直感的になります。これは、ネットワークリクエストやタイミングイベントなどの非同期操作を処理する場合に役立ちます。


async function fetchData() {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
console.log(data);
}
fetchData();

5. 広範なクロスプラットフォームアプリケーション

JavaScript はもともと Web ブラウザーのフロントエンド開発に使用されていましたが、現在ではバックエンド開発 (Node.js など)、デスクトップアプリケーション、モバイルアプリケーション、さらには IoT デバイスでも広く使用されています。

JavaScript の柔軟性と多様性により、JavaScript は現代の Web 開発の中核テクノロジーの 1 つとなり、さまざまなアプリケーション分野で強力なサポートを提供します。

JavaScript ブール値

ボリンジャー値の概念

JavaScript では、Boolean は基本的なデータ型であり、可能な状態または値は 2 つだけです。

true：真実、はい、オープニングまたは成功を表します。
false: false、no、closed、または failed を表します。

ブール値は、すべての論理的判断とプロセス制御の基礎となります。if...elseステートメントとループ。

1. 直接代入と比較

ブール値を変数に直接割り当てることも、比較演算子を使用してブール値を生成することもできます。

isLogged = true にします。
isGuest = false にしましょう。

// 比較演算子はブール値を返します
let isGreater = (10 > 5); //本当
let isEqual = (5 === '5'); // false (データ型が異なるため)

2. 条件判断で(If/Else)を使用する

これはボリンジャー値の最も一般的な使用法です。ifステートメントは、括弧内の式の結果が以下であるかどうかをチェックします。true、そしてコードのブロックを実行するかどうかを決定します。

年齢 = 20 としましょう。

if (年齢 >= 18) {
  console.log("私は成人なので投票できます。");
} それ以外の場合は {
  console.log("未成年です。");
}

let userValid = checkUserStatus(); // true または false を返すと仮定します

if (userValid) {
  // userValid が true の場合
  ディスプレイダッシュボード();
} それ以外の場合は {
  // userValid が false の場合
  showLoginError();
}

3. 論理演算子

論理演算子は、ブール値を結合または反転するために使用されます。主に次の 3 つのタイプがあります。

!(NOT): 論理否定、ブール値を反転します。
&&(AND): 論理 AND、両側が一致する場合のみtrueその場合にのみメッセージが返されますtrue。
||(OR): 片側が一致している限り、論理和。trueただ返送してくださいtrue。

isLoggedIn = true; にしましょう。
hasPermission = false にします。

// ! (違います)
isNotLoggedIn = !isLoggedIn; // 偽

// && (AND)
if (isLoggedIn && hasPermission) {
  console.log("ユーザーはログインしており、権限を持っています。");
}

// || (または)
if (isLoggedIn || isGuest) {
  console.log("ログインするかゲストとして続行してください。");
}

4. 真偽値（暗黙の変換）

JavaScript では、ブール値が必要な場合に他のデータ型を使用でき、暗黙的な変換が実行されます。これらの値は次のように扱われますtrueまたはfalse：

1. 偽の値 (に変換されます)`false`価値）：

条件判定では以下の6つの値を考慮します。false：

false(ボリンジャー値自体)
0(数字のゼロ)
""または''(空の文字列)
null
undefined
NaN (Not a Number)

2. 真の値（に変換されます）`true`価値）：

**上記の 6 つの Falsy 値を除く他のすべての値**。次のものが含まれます。

"0"(空でない文字列)
"false"(空でない文字列)
ゼロ以外の任意の数値 (例:1, -100)
空の配列[]
空のオブジェクト{}
関数

let myString = "こんにちは";
myNumber = 0 とします。

if (myString) {
  // myString は "Hello" であり、Truthy 値であり、実行されます。
  console.log("文字列が空ではありません。");
}

if (myNumber) {
  // myNumber は 0 ですが、これは Falsy 値であり、実行されません。
  console.log("数値はゼロではありません。");
}

if ({}) {
  // 空のオブジェクト {} は Truthy 値であり、実行されます
  console.log("オブジェクトはすでに存在します。");
}

JavaScript 配列

JavaScript 配列 (Array) は、複数の値を格納するために使用される変数です。配列内の各値は要素と呼ばれ、各要素には 0 から始まる数値インデックス (Index) が付いています。

配列の作成と基本操作

// 配列を作成する
果物 = [「リンゴ」、「バナナ」、「チェリー」、「ナツメヤシ」];

//配列要素にアクセスする
console.log(フルーツ[0]); // 出力: Apple
console.log(fruits.length); // 出力: 4

//配列の末尾に要素を追加します
フルーツ.push("エルダーベリー");
console.log(フルーツ); // 出力: ["Apple", "Banana", "Cherry", "Date", "Elderberry"]

//配列の末尾要素を削除します
lastFruit = フルーツ.ポップ(); にしましょう。
console.log(lastFruit); // 出力: ニワトコ
console.log(フルーツ); // 出力: ["Apple", "Banana", "Cherry", "Date"]

スライス()メソッドを使用する

slice()このメソッドは、元の配列から選択された要素を含む新しい配列を返します。元の配列は変更されません。

文法：array.slice(start, end)

start(オプション): 取得する開始インデックス (両端を含む)。指定しない場合は、インデックス 0 から開始します。
end(オプション): 取得の終了インデックス (含まれていません)。指定しない場合は、配列の最後まで取得します。

数値 = [10, 20, 30, 40, 50, 60, 70]; とします。

// インデックス 2 (30) から開始し、で終了します。
スライス1 = 数値.スライス(2);
コンソール.ログ(スライス1); // 出力: [30, 40, 50, 60, 70]

// インデックス 1 (20) から始まり、インデックス 4 (50) より前
スライス2 = 数値.スライス(1, 4); とします。
コンソール.ログ(スライス2); // 出力: [20, 30, 40]

// 負のインデックスを使用します: -1 は最後の要素を指し、-3 は最後から 3 番目の要素を指します (50)
スライス3 = 数値.スライス(-3, -1);
コンソール.ログ(スライス3); // 出力: [50, 60]

//配列全体をコピーする
コピー = 数値.スライス();
コンソール.ログ(コピー); // 出力: [10、20、30、40、50、60、70]

console.log(数字); // 元の配列は変更されていません

配列からランダムに5つの要素を取得する方法

次の関数は、配列から指定された数の要素 (たとえば、5) をランダムに選択する効率的な方法を提供します。この方法により、選択した要素が繰り返されなくなります。

/**
 * 配列から指定された数の要素をランダムに選択します
 * @param {Array} arr 元の配列
 * @param {number} count 選択する要素の数 (デフォルトは 5)
 * @returns {Array} ランダムに選択された要素を含む新しい配列
 */
関数 getRandomElements(arr, count = 5) {
    // 配列要素が必要な数以下の場合は、配列のコピーを返します
    if (配列の長さ<= count) {
        return arr.slice();
    }

    // 建立一個原始陣列的副本，用於隨機選取
    let tempArray = arr.slice();
    let result = [];

    for (let i = 0; i < count; i++) {
        // 隨機產生一個索引
        let randomIndex = Math.floor(Math.random() * tempArray.length);

        // 將選中的元素加入結果陣列
        result.push(tempArray[randomIndex]);

        // 將選中的元素從 tempArray 中移除，確保不會重複選取
        tempArray.splice(randomIndex, 1);
    }

    return result;
}

let largeArray = [
    "A", "B", "C", "D", "E", "F", "G", "H", "I", "J",
    "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T"
];

let randomFive = getRandomElements(largeArray, 5);
console.log(randomFive); // 輸出範例: ["P", "A", "H", "R", "M"] (每次執行結果不同)

JavaScript 配列メンバーのチェック

JavaScript 開発では、配列内に値が存在するかどうかを確認する一般的な方法がいくつかあります。どの方法を選択するかは、「ブール値の結果」のみが必要か、それともメンバーの「インデックス位置」または「オブジェクトの内容」を取得する必要があるかによって異なります。

1. 使用方法が含まれます

これは、ES6 以降で最も推奨される標準的な方法であり、セマンティクスが最も明確で、true または false を直接返します。

const fruits = ['apple', 'banana', 'orange'];
const hasApple = fruits.includes('apple'); // true

利点: 構文が簡潔で、NaN を正しく判定できます。
注: 一致比較 (===) が使用されます。

2.indexOfメソッドを使用する

古いブラウザーで使用する場合、または要素の位置を知る必要がある場合に使用します。存在する場合はインデックス値 (0 から始まる) を返し、存在しない場合は -1 を返します。

const タグ = ['js', 'php', 'css'];
if (tags.indexOf('php') !== -1) {
    //要素存在のロジック
}

3. 何らかの方法を使用して複雑な条件を処理する

配列メンバーがオブジェクトである場合、または正確な値ではなく特定のロジックに基づいてチェックする必要がある場合に some を使用します。 1 つのメンバーが条件を満たす限り、true が返されます。

const users = [
    { id: 101, name: 'Alex' },
    { id: 102, name: 'Bob' }
];
const exists = users.some(user => user.id === 101); // true

4. 関連する拡張使用法

必要	推奨される方法	ポストバックの例
最初の資格のあるメンバーを見つける	find()	{ id: 101, name: 'Alex' } または未定義
条件を満たす最初のインデックスを検索します	findIndex()	0 または -1
対象となるメンバーをすべて検索する	filter()	[一致 1、一致 2] または []

5. パフォーマンスの最適化に関する提案

非常に大規模なデータセット内のメンバーの存在を頻繁に確認する必要がある場合は、配列を Set オブジェクトに変換することをお勧めします。 Set のメソッドのクエリの複雑さは O(1) で、配列の O(n) よりもはるかに高速です。

const hugeArray = [/* 大量のデータ */];
const mySet = 新しい Set(hugeArray);

if (mySet.has('targetValue')) {
    // クイックヒット
}

JavaScript配列に新しい配列を追加

concat メソッドを使用する

使用できますconcat2 つの配列をマージする方法:

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let result = arr1.concat(arr2);
console.log(result); // [1, 2, 3, 4, 5, 6]

スプレッド演算子を使用する

スプレッド演算子を使用することも一般的な方法です。

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let result = [...arr1, ...arr2];
console.log(result); // [1, 2, 3, 4, 5, 6]

プッシュメソッドとスプレッド演算子の使用

2 番目の配列の要素を最初の配列に追加したい場合は、次のように組み合わせることができます。pushそしてスプレッド演算子:

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
arr1.push(...arr2);
console.log(arr1); // [1, 2, 3, 4, 5, 6]

現在実行中の関数の名前を取得します

目的

意思console.log('op_panel_htm()')関数名を動的に取得して出力するように変更します。例:console.log(get_curr_method_name())。

関数の書き込み

function get_curr_method_name() {
  const stack = new Error().stack;
  const lines = stack.split("\n");

  // 行 0 はエラー、行 1 は get_curr_method_name、行 2 はそれを呼び出す関数です
  const callerLine = lines[2] || '';
  const match = callerLine.match(/at (.+?) \(/);
  リターンマッチ？一致[1] : '匿名';
}

応用例


TableOperator.prototype.op_panel_htm = function () {
  console.log(get_curr_method_name());
};

出力結果

次のように実行すると:


const t = new TableOperator();
t.op_panel_htm();

これはコンソールに出力される場合があります。

TableOperator.op_panel_htm

実際の出力はブラウザのスタック形式によって異なります。Chrome/Edge では通常、関数のフルパスが出力されます。

注意事項

この方法は以下に依存しますError().stack、ブラウザごとに形式が若干異なります。
デバッグや開発時の使用に適しています。正式な環境でロジックを実行するためにこの方法に依存することはお勧めできません。

拡張された提案

これはカスタムデバッグ関数にカプセル化できます。


function debug_log(msg = '') {
  console.log(`[${get_curr_method_name()}] ${msg}`);
}

使用方法:

debug_log("初期化が完了しました");

出力結果は以下のとおりです。

[TableOperator.op_panel_htm]の初期化が完了しました

JavaScript 関数のビニングと分類管理

目的

JavaScript プロジェクトが大きくなり、多くの機能が含まれる場合、保守性と可読性を向上させるためにモジュール化と分類を使用する必要があります。以下では、複数の機能を効果的に管理する方法について説明します。class。

推奨される実践方法

1. ES6 モジュールビニングを使用する

関連する関数を機能分類に従って別のファイルに保存します。次に例を示します。

/utils/mathUtils.js → 数学演算関連関数
/utils/domUtils.js → DOM操作関数
/modules/tableOperator.js → テーブル操作関連のクラスまたは関数

各ファイルは使用しますexport / import文法：


// mathUtils.js
export function add(a, b) {
  return a + b;
}


// main.js
import { add } from './utils/mathUtils.js';
console.log(add(2, 3));

2. 同様の機能は同じモジュールに分類されます

オブジェクトまたはクラス内の関連するロジックを使用して関数をラップすると、より構造的になります。次に例を示します。


// domUtils.js
export const DomUtils = {
  createElement(tag) {
    return document.createElement(tag);
  },
  removeElement(el) {
    el.parentNode.removeChild(el);
  }
};

または、クラスを使用します。


// tableOperator.js
export class TableOperator {
  constructor(tableId) {
    this.table = document.getElementById(tableId);
  }

  highlightRow(index) {
    // ...
  }

  sortByColumn(colIndex) {
    // ...
  }
}

3. いつクラスを使用するのが適切ですか?

必要パッケージのステータス(DOM要素、内部データなど)機能モジュール
複数のインスタンスが作成されます (例: 複数のテーブル、複数のコンポーネント)
継承と拡張が必要です

単なるツール関数 (文字列処理、数学演算など) の場合は、使用することをお勧めします。export functionまたはexport const obj = { ... }ただ管理してください。

4. ツールとフレームワークを適合させる

開発で使用されるVSCode + ESM + プロジェクト構造ディレクトリ
正式なプロジェクトを調整することができますWebpack、ViteMODパッケージ化ツール
大規模なフロントエンドプロジェクトに推奨TypeScript + クラス + モジュール化管理

サンプル構造の提案


/src
  /utils
    stringUtils.js
    mathUtils.js
  /components
    tableOperator.js
    chartViewer.js
  main.js

JavaScript クラスのメンバー変数とメソッドの使用法

基本的な文法

JavaScriptでclassコンストラクターを含む他の OOP 言語と同様の使用法constructor、メンバー変数とメソッド (関数) 定義。

例

クラス人 {
  //メンバ変数(パブリック)
  名前;
  年;

  //コンストラクター
  コンストラクター(名前, 年齢) {
    this.name = 名前;
    this.age = 年齢;
  }

  //メンバーメソッド
  挨拶() {
    console.log(`こんにちは、私は ${this.name} で、今年 ${this.age} 歳です`);
  }

  // 静的メソッド (インスタンス化する必要はありません)
  静的種() {
    「人間」を返します。
  }
}

使用法

const p = 新しい人("シャオミン", 25);
p.greet(); // 出力: こんにちは、私はシャオミン、今年 25 歳です
console.log(p.name); // シャオミン
console.log(人.種()); // 人間

メンバー変数の型

パブリックメンバー：のようにthis.name、外部からアクセスできます。
プライベートメンバー(#で始まる): クラス内でのみ使用できます。

プライベート変数とメソッド (ES2022 標準)

クラス カウンタ {
  #カウント = 0; // プライベート変数

  インクリメント() {
    this.#count++;
    console.log(this.#count);
  }

  #secret() {
    console.log("これはプライベートメソッドです");
  }

  公開シークレット() {
    this.#secret(); // 内部的に呼び出すことも可能
  }
}

継承とオーバーライド

クラス動物{
  話す() {
    console.log("音を出す");
  }
}

クラス Dog 拡張 Animal {
  話す() {
    console.log("ワンワン!");
  }
}

これに関する注意事項

クラスメソッド内thisこのインスタンスをポイントします。ただし、イベントまたはコールバックで使用する場合は、次を使用してください。bind()または矢印機能を使用してポインティングを確実にします。

クラスボタン {
  コンストラクター() {
    this.label = "クリック";
    document.addEventListener("クリック", this.handleClick.bind(this));
  }

  ハンドルクリック() {
    console.log(`${this.label} が押されました`);
  }
}

結論は

JavaScript クラスは、他の言語と同様に、カプセル化、継承、メソッドおよび属性のサポートを提供します。これらは中規模から大規模のプロジェクトに適しており、モジュールとの統合も簡単です。より厳密な入力と制御が必要な場合は、TypeScript の使用を検討してください。

JavaScript モジュールのクラス的な使用法

説明する

JavaScript モジュール (モジュール) は、変数と関数をファイルにカプセル化する方法を提供します。使用できますimport/export仕組みは似ていますclass分業と機能の構造化は、ツールの機能または単一の機能論理ユニットに適しています。

モジュールとクラスの違いの比較

関数	class	module
データと動作のカプセル化	✅	✅(輸出パッケージ経由)
インスタンス化可能	✅	❌(シングルトンとして存在)
継承とポリタイプ	✅	❌(手動管理が必要)
単一の機能コンポーネント	できる	より適切な

モジュールの例: オブジェクトのカプセル化の使用


// file: mathUtils.js
export const MathUtils = {
  add(a, b) {
    return a + b;
  },
  multiply(a, b) {
    return a * b;
  }
};


// file: main.js
import { MathUtils } from './mathUtils.js';

console.log(MathUtils.add(3, 4));       // 7
console.log(MathUtils.multiply(2, 5));  // 10

モジュールの例: 関数のカプセル化の使用


// file: stringHelper.js
export function toUpper(str) {
  return str.toUpperCase();
}

export function truncate(str, len) {
  return str.length > len ? str.slice(0, len) + '…' : str;
}


// file: main.js
import { toUpper, truncate } from './stringHelper.js';

console.log(toUpper("hello"));          // HELLO
console.log(truncate("JavaScript", 5)); // JavaS…

モジュールの例: シングルトンオブジェクトのシミュレーション


// file: config.js
let config = {
  env: "dev",
  version: "1.0"
};

export function getConfig() {
  return config;
}

export function setEnv(env) {
  config.env = env;
}


// file: app.js
import { getConfig, setEnv } from './config.js';

console.log(getConfig()); // { env: "dev", version: "1.0" }
setEnv("prod");
console.log(getConfig()); // { env: "prod", version: "1.0" }

結論は

モジュールは、ツールの機能、定数、設定をカプセル化するのに適しています。class異なります、モジュールはこれはロード時に自動的に実行され、ドメイン全体で一意です。、論理的な分類ときちんとしたプログラム構造に非常に適しています。複数回作成できるオブジェクトインスタンスまたはオブジェクト指向の継承が必要な場合に使用します。classより適切です。

JavaScript 関数を 1 回だけ実行し、繰り返し呼び出す場合は前回の完了を待つ必要があります。

機能説明

`runExclusive` ユーティリティ関数を使用して関数をラップし、同時に 1 回のみ実行できるようにします。再度呼び出された場合は、前回の実行が完了する (Promise 解決) まで待機してから続行します。

ユーティリティ関数


function runExclusive(fn) {
  let last = Promise.resolve();

  return function (...args) {
    last = last.then(() => fn(...args));
    return last;
  };
}

使用例

非同期関数 doTask(name) {
  console.log(`Start ${name}`);
  await 新しい Promise(resolve => setTimeout(resolve, 2000));
  console.log(`End ${name}`);
}

const doTaskOnce = runExclusive(doTask);

// 同時に複数回呼び出します
doTaskOnce("A");
doTaskOnce("B");
doTaskOnce("C");

出力結果


Start A
End A
Start B
End B
Start C
End C

追加情報

これは、同時に実行される個体が 1 人だけであることを保証する「シーケンス実行」の実装です。
「2 回目の呼び出しで前の呼び出しをキャンセルする」または「最後の呼び出しのみを実行する」に変更する必要がある場合は、デバウンスまたはスロットルテクノロジを使用できます。

HTMLテーブルをローカルファイルに保存

コアメソッド: JavaScript を使用してダウンロードを実装する

Web ページ上の特定の HTML 要素 ($\lt$table$\gt$ など) をローカル $\text{.html}$ ファイルとして保存するには、通常、JavaScript を使用して要素の HTML コードを取得し、ブラウザのダウンロード API を通じて保存プロセスをトリガーする必要があります。これはクライアント側のソリューションです。

実装手順

1. 対象テーブルのHTMLコードを取得する

$\text{document.getElementById}$ または $\text{document.querySelector}$ セレクターを使用して、保存する $\lt$table$\gt$ 要素を取得し、その $\text{outerHTML}$ を取得します。


var tableElement = document.getElementById('myTableId');
var tableHtml = tableElement.outerHTML;

2. 完全な HTML 構造を含む文字列を作成します。

$\lt$table$\gt$ コードだけでは、完全な $\text{.html}$ ファイルを形成するのに十分ではありません。アーカイブがブラウザーで正しく開いて表示されるようにするには、基本的な $\lt$html$\gt$、$\lt$head$\gt$、および $\lt$body$\gt$ タグで囲む必要があります。表のスタイル (CSS) を保持するために、必要な $\lt$style$\gt$ タグまたは $\lt$link$\gt$ タグも含める必要があります。

var fullHtml = '<!DOCTYPE html><html><head><meta charset="UTF-8"><title>保存されたテーブル</title></head><body>' + tableHtml + '</body></html>';

3. Blob オブジェクトを作成する

BLOB (バイナリラージオブジェクト) オブジェクトは、バイナリまたはバイナリに似たデータを格納するために使用されます。完全な HTML コードを含む文字列を $\text{text/html}$ 型の $\text{Blob}$ に変換します。


var blob = new Blob([fullHtml], { type: 'text/html' });

4. ダウンロードリンクを作成し、ダウンロードをトリガーします

$\text{URL.createObjectURL}$ を使用して、$\text{Blob}$ を指すローカル $\text{URL}$ を作成し、それを $\lt$a$\gt$ 要素の $\text{href}$ 属性に割り当て、$\text{download}$ 属性を設定してダウンロードされたファイルの名前を指定します。

var a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = 'exported_table.html'; //ダウンロードしたファイル名を指定
a.click(); // クリックをシミュレートし、ダウンロード ダイアログ ボックスをトリガーします

// リソースを解放する
URL.revokeObjectURL(a.href);

スタイルとスクリプトについて考える

表のスタイルが外部 $\text{CSS}$ ファイルまたは $\text{JavaScript}$ 経由でページに動的に追加された場合、単に $\text{outerHTML}$ を保存すると、それらのスタイルや機能が失われる可能性があります。この問題を解決するには:

**インラインスタイル:** すべての重要な $\text{CSS}$ スタイルが ($\text{element.style}$ プロパティを使用して) インラインスタイルに変換されていることを確認するか、必要な $\lt$style$\gt$ タグを、作成した $\text{fullHtml}$ 文字列の $\lt$head$\gt$ 部分にコピーしてください。
**スクリプト:** 保存された $\text{.html}$ ファイルは、元のページの $\text{JavaScript}$ スクリプトを自動的に実行しません。テーブルの一部の機能が $\text{JavaScript}$ に依存している場合、これらの機能は保存されたファイルでは無効になります。

JavaScript debug_log フェーズ制御

目的

C/C++ をエミュレートする#ifdef DEBUGJavaScript での制御性を実現する条件付きコンパイルメカニズムdebug_log()、開発段階（開発中、テスト中、正式版）に応じてログの出力レベルや切り替えを制御します。

実装

1. グローバル LOG_LEVEL を設定する

// 0 = 出力なし、1 = エラー、2 = 警告、3 = メッセージ、4 = デバッグ
const LOG_LEVEL = 3;

関数 debug_log(msg, レベル = 3) {
  if (レベル<= LOG_LEVEL) {
    const name = get_curr_method_name();
    console.log(`[${name}] ${msg}`);
  }
}

2. 現在の関数名の取得を支援します。


function get_curr_method_name() {
  const stack = new Error().stack;
  const lines = stack.split("\n");
  const callerLine = lines[2] || '';
  const match = callerLine.match(/at (.+?) \(/);
  return match ? match[1] : 'anonymous';
}

3. 使用例

関数 initApp() {
  debug_log("初期化中", 4); // デバッグレベル
  debug_log("設定を正常に読み込みました", 3); // メッセージ
  debug_log("設定値が古すぎる可能性があります", 2); // 警告
  debug_log("読み込みに失敗しました", 1); // エラー
}

4. リリースステージの調整

開発中:LOG_LEVEL = 4(大きく開いた状態)
テスト段階:LOG_LEVEL = 2(エラーと警告のみが表示されます)
正式に開始されました:LOG_LEVEL = 0（完全な沈黙）

5. 高度な方法: パッケージング段階でログを削除する

Webpack/Vite/ESBuild などのツールで使用すると、条件定数を使用できますprocess.env.NODE_ENVログを削除します。

if (process.env.NODE_ENV === '開発') {
  debug_log("開発環境のメッセージ");
}

Babel プラグイン (babel-plugin-transform-remove-console など) と併用して、すべてを削除することもできます。console.*。

結論は

JavaScript には条件付きコンパイルがありませんが、変数制御とパッケージ化の最適化戦略を通じて、C++ と同様のデバッグレベルとリリース制御メカニズムを実現でき、開発段階での情報が完全であり、正式バージョンにクリーンでノイズがないことが保証されます。

ブラウザコンソール

導入

ブラウザコンソールは開発者ツールの一部であり、次の目的で使用されます。

JavaScriptコードを実行する
エラーメッセージとログを表示する
オンザフライで DOM を操作する
Web サイトの問題のデバッグ

---

開封方法

Windows / Linux：によるとF12またはCtrl + Shift + I→「コンソール」タブをクリック
macOS：によるとCmd + Option + I

---

基本機能

console.log("メッセージ"):メッセージを印刷
$0: 要素パネルで現在選択されている要素を選択します。
document.querySelector():DOM要素を選択します
dir(obj): オブジェクトのプロパティをリストします。
copy(obj): 変数をクリップボードにコピーします

---

一般的な例

//メッセージを出力する
console.log("こんにちは、コンソール");

// ページ要素を取得して操作する
const btn = document.querySelector("ボタン");
btn.textContent = "新しいラベル";
btn.click();

//ビューオブジェクト
コンソール.ディレクトリ(btn);

---

保護を身につける

次のメッセージがコンソールに表示される場合は、Chrome がセキュリティ上の理由から複数行のコードを直接貼り付けることを禁止していることを意味します。

Don’t paste code into the DevTools Console ... Please type ‘allow pasting’ below and press Enter

入力allow pastingEnter キーを押して制限を解除します。

---

コンソールのヒント

clear():コンソールメッセージをクリア
inspect(element): 要素パネルに直接ジャンプして要素を見つけます。
$そして$$：はいquerySelectorそしてquerySelectorAll略語

---

使用

JavaScript スニペットをテストする
スタイルをその場で変更する
API の戻りデータを観察する
Shadow DOM の操作

Chrome DevTools Console では投稿が禁止されています

理由説明

セキュリティ上の理由と、悪意のある Web サイトやその他のサイトによる危険なコードの投稿を防ぐため、Chrome ではデフォルトで複数行のコードをコンソールに直接貼り付けることが禁止されています。

次のメッセージが表示されます。

Warning: Don’t paste code into the DevTools Console that you don’t understand or haven’t reviewed yourself. 
This could allow attackers to steal your identity or take control of your computer. 
Please type ‘allow pasting’ below and press Enter to allow pasting.

---

解決策のステップ

コンソールの一番下の行テキストを入力してください allow pasting(引用符なし)
プレスEnter
その後、複数行のコードを通常どおり貼り付けることができます

---

デモンストレーション

// 1. コンソールで「貼り付けを許可」と入力し、Enter キーを押します
貼り付けを許可する

// 2. 実行する JavaScript コードを貼り付けます。
const host = document.querySelector('i18n-message[key="login.button.loginWithLine"]');
// ...(次のコード)

---

注意事項

コードのソースを完全に信頼できる場合にのみ貼り付けを許可してください
セキュリティを確保するために、不明なコードや不明なコードの貼り付けは避けてください。
これはソーシャルエンジニアリング攻撃を回避するための Chrome のセキュリティメカニズムです

AJAX

AJAXとは

AJAX (Asynchronous JavaScript and XML) は、Web ページ上のサーバーと非同期に通信するテクノロジであり、ページをリロードせずにデータを更新できるようにします。フォーム送信、データクエリ、自動入力などの動的アプリケーションでよく使用されます。

XMLHttpRequest を使用した AJAX の実装

<script>
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        document.getElementById("result").innerHTML = xhr.responseText;
    }
};
xhr.open("GET", "data.php", true);
xhr.send();
</script>

POSTリクエストの例

<スクリプト>
var xhr = 新しい XMLHttpRequest();
xhr.open("POST", "submit.php", true);
xhr.setRequestHeader("コンテンツタイプ", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        alert("サーバー応答: " + xhr.responseText);
    }
};
xhr.send("名前=シャオミン&スコア=90");
</スクリプト>

JSON ポストバックの処理

<スクリプト>
var xhr = 新しい XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        var json = JSON.parse(xhr.responseText);
        console.log("名前: " + json.name);
    }
};
xhr.send();
</スクリプト>

jQuery を使用して AJAX を簡素化する

$.ajax({
    URL: "data.php",
    メソッド: "GET"、
    成功: 関数(応答) {
        $("#result").html(応答);
    }、
    エラー: 関数(xhr) {
        alert("エラー: " + xhr.status);
    }
});

一般的なアプリケーション

即時検索の提案
データが更新されずロードされない
バックグラウンドフォームの送信
サーバーデータの更新

注意事項

AJAX リクエストはサーバーによって処理される必要があり、フロントエンドはローカルファイルを直接読み取ることができません。
クロスドメインリクエストでは、バックエンドで CORS を許可する必要があります。
データ要求プロセス中に読み込み効果を追加して、ユーザーエクスペリエンスを向上させることができます。

XMLHttpRequest

XMLHttpRequestの作成

HTTP リクエストは、AJAX アプリケーションでよく使用される JavaScript の組み込み `XMLHttpRequest` オブジェクトを使用してサーバーに送信できます。

var xmlhttp = new XMLHttpRequest();

応答ハンドラを設定する

`onreadystatechange` を使用して状態の変化を監視し、サーバーの応答が完了し (readyState が 4)、成功したとき (ステータスが 200) にポストバック処理を実行します。

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        console.log("応答内容: " + xmlhttp.responseText);
    }
};

GETリクエストを送信する

xmlhttp.open("GET", "api/data.php", true);
xmlhttp.send();

POSTリクエストを送信する

xmlhttp.open("POST", "api/save.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("名前=テスト&値=123");

JSON 応答の処理

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var data = JSON.parse(xmlhttp.responseText);
        console.log("ステータス: " + data.status);
    }
};

完全な例

<スクリプト>
var xmlhttp = 新しい XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        {を試してください
            var json = JSON.parse(xmlhttp.responseText);
            console.log("データは正常に受信されました:", json);
        } キャッチ (e) {
            console.error("返されたコンテンツは有効な JSON ではありません", xmlhttp.responseText);
        }
    }
};
xmlhttp.open("GET", "data.php", true);
xmlhttp.send();
</スクリプト>

注意事項

サーバーが正しい形式 (プレーン JSON など) を返すことを確認してください。
PHP エラーメッセージが返された場合、JSON を解析できません。 PHP側でご利用ください。error_reporting(0)エラー出力をオフにします。
クロスドメイン要求の場合、サーバーは CORS ヘッダーを設定する必要があります。

PHP エラーメッセージを含む XMLHttpRequest リターンメッセージを処理する方法

問題の説明

JavaScript の XMLHttpRequest を使用してサーバーデータを取得する場合、PHP プログラムでエラー、警告、または非推奨メッセージが発生すると、これらのテキストが応答テキスト内の予期される JSON と混合され、フロントエンドが JSON を解析できなくなったり、エラーを報告したりすることさえできなくなります。

エラー例

実際に受け取るレスポンステキストのサンプルコンテンツは次のとおりです。

<br />
<b>Deprecated</b>: Facebook\FacebookApp implements the Serializable interface...
...
{ "status": "ok", "data": [...] }

理由

これは、PHP の実行時にエラー出力メッセージ (警告、通知、非推奨など) が生成されるためです。これらのメッセージは通常の出力とマージされるため、フロントエンドが受信するコンテンツは純粋な JSON 形式ではなくなります。

解決策 1: PHP でのエラー出力をオフにする

ブラウザにエラーメッセージが出力されないようにするには、PHP コードの先頭に次のプログラムを追加します。

error_reporting(0);
ini_set('display_errors', 0);

これにより、PHP がエラーまたは警告メッセージを出力しなくなります。

解決策 2: 正しい JSON 応答を設定する

出力が JSON のみであること、および Content-Type が正しく設定されていることを確認してください。

<?php
エラー報告(0);
ini_set('表示エラー', 0);

header('Content-Type: application/json');

// これが返されるデータであると仮定します
$data = ["ステータス" => "ok"、"値" => 123];
エコー json_encode($data);
出口;
?>

解決策 3: SDK パッケージを更新する

このエラーメッセージは、Facebook SDK が Serializable インターフェイスを使用していることを示していますが、これは PHP 8.1 以降では推奨されません。次のコマンドを実行してパッケージを更新してください。

composer update facebook/graph-sdk

または、composer.json のバージョン要件を確認して、PHP 8.1 準拠のバージョンを使用してください。

対処法（非推奨）

バックエンドを修正できない場合は、フロントエンドで非 JSON 部分をフィルターで除外することもできますが、この方法には危険が伴います。

let 応答 = xmlhttp.responseText;
let jsonStart = response.indexOf("{");
if (jsonStart >= 0) {
    let jsonStr = 応答.substring(jsonStart);
    let json = JSON.parse(jsonStr);
    // json を使用してデータを処理する
}

要約提案

戻り形式が純粋であることを確認するために、PHP 側からのエラー出力のクリアを優先してください。
運用環境でユーザーにエラーメッセージが出力されるのを避けます。
エラーを直接表示するのではなく、エラーログに保存することをお勧めします。

HTML での JavaScript 変数の参照

テキストを直接挿入 (textContent/innerText)

<div id="msg"></div>

<スクリプト>
  名前を「シャオミン」にします;
  document.getElementById("msg").textContent = 名前;
</スクリプト>

テンプレート文字列を使用して HTML を作成する (XSS に注意)

<div id="box"></div>

<スクリプト>
  カラー = "赤" にします。
  document.getElementById("box").innerHTML =
    `<p style="color:${color}">テキストの色: ${color}</p>`;
</スクリプト>

属性を直接設定する (href/src/value)

<a id="link">リンク</a>
<input id="nameInput">

<スクリプト>
  URL = "https://example.com";
  名前を「Xiaohua」にします。

  document.getElementById("リンク").href = URL;
  document.getElementById("nameInput").value = 名前;
</スクリプト>

setAttribute を使用します (カスタム属性または非標準属性を設定できます)

<img id="アバター" alt="ユーザーアバター">

<スクリプト>
  画像ソース = "https://example.com/avatar.png";
  document.getElementById("アバター").setAttribute("src", 画像ソース);
</スクリプト>

data-* 属性 (データセット) を使用してデータを渡す

<div id="カード"></div>

<スクリプト>
  ユーザー ID = 456 にします。
  document.getElementById("card").dataset.userid = ユーザー ID; // data-userid="456" に対応します
</スクリプト>

プロパティを直接設定する

<a id="myLink">リンク</a>
<input id="myInput">

<スクリプト>
  URL = "https://example.com";
  名前を「シャオミン」にします;

  document.getElementById("myLink").href = URL;
  document.getElementById("myInput").value = 名前;
</スクリプト>

setAttribute を使用する

<img id="アバター">

<スクリプト>
  画像ソース = "https://example.com/avatar.png";
  document.getElementById("アバター").setAttribute("src", 画像ソース);
</スクリプト>

データセットを使用する

<div id="カード"></div>

<スクリプト>
  ユーザー名 = 123 にします。
  document.getElementById("card").dataset.userid = ユーザーコード; // data-userid="123" に対応します
</スクリプト>

要素の作成時にテンプレート文字列を使用する

<div id="コンテナ"></div>

<スクリプト>
  let title = "動的タイトル";
  document.getElementById("コンテナ").innerHTML =
    `<h3 data-title="${title}">${title}</h3>`;
</スクリプト>

JavaScript を使用して子要素を作成し、div タグとクラスを追加します。

例

次の例では、<div class="abc">次の子要素:

// 親要素があると仮定します
constparent = document.getElementById("myParent");

// div要素を作成
const child = document.createElement("div");

// クラスを設定する
child.className = "abc"; // または classList.add("abc"); を使用します。

//親要素に追加
親.appendChild(子);

HTMLの例

<div id="myParent"></div>
<スクリプト>
  constparent = document.getElementById("myParent");
  const child = document.createElement("div");
  child.className = "abc";
  child.textContent = "これは新しい DIV です";
  親.appendChild(子);
</スクリプト>

述べる

複数のクラスを一度に追加するには、次を使用します。child.classList.add("abc", "def")
追加することもできますid、style、datasetプロパティ

結果

入ります#myParent登場作品:

<div class="abc">これは新しい DIV</div>

JavaScript の選択要素

querySelectorAll()

querySelectorAll()CSS セレクター構文を使用して、条件を満たすすべての要素を選択し、静的な値を返します。NodeList。

// すべてを選択 カテゴリ「アイテム」の場合
let items = document.querySelectorAll("div.item");

// forEach を使用して結果を反復処理します
items.forEach(item => {
    item.style.color = "青";
});

querySelector()

そしてquerySelectorAll()似ていますが、基準を満たす「最初の」要素のみを返します。見つからない場合は戻るnull。

// ID「main-title」を持つ最初の要素を選択します
let title = document.querySelector("#main-title");

// 最初の <p> を選択します。ページ上のタグ
let firstPara = document.querySelector("p");

getElementById()

これは最も高速かつ直接的な方法であり、一意の ID によって単一の要素を選択するように設計されています。

let header = document.getElementById("header-section");

getElementsByClassName()

カテゴリ名に基づいて要素を選択し、「Live」を返します。HTMLCollection。このコレクションは、DOM 構造が変更されると自動的に更新されます。

let ボタン = document.getElementsByClassName("btn-submit");
// 注: HTMLCollection で forEach を直接使用することはできません。最初に配列に変換する必要があります。
Array.from(ボタン).forEach(btn => console.log(btn));

getElementsByTagName()

タグ名 (div、p、span など) に基づいて要素を選択し、インスタントも返します。HTMLCollection。

let allLinks = document.getElementsByTagName("a");
console.log("このページには合計 " + allLinks.length + " リンクがあります");

方式比較表

方法	ポストバックタイプ	パラメータの種類	パフォーマンス
querySelector	単一要素	CSSセレクター	普通
querySelectorAll	NodeList (静的)	CSSセレクター	普通
getElementById	単一要素	ID文字列	最速の
getElementsByClassName	HTMLコレクション (インスタント)	カテゴリ文字列	素早い

NodeList と HTMLCollection の違い

querySelectorAll返されましたNodeList静的です。これは、後で要素が DOM から削除された場合でも、マニフェストの内容が変更されないことを意味します。そしてgetElementsBy...シリーズが返されましたHTMLCollectionこれは動的であり、DOM の最新のステータスをいつでも反映します。

querySelectorAll 高度な検索

交差セレクター (論理的)

複数の条件を満たす要素を同時に選択したい場合は、間にスペースを残さずにセレクターを近くに配置するだけです。

// カテゴリに「btn」と「primary」の両方が含まれる要素を選択します
let PrimaryButtons = document.querySelectorAll(".btn.primary");

//  を選択します。クラス「アイテム」のタグ
let listItems = document.querySelectorAll("li.item");

ユニオンセレクター (またはロジック)

条件Aまたは条件Bに一致する要素をすべて選択したい場合は「カンマ」を使用します。,異なるセレクターを分離します。

// すべてを選択 そしてすべての 

let headers = document.querySelectorAll("h1, h2");

// カテゴリ「アクティブ」の要素またはカテゴリ「ハイライト」の要素を選択します
let markers = document.querySelectorAll(".active, .highlight");

属性セレクター

HTML 属性の存在または値に基づいてフィルターします。これは、フォームまたはカスタムデータプロパティを操作する場合に便利です。

// すべて選択 <ボタン> 「無効」属性付き
letdisabledBtns = document.querySelectorAll("ボタン[無効]");

// すべてを選択 <input> name 属性が「user」で始まるもの (^= を使用)
let userInputs = document.querySelectorAll("input[name^='user']");

// data-type 属性が「video」とまったく同じであるすべての要素を選択します
let videos = document.querySelectorAll("[data-type='video']");

ランクと兄弟セレクター

要素間の構造的関係を使用して詳細なスクリーニングを行います。

// 子孫セレクター: すべてを選択 <a> #nav 内 (レベルに関係なく)
let navLinks = document.querySelectorAll("#nav a");

//子セレクター: <div> を選択します。 .container直下（第1層のみ）
let directDivs = document.querySelectorAll(".container > div");

// 隣接する兄弟セレクター: 最初の <p> を選択します。  の直後;
let firstParas = document.querySelectorAll("h1 + p");

疑似クラス

これは、リストまたはステータスフィルターを操作する場合に非常に強力です。

// テーブル内の偶数番号の列をすべて選択します (2 番目、4 番目、6 番目...)
let EvenRows = document.querySelectorAll("tr:nth-child(even)");

// 現在チェックされているチェックボックスをすべて選択します
let selectedBoxes = document.querySelectorAll("input[type='checkbox']:checked");

// すべてを選択 <セクション> 「非表示」カテゴリを持たないもの (:not を使用)
letvisibleSections = document.querySelectorAll("section:not(.hidden)");

応用的な組み合わせ例

上記のルールをすべて組み合わせて、複雑なクエリ条件を作成できます。

// すべてを選択  ID「main」、クラス「card」、属性「data-id」を持つコンテナ内
let complexQuery = document.querySelectorAll("#main div.card[データ ID]");

// 最初の <li> を両方選択します。そして最後の <li>
let endpoints = document.querySelectorAll("li:first-child, li:last-child");

JavaScript は要素を見つけてコンテンツを挿入します

目的の要素を見つける

見つけるcurrElem最初にその後<footer>要素をすべて反復処理するのが最も信頼性の高い方法です。<footer>要素と用途Node.compareDocumentPosition()親戚を決定する方法currElem位置。

使用document.querySelectorAll('footer')ページ上のすべてのアイテムを取得する<footer>要素。
それぞれに<footer>要素、呼び出しcurrElem.compareDocumentPosition(footer)。結果のビットマスクに $4$( が含まれる場合NODE_FOLLOWING)、つまり、<footer>ファイル順にcurrElem後。
条件を満たす最初のものが見つかったら<footer>、トラバースを停止します。

コンテンツの挿入

ターゲットを見つける<footer>要素では、最新の DOM インターフェイスを使用できますElement.before()この要素の前に新しいコンテンツを挿入します。

targetFooter.before(contentToAdd);

こちらですcontentToAdd文字列 (テキストノードに変換される) または 1 つ以上の DOM ノード/要素を指定できます。

JavaScript コードの例

function addContentBeforeNextFooter(currElem, contentToAdd) {
  // 1. ファイル内のすべてのフッター要素を取得します
  const allFooters = document.querySelectorAll('footer');

  nextFooter = null にします。

  // 2. currElem の後の最初のフッターを検索します。
  for (const フッターの allFooters) {
    // フッターが currElem (ビットマスク 4) の後にあるかどうかを確認します
    // 4: 引数ノードは参照ノードの後に続きます。
    if (currElem.compareDocumentPosition(フッター) & 4) {
      nextFooter = フッター;
      壊す; // 最初のものを見つけたらすぐに停止します
    }
  }

  // 3. ターゲットのフッターが見つかった場合は、その前にコンテンツを挿入します
  if (nextFooter) {
    nextFooter.before(contentToAdd);
    console.log('currElem 後の最初のフッターの前にコンテンツが正常に挿入されました。');
    nextFooter を返します。
  } それ以外の場合は {
    console.log('currElem の後にフッター要素が見つかりません。');
    null を返します。
  }
}

// 例: 挿入するコンテンツを作成する
const newDiv = document.createElement('div');
newDiv.textContent = 'これは新しく挿入されたコンテンツです。 ';
// currElem が取得した DOM 要素であると仮定します。
// const currElem = document.getElementById('some-id');
// addContentBeforeNextFooter(currElem, newDiv);

JavaScript は、指定された要素の前後にある最初のタグを検索します。

機能の目的とロジック

今回のアップデート機能はfindNearestFooter方向を指定できます ('before'または'after') 最も近いものを見つけるcurrElemの<footer>要素。

**方向判定:** 用途Node.compareDocumentPosition()決定するメソッドのビットマスク<footer>いるcurrElem前でも後でも。
**「後」を探しています** ('after'): ビット $4$ (NODE_FOLLOWING）。
- なぜならdocument.querySelectorAllすでにファイル順にソートされており、条件を満たす最初のファイルが見つかりました<footer>それが目標です。
**「前」を検索** ('before'): ビット $2$ (NODE_PRECEDING）。
- なぜならdocument.querySelectorAll上から下にソートされています。リストを逆方向にたどって、条件を満たす最初のリストを見つける必要があります。<footer>一番近いですcurrElemそれです。

JavaScript コードの例

/**
 * 最初の <footer> を検索します。 currElem の前後に要素を追加し、その前後にコンテンツを挿入します。
 * @param {HTMLElement} currElem - 参照ポイントとして使用される要素。
 * @param {('before'|'after')} direct - 検索する方向 ('before' または 'after')。
 * @param {HTMLElement|string} contentToAdd - 挿入されるコンテンツ (要素または文字列)。
 * @returns {HTMLElement|null} - 見つかったフッター要素。見つからない場合は null。
 */
function findNearestFooter(currElem, 方向, contentToAdd) {
  const allFooters = document.querySelectorAll('フッター');
  最も近いフッター = null にします。

  if (方向 === '後') {
    // 最初のフッターの「後」を検索します
    for (const フッターの allFooters) {
      // 4 (NODE_FOLLOWING): currElem 後のフッター
      if (currElem.compareDocumentPosition(フッター) & 4) {
        最も近いフッター = フッター;
        壊す; // 最初のものを見つけたら停止します。それが最も近いためです。
      }
    }
    
    // コンテンツを挿入します (見つかったフッターの前)
    if (ニアレストフッター) {
      nearestFooter.before(contentToAdd);
      console.log('currElem 後の最初のフッターの前にコンテンツが挿入されました。');
    }

  } else if (方向 === '前') {
    // 「前」の最初のフッターを検索します
    // currElem に最も近いフッターを見つけるには、リストの最後から逆方向にトラバースする必要があります
    for (let i = allFooters.length - 1; i >= 0; i--) {
      const フッター = allFooters[i];
      
      // 2 (NODE_PRECEDING): currElem の前のフッター
      if (currElem.compareDocumentPosition(フッター) & 2) {
        最も近いフッター = フッター;
        壊す; // 最初のものが見つかったら停止します (逆方向トラバーサルの最初のもの)
      }
    }
    
    // コンテンツを挿入します (フッターが見つかった後)
    // 要件は「前」フッターを見つけることなので、通常、コンテンツはフッターの後に挿入されます。
    if (ニアレストフッター) {
      // 以前のリクエスト (フッターの前に挿入) と一貫性を保つために、引き続き前を仮定します。
      // 見つかったフッターの「後」に挿入する必要がある場合は、nearestFooter.after(contentToAdd); を使用します。
      nearestFooter.before(contentToAdd);
      console.log('currElem の前の最初のフッターの前にコンテンツが挿入されました。');
    }
  }

  if (!nearestFooter) {
    console.log(`currElem ${direction === 'before' ? 'before' : 'after'} にフッター要素が見つかりません。`);
  }
  
  最も近いフッターを返します。
}

// 例: currElem と contentToAdd が定義されていると仮定します
// const currElem = document.getElementById('some-reference');
// const newContent = document.createElement('p');
// newContent.textContent = 'これは挿入されたコンテンツです';

// // 呼び出し例: currElem の後の最初のフッターを検索
// findNearestFooter(currElem, 'after', newContent.cloneNode(true));

// // 呼び出し例: currElem の前の最初のフッターを検索
// findNearestFooter(currElem, 'before', newContent.cloneNode(true));

JavaScript は NodeList コレクションを処理します

1. 最初の 5 つの要素を取得します

document.querySelectorAll()返されるのは **NodeList** です。 NodeList は真の JavaScript 配列ではありませんが、length属性と数値インデックスを使用できるため、Array.from()またはスプレッド演算子 (スプレッド演算子)...) を配列に変換して使用します。Array.prototype.slice()初期サブセットを取得するメソッド。

/**
 * querySelectorAll によって返されるコレクション内の最初の 5 つの要素を取得します。
 * @param {string} セレクター - CSS セレクター文字列。
 * @returns {配列} - 最初の 5 つの要素を含む配列 (要素が 5 つ未満の場合は、すべての要素が返されます)。
 */
関数 getFirstFiveElements(セレクター) {
  const nodeList = document.querySelectorAll(selector);

  // 1. NodeList を配列に変換します
  const allElements = Array.from(nodeList);

  // 2. スライス(0, 5) を使用して最初の 5 つの要素を取得します
  const firstFive = allElements.slice(0, 5);

  firstFive を返します。
}

//使用例:
// const topFiveDivs = getFirstFiveElements('div');
// console.log("最初の 5 つの要素:", topFiveDivs);

2. ランダムな要素を 5 つ取得します

コレクションからランダムな要素を取得するには、次の手順を実行する必要があります。

NodeList を配列に変換します。
配列をシャッフルするか、ランダムなインデックスを使用して要素を選択します。
最初の 5 つの要素を取得します。

通常、最も効率的な方法は、配列をランダムに並べ替えて、上位 5 つを取得することです。

/**
 * querySelectorAll によって返されたコレクションからランダムに 5 つの要素を取得します。
 * @param {string} セレクター - CSS セレクター文字列。
 * @returns {配列} - 5 つのランダムな要素を含む配列 (要素が 5 つ未満の場合は、すべての要素が返されます)。
 */
関数 getRandomFiveElements(セレクター) {
  const nodeList = document.querySelectorAll(selector);

  // 1. NodeList を配列に変換します
  allElements = Array.from(nodeList); にします。

  // 要素の総数が 5 未満の場合は、すべての要素を直接返します
  if (allElements.length<= 5) {
    return allElements;
  }
  
  // 2. 實作 Fisher-Yates (或稱 Knuth) 隨機排序法
  // 這是一種高效且公平的隨機排列方法。
  for (let i = allElements.length - 1; i >0;私--) {
    // 0 から i までのランダムなインデックス j を生成します
    const j = Math.floor(Math.random() * (i + 1));
    
    // allElements[i] と allElements[j] を入れ替えます
    [allElements[i], allElements[j]] = [allElements[j], allElements[i]];
  }

  // 3. ランダムにソートされた配列の最初の 5 要素を取得します
  const randomFive = allElements.slice(0, 5);

  ランダムファイブを返します。
}

//使用例:
// const randomFiveImages = getRandomFiveElements('img');
// console.log("ランダムな 5 つの要素:", randomFiveImages);

JavaScript UI

レスポンシブ Web ページ

レスポンシブデザインとは何ですか?

レスポンシブ Web デザインは、Web サイトをさまざまなデバイスの画面サイズと解像度に適応させる Web サイトのデザイン方法です。これは、Web サイトのコンテンツが、携帯電話、タブレット、デスクトップコンピューターのいずれで使用している場合でも、最高のエクスペリエンスを提供するように自動的に調整されることを意味します。

レスポンシブデザインの主要テクノロジー

レスポンシブデザインの鍵となるのは、柔軟なレイアウト、サイズ変更可能な画像、CSS メディアクエリです。これらのテクノロジーにより、Web サイトはデバイスの幅に基づいて要素のサイズを自動的に変更し、配置することができます。

例

CSS でメディアクエリを使用してレイアウトを調整します。次に例を示します。

@media (max-width: 600px) { body { font-size: 14px; } }

レスポンシブデザインのメリット

レスポンシブデザインはユーザーエクスペリエンスを向上させ、開発コストを削減し、SEO効果を高めることができます。レスポンシブ Web ページは、デバイスごとに異なるバージョンを設計する必要がないため、保守が容易です。

JavaScript UI プログラムの保護および認可メカニズム

課題と現実

JavaScript はフロントエンドプログラミング言語であり、そのコードはユーザーのブラウザにダウンロードされて実行されるため、表示やコピーが簡単になります。コードのリバースエンジニアリングを完全に防ぐことはできませんが、保護の強度を高め、試用版と正式版の認証メカニズムを実装するためにさまざまな対策を講じることはできます。

コードを保護する主な方法

コードの難読化

ツールを使用してソースコードを判読できない形式に変換します。

npm install -g javascript-obfuscator
javascript-obfuscator input.js --output output.js

難読化されたコードの例:

var _0x1a2b=["\x68\x65\x6C\x6C\x6F"];console[_0x1a2b[0]]("Hello World!");

コード圧縮（縮小）
圧縮ツールを使用して空白やコメントを削除し、コードの可読性を低下させます。UglifyJS。
動的荷重
重要なロジックをサーバーに保存し、フロントエンドで直接実行するのではなく、API を通じてサービスを提供します。
```
fetch('https://example.com/api').then(response => response.json()).then(data => console.log(data));
```

ブラウザの検出

開発者ツールの使用を防ぐために、ページに検出メカニズムを追加します。

document.addEventListener('keydown', (event) => {
    if (event.key === 'F12' || (event.ctrlKey && event.shiftKey && event.key === 'I')) {
        event.preventDefault();
    }
});

試用版と正式版の導入方法

認可ベースの制御

ユーザー ID を認証コードと照合するなど、トライアルおよび実稼働ロジックを API と組み合わせます。

fetch('https://example.com/verify_license', {
    メソッド: 'POST'、
    ヘッダー: { 'Content-Type': 'application/json' },
    本文: JSON.stringify({ ライセンスキー: userLicenseKey })
}).then(response => response.json()).then(data => {
    if (data.valid) {
        console.log('正式版がアクティブ化されました');
    } それ以外の場合は {
        console.log('体験版限定機能');
    }
});

機能上の制限
UI コンポーネントやデータアクセスの可用性など、試用版の特定の機能を無効にします。

試用期間の確認

ユーザーの最初の使用日に基づいて試用期間のチェックロジックを設定します。

const startDate = localStorage.getItem('startDate') ||新しい日付();
localStorage.setItem('開始日', 開始日);
if (新しい日付() - 新しい日付(開始日) > 14 * 24 * 60 * 60 * 1000) {
    console.log('試用期間は終了しました');
} それ以外の場合は {
    console.log('試用期間中');
}

実際的な考慮事項

コードの閲覧を完全に防ぐことは不可能ですが、解読をより困難にすることは可能です。
難読化、API 検証、サーバー側ロジック、その他の組み合わせを使用して、最大限の保護を提供します。
同じロジックを長期間使用しないように、コードと認可メカニズムを定期的に更新してください。

スクロール位置変更イベントの処理

スクロール位置変更イベントの紹介

Web ページでは、スクロール位置の変化を監視することで、トップに戻るボタンやフローティングナビゲーションバーの表示など、多くの動的な効果を実現できます。このようなイベントのリッスンは、JavaScript を使用して簡単に実装できます。

スクロールイベントを実装するための基本手順

JavaScript では、これは次のように実行できます。window.addEventListener('scroll', handler)スクロールイベントをリッスンするメソッド。スクロール時に発火しますhandler対応する処理を実行する関数。

例：スクロール位置の表示

次の例では、現在のページスクロールの垂直位置を表示し、ページの下部に表示します。

<スクリプト>
    //スクロールイベントハンドラを定義する
    関数 handleScroll() {
        constscrollPosition = window.scrollY; // 垂直スクロール位置を取得する
        document.getElementById("scrollPositionDisplay").textContent = "現在のスクロール位置: " +scrollPosition + " px";
    }

    //スクロールイベントリスナーを追加
    window.addEventListener('scroll', handleScroll);
</スクリプト>

<div id="scrollPositionDisplay" style="位置: 固定; 下: 20px; 左: 20px; 背景色: #eee; パディング: 10px;">
    現在のスクロール位置: 0 ピクセル
</div>

注意事項

スクロールイベントに追加する操作が多すぎるとパフォーマンスに影響を与える可能性があるため、使用することをお勧めします。requestAnimationFrameまたはsetTimeoutスロットリングを実行して、イベントトリガーの頻度を減らします。

結論は

スクロール位置の変更をリッスンするイベントをさまざまな動的効果に使用して、Web ページの対話性を向上させることができます。単純な JavaScript を通じてスクロールイベントを監視して、ユーザーエクスペリエンスを向上させることができます。

<pre> を実行しましょう。要素は新しい行で始まりますが、行全体を占めません

解決策 1: 使用する`width: max-content`

このアプローチにより、新しい行に留まりながら、コンテンツに基づいて要素の幅を自動的に調整できます。

pre {
  display: inline-block;
  width: max-content;
}

効果：

これはテキストです。

これはコードブロックです。

解決策 2: 使用する`float: left`

この方法では、float要素を左にフローティングし、新しい行で開始します。

pre {
  display: inline-block;
  float: left;
}

効果：

これはテキストです。

これはコードブロックです。

解決策 3: 使用する`::before`仮想要素

仮想要素を使用して、適応幅を維持しながら要素を強制的に折り返すことができます。

pre {
  display: inline-block;
}
pre::before {
  content: '';
  display: block;
  clear: both;
}

効果：

これはテキストです。

これはコードブロックです。

解決策 4: 使用する`white-space: pre`

使用white-spaceブロック幅がコンテンツに自然に適応するように、行の折り返し動作を制御します。

pre {
  display: inline-block;
  white-space: pre;
}

効果：

これはテキストです。

これはコードブロックです。

Windows アプリの UI ビューをシミュレートする

プログラムコード

<!DOCTYPE html>
<html lang="ja">
<頭>
  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=device-width、initial-scale=1.0">
  <title>Windows アプリ UI シミュレーション</title>
  <スタイル>
    ボディ{
      フォントファミリー: "Segoe UI"、Tahoma、Geneva、Verdana、サンセリフ;
      マージン: 0;
      パディング: 0;
      背景色: #f0f0f0;
    }

    .app-ウィンドウ {
      幅: 800ピクセル;
      高さ: 500ピクセル;
      マージン: 50px 自動;
      背景: #ffffff;
      境界線: 1px 実線 #ccc;
      境界半径: 8px;
      ボックスシャドウ: 0 4px 10px rgba(0, 0, 0, 0.2);
      オーバーフロー: 非表示;
      ディスプレイ: フレックス;
      フレックス方向: 列;
    }

    .title-bar {
      背景: #0078d7;
      色: #ffffff;
      パディング: 10px 15px;
      ディスプレイ: フレックス;
      コンテンツの位置揃え: 間のスペース;
      整列項目: 中央;
    }

    .title-bar h1 {
      フォントサイズ: 16px;
      マージン: 0;
    }

    .タイトルバー .ボタン {
      ディスプレイ: フレックス;
      ギャップ: 5px;
    }

    .title-bar .buttons ボタン {
      幅: 20ピクセル;
      高さ: 20ピクセル;
      背景: #ffffff;
      境界線: なし。
      境界半径: 50%;
      カーソル: ポインタ;
    }

    .title-bar .buttons ボタン:ホバー {
      背景: #e0e0e0;
    }

    .content {
      フレックス: 1;
      パディング: 15px;
      オーバーフロー: 自動;
    }

    .サイドバー {
      幅: 200ピクセル;
      背景: #f3f3f3;
      ボーダー右: 1px ソリッド #ddd;
      表示: インラインブロック;
      垂直配置: 上;
    }

    .main-content {
      表示: インラインブロック;
      幅: calc(100% - 200px);
      垂直配置: 上;
    }

    .サイドバー ul {
      リストスタイル: なし;
      マージン: 0;
      パディング: 0;
    }

    .サイドバーウリ {
      パディング: 10px 15px;
      カーソル: ポインタ;
      ボーダーボトム: 1px ソリッド #ddd;
    }

    .sidebar ul li:hover {
      背景: #e9e9e9;
    }

    .main-content p {
      マージン: 0;
      パディング: 0;
    }
  </スタイル>
</head>
<本体>
  <div class="アプリウィンドウ">
    <div class="タイトルバー">
      <h1>私の Windows アプリ</h1>
      <div class="ボタン">
        <button title="最小化"></button>
        <button title="最大化"></button>
        <button title="閉じる" style="background: #e81123;"></button>
      </div>
    </div>
    <div class="コンテンツ">
      <div class="サイドバー">
        
          <li onclick="showContent('Home')">ホーム</li>
          <li onclick="showContent('設定')">設定</li>
          <li onclick="showContent('About')">概要</li>
        </ul>
      </div>
      <div class="メインコンテンツ" id="メインコンテンツ">
        <p>サイドバーから項目を選択してコンテンツを表示します。</p>
      </div>
    </div>
  </div>

  <スクリプト>
    関数 showContent(セクション) {
      const コンテンツ = {
        ホーム: '<h2>ホーム</h2><p>ホームページへようこそ。</p>',
        設定: '<h2>設定</h2><p>ここでアプリケーションの設定を調整します。</p>',
        概要: '<h2>概要</h2><p>これは、HTML と JavaScript を使用して作成された模擬 Windows アプリです。</p>',
      };

      document.getElementById('mainContent').innerHTML = コンテンツ[セクション] || '<p>コンテンツが見つかりません。</p>';
    }
  </スクリプト>
</ボディ>
</html>

ステップ

コードを次の名前で保存しますindex.html。
ファイルを開いてブラウザで効果を確認します。
サイドバーの項目をクリックすると、メインコンテンツが切り替わります。

My Windows App

Select an item from the sidebar to view content.

JavaScript UI デザインライブラリ

React

React は、動的で効率的なユーザーインターフェイスを構築するために Facebook によって開発された人気の JavaScript ライブラリです。コンポーネントベースの設計により、開発者は UI コンポーネントを迅速に作成して再利用できます。

Vue.js

Vue.js は、小規模から中規模のアプリケーションの開発に適した軽量で使いやすいフレームワークです。シンプルな API と直感的なデザインにより、UI を迅速に設計できます。

Bootstrap

Bootstrap は、応答性の高い Web サイトを迅速に構築するための、さまざまな既製の UI コンポーネントとレイアウトツールを提供するフロントエンドフレームワークです。

Material-UI

Material-UI は、Google マテリアルデザインに基づいた React UI フレームワークです。多くの美しいコンポーネントが含まれており、高品質のインターフェイスを迅速に設計するのに適しています。

Tailwind CSS

Tailwind は、JavaScript と組み合わせて使用すると、カスタマイズされた UI を迅速に構築できる実用的な CSS フレームワークです。そのアトミックな設計により、開発者はスタイルを柔軟に制御できます。

Foundation

Foundation は、最新の Web デザインを迅速に構築するのに適した、さまざまな UI コンポーネントとグリッドシステムを提供する応答性の高いフロントエンドフレームワークです。

Chakra UI

Chakra UI は、直感的な API と多様なコンポーネントを提供する、シンプルでカスタマイズ可能な React UI フレームワークです。

Quasar Framework

Quasar は、応答性の高いクロスプラットフォームのアプリケーションを迅速に構築できる Vue.js に基づく UI フレームワークです。

反応開発

React は、Meta によって開発された、ユーザーインターフェイスの構築に重点を置いた宣言型 JavaScript ライブラリです。コンポーネント開発と仮想 DOM テクノロジーにより、データベース駆動型アプリケーションの開発効率と保守性が大幅に向上します。

React 開発の中心的な概念

データベースベースのアプリケーションを開発する場合、React はデータフローを処理する最新のツールチェーンと組み合わされることがよくあります。

コンポーネントベース: UI を独立した再利用可能なコードブロックに分解して、複雑なデータ表示ロジックの管理を容易にします。
宣言型 UI (宣言型): 開発者は、さまざまなデータ状態でインターフェイスがどのように見えるかを記述するだけで済み、React が基礎となる DOM の更新を自動的に処理します。
フックシステム: useState や useEffect などのフック関数を通じて、データキャプチャ、ページング、フォーム送信などの非同期操作を簡単に処理します。

主流の IDE の選択

React 開発には任意のプレーンテキストエディターを使用できますが、データベースフィールドのヒントや型チェックと連携するには、業界で最も一般的な選択肢は次のとおりです。

Visual Studio Code (VS Code): 現時点では絶対的な主流です。強力な拡張エコシステム (ES7+ React Snippets、Prettier、Tailwind CSS IntelliSense など) があり、TypeScript の優れたサポートにより、コード内でデータベースタイプを直接プレビューできます。
WebStorm: JetBrains によって開発された無料の IDE。最も強力な組み込み機能があり、React コードのリファクタリング、複雑なプロジェクト構造の操作、Git の統合に非常に安定したエクスペリエンスを提供します。
カーソル：近年普及しているAIを活用したエディター。 VS Code のコアに基づいて、データベースクエリロジックと React コンポーネントの作成を支援する LLM が統合されており、反復的なコードの作成時間を大幅に短縮できます。

推奨される拡張機能と設定

React およびデータベースアプリケーションの開発プロセスを最適化するには、IDE に次のツールをインストールすることをお勧めします。

ESLint: コードの品質基準を強化し、ロジックエラーを削減します。
Prisma / Drizzle 拡張機能: バックエンドでこれらの ORM を使用する場合、構文の強調表示とデータテーブル構造の自動補完を提供できます。
React Developer Tools: React コンポーネントの状態とプロパティの変更をデバッグするためのブラウザ拡張機能。

開発環境構成比較表

ツールの種類	人気の選択肢	コアバリュー
コードエディタ(IDE)	VS Code, WebStorm	効率的なコード記述とタイプヒント
パッケージ管理ツール	npm, pnpm, yarn	React とそのエコシステムの依存関係を管理する
ビルドツール	Vite, Turbopack	非常に高速なホットアップデートとプロジェクトパッケージングのパフォーマンス
デバッガ	React DevTools	コンポーネントのステータスとパフォーマンスのボトルネックをリアルタイムで監視

React データベースビューの例

プログラムコード

import React, { useState, useEffect } from 'react';

関数 DatabaseView() {
  // シミュレートされたデータベース データ
  const [データ、setData] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');

  // データベースからのデータ取得をシミュレートします
  useEffect(() => {
    const fetchData = async () => {
      const モックデータ = [
        { ID: 1、名前: 'John Doe'、電子メール: '[email protected]'、年齢: 28 },
        { id: 2、名前: 'ジェーン スミス'、メール: '[email protected]'、年齢: 34 },
        { ID: 3、名前: 'Alice Brown'、メールアドレス: '[email protected]'、年齢: 25 },
        { ID: 4、名前: 'ボブ ホワイト'、メールアドレス: '[email protected]'、年齢: 40 }、
      ];
      setData(mockData);
    };

    fetchData();
  }、[]);

  //データをフィルタリングする
  const filteredData = data.filter(
    (アイテム) =>
      item.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      item.email.toLowerCase().includes(searchTerm.toLowerCase())
  );

  戻る (
    <div style={{ パディング: '20px', fontFamily: 'Arial、sans-serif' }}>
      <h1>データベースビュー</h1>
      <入力
        type="テキスト"
        placeholder="名前またはメールアドレスで検索"
        値={検索用語}
        onChange={(e) => setSearchTerm(e.target.value)}
        スタイル={{
          marginBottom: '20px',
          パディング: '10px',
          幅: '300px',
          フォントサイズ: '16px',
        }}
      />
      <表
        スタイル={{
          幅: '100%'、
          borderCollapse: '折りたたむ',
          marginTop: '10px',
        }}
      >
        <頭>
          <tr>
            <th style={{ ボーダー: '1px ソリッド #ddd'、パディング: '10px' }}>ID</th>
            <th style={{ border: '1px Solid #ddd'、padding: '10px' }}>名前</th>
            <th style={{ border: '1px Solid #ddd'、padding: '10px' }}>メール</th>
            <th style={{ border: '1pxソリッド#ddd'、padding: '10px' }}>年齢</th>
          </tr>
        </頭>
        <みんな>
          {filteredData.map((item) => (
            <tr key={item.id}>
              <td style={{ ボーダー: '1px ソリッド #ddd'、パディング: '10px' }}>
                {アイテム.id}
              </td>
              <td style={{ ボーダー: '1px ソリッド #ddd'、パディング: '10px' }}>
                {アイテム.名前}
              </td>
              <td style={{ ボーダー: '1px ソリッド #ddd'、パディング: '10px' }}>
                {アイテム.メール}
              </td>
              <td style={{ ボーダー: '1px ソリッド #ddd'、パディング: '10px' }}>
                {アイテム.年齢}
              </td>
            </tr>
          ))}
        </tbody>
      </テーブル>
    </div>
  );
}

デフォルトの DatabaseView をエクスポートします。

ステップ

たとえば次のように React プロジェクトを作成します。create-react-app。
コードを次の名前で保存しますDatabaseView.js。
存在するApp.jsインポートして使用する<DatabaseView />。
開発サーバーを起動して結果を表示します。

React は PHP バックエンドを統合します

1. 動作原理：API通信

React と PHP はコードを直接混合するのではなく、JSON通信用のデータをフォーマットします。 React は使用しますfetchまたはaxiosリクエストを送信すると、PHP は処理後に結果を返します。

2. PHPバックエンドの書き方（例：api.php）

バックエンド PHP コードは HTML を出力しなくなり、代わりに JSON ヘッダーとデータを出力します。

<?php
// クロスオリジンリクエスト (CORS) を許可します
header("アクセス制御許可オリジン: *");
header("Content-Type: application/json; charset=UTF-8");

// データベースからのデータ取得をシミュレートします
$stocks = ["AAPL"、"TSLA"、"NVDA"、"GOOGL"、"MSFT"];
エコー json_encode($stocks);
?>

3. Reactフロントエンドの書き方

React では通常、次のようにします。useEffectフックで PHP API を呼び出します。

import { useEffect, useState } from 'react';

function StockList() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("https://your-server.com/api.php")
      .then(res => res.json())
      .then(json => setData(json));
  }, []);

  return (
    <ul>
      {data.map(item => <li key={item}>{item}</li>)}
    </ul>
  );
}

4. 一般的なテクノロジーの組み合わせ

タイプ	おすすめプラン	説明する
従来のPHP	ネイティブ PHP または CodeIgniter	シンプルなAPIインターフェースに適しています。
モダンなフレーム	Laravel	完全な組み込み API サポートを備えた最も強力な PHP フレームワーク。
ハイブリッドソリューション	Inertia.js	Laravel は、API を作成せずに React とシームレスに統合できます。

5. このアーキテクチャの利点

分業に焦点を当てる:フロントエンドはインターフェイスと状態の処理に重点を置き、バックエンドはセキュリティとデータベースに重点を置きます。
高い柔軟性:将来的に PHP を Python や Node.js に変更したい場合でも、API 形式が変更されない限り、React 側を変更する必要はまったくありません。
パフォーマンス上の利点:データが必要な場合にのみサーバーと通信するため、サーバーの負荷が軽減されます。

導入リマインダー

開発環境では、React は通常、localhost:5173、PHP が実行されている間、localhost:8000、あなたは遭遇するでしょうCORS (クロスオリジンリソース共有)間違い。必ず PHP の先頭に含めてくださいAccess-Control-Allow-Originヘッダ。

VueJS

Vue.js は、ユーザーインターフェイスを構築するための進歩的な JavaScript フレームワークです。他の大きなフレームワークとは異なり、Vue は下から上にレイヤーごとに適用されるように設計されています。コアライブラリはビューレイヤーのみに焦点を当てているため、開始と既存のプロジェクトとの統合が非常に簡単です。

宣言的なレンダリングとコンポーネント化

Vue は HTML テンプレートと JavaScript オブジェクトを組み合わせて、開発者が直感的な方法で Web コンテンツを管理できるようにします。現在、主流の推奨事項は Vue 3 の使用です。Composition API。

<!-- Vue テンプレート -->
<div id="アプリ">
  <h1>{{ メッセージ }}</h1>
  <button @click="reverseMessage">テキストを反転</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<スクリプト>
  const { createApp, ref } = Vue;

  createApp({
    setup() {
      const message = ref("Hello Vue!");
      const reverseMessage = () => {
        message.value = message.value.split('').reverse().join('');
      };
      return { メッセージ、reverseMessage };
    }
  }).mount('#app');
</スクリプト>

よく使用される命令 (ディレクティブ)

説明書は付いていますv-プレフィックスの特別な属性は、データを DOM の動作にバインドする役割を果たします。

命令	使用	例
v-bind (:)	HTML属性をバインドする	`:src="imageUrl"`
v-on (@)	イベントをリッスンする	`@click="doSomething"`
v-if / v-else	条件付きレンダリング	`v-if="isVisible"`
v-for	リストのレンダリング (配列の使用法と同様)	`v-for="item in items"`
v-model	双方向のデータバインディング	`v-model="inputText"`

これまでの知識と組み合わせた応用

前述したものを簡単に統合できますslice()または、ロジックをランダムに選択し、セレクターの概念を通じてコンポーネントを操作します。

＜スクリプト設定＞
'vue' から { ref } をインポートします。

const allStocks = ref(['AAPL', 'TSLA', 'GOOGL', 'MSFT', 'AMZN', 'NVDA', 'META']);
const selectedStocks = ref([]);

// ランダム選択ロジックと組み合わせる
const pickFive = () => {
  const shuffled = [...allStocks.value].sort(() => 0.5 - Math.random());
  selectedStocks.value = shuffled.slice(0, 5);
};
</スクリプト>

<テンプレート>
  <div>
    <button @click="pickFive">ランダムに 5 銘柄を選択</button>
    
      <li v-for="選択された株式の株式" :key="株式">{{ 株式 }}</li>
    </ul>
  </div>
</テンプレート>

なぜ Vue を選ぶのですか?

軽量で効率的:コアのサイズは小さく、高速に動作します。
平坦な学習曲線:基本的な HTML/CSS/JS の基礎があれば、すぐに開発できます。
完全なエコシステム:大規模な開発ニーズを解決するために、Router (ルーティング) と Pinia (状態管理) を正式に提供します。

Web API

意味

Web API (Web Application Programming Interface) は、異なるシステム間でのデータ交換を可能にする HTTP プロトコルに基づくインターフェースで、フロントエンドとバックエンド間の通信によく使用されます。

一般的なフォーマット

JSON（JavaScript Object Notation）
XML（eXtensible Markup Language）

HTTPメソッド

方法	使用
GET	情報を得る
POST	新しい情報を追加する
PUT	アップデート情報
DELETE	データの削除

例

次に、JavaScript を使用して GET リクエストを送信する例を示します。

fetch('https://api.example.com/data')
  .then(response =>response.json())
  .then(data => console.log(data))
  .catch(error => console.error('エラー:', エラー));

使用

フロントエンドとバックエンドの通信
システム統合 (例: サードパーティプラットフォームへの接続)
クロスデバイスのデータ共有 (例: Web、アプリ)

アドバンテージ

標準化された通信フォーマット
クロスプラットフォームのサポート
再利用可能で拡張可能

一般的なアプリケーション

Google Maps API
OpenWeather API
LINE Messaging API

漢字の発音表記を問い合わせる

漢字を入力すると、その文字の発音表記が表示されます。

発音表記結果

まだ問い合わせられていません

この例では、ピンイン API を使用して注音をクエリします。複数の発音がある場合は、すべての結果が表示されます。

Google Cloud

Google Cloud Platform (GCP) は、Google が提供するクラウドコンピューティングサービスプラットフォームであり、Google の社内インフラ上に構築されています。コンピューティングやストレージからビッグデータ分析や人工知能に至るまで、150 以上のサービスを提供し、企業のデジタル変革やアプリケーション開発を支援します。

コアサービスの分類

カテゴリ	主なサービス	主な機能
コンピューティング	Compute Engine	カスタマイズ可能な仮想マシン (VM) を提供します。
コンテナ	GKE / Cloud Run	Kubernetes クラスターをホストするか、サーバーレスコンテナーを実行します。
ストレージ	Cloud Storage	画像やビデオなどの非構造化データを保存するオブジェクトストレージ。
データベース	Cloud SQL / Spanner	MySQL、PostgreSQL、またはグローバルリレーショナルデータベースを提供します。
データ分析（データ）	BigQuery	サーバーレスのエンタープライズレベルのデータウェアハウスで、大規模な SQL クエリをサポートします。
人工知能 (AI)	Vertex AI	Gemini モデル開発ツールを含む統合機械学習プラットフォーム。

技術的な利点

グローバルネットワークアーキテクチャ: Google のプライベートグローバル光ファイバーネットワークを活用して、データ伝送の遅延を短縮します。
データと AI でのリーダー: ビッグデータ処理 (BigQuery) と機械学習フレームワーク (TensorFlow) において業界をリードする地位を築いています。
オープンソースの互換性: Kubernetes などのオープンソースツールに対して最もネイティブなサポートとメンテナンスを提供します。
持続可能性: グローバルデータセンターを 100% 再生可能エネルギーで運営することに取り組んでいます。

基本的な経営体制

Google Cloud のリソース組織は、権限制御とコスト追跡を容易にするために階層システムに従っています。

組織: 通常は会社を代表する最高レベル。
フォルダー: 部門または環境 (開発、本番など) を区別するために使用されます。
プロジェクト: すべてのリソース (VM やデータベースなど) はプロジェクトに属している必要があり、請求の基本単位となります。
ラベル: キーと値のペアをリソースに追加して、コストの割り当てと自動管理を容易にします。

請求と割り当て

Google Cloud は「従量課金制」メカニズムを採用しており、次の利点を提供します。

無料トライアル: 通常、新規ユーザーは 300 ドルのクレジットを受け取ります (90 日間有効)。
永久無料プラン: 特定のサービス (Compute Engine e2-micro、Cloud Functions など) に対して固定の月次割り当てを提供します。
確約利用割引 (CUD): 長期にわたって使用されることが予想されるリソースに対して大幅な割引を提供します。

Google IDログインページ

Google IDログインとは何ですか？

Google ID ログインは、ユーザーが Google アカウントを使用してサードパーティの Web サイトまたはアプリケーションにログインできるようにする、OAuth 2.0 プロトコルに基づく認証方法です。このアプローチにより、ユーザーの利便性が向上するだけでなく、ユーザーは追加のパスワードを覚える必要がないため、セキュリティも強化されます。

ログインに Google ID を選択する理由は何ですか?

利便性：ユーザーは既存の Google アカウントでログインするだけでよく、新しいアカウントを作成する必要はありません。
安全：Google は、2 段階認証やアカウント復元オプションなどの強力なセキュリティを提供しています。
統合管理:ユーザーは 1 つのアカウントで複数のアプリケーションを管理できるため、パスワードを記憶する負担が軽減されます。

自分のウェブページに Google ID ログインを実装するにはどうすればよいですか?

Google Cloud プロジェクトを作成します。に行くGoogle Cloud Console、新しいプロジェクトを作成します。
Google ログイン API を有効にします。プロジェクトで、「Google ログイン」API を有効にし、OAuth 2.0 認証情報を生成します。
認可範囲を設定します。資格情報の設定で、承認されたコールバック URI を追加します。これは、ユーザーがログイン後にリダイレクトされるアドレスです。
フロントエンドの実装:Google が提供する JavaScript ライブラリを使用して、Web ページにログインボタンを作成します。簡単な例を次に示します。


<script src="https://apis.google.com/js/platform.js" async defer></script>
<div class="g_id_signin" data-type="standard" data-shape="rectangular" data-theme="outline" data-text="signin_with" data-size="large" data-logo_alignment="left"></div>

5. ユーザー ID を確認します。

ユーザーがログインボタンをクリックすると、Google による認証が行われます。ログインに成功すると、ユーザーの情報 (電子メール、名前など) がアプリケーションに返され、この情報に基づいて後続の処理を実行できます。

結論は

Google ID を使用してサインインすると、ユーザーはシンプルで安全な方法でサインインでき、複数のアカウントを管理する手間が軽減されます。 Google のログインシステムを統合することで、開発者はユーザーエクスペリエンスを向上させ、より多くのユーザーを Web サイトやアプリケーションに引き付けることができます。

YouTube ビデオを埋め込む

埋め込み方法

YouTube ビデオを埋め込みたい場合は、元のリンクを埋め込み形式に変更してください。

<iframe width="560" height="315" src="https://www.youtube.com/embed/{vid}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

で{vid}は YouTube 動画の ID です。

例

たとえば、ビデオリンクは次のとおりですhttps://www.youtube.com/watch?v=dQw4w9WgXcQの場合、埋め込みコードは次のようになります。

<iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

注意事項

このような埋め込み形式により、X-Frame-Options動画がページ上に正常に表示される程度に制限します。

YouTube の検索結果に埋め込む

概要

HTML内で直接使用可能<iframe>YouTubeビデオを埋め込み、しかし、YouTubeはそうではありません「検索結果ページ」への直接の iframe 埋め込みはサポートされていません、検索結果はインタラクティブなコンテンツ（ログイン、おすすめ、追跡などの機能を含む）であるため、YouTube の埋め込みポリシーによってブロックされます。

---

エラー例

検索結果を埋め込む次の試みは失敗するか、エラーメッセージが表示されます。

<!-- ⚠️ 正しく表示できません -->
<iframe width="800" height="600"
  src="https://www.youtube.com/results?search_query=cat+video">
</iframe>

この方法はブラウザや YouTube によってブロックされ、「iframe での表示が拒否されました」と表示されます。

---

正しい方法: YouTube Data API を使用する

検索結果効果を Web ページに埋め込むには、次を使用します。YouTube Data API v3ビデオを動的にクエリし、JavaScript を使用して結果を自分で表示し、<iframe>。

---

ステップバイステップのデモンストレーション

1. APIキーの申請

に行くGoogle Cloud Console「YouTube Data API v3」を有効にしてAPIキーを取得します。

2. HTML + JavaScript の例

<div>
  <input id="検索" type="text" placeholder="検索キーワード">
  <button onclick="searchYouTube()">検索</button>
</div>

<div id="results" style="display:grid;grid-template-columns:repeat(auto-fill,300px);gap:1em;margin-top:1em;"></div>

<スクリプト>
const API_KEY = "YOUR_API_KEY";

関数 searchYouTube() {
  const q = document.getElementById("検索").value;
  const url = `https://www.googleapis.com/youtube/v3/search?part=snippet&type=video&maxResults=6&q=${encodeURIComponent(q)}&key=${API_KEY}`;

  フェッチ(URL)
    .then(r => r.json())
    .then(データ => {
      const コンテナ = document.getElementById("結果");
      コンテナ.innerHTML = "";
      data.items.forEach(item => {
        const vid = item.id.videoId;
        const title = item.snippet.title;
        const Frame = document.createElement("iframe");
        フレーム幅 = "300";
        フレーム.高さ = "170";
        Frame.src = `https://www.youtube.com/embed/${vid}`;
        Frame.allow = "加速度センサー; 自動再生; クリップボード書き込み; 暗号化メディア; ジャイロスコープ; ピクチャーインピクチャー";
        フレーム.allowFullscreen = true;

        const div = document.createElement("div");
        const caption = document.createElement("p");
        caption.textContent = タイトル;
        caption.style.fontSize = "14px";
        caption.style.fontWeight = "太字";

        div.appendChild(フレーム);
        div.appendChild(キャプション);
        コンテナ.appendChild(div);
      });
    });
}
</スクリプト>

---

実行結果

キーワード（「台湾旅行」など）を入力して「検索」をクリックしてください。
以下に6件の検索結果動画が自動表示されます。
各ビデオは次のように始まります<iframe>埋め込まれており、直接再生できます。

---

アドバンテージ

カスタマイズ可能なスタイルとレイアウト (サムネイル、タイトル、再生ボタンの表示など)。
YouTube の iframe による制限を受けません。
他の検索機能や分類機能と組み合わせることができます。

---

限界

Google APIキーが必要です。
API には 1 日あたりの割り当て制限があります。
YouTube 検索ページ全体を表示することはできません (シミュレートのみ)。

---

拡張機能

「再生」ボタンを追加して、ビデオの下にプレイリストをカスタマイズできます。
利用可能iframe.src = "https://www.youtube.com/embed/" + videoId + "?autoplay=1"自動的に再生します。
APIに応じて返却可能snippet.thumbnailsすぐに埋め込む代わりにサムネイルを表示します。

---

公式文書

Node.js

Node.jsとは

Node.js は、Chrome V8 JavaScript エンジンに基づくサーバー側の実行環境で、開発者が JavaScript を使用してバックエンドアプリケーションを作成できるようにします。

主な特長

非同期かつイベント駆動型のアーキテクチャで、同時実行性の高いアプリケーションに適しています。
シングルスレッドモデルでリソース消費を削減
多数のオープンソースモジュールが利用可能です (npm)
クロスプラットフォームのサポート、Windows、macOS、Linux 上で実行可能

アプリケーションシナリオ

ライブチャットアプリケーション
RESTful APIサーバー
ストリーミングサービス (ビデオ、音楽など)
シングルページアプリケーション (SPA) バックエンドのサポート

よく使用されるモジュール

express：軽量Webアプリケーションフレームワーク
fs: ファイルシステムの操作
http:HTTPサーバーの作成
path: プロセスファイルのパス

サンプルコード

const http = require('http');

const サーバー = http.createServer((req, res) => {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('こんにちは、Node.js!');
});

サーバー.listen(3000, () => {
  console.log('サーバーが起動しました、ポート 3000 をリッスンしています');
});

結論

Node.js は、フロントエンド開発者に統一言語のバックエンド開発環境をもたらし、開発効率を向上させ、最新のネットワークアプリケーションの構築に適しています。

NodeJSのインストール

Node.js をインストールするにはさまざまな方法がありますが、開発者には、公式 Web サイトのインストールファイルを直接ダウンロードするのではなく、バージョン管理ツール (nvm など) を使用することを強くお勧めします。これにより、今後の権限エラーが防止され、バージョン間の切り替えが簡単になります。

1. nvm を使用してインストールする (推奨方法)

これは最も柔軟なアプローチであり、長期的な開発が必要なコンピューター環境に適しています。

Windowsシステム

に行くnvm-windowsダウンロードnvm-setup.exeそしてインストールします。
ターミナル (PowerShell または CMD) を開き、次のように入力します。

nvm install lts //最新の長期サポート バージョン (LTS) をインストールします
nvm use lts // このバージョンを切り替えて有効にする
node -v // インストールが成功したことを確認する

macOS/Linuxシステム

ターミナルを開き、公式のインストールスクリプトを実行します。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

ターミナルを再起動し、次を実行します。

nvm install --lts //LTS バージョンをインストールします
node -v // バージョン番号を表示

2.公式サイトからダウンロード（従来の方法）

簡単なインストールのみが必要で、バージョンを頻繁に変更する予定がない場合は、次の場所に移動できます。Node.js 公式ウェブサイト。

LTS (推奨):最も安定しており、ほとんどの開発者および運用環境に適しています。
Current：最新の機能が含まれていますが、不安定になる可能性があります。

3. インストール項目の確認

Node.js のインストールには、次のコアコンポーネントも含まれます。

コンポーネント名	説明する
Node.js実行環境	サーバー側で JavaScript を実行できるようにするコア。
npm (Node Package Manager)	パッケージ (Vue、React など) をダウンロードするための世界最大のソフトウェアレジストリ。
Corepack	パッケージマネージャーを管理するための新しいツール (Yarn、pnpm など)。

4. テスト環境

インストールが完了したら、次のコマンドを入力して、すべてのツールの準備が完了していることを確認できます。

node -v // ノードのバージョンを表示します (v20.11.0 など)。
npm -v // npm バージョンを表示します (10.2.4 など)

よくあるエラーメッセージ

Windows で実行時に「システムでスクリプトの実行が禁止されているため」というエラーが表示された場合は、PowerShell を管理者として開き、次を実行してください。
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser

NVMバージョン管理ツール

nvm (Node Version Manager) は、Node.js 専用に設計されたバージョン管理ツールです。これにより、同じコンピューター上に複数の異なるバージョンの Node.js をインストールして切り替えることができます。これは、異なる Node バージョンを同時に使用して複数のプロジェクトを維持する必要がある開発者にとって不可欠なツールです。

nvmが必要な理由

フロントエンドプロジェクト (Vue、React など) を開発する場合、さまざまなプロジェクトが特定の Node.js バージョンに依存する場合があります。公式 Web サイトからインストールファイルを直接ダウンロードすると、単一のバージョンしかインストールできませんが、nvm を使用するとバージョンの競合の問題が解決されます。

共通コマンド

以下は、開発中によく使用される nvm 命令です。

// 現在インストールされているすべてのバージョンを表示します
nvml

// クラウドにインストールできるすべての Node.js バージョンを表示します
nvm ls-リモート

// 特定のバージョンをインストールします (例: v18.16.0)
nvm インストール 18.16.0

// 指定したバージョンに切り替える
nvm は 18.16.0 を使用します

// 現在使用しているバージョンを確認する
nvmcurrent

//デフォルトのバージョンを設定します（端末の電源を入れるたびに自動的に使用されるバージョン）
nvm エイリアスのデフォルト 18.16.0

nvm操作プロセス

実行するときnvm usenvm はシステムのPATH環境変数は、Node 実行可能ファイルを指すアドレスを対応するバージョンフォルダーに切り替えることで、簡単な切り替えを実現します。

設置上の注意事項

オペレーティング·システム	推奨バージョン/ツール	述べる
macOS / Linux	nvm (nvm-sh)	最もオリジナルで安定したバージョン。
Windows	nvm-windows	同じチームが開発したものではありませんが、機能はほぼ同じです。インストールするには .exe をダウンロードする必要があります。

ちょっとしたリマインダー

Windows にインストールするnvm-windows以前は、切り替え失敗の原因となる可能性のある環境変数の競合を避けるために、コンピューターに元々インストールされていた Node.js をアンインストールすることを強くお勧めします。

NPM

NPMとは

NPM (Node Package Manager) は、JavaScript コードのライブラリとモジュールを管理するために使用される、Node.js のパッケージ管理ツールです。これにより、開発者はプロジェクトに必要なさまざまなパッケージをインストール、共有、バージョン管理できます。

基本機能

パッケージのインストールとアンインストール: ローカルまたはグローバル JavaScript パッケージをインストールできます。
バージョン管理: 各パッケージのバージョンを管理して、プロジェクトの安定性を確保します。
キットのリリース: 開発者は、独自に開発したモジュールを NPM レジストリにアップロードして、他のユーザーと共有できます。

共通コマンド

npm init: 新しいプロジェクトを初期化して作成しますpackage.jsonファイル。
npm install：インストールpackage.jsonすべての依存パッケージはにリストされています。
npm install [パッケージ名]: 指定されたパッケージをインストールします。
npm アンインストール [パッケージ名]: 指定されたパッケージを削除します。
npm update: インストールされているパッケージを更新します。

package.json

package.jsonこれはプロジェクトのコアファイルであり、プロジェクト名、バージョン、説明、依存パッケージ、その他の情報が記録されます。これは、NPM 管理スイートの基礎です。

一般的な用途

React や Vue などのフロントエンドフレームワークの依存関係管理。
バックエンド Node.js プロジェクトのモジュール統合。
ビルドツール (Webpack、Babel など) のパッケージ管理。

NPMと糸

NPM は最も古く、最も広く使用されている JavaScript パッケージ管理ツールですが、その後、Yarn などの代替ツールが登場し、より高速なインストール速度と並列処理を提供します。どちらもほとんどの Node.js プロジェクトで使用できます。

Vite フロントエンド構築ツール

Vite (フランス語で「高速」の意味) は、非常に高速な開発エクスペリエンスを提供するように設計された新世代のフロントエンド構築ツールです。これは主に、開発サーバー (ネイティブ ES モジュールに基づく) と一連のビルド手順 (ロールアップを使用してパッケージ化される) の 2 つの部分で構成されます。

Viteを選ぶ理由

Vite が登場する前は Webpack が主流でしたが、プロジェクトが大きくなるにつれてコンパイル速度が非常に遅くなってしまいました。 Vite はこの問題点を解決します。

非常に高速な起動:最初にプロジェクト全体をパッケージ化する必要がないため、開発サーバーの起動はほぼ瞬時に行われます。
インスタントホットアップデート (HMR):プロジェクトのサイズに関係なく、コード変更後の再レンダリングは高速です。
ネイティブサポート:TypeScript、JSX、CSS プリプロセッサ (Sass など)、およびネイティブ ES モジュールのデフォルトのサポート。

プロジェクトをすばやく作成する

1 行のコマンドで、Vue、React、Svelte、または純粋な JavaScript プロジェクトの作成をすばやく選択できます。

// npmを使用してプロジェクトを作成します
npm create vite@latest my-vue-app

// フォルダーに移動してパッケージをインストールします
cd my-vue-app
npmインストール

// 開発環境を起動します
npm rundev

Vite実行命令

プロジェクト内package.jsonを実行すると、次の一般的に使用されるスクリプトが表示されます。

命令	使用	説明する
npm run dev	開発サーバーの起動	ローカル開発中に使用され、リアルタイム更新をサポートします。
npm run build	プロジェクトのパッケージ化	高度に最適化された静的ファイルを生成します (dist フォルダーに配置されます)。
npm run preview	パッケージング結果のプレビュー	導入後の実行状態をローカルでシミュレートします。

Vite 設定ファイル (vite.config.js)

Vite の設定は非常に直感的で、通常はプラグイン (プラグイン) を追加したり、サーバープロキシ (プロキシ) を設定したりするために使用されます。

「vite」から {defineConfig} をインポートします
「@vue/plugin-vue」から vue をインポートします

デフォルトのdefineConfigをエクスポート({
  プラグイン: [vue()]、
  サーバー: {
    port: 3000, // 開発サーバーのポート番号を変更します
    open: true // 起動時にブラウザを自動的に開きます
  }
})

従来のツールとの比較

Webpack：完全に機能する「大規模加工工場」のように、稼働前にすべての部品を加工する必要があります。遅いですが、非常に機能的です。
Vite：「Modern Express」と同様に、必要な部分を動的にロードし、非常に高速に、最新のブラウザ標準に準拠します。

Electron

電子とは

Electron は、開発者が HTML、CSS、JavaScript を使用してクロスプラットフォームのデスクトップアプリケーションを構築できるオープンソースフレームワークです。 Chromium と Node.js を組み合わせて、Web テクノロジーがネイティブシステムリソースにアクセスできるようにします。

主な特長

クロスプラットフォームのサポート: Windows、macOS、Linux
フロントエンドと Node.js API を同時に使用する
Web テクノロジーを使用してデスクトップアプリケーションを作成する
活発なコミュニティと広範なパッケージサポート

該当するシナリオ

チャットプログラム（Slackなど）
プログラムエディタ（Visual Studio Codeなど）
デスクトップ Web アプリ
クロスプラットフォームのシステムツール

インストールと初期化

npm install --save-dev electron

最も単純な例

// main.js
const { app, BrowserWindow } = require('electron');

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  win.loadFile('index.html');
}

app.whenReady().then(createWindow);

HTML ホームページ

<!DOCTYPE html>
<html>
  <本体>
    <h1>こんにちは、エレクトロン! </h1>
  </ボディ>
</html>

アプリケーションを開始する

npx electron .

開発提案

メイン処理とレンダリング処理を分離する
IPC を使用してメインプログラムとフロントエンドページ間の通信を行う
梱包ツールなどelectron-builderインストールファイルの生成に使用できます

TypeScript

TypeScript は、Microsoft によって開発された JavaScript のスーパーセットです。これは JavaScript に「型システム」を追加し、最終的にはブラウザーで実行できる純粋な JavaScript にコンパイルされます。これにより、JavaScript は型付けが弱い言語であるため、メンテナンスが難しく、大規模なプロジェクトでエラーが発生しやすいという問題が解決されます。

TypeScript を使用する理由

エラー防止:コンパイラは、コードが実行される前にタイプミスや型の不一致を検出できます。
オートコンプリート:強力な型定義により、IDE (VS Code など) は非常に正確なコードヒントを提供できます。
リファクタリングが簡単:変数または関数の構造が変更されると、影響を受けるすべての場所に警告が表示されます。

基本型タグ

変数の後に追加することで: type型を宣言します。

名前: string = "ジェミニ";
年齢を数値 = 18 とします。
isStudent にしましょう: ブール値 = true;

//配列型
株式を取得します: string[] = ["AAPL", "TSLA", "NVDA"];

// 関数のパラメータと戻り値の型
関数 add(a: 数値, b: 数値): 数値 {
    a + b を返します。
}

インターフェースとカスタムタイプ

これは TypeScript の最も強力な機能の 1 つで、オブジェクトの構造 (Shape) を定義するために使用されます。

インターフェース ユーザー {
    ID: 番号;
    ユーザー名: 文字列;
    電子メール?: 文字列; // 疑問符はオプションの属性を示します
}

const newUser: ユーザー = {
    ID:1、
    ユーザー名：「アレックス」
};

TypeScript と Vite の組み合わせ

Vite などの最新の開発環境は、デフォルトで TypeScript をサポートしています。プロジェクト作成時に選択vue-tsまたはreact-ts、Vite が自動的に処理します。tsconfig.json構成。

// Vite を使用して TS プロジェクトを作成する
npm create vite@latest my-ts-app -- --template vue-ts

以前の JavaScript の概念と組み合わせる

前述のランダム選択関数を TypeScript バージョンに書き直すと、より安全になります。

// 汎用 この関数が任意の型の配列を処理できるようにします
function getRandomElements<T>(arr: T[], count: 数値 = 5): T[] {
    if (配列の長さ<= count) return [...arr];
    
    const tempArray = [...arr];
    const result: T[] = [];
    
    for (let i = 0; i < count; i++) {
        const randomIndex = Math.floor(Math.random() * tempArray.length);
        result.push(tempArray.splice(randomIndex, 1)[0]);
    }
    return result;
}

const randomStocks = getRandomElements<string>(["AAPL", "TSLA", "GOOGL"], 2);

TypeScriptのコンパイルプロセス

TypeScript ファイル (.ts) はブラウザーで直接実行できません。そのライフサイクルは次のとおりです。

ステージ	アクション	道具
執筆期間	型を定義して .ts コードを作成する	VS Code + TS Engine
コンパイル時間	型エラーをチェックし、型タグを削除します。	tsc / Vite / esbuild
実行期間	ブラウザで純粋な .js ファイルを実行する	Browser Engine

ブラウザ拡張機能

基本的な定義

ブラウザ拡張機能は、ブラウザ機能を拡張するために使用される小さなアプリケーションで、通常は HTML、CSS、および JavaScript で記述されます。 Web ページのコンテンツを変更し、ツールバーボタンを追加し、バックグラウンドサービスと対話し、ユーザーエクスペリエンスを向上させることができます。

一般的な用途

Web ページのコンテンツの変更:広告ブロッカーや翻訳ツールなど。
ツールバーの機能:アイコンをクリックして、スクリーンショットの撮影やメモの作成などの特定の操作を実行します。
バックグラウンドで実行:自動同期やリマインダーなどのイベントを継続的に監視します。
サイトと対話します。APIを通じてブラウザを制御したり、指定したWebサイトのデータを読み込んだりできます。

メインファイル

manifest.json：拡張機能名、バージョン、権限、入り口を記述します。
popup.html: ツールバーアイコンをクリックした後に表示されるインターフェース。
background.js: イベントとロジックの処理に使用されるバックグラウンド常駐スクリプト。
content.js: Web ページに挿入されたスクリプトは、DOM を直接操作できます。

サポートされているブラウザ

Google Chrome：マニフェスト V3 を使用するchrome://extensions/負荷。
Microsoft Edge：Chrome と互換性があり、直接インストールまたはロードできます。
Firefox：WebExtensions API を使用し、Chrome と同様の構造を持っています。
Safari：Xcode 開発が必要で、一部の WebExtensions API をサポートします。

開発プロセス

フォルダを作ってそこに入れますmanifest.jsonおよび関連ファイル。
ブラウザ拡張機能のページに移動し、「開発者モード」をオンにします。
「パッケージ化されていないプロジェクトをロード」をクリックし、フォルダーを選択します。
機能をテストし、必要に応じてコードを調整します。

注意事項

ユーザーデータへの過剰なアクセスを避けるために、アクセス許可をリクエストするときは注意してください。
WebExtensions API をサポートするブラウザは異なりますが、詳細は若干異なる場合があります。
一般に公開する場合は、各ブラウザストアの仕様に従ってリストに掲載する必要があります。

Chrome 拡張機能の例

ファイル構造の作成

my-extension/
 ├─ manifest.json
 ├─ popup.html
 ├─ popup.js
 └─ icon.png

manifest.json

{
  "manifest_version": 3、
  "名前": "Hello 拡張機能",
  "バージョン": "1.0",
  "description": "簡単な Chrome 拡張機能の例",
  「アクション」: {
    "default_popup": "popup.html",
    "デフォルトアイコン": {
      "16": "icon.png",
      "48": "アイコン.png",
      "128": "アイコン.png"
    }
  }、
  「権限」: []
}

popup.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
    <style>
      body { width:200px; font-family:sans-serif; text-align:center; }
      button { margin-top:10px; padding:5px 10px; }
    </style>
  </head>
  <body>
    <h3>Hello from Chrome Extension</h3>
    <button id="btn">Click me</button>
    <script src="popup.js"></script>
  </body>
</html>

popup.js

document.getElementById("btn").addEventListener("クリック", () => {
  alert("ボタンがクリックされました!");
});

icon.png

ツールバーに表示する PNG アイコン (推奨サイズ 128x128) を配置します。

荷重延長

オンにするchrome://extensions/
右上隅を開きます開発者モード
クリックパッケージ化されていないプロジェクトをロードする、作成したばかりのフォルダーを選択します
ツールバーにアイコンが表示され、クリックするとポップアップウィンドウが表示されます。

Chrome 拡張機能開発ツール

コア開発言語

Chrome 拡張機能は標準の Web テクノロジーに基づいて構築されているため、そのコア言語は重要な基盤である Web 開発と完全に一致しています。

HTML (HyperText Markup Language): ポップアップウィンドウ (Popup)、オプションページ (Options Page)、その他の構造などの拡張機能のユーザーインターフェイス (UI) を定義するために使用されます。
CSS (Cascading Style Sheets): UI 要素の美化とレイアウトに使用されます。
JavaScript (JS): これは、拡張機能のためのコア論理言語です。コンテンツスクリプト、サービスワーカー/バックグラウンドスクリプト、UI インタラクションを含むすべての動作は、JavaScript (またはそのスーパーセット TypeScript) で記述する必要があります。

高度な言語オプション: TypeScript

TypeScript (TS): 最終的には JavaScript が実行されますが、TypeScript を強くお勧めします。 TS は静的型チェックを提供します。これにより、プログラムコードの保守性が大幅に向上し、大規模または複雑な拡張プロジェクトの実行時エラーが削減されます。最新のフレームワークのほとんどは、TypeScript をネイティブにサポートしています。

フロントエンドフレームワークとライブラリ (オプション)

より複雑で反応的なユーザーインターフェイス (特にポップアップとオプションページ) を構築するには、一般的なフロントエンドフレームワークを使用できます。ただし、機能を拡張するバックグラウンドサービスワーカーで重量のあるフレームワークを使用することは一般に推奨されないことに注意してください。

React / Vue / Svelte / SolidJS: ポップアップウィンドウ (popup.html) やオプションページ (options.html) などの UI インターフェイスの構築に使用され、コンポーネント化と状態管理機能を提供します。
JQuery: 単純な DOM 操作とアニメーションのみが必要な場合、JQuery は依然として軽量で高速な選択肢ですが、現在ではネイティブ JavaScript またはより最新のフレームワークを使用する開発者が増えています。

ツール/キット	使用	利点
Vite / Webpack	バンドラー	複数のコードファイル、スタイル、リソースをブラウザで読み取り可能な形式にパッケージ化して、コードサイズを最適化します。 Vite は、高速なホットモジュール交換 (HMR) で非常に人気があります。
WXT / Plasmo	拡張機能専用フレームワーク	拡張機能開発用に特別に設計されたフレームワークで、マニフェストファイルの生成、TypeScript 構成、ホットリロード、クロスブラウザーサポート (Chrome、Firefox、Edge など) を自動的に処理できるため、開発エクスペリエンスが大幅に簡素化されます。
pnpm / npm / yarn	パッケージ管理ツール	プロジェクトが依存するサードパーティの JavaScript ライブラリとツールを管理します。

公式ツールとデバッグツール

これは、すべての Chrome 拡張機能の開発に不可欠なツールです。

Chrome 開発者ツール (DevTools): これは主要なデバッグツールです。コンテンツスクリプトの検査、Service Worker のデバッグ、ネットワークリクエストの監視、ポップアップまたはオプションページの DOM と CSS の検査を行うことができます。
Manifest V3: 古い Manifest V2 に代わる最新の拡張機能仕様。すべての新しい拡張機能は V3 仕様に準拠する必要があります。具体的には、バックグラウンドスクリプト (Service Worker を使用) とリモートコードの制限に大幅な変更があります。

PHP

PHP情報サイト

PHPマニュアル

php.ini

導入

php.iniこれは PHP の主要な設定ファイルであり、PHP の実行モードと機能に影響を与えます。このファイルを変更することで、エラー出力、メモリ制限、アップロードサイズ、タイムゾーンなどを調整できます。

位置

Windows: 通常は次の場所にありますC:\php\php.iniまたはインストールディレクトリ内。
Linux: 一般的に見られる場所/etc/php/バージョン番号/apache2/php.iniまたは/etc/php/version/cli/php.ini。
利用可能php --iniCLI で使用される構成ファイルを照会します。

使用されるphp.iniの優先順位

PHP が起動すると、次の順序で設定ファイルが検索され、最初に見つかった設定ファイルがロードされます。

使用する場合-cパラメータが指定されている場合、パスが最初にロードされます。php.ini。
環境変数PHPRC指定されたディレクトリ。
PHP がコンパイルされるときのデフォルトのインストールディレクトリ (利用可能)php --iniまたはphpinfo()クエリ）。
一部のオペレーティングシステムでは、次のものも検索できます。/etc/php.iniまたはC:\Windows。

共通設定

;タイムゾーンを設定する
date.timezone = アジア/台北

;エラーを表示
表示エラー = オン
エラー報告 = E_ALL

;アップロードファイルサイズ
アップロード最大ファイルサイズ = 20M
post_max_size = 25M

;メモリ制限
メモリ制限 = 256M

;最大実行時間(秒)
最大実行時間 = 30

設定をロードする

改訂php.iniその後、これを有効にするには、Apache、Nginx、または PHP-FPM を再起動する必要があります。
利用可能phpinfo()現在ロードされているものを確認するphp.iniパスとパラメータ値。

注意事項

異なる実行環境 (Apache、CLI、Nginx) では異なる使用が行われる場合があります。php.ini。
作成可能.user.iniまたは.htaccess一部の設定を上書きします。
エラー出力に関する設定を変更します。開発環境ではオンにし、正式環境ではオフにすることを推奨します。

PHP ブール値

ブール値は、PHP の最も単純なデータ型です。 **true** または **false** の 2 つの状態のみを表すことができます。ブール値は制御プロセスによく使用されます (例:if/else条件判定）や論理演算など。

基本的な使い方

キーワードを使用できますtrueまたはfalseブール変数を定義します。これらのキーワードでは大文字と小文字が区別されません (たとえば、TRUE、Trueまたはtrueは同じです)。ただし、通常は小文字を使用することをお勧めします。trueそしてfalse標準慣行に準拠するため。

$is_active = true;
$is_logged_out = FALSE; // 大文字も使用できますが、お勧めしません。

//条件判断
if ($is_active) {
    echo "<p>ユーザーは現在アクティブです。</p>";
} それ以外の場合は {
    echo "<p>ユーザーは現在非アクティブです。</p>";
}

ブール値変換(キャスト)

PHP がブール値を予期しているが、別のデータ型が与えられている場合 (例:if条件)、PHP は値をブール値に自動的に変換 (または型キャスト) します。

次の値は false とみなされます (Falsy 値と呼ばれます)。

ボリンジャー値false自体。
整数0（ゼロ）。
浮動小数点数0.0（ゼロ）。
空の文字列""または''。
弦"0"(1 桁のゼロを含む文字列)。
空の配列array()または[]。
特殊なタイプNULL。
子ノードを持たない SimpleXML オブジェクト (珍しい)。

ゼロ以外の数値、空でない文字列 ("false"または" "[スペースを含む]) は **true (真)** (真の値と呼ばれます) として扱われます。

型変換例

$a = 0;
$b = "こんにちは";
$c = "";
$d = [1, 2];
$e = null;

echo " 不正な値の例";
if (!$a) { // $a (0) は false に変換されます
    echo "<p>$a (整数 0) は FALSE として扱われます。</p>";
}
if (!$c) { // $c (空の文字列) は false に変換されます
    echo "<p>$c (空の文字列) は FALSE として扱われます。</p>";
}
if (!$e) { // $e (NULL) は false に変換されます
    echo "<p>NULL は FALSE として扱われます。</p>";
}

echo "<h3>真実の値の例</h3>";
if ($b) { // $b ("Hello") は true に変換されます
    echo "<p>$b (空でない文字列) は TRUE として扱われます。</p>";
}
if ($d) { // $d (空でない配列) は true に変換されます
    echo "<p>空でない配列は TRUE として扱われます。</p>";
}

ブール値にキャスト

も使用できます(bool)またはboolval()この関数は変数を明示的にブール値に変換します。これは、デバッグ時や厳密な型チェックが必要な場合に役立ちます。

$f = "0"; // 数値ゼロの文字列
$g = 100; // 正の整数

$f_bool = (ブール)$f;
$g_bool = boolval($g);

echo "<p>文字列 '0' は次のように変換されます: ";
var_dump($f_bool); // 出力: bool(false)
エコー "</p>";

echo "<p>整数 100 は次のように変換されます。 ";
var_dump($g_bool); // 出力: bool(true)
エコー "</p>";

PHP 比較演算子

PHP では、比較演算子は 2 つの値 (数値または文字列) を比較するために使用されます。比較結果に応じて返されますtrueまたはfalse。「緩やかな比較」と「厳密な比較」の違いを理解することが、プログラムのバグを回避する鍵となります。

1. よく使用される比較演算子のリスト

オペレーター	名前	例	true となる条件
`==`	等しい（ゆるい）	`$a == $b`	値が等しい（型比較は自動変換されます）
`===`	一致（厳密）	`$a === $b`	値が同じで型も同じ
`!=` / `<>`	等しくない	`$a != $b`	価値観が等しくない
`!==`	一致しない	`$a !== $b`	値が等しくない、または型が同じではありません
`>`	より大きい	`$a > $b`	$a は $b より大きい
`<`	未満	`$a < $b`	$a は $b 未満です
`>=`	以上	`$a >= $b`	$a は $b 以上です
`<=`	以下	`$a <= $b`	$a は $b 以下です
`<=>`	宇宙船操縦者	`$a <=> $b`	-1、0、または 1 を返します (PHP 7 以降)

2. 詳細な分析: == と === の違い

これは、PHP 開発において最もよく混乱する領域です。 PHP は型付けが弱い言語です。==異なる型の変数を比較する前に同じ型に変換しようとします。===変換はまったく実行されません。

緩やかな比較 (==)

これは、変換後の「値」が等しい限り当てはまります。

$a = 100; // 整数 (int)
$b = "100"; // 文字列 (文字列)

if ($a == $b) {
    エコー「等しい」; // PHP は文字列を数値比較に変換するため、これが実行されます。
}

厳密な比較 (===)

「値」は「データ型」とまったく同じである必要があります。

$a = 100;
$b = "100";

if ($a === $b) {
    エコー「等しい」;
} それ以外の場合は {
    エコー「等しくない」; // int が string と等しくないため、これが実行されます
}

3. 特殊なケース: 三項演算子と結合演算子

簡略構文を使用すると、比較ロジックを扱うときにコードがすっきりします。

三項演算子 (三項): $result = ($a > $b) ? "A ビッグ" : "B ビッグ";
ヌル合体: $name = $input_name ?? "ビジター";(変数が存在しない場合、または null の場合にデフォルト値を提供します)。

安全上のアドバイス:認証や権限チェック、APIの戻り値判定を行う場合は必ず使用してください。===。たとえばチェックしてくださいstrpos()の戻り値0（ポジション）とfalse(見つかりませんでした)==は同じものとして扱われるため、論理エラーが発生します。

PHP配列

PHP では、配列は 1 つの変数に複数の値を格納できる非常に便利な複合データ型です。 PHP の配列は実際には順序付けされたマップです。マップとは、ValueとKeyを対応付けるタイプのことです。

PHP 配列の機能

混合キー:配列のキーは、整数 (インデックス、インデックス) または文字列 (キー、キー名) です。
混合値:配列内の値は、他の配列 (多次元配列を形成する) を含む、任意の PHP データ型にすることができます。
ダイナミックサイズ:配列のサイズは動的であるため、事前にその容量を宣言する必要はありません。

配列型

PHP の配列は、キーのタイプに基づいて、次の 3 つの一般的な形式に大まかに分類できます。

1. インデックス付き配列

連続した整数をキーとして使用します。配列を構築するときにキーを指定しない場合、PHP は次のように開始します。0整数インデックスの自動割り当てを開始します。

//インデックス付き配列を作成する
$fruits = array("リンゴ", "バナナ", "オレンジ");
// または、短縮構文を使用します (PHP 5.4 以降)
$colors = ["赤"、"緑"、"青"];

//要素にアクセスする
エコー $fruits[0]; // 出力: リンゴ
エコー $colors[2]; // 出力: 青

2. 連想配列

文字列をキー（キー名）として使用します。これにより、意味のある名前を使用して配列内の値にアクセスできるようになります。

//連想配列を作成する
$person = 配列(
    "名前" => "シャオミン",
    「年齢」 => 25、
    「都市」 => 「台北」
);

// または省略構文を使用します
$スコア = [
    「数学」 => 90、
    「英語」=> 85
];

//要素にアクセスする
エコー $person["名前"]; // 出力: シャオ・ミン
echo $scores["English"]; // 出力: 85

3. 多次元配列

配列内の値は別の配列になります。これは通常、表形式または階層データを保存するために使用されます。

$学生 = [
    [
        「名前」 => 「アリス」、
        「スコア」 => [「数学」 => 95、「科学」 => 88]
    ]、
    [
        「名前」 => 「ボブ」、
        「スコア」 => [「数学」 => 78、「科学」 => 92]
    ]
];

//要素にアクセスします (Bob の Science スコアにアクセスします)
echo $students[1]["スコア"]["科学"]; // 出力: 92

一般的な配列演算関数

PHP には、配列を操作するための何百もの組み込み関数が用意されています。最も一般的に使用されるもののいくつかを次に示します。

count($array): 配列内の要素の数をカウントします。
print_r($array): 配列の構造と値を人間が判読できる形式で表示します (通常はデバッグに使用されます)。
array_push($array, $value1, ...): 1 つ以上の要素を配列の末尾にプッシュ (追加) します。
array_pop($array): 配列内の最後の要素をポップします (削除して返します)。
array_keys($array): 配列内のすべてのキー名で構成される新しい配列を返します。
array_values($array): 配列内のすべての値で構成される新しい配列を返します。
in_array($needle, $haystack): 配列に特定の値が存在するかどうかを確認します。
array_key_exists($key, $array): 配列内に特定のキーが存在するかどうかを確認します。

配列の反復 (ループ)

よく使われるforeach配列内のすべての要素をループします。

$staff = ["マネージャー" => "張三"、"エンジニア" => "李思"、"デザイナー" => "王呉"];

// 連想配列を走査します (キーと値を取得します)
foreach ($staff as $title => $name) {
    $title をエコーします。 ":" 。 $name 。 "
";
}

// インデックス付き配列を走査します (値のみを取得します)
$items = ["A", "B", "C"];
foreach ($items として $item) {
    $item をエコーします。 "
";
}

PHP 文字列比較では大文字と小文字が区別されません

strcasecmp()

PHPで利用可能strcasecmp()大文字と小文字を区別しない文字列比較を実行します。戻り値が 0 の場合、2 つの文字列が等しいことを意味します。

<?php
$str1 = "こんにちは";
$str2 = "こんにちは";

if (strcasecmp($str1, $str2) === 0) {
    echo "文字列は等しい (大文字と小文字を区別しない)";
} それ以外の場合は {
    echo "文字列が等しくない";
}
?>

str_ireplace()

大文字と小文字を無視して比較または置換を処理するには、次のように使用できます。str_ireplace()。

<?php
$text = "ハローワールド";
$result = str_ireplace("こんにちは", "こんにちは", $text);
$result をエコーします。 // 「こんにちは」を出力します
?>

preg_match() と i 修飾子

正規表現比較を使用する場合、パターンの後に追加できますi大文字と小文字を区別しないようにします。

<?php
if (preg_match("/hello/i", "HeLLo PHP")) {
    echo "比較が成功しました";
}
?>

PHP パス文字列の処理

PHP でファイルパス文字列を処理する場合、手書き文字列のスライス (使用するなど)explode）、オペレーティングシステムが異なるため（Windows では\、Linuxの場合/) の扱いが異なります。 PHP には、パスを安全に逆アセンブルするための強力な関数がいくつか組み込まれています。

1. pathinfo() — 最も多用途なツール

私の一番のおすすめ機能です。パスをディレクトリ名、完全なファイル名、ファイル拡張子、拡張子なしのファイル名に分解できます。

$path = "/var/www/html/assets/img/logo.png";
$info = パス情報($path);

echo $info['ディレクトリ名']; // /var/www/html/assets/img
echo $info['ベース名']; // ロゴ.png
echo $info['extension']; //png
echo $info['ファイル名']; // ロゴ (PHP 5.2 以降をサポート)

2.basename() および dirname() — 部分パスを迅速に取得します

basename：パスの「ファイル名」部分を取得します。
dirname：パスの「ディレクトリ」部分を取得します。

$path = "C:\projects\web\index.php";

エコーベース名($path); // インデックス.php
echo ベース名($path, ".php"); // インデックス (指定されたファイル拡張子を削除)
エコー ディレクトリ名($path); // C:\プロジェクト\web

3. realpath() — 絶対パス (エンティティパス) を取得します。

すべての相対パス記号 (../または./)、オペレーティングシステム上の実際の絶対パスを返します。ファイルが存在しない場合は返されますfalse。

echo realpath("../../config.php");
//次のような出力: /var/www/config.php

---

== 一般的なパス処理シナリオ

シナリオ A: クロスプラットフォームのパス修正

Windows 開発および Linux 展開中にエラーが発生しないようにするには、バックスラッシュをスラッシュに均一に変換することをお勧めします。

$path = "C:\ユーザー\管理者\デスクトップ\test.txt";
$safe_path = str_replace('\\', '/', $path);
// 結果: C:/User/Admin/Desktop/test.txt

シナリオ B: パスを結合する (余分なスラッシュを防ぐため)

手動スプライシング$dir . '/' . $file現れやすい//ダブルスラッシュエラー。使用できますDIRECTORY_SEPARATOR(システム区切り文字) またはrtrim：

$dir = "/var/www/html/";
$file = "index.php";

//ユニバーサルスプライシング方法
$full_path = rtrim($dir, '/\\') 。 DIRECTORY_SYSTEM_SEPARATOR 。 $ファイル;

シナリオ C: ファイル拡張子が正当かどうかを確認する

$allowed = ['jpg', 'png', 'gif'];
$ext = strto lower(pathinfo($filename, PATHINFO_EXTENSION));

if (in_array($ext, $allowed)) {
    echo "正しい形式";
}

---

== 概要比較表

関数	入力例：`/data/web/test.php`	結果を返す
pathinfo()	`pathinfo($p)`	すべての情報を含む連想配列 (Array) を返します。
basename()	`basename($p)`	`test.php`(純粋なファイル名)
dirname()	`dirname($p)`	`/data/web`（目次）
realpath()	`realpath("./test.php")`	`/absolute/path/to/test.php`(実際のパス)

== パスの最上位ディレクトリ(ルートディレクトリ名)を取得します。

パス文字列から正確な最上位ディレクトリ名を取得するには (例:var)、最も堅牢な方法は、最初にパスを変換することです。正規化、そして使用しますexplode()文字列を分解します。通常、パスはスラッシュで始まるため、逆アセンブルされた配列の最初の要素は空であることが多く、特別な処理が必要になります。

方法 1: 爆発を使用して分解する (最も直感的)

これが最も一般的な方法です。ltrim()分割する前に先頭のスラッシュを削除し、配列内の最初の位置が目的の名前であることを確認してください。

$path = "/var/www/html/assets/img/logo.png";

// 1. 爆発によって空の最初の要素が生成されるのを避けるために、最初に左端のスラッシュを削除します。
// 2. スラッシュに従って配列に分割します
$parts =explode('/', ltrim($path, '/'));

// 3. 配列の最初の要素を取得します
$rootDir = $parts[0];

エコー $rootDir; // 出力: var

方法 2: プラットフォーム間でのユニバーサル処理 (最も堅牢)

パスが Windows または Linux からのものである可能性がある場合は、まずスラッシュ形式を統一し、重複するスラッシュを除外することをお勧めします。

$path = "/var/www/html/assets/img/logo.png";

//均一にスラッシュに変換し、空の要素を除外します
$parts = array_values(array_filter(explode('/', $path)));

$rootDir = $parts[0] ?? '';
エコー $rootDir; // 出力: var

方法 3: 「現在の実行環境」の Web ルートを取得する

「特定の文字列」を処理したくないが、Web サーバーのルートフォルダー名を知りたい場合は、次を使用できます。$_SERVER：

// DOCUMENT_ROOT が /var/www/html であると仮定します
$rootParts =explode('/', ltrim($_SERVER['DOCUMENT_ROOT'], '/'));
エコー $rootParts[0]; // 出力: var

---

== プロセス論理比較表

ターゲット	対応コード	結果の例
最上位ディレクトリ	`explode('/', ltrim($path, '/'))[0]`	`var`
前のディレクトリ	`basename(dirname($path))`	`img`
フルディレクトリパス	`dirname($path)`	`/var/www/html/assets/img`

ヒント

パスを操作するときは、パスの先頭にスラッシュがあるかどうかに必ず注意してください。"/var"分割後はこうなります["", "var"]、そして"var"分割後はこうなります["var"]。使用ltrim($path, '/')これにより、先頭にスラッシュがあるかどうかに関係なく、結果の一貫性が保証されます。

PHP にはパスの優先順位が含まれます

優先度	説明する
1.	指定された絶対パスまたは相対パス: ファイルのパスを直接指定すると、PHP はまずこのパスの下でファイルを検索します。
2	実行可能ファイルの現在のディレクトリ: フルパスが指定されていない場合、PHP は最初に実行可能ファイルが存在するディレクトリ内でファイルを検索します。
3	include_path 設定: 実行ディレクトリにファイルが見つからない場合、PHP はチェックを行います。`php.ini`セットする`include_path`パス。
4	ファイルが存在しません: 上記のパスのいずれにもファイルが見つからない場合は、警告が生成されます (`Warning`)、戻ります`false`。

PHP は現在のページ名を取得します

$_SERVER['PHP_SELF'] を使用します

通り抜けることができる$_SERVER['PHP_SELF']現在の実行のファイルパスを取得して使用しますbasenameファイル名を取得:

<?php
$current_page = ベース名($_SERVER['PHP_SELF']);
echo "現在のページ名:" 。 $現在のページ;
?>

$_SERVER['REQUEST_URI'] を使用します

を通して$_SERVER['REQUEST_URI']完全な URL パスを取得して使用しますparse_urlそしてbasename解析ファイル名:

<?php
$url_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$current_page = ベース名($url_path);
echo "現在のページ名:" 。 $現在のページ;
?>

ファイル名と追加パラメータを区別する

URL にクエリパラメータが含まれている場合、それらは個別に処理できます。

<?php
$url_path = parse_url($_SERVER['REQUEST_URI'], PHP_URL_PATH);
$query_string = parse_url($_SERVER['REQUEST_URI'], PHP_URL_QUERY);
$current_page = ベース名($url_path);

echo "ファイル名:" 。 $current_page 。 "
";
echo "クエリパラメータ:" .$query_string;
?>

応用例

現在の URL がhttps://example.com/page.php?id=123：

現在のページ名: page.php
ファイル名：page.php
クエリパラメータ: id=123

PHP は現在のページとエントリページを取得します

PHP では、main.php使用include導入subpage.phpこのとき、実際には2つのファイルが「結合されて実行」されます。「メインプログラムのパス」と「導入ファイルのパス」をそれぞれ取得するには、異なるスーパーグローバル変数と定数を使用する必要があります。

1.「現在のファイル」(subpage.php)のパスを取得します。

ファイルをインポートした人に関係なく、マジック定数を使用してください__FILE__常に「このコードが存在するファイル」のパスを指します。

//subpage.phpに記述する
$thisFilePath = __FILE__;
echo "現在のファイル パス: " 。 $このファイルパス;
//次のような出力: /var/www/html/fullpath/subpage.php

2.「メインプログラム」(main.php)のパスを取得します。

あなたがいるときsubpage.php元のエントリポイントが誰であるかを特定するには、いくつかの方法があります。

方法 A: 使用する$_SERVER['SCRIPT_FILENAME'](最も正確)
この変数には、スクリプトが最初に実行された場所の絶対パスが保存されます。
```
$mainPath = $_SERVER['SCRIPT_FILENAME'];
```
方法 B: 使用するget_included_files()(高度な追跡)
これはインデックス付きの配列を返します0これは最初のエントリファイルです。
```
$allFiles = get_included_files();
$mainPath = $allFiles[0];
```

3. コード統合例

次のコードをsubpage.php中程度のテスト:

<?php
// 1. 導入されるファイル自体へのパス
$sub_page_path = str_replace('\\', '/', __FILE__);

// 2. メイン実行ファイルのパス
$main_page_path = str_replace('\\', '/', $_SERVER['SCRIPT_FILENAME']);

echo "サブページ パス: " 。 $sub_page_path 。 "
";
echo "メイン ページ パス: " 。 $main_page_path 。 "
";
?>

ヒント: str_replace('\\', '/', ...)これは、Windows (バックスラッシュ) と Linux (スラッシュ) のパス形式を統一するためであり、クロスプラットフォーム開発で非常に実用的です。

---

== 拡張機能: URL パスの取得

サーバーのハードドライブパス (フルパス) ではなく、ブラウザ上の URL パスを参照している場合は、次を使用する必要があります。

ターゲット	文法	説明する
URLパス	`$_SERVER['REQUEST_URI']`	として取得`/project/main.php?id=1`URL フラグメント。
スクリプトの仮想パス	`$_SERVER['PHP_SELF']`	Web ページ上のメインプログラムのパスを取得します (パラメータなし)。

パスの使用に関する提案

書き込み$mainTableView__whereclause、異なるメインページに基づいて SQL 条件を切り替える必要がある場合は、次のように記述できます。

if (basename($_SERVER['SCRIPT_FILENAME']) == 'main.php') {
    // main.phpから入った場合のみ実行されるロジック
}

PHP ファイル参照の変数の受け渡し

1. 説明`include`の本質

PHP では、使用しますincludeまたはrequire、次のように考えることができます。ファイルにインポートされたコードを現在のファイルに直接「コピーして貼り付け」ます。。したがって、両方は同じ実行環境 (スコープ) を共有します。

2. よくある質問: 必要ですか?`global`？

それはあなた次第です呼び出し変数の場所：

ケース 1: グローバルに使用される (グローバルは必要ありません)
あなたがそうであればmain.php変数を定義してそこに入れるlibrary.php最外層は追加の宣言なしでそれを直接使用します。
```
// メイン.php
$var1 = "アップル";
「library.php」をインクルードします。

// ライブラリ.php
エコー $var1; // 出力: Apple
```
ケース 2: 関数内でのアクセス (グローバルが必要)
変数がグローバルスコープで定義されている場合、library.php内部関数アクセスするには、それを宣言する必要があります。
```
// library.php
function printVar() {
    global $var1; 
    echo $var1;
}
        
```

3. 訂正:`include_once`渡すパラメータの誤解

特別な注意:PHPinclude_once サポートされていません2 番目の引数 (配列など) を渡します。唯一のパラメータはファイルパス文字列です。

間違った使い方 (❌)	正しい使い方（✅）
`include_once('lib.php', ['v1' => $v1]);`	`$v1 = "Data"; include_once 'lib.php';`
パラメータの数が一致しないため、PHP はエラーを報告します。	変数はインポートされたファイルに自動的に流れます。

---

== 推奨されるベストプラクティス

変数名の競合 (名前空間汚染) を避けるために、「グローバル変数に直接依存する」記述方法を放棄し、代わりに次の 2 つの方法を使用することをお勧めします。

方法 A: 関数パラメータの受け渡し (最も柔軟)

意思library.php純粋なツールボックスとして、関数のみが記述されており、変数はパラメーターを介して渡されます。

// ライブラリ.php
<?php
関数 processStock($name) {
    "処理中の在庫: " を返します。 $name;
}
?>

// メイン.php
<?php
include_once 'library.php';
echo processStock("TSLA"); // 変数を明示的に渡す
?>

方法 B: カテゴリと静的メソッドを使用する (最も専門的)

これは、最新の PHP 開発 (Laravel の概念など) でより一般的であり、コードを効果的に編成できます。

// library.php
class StockTool {
    public static function handle($var) {
        return "Result: " . $var;
    }
}

// main.php
include_once 'library.php';
echo StockTool::handle($var1);

核となる結論

1. 欲しくない存在するincludeステートメントでパラメータを渡すことは無効です。
2. 避けるようにしてください global、使用関数パラメータパスすると、コードのデバッグと保守が容易になります。

PHP変数設定チェック

PHP には、変数が設定 (定義) されているかどうかを確認するための 3 つの主要なコア関数があります。isset()、empty()そしてarray_key_exists()。それらの動作ロジックは若干異なり、間違ったものを選択するとロジックホールが発生する可能性があります。

1. isset() — 最も一般的に使用されるチェック

変数を決定するために使用されます宣言されましたかそしてその価値はそうではありませんNULL。

$var = "ジェミニ";
if (isset($var)) {
    echo "変数は設定されていますが、NULL ではありません";
}

知らせ：変数が次のように設定されている場合$var = null;，isset($var)送り返しますfalse。

2. empty() — 「空の値」かどうかを確認します。

変数かどうかを判断するために使用されます。存在しません、またはその値は次と同等ですfalse。それはと同等です!isset($var) || $var == false。

以下の値となりますempty()とみなされるtrue：

""(空の文字列)
0(整数0)
0.0(浮動小数点数0)
"0"(文字列0)
null
false
[](空の配列)

3. 実際の応用シナリオの提案

文法	チェック対象	シーンに合わせて
`isset($var)`	変数が存在し、NULL ではないかどうか	オプションのフィールドをチェックして、変数が定義されていることを確認します。
`empty($var)`	変数には内容がありますか?	フォームの検証 (メッセージが空でないこと、および数量が 0 でないことを確認します)。
`is_null($var)`	変数が正確に NULL かどうか	変数が意図的に null に設定されているかどうかだけを知りたい場合。

---

== インクルードケースの場合

あなたがいるならmain.php変数を渡すlibrary.php、お勧めしますlibrary.php内部エラー防止チェックを実行します。

書き方A：issetを使ってエラーを防ぐ

// ライブラリ.php
if (isset($var1)) {
    echo "受信した変数は次のとおりです:" 。 $var1;
} それ以外の場合は {
    echo "警告: 変数 var1 はまだ定義されていません。";
}

記述方法 B: Null 結合演算子を使用する (PHP 7+) — 推奨

これはより簡潔な書き方です。変数が設定されていない場合は、デフォルト値が与えられます。

// $var1 が設定されていない場合、$data は「デフォルト値」と等しくなります
$data = $var1 ?? 'デフォルト値';

書き方C：GET/POSTパラメータの確認

フロントエンドから値を渡す場合のチェック方法は以下の通りです。

if (isset($_GET['var1'])) {
    $v1 = $_GET['var1'];
}

ヒント:開発段階では、以下を追加することをお勧めします。error_reporting(E_ALL);、未定義の変数にアクセスすると、PHP が直接吐き出すようにします。Notice: Undefined variable念のため。

PHPのdebug_backtrace()

使用

debug_backtrace()PHPが現在の実行スタック(コールパス)を取得するために使用する関数です。これは、呼び出し元のデバッグと記録によく使用されます。

基本的な使い方


$trace = debug_backtrace();
print_r($trace);

戻り構造の説明

debug_backtrace()呼び出し順に配列された配列が返されます。

[0]:現在のファイル (現在の関数またはインクルードされたファイル)
[1]: 呼び出し元のソース (上位レベルのファイルまたは関数)
[2]、[3]...: 上位呼び出し

共通フィールド

file:ファイルパス
line:プログラム行番号
function：という関数名
class: カテゴリ名(ある場合)
args: パラメータを渡します

例: 前のレイヤーのファイルパスを取得する

関数 showCaller() {
    $trace = デバッグ_バックトレース();
    echo 'From: ' 。 $trace[1]['ファイル'] 。 ' いいえ。 ' 。 $trace[1]['行'] 。 ' ライン';
}

「subpageA.php」をインクルードします。 // subpageA.php 内で showCaller() を呼び出します

例: マルチレベルの包含状況

main.php include subA.php
subA.php include subB.php
subB.php使用：

$trace = デバッグ_バックトレース();
echo '現在のファイル:' 。 $trace[0]['ファイル'] 。 "\n";
echo '前のレベル:' 。 $trace[1]['ファイル'] 。 "\n"; // subA.php
echo 'ホームページ:' 。 $trace[2]['ファイル'] 。 "\n"; // メイン.php

まとめ

debug_backtrace()インクルード/関数呼び出しのソースを表示する最も実用的な方法です
デバッグ、記録、権限チェックなどのニーズに適しています

PHP error_log

使用

error_log()PHP がエラーやカスタムメッセージを記録するために使用する関数です。これは、画面出力に影響を与えることなく、デバッグ、プログラムフローの追跡、例外の記録によく使用されます。

基本的な使い方

<?php
error_log("これはテストメッセージです");
?>

変数の内容を記録する

<?php
$data = ["a" => 1, "b" => 2];
error_log(print_r($data, true));
?>

書き込むファイルを指定します

3 番目のパラメータを使用して、指定したファイルにログを書き込みます。

<?php
error_log("カスタム ファイルの書き込み", 3, "D:/logs/php_debug.log");
?>

記録エラーレベル

エラーレベルと組み合わせて使用すると、原因を簡単に特定できます。

<?php
error_log("[情報] プログラムが実行を開始しました");
error_log("[WARN] パラメータが空です");
error_log("[エラー] データベース接続に失敗しました");
?>

エラーログの場所

実際の書き込み位置は次のようになります。php.iniコントロール：

log_errors = On
error_log = "D:/logs/php_errors.log"

設定されていない場合error_logの場合、デフォルトは次のようになります。

Linux: Web サーバーへの書き込みエラーログ
Windows: システムまたは Apache エラーログに書き込む

例外的な取り扱い

<?php
{を試してください
    throw new Exception("例外が発生しました");
} catch (例外 $e) {
    error_log($e->getMessage());
}
?>

一般的な用途

デバッグ時に画面に出力されません (JSON/API ポストバックの中断を避けるため)
ユーザー操作またはシステムステータスを記録する
正式な環境追跡エラーの原因

注意事項

ログディレクトリに書き込み権限があることを確認してください
機密情報 (パスワード、トークン) の記録を避ける
公式環境は閉鎖を推奨display_errors、使用するだけですerror_log

PHPエラーログ中国語処理

PHP で error_log() を使用して中国語の文字を含む文字列を記録すると、ログファイルは \xe6\xb2\x92 形式などの 16 進エンコードで表示されることがよくあります。これは通常、プログラミングエラーではなく、サーバー (Apache/Nginx) がセキュリティまたは互換性の理由から非 ASCII 文字を強制的にエスケープした結果です。

解決策 1: カスタムログ関数を使用する (最も推奨される)

これが最も簡単で効果的な方法です。ファイルを直接操作すると、サーバーの error_log() フィルタリングメカニズムをバイパスできます。

function write_utf8_log($message) { $log_file = DIR . '/デバッグ.ログ'; $timestamp = date('Y-m-d H:i:s'); // FILE_APPEND モードを使用して生のバイトを書き込む file_put_contents($log_file, "[$timestamp] $message" . PHP_EOL, FILE_APPEND | LOCK_EX); }

// 呼び出し例 $title = $_GET["title"]; write_utf8_log("タイトルの内容: " . $title);

解決策 2: エスケープされていない Unicode エンコードを強制する

error_log() のパス設定を保持したい場合は、json_encode を JSON_UNESCAPED_UNICODE パラメーターとともに使用できます。これにより、PHP は強制的に UTF-8 形式で出力されますが、一部のサーバー環境では依然として 2 回エスケープされる可能性があります。

 $title = $_GET["title"]; error_log('title: ' . json_encode($title, JSON_UNESCAPED_UNICODE));

解決策 3: サーバーのログ構成を変更する

Apache 2.4 以降を使用している場合は、ErrorLogFormat を変更して、ログ出力のエスケープ動作を調整してみてください。

1. Apache 構成ファイル (httpd.conf など) で形式を定義します。

 ErrorLogFormat "[%t] [%l] [pid %P] %F: %E: [client %a] %M"

2. オペレーティングシステムの言語が UTF-8 をサポートしていることを確認します。 Ubuntu で /etc/apache2/envvars を変更します。

 export LANG=en_US.UTF-8 export LC_ALL=en_US.UTF-8

解決策 4: 一時的に表示するためのデコード技術

ログが生成されており、サーバー設定を変更できない場合は、次の方法を使用して元の中国語を表示できます。

端末の即時デコード:sed コマンドで tail を使用して、\x を bash 読み取り可能な形式に変換します。
Base64リレー:まず PHP でbase64_encode($title)を実行して記録し、エスケープによってデータが破損しないように表示時に手動でデコードします。

概要比較

方法	アドバンテージ	欠点がある
カスタムログ (file_put_contents)	100%中国語表示、許可不要	ファイルサイズと権限を手動で管理する必要がある
JSON_UNESCAPED_UNICODE	最小限のコード変更	依然としてサーバーのグローバル構成の影響を受ける
Apache構成を変更する	すべてのシステムログの問題を根本原因から解決します	管理者権限が必要です。サービスを再起動してください

URL クエリ文字列の名前と値を解析する

クエリ文字列を取得する

PHPでは、次のように使用できますparse_url()関数の組み合わせPHP_URL_QUERY完全な URL からクエリ文字列部分を取得するための定数。例えば：

$url = "https://example.com/page.php?name=John&age=30&lang=php";
$query = parse_url($url, PHP_URL_QUERY); // 結果は「name=John&age=30&lang=php」になります。

クエリ文字列をキーと値のペアに解析します

使用parse_str()この関数はクエリ文字列を解析して連想配列にし、名前と値の各セットが自動的にデコードされて配列要素に変換されます。

parse_str($query, $params);

現時点では$params内容は次のとおりです。

[
  "name" => "John",
  "age" => "30",
  "lang" => "php"
]

完全な例

<?php
$url = "https://example.com/page.php?name=John&age=30&lang=php";
$query = parse_url($url, PHP_URL_QUERY);
parse_str($query, $params);

foreach ($params as $key => $value) {
    echo "$key = $value\n";
}
?>

実行結果

name = John
age = 30
lang = php

注意事項

parse_url()クエリ部分のみが取得され、コンテンツは解析されません。
parse_str()URL エンコードを処理できます。%20スペースに変換されます。
2 番目の引数を使用して結果配列を受け取ると、グローバル名前空間への変数の書き込みが回避されます。
次のような配列形式をサポートします。tags[]=php&tags[]=html配列に変換されます。

PHPは特定のタグの内容を取得します

方法 1: JavaScript を使用する

JavaScript を使用する<h1>コンテンツを作成して PHP に送信します。

<!DOCTYPE html>
<html lang="zh-Hant">
<頭>
<メタ文字セット="UTF-8">
<title>上半期コンテンツを取得</title>
<スクリプト>
    関数 sendH1Content() {
        var h1Content = document.querySelector('h1').innerText;
        var xhr = 新しい XMLHttpRequest();
        xhr.open('POST', 'process.php', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send('h1Content=' + encodeURIComponent(h1Content));
    }

    window.onload = sendH1Content;
</スクリプト>
</head>
<本体>
<h1>これはページのタイトルです</h1>
</ボディ>
</html>

PHP側の処理

存在するprocess.phpH1 コンテンツを次の場所で受信して処理します。

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$h1Content = $_POST['h1Content'] ?? '';
// $h1Content をデータベースに保存したり、他の操作を実行したりして処理します。
echo "受信した H1 コンテンツ: " 。 htmlspecialchars($h1Content);
}
?>

方法 2: サーバー側の解析を使用する

HTML ファイルが静的な場合は、PHP を使用してファイルを読み取り、解析できます。

<?php
$htmlContent = file_get_contents('path/to/your/file.html');

preg_match('/(.*?)<\/h1>/', $htmlContent, $matches);
$h1Content = $matches[1] ?? '';

// $h1Content を処理します
echo "H1 コンテンツ: " 。 htmlspecialchars($h1Content);
?>

要約する

最も一般的な方法は、JavaScript を使用してクライアント側でコンテンツを取得し、それを AJAX 経由で処理するために PHP に送信することです。サーバー側の解析は通常、静的コンテンツに使用され、動的に生成されるページには推奨されません。

ホームページの最後のタグの内容を取得します

説明する

PHP 自体は出力 HTML を「直接」読み取ることができないため、abc.phpいくつか印刷されています<h2>、次に含めますsubpage.phpの場合、出力 HTML からコンテンツをキャプチャできません。正しい方法は、 ─ **最後の

の内容を渡すことです。 include する前に abc.php から subpage.php** (変数) に追加すると、subpage.php によって使用されます。

方法 1: 変数を渡す (最良かつ最も一般的に使用される)

<!-- abc.php -->
<h2>AAA</h2>
<h2>BBB</h2>
<h2>lasth2</h2>

<?php
$last_h2 = "lasth2";
include "subpage.php";
?>

<!-- subpage.php -->
<?php
echo "ホームページの最後の H2 は次のとおりです: " . $last_h2;
?>

方法 2: 出力バッファを使用して出力 HTML をキャプチャする (上級)

このメソッドは、「まず abc.php のすべての出力をインターセプト」し、内部の h2 を解析してから、subpage.php をインクルードします。

<!-- abc.php -->
<?php
ob_start(); // バッファリングを開始します
?>

AAA
<h2>BBB</h2>
<h2>last2</h2>

<?php
$html = ob_get_clean(); // すべての出力を取得し、バッファをクリアします

preg_match_all('/(.*?)<\\/h2>/i', $html, $matches);
$last_h2 = 終了($matches[1]); //最後のh2の内容

「subpage.php」をインクルードします。

//最後に元の HTML を出力します。
エコー$html;
?>

方法 3: すべての h2 を配列に入れ、include の前に最後の h2 を指定します。

<!-- abc.php -->
<?php
$h2_list = ["AAA", "BBB", "lasth2"];
?>

<h2>AAA</h2>
<h2>BBB</h2>
<h2>lasth2</h2>

<?php
$last_h2 = end($h2_list);
include "subpage.php";
?>

結論は

PHP は出力 HTML からタグの内容を直接取得できないため、次のようになります。

最良の方法: include の前に「最後の h2 の内容」を変数として subpage.php に渡します。
本当に出力から HTML を取得する必要がある場合 → を使用しますob_start()+ 正規表現の解析

PHP urlencode()

urlencode()文字列をURLエンコード(パーセントエンコード)する関数です。データを URL パラメーターとして渡す場合、これはすべての特殊文字が正しく転送および解析されることを確認するために必要な手順です。

関数の定義と使用法

string urlencode(string $string): string

この関数は、指定された文字列を URL セーフ形式に変換します。マイナス記号 (-)、結論(_）、期間（.) とチルダ (~）外。

置換された特殊文字はパーセント記号 (%) の後に、文字の ASCII 値の 2 桁の 16 進数表現 (スペース $\rightarrow$ など)%20）。

なぜ URL エンコードが必要なのでしょうか?

特殊文字の競合:URL 内の一部の文字 (例:?、&、=、/) には特別な意味があります。これらの文字がパラメータに含まれている場合、ブラウザまたはサーバーが URL の構造を誤解する可能性があります。
非 ASCII 文字の送信:中国語、日本語、韓国語などの非 ASCII 文字は、URL で送信する前に URL セーフなバイトシーケンスにエンコードする必要があります。urlencode()これらの文字は UTF-8 形式でエンコードされます。
スペースの処理: urlencode()スペースをプラス記号に変換します (+）または%20（それでもurlencode()生み出されるのは、+ただし、URL パラメーターでは、どちらの表現もスペースを表します)。

PHPコード例

例 1: 特殊文字と中国語エンコーディング

$data = "$100 & 50% オフの PHP 配列";
$encoded_data = urlencode($data);

echo "<h3>特殊文字と中国語の例</h3>";
echo "<p>元の文字列: " 。 htmlspecialchars($data) 。 "</p>";
echo "<p>エンコード結果: " 。 htmlspecialchars($encoded_data) 。 "</p>";

// 出力結果は同様です: PHP+array と +%24100+%26+50%25+offer
// (中国語の「配列」は %E9%99%A3%E5%88%97 などとしてエンコードされます)

例 2: 完全な API クエリ URL の構築

クエリ文字列を変更する必要があるとします。q_strAPI URL に安全に追加されます。

$api_base = "http://api.example.com/search";
$search_query = "モバイル写真撮影のヒント (2025)";

// クエリ文字列のセキュリティを確保する
$encoded_query = urlencode($search_query);

// 最終的な URL を構築する
$final_url = $api_base 。 "?q_str=" 。 $encoded_query;

echo " 構築 URL の例";
echo "<p>クエリ文字列: " 。 htmlspecialchars($search_query) 。 "</p>";
echo "<p>最終 URL: " 。 htmlspecialchars($final_url) 。 "</p>";

// 最終的な URL は同様です: http://api.example.com/search?q_str=%E6%89%8B%E6%A9%9F%E6%94%9D%E5%BD%B1%E6%8A%80%E5%B7%A7+%282025+%E5%B9%B4%29

rawurlencode() との比較

PHPには別の同様の関数がありますrawurlencode()それらの主な違いはスペースの処理です。

urlencode(): スペースをプラス記号に変換します (+）。これは通常、**GET パラメータ** の値をエンコードするために使用されます (例:?key=valueでvalue一部）。
rawurlencode(): スペースを次のように変換します%20。これは以下と一致しますRFC 3986より制限的な定義。通常、URL の **パスセグメント** (パスセグメント) をエンコードする場合、または正確な情報が必要な場合に使用されます。%20それよりも+時間。

空間処理比較例

$space_test = "これはテストです";

echo "urlencode() と rawurlencode()";
echo "<p>urlencode(): " 。 urlencode($space_test) 。 "</p>"; // 出力: This+is+a+test
echo "<p>rawurlencode(): " 。 rawurlencode($space_test) 。 "</p>"; // 出力: This%20is%20a%20test

PHP出力バッファリング

導入

出力バッファリングは、出力コンテンツをブラウザーにすぐに送信するのではなく、一時的に保存できるようにする PHP の機能です。これにより、開発者は出力前にコンテンツの変更、フォーマット、圧縮などを行うことができます。

よく使われる機能

ob_start(): 出力バッファリングを有効にします。
ob_get_contents(): 現在バッファされているコンテンツを取得します。
ob_end_clean(): バッファリングを終了し、出力せずにクリアします。
ob_end_flush(): バッファリングを終了し、コンテンツを出力します。
ob_get_clean(): コンテンツを取得し、バッファリングを終了します。

例: 出力内容を変更する

<?php
ob_start(); // 出力バッファリングを開始します

「Hello World!」をエコーします。

$content = ob_get_clean(); // バッファの内容を取得してクリアします
エコー strtoupper($content); // 変更された内容を出力します: HELLO WORLD!
?>

例: すべてのコンテンツが出力される前に統一スタイルを挿入する

<?php
ob_start();
register_shutdown_function(関数() {
    $html = ob_get_clean();
    echo "<div class='container'>" 。 $html 。 "</div>";
});
?>

<h1>コンテンツタイトル</h1>
<p>これはコンテンツの段落です。 </p>

使用

HTML 出力全体を自動的に処理します (圧縮、スタイルの折り返しなど)。
エラーメッセージが JSON または XML 出力に干渉するのを防ぐ
後で出力するかどうかを決定する前に、出力を処理または一時的に保存します。
出力と圧縮を結合して Web ページのサイズを削減します

注意事項

バッファリングを使用すると、実際には出力がまだ出力されていないため、echo の後に header() を呼び出すことができます。
複数のバッファの開閉は避けてください。そうしないと混乱が生じます。
バッファが終了していない場合、出力遅延が発生する可能性があります

各 h2 ブロックの右側に画像を自動的に表示する PHP ライブラリ

機能説明

この PHP ライブラリは、ページ出力コンテンツ全体をインターセプトし、各コンテンツを自動的に検出します。<h2>タイトルとその下のブロック、右側に対応する画像を追加します。画像ファイルには順番に名前が付けられますh2-1.jpg、h2-2.jpg...などの場合は、あらかじめ指定された画像ファイルフォルダに配置しておく必要があります。

使用方法

PHP ページの先頭で次のプログラムを参照します (例: saveh2-image-right.php）：

<?php
ob_start();

function add_images_next_to_h2($html) {
    $pattern = '/(<h2.*?>.*?<\/h2>)(.*?)(?=<h2|\z)/is';
    $index = 1;
    return preg_replace_callback($pattern, function($matches) use (&$index) {
        $h2 = $matches[1];
        $body = $matches[2];
        $imgPath = "/images/h2-$index.jpg";
        $imgFile = $_SERVER['DOCUMENT_ROOT'] . $imgPath;

        if (file_exists($imgFile)) {
            $output = "<div style='display: flex; align-items: flex-start; gap: 20px; margin-bottom: 1.5em;'>";
            $output .= "<div style='flex: 1;'>" . $h2 . $body . "</div>";
            $output .= "<img src='$imgPath' style='max-width: 200px; height: auto; border: 1px solid #ccc;'>";
            $output .= "</div>";
        } else {
            $output = $h2 . $body;
        }

        $index++;
        return $output;
    }, $html);
}

register_shutdown_function(function() {
    $html = ob_get_clean();
    echo add_images_next_to_h2($html);
});
?>

図面の準備

対応する画像ファイルに順番に名前を付けて、Web サイトのルートディレクトリに保存します。/images/フォルダー、例:

/images/h2-1.jpg
/images/h2-2.jpg
/images/h2-3.jpg

使用例

<?php include "h2-image-right.php"; ?>

<h2>最初の段落のタイトル</h2>
<p>これが最初の段落の内容です。 </p>

<h2>2 番目の段落タイトル</h2>
<p>これが第 2 段落の内容です。 </p>

注意事項

写真の順番は以下の通りです<h2>表示される順序に従って名前を付けてください。
このメソッドはラップします
～以下の内容これは、純粋なコンテンツページに適したフレックスブロックです。
他の出力バッファの使用と競合する場合は、同じ操作を繰り返さないようにしてください。ob_start()。

トラフィックソースが検索エンジンボットから来ているかどうかを確認する

1. サーバーログを使用する

サーバーログを確認することは、検索エンジンボットを特定する重要な方法です。検索エンジンロボットのユーザーエージェントの例をいくつか示します。

Googlebot: Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)
Bingbot: Mozilla/5.0 (compatible; bingbot/2.0; +http://www.bing.com/bingbot.htm)
Baidu Spider: Mozilla/5.0 (compatible; Baiduspider/2.0; +http://www.baidu.com/search/spider.html)

2. robots.txt ファイルを使用する

ウェブサイトを確認してくださいrobots.txtWeb サイトの特定の部分へのアクセスをどの検索エンジンロボットが許可またはブロックしているかを知ることができるファイル。例えば：

User-agent: * 
Disallow: /private/

3. IPアドレスを決定する

検索エンジンボットは通常、特定の範囲の IP アドレスを持っています。訪問者の IP アドレスがこれらの範囲内にあるかどうかを比較できます。例えば：

GooglebotのIPアドレス範囲
Bingbot の IP アドレス範囲

ツールを使用して、訪問者の IP が実際に検索エンジンからのものであるかどうかを確認できます。

4. バックエンドコードを使用して判断する

以下は、サーバー側で PHP を使用してユーザーエージェントチェックを実行する方法の例です。

<?php
$userAgent = $_SERVER['HTTP_USER_AGENT'];
if (strpos($userAgent, 'Googlebot') !== false) {
    echo "これは Googlebot トラフィックです";
} それ以外の場合は {
    echo "これは検索エンジンのロボット トラフィックではありません";
}
?>

5. 監視および分析ツール

Google Analytics またはその他の Web サイト分析ツールを使用して、トラフィックソースを追跡します。これらのツールは通常、ほとんどのボットトラフィックを自動的にフィルタリングします。

URLのハッシュ値

1. 定義

URL のハッシュ値は、URL 内の「#」記号以降の部分を指し、フラグメント識別子 (Fragment Identifier) とも呼ばれます。通常、ページ内の位置または状態を識別するために使用されます。

2. 目的

Web ページ内のアンカーなどの特定の場所に移動します。
シングルページアプリケーション (SPA) のルートなど、アプリケーションの状態を表します。
フィルター条件やスクロール位置などのユーザーインターフェイスの状態を保存するために使用されます。

3. 例

一般的な URL ハッシュの例をいくつか示します。

アンカーナビゲーション:https://example.com/page#section1
SPA ルーティング:https://example.com/app#/dashboard
ステータスの保存:https://example.com/search#filter=active

4.動作原理

ブラウザは URL 内のハッシュ値を検出しても、データのこの部分をサーバーに送信しません。
ハッシュ値はクライアント (通常は JavaScript) によって処理され、特定のロジックやアクションをトリガーするために使用されます。
HTML では、ハッシュを使用してid。

5. 注意事項

ハッシュは HTTP リクエストには影響しないため、ページをリロードせずに動的に変更できます。
SPA では、アプリケーションはルーティング機能を実装するために手動でハッシュ値を解析して処理する必要があります。
過度に複雑なハッシュ値の設計を避け、構造をシンプルかつ明確に保ちます。

URLのハッシュ値を取得する

JavaScript の例

<スクリプト>
  // URLのハッシュ値を取得する
  const hashValue = window.location.hash.substring(1);

  //ハッシュ値を表示
  console.log("ハッシュ値は:", hashValue);
</スクリプト>

PHP の例

<?php
//モックURL
$url = "http://example.com/page#section2";

// parse_url を使用してハッシュ値を解析します
$parsedUrl = parse_url($url);
$hash = isset($parsedUrl['fragment']) ? $parsedUrl['フラグメント'] : null;

// ハッシュ値を出力する
if ($ハッシュ) {
    echo "ハッシュ値は次のとおりです: " . htmlspecialchars($hash, ENT_QUOTES, 'UTF-8');
} それ以外の場合は {
    echo "URL にハッシュ部分がありません。";
}
?>

注意事項

JavaScript は、次を使用して現在のページのハッシュ値を直接取得できます。window.location.hash。
サーバーは URL のハッシュを直接取得できないため、JavaScript を通じてサーバーに送信する必要があります。

IDを使用せずに特定のタグにリンクする

方法 1: 使用する`name`財産

あまり一般的には使用されませんが、次のことが可能です。name属性を追加する<a>タグを選択し、ターゲットタグの前に配置します。

<a name="特定の見出し 1"></a>
<h3>対象タイトル1</h3>

<a href="#specific-Heading1">特定の見出しへのリンク</a>

効果：

対象タイトル2

特定のタイトルへのリンク

方法 2: 使用する`data-attribute`JavaScriptを使用する場合

次のようなカスタムプロパティを設定することによって、data-anchor、JavaScript を使用してジャンプ動作を処理します。

<h3 data-anchor="Heading-1">ターゲット見出し 3</h3>

<a href="#" onclick="jumpToHeading('Heading-1')">特定の見出しへのリンク</a>

<スクリプト>
  関数jumpToHeading(アンカー) {
    const target = document.querySelector(`[data-anchor="${anchor}"]`);
    if (ターゲット) {
      target.scrollIntoView({ 動作: 'スムーズ' });
    }
  }
</スクリプト>

効果：

目標タイトル4

特定のタイトルへのリンク

方法 3: 使用する`h2`JavaScriptを使用したテキストコンテンツ

検索でh2テキストコンテンツをターゲットに設定します。JavaScript を使用してターゲットを動的にターゲットにします。

<h3>対象タイトル5</h3>

<a href="#" onclick="jumpToText('Target Title')">特定のタイトルへのリンク</a>

<スクリプト>
  関数 JumpToText(テキスト) {
    const target = Array.from(document.querySelectorAll('h2')).find(el => el.textContent === text);
    if (ターゲット) {
      target.scrollIntoView({ 動作: 'スムーズ' });
    }
  }
</スクリプト>

効果：

目標タイトル6

特定の見出しへのリンク - ターゲット見出し 6

cURL

使用

cURL は、HTTP リクエストを送信するために PHP で使用されるライブラリです。 GET、POST、PUT、DELETE などのメソッドをサポートしており、API データアクセスによく使用されます。

基本的な手順

初期化:curl_init()
オプションの設定:curl_setopt()
リクエストを実行します:curl_exec()
接続を閉じます。curl_close()

GETの例

<?php
$url = "https://api.example.com/data";
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
curl_close($ch);
echo $response;
?>

POSTの例

<?php
$url = "https://api.example.com/post";
$data = ['名前' => 'テスト', '電子メール' => '[email protected]'];
$ch =curl_init($url);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query($data));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response =curl_exec($ch);
カール_クローズ($ch);
$response をエコーします。
?>

JSON を含むヘッダーを追加

<?php
$url = "https://api.example.com/json";
$data = json_encode(['id' => 123]);
$ch = curl_init($url);
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
  'Content-Type: application/json',
  'Content-Length: ' . strlen($data)
]);
$response = curl_exec($ch);
curl_close($ch);
echo $response;
?>

共通オプション

CURLOPT_URL：リンク先URLを設定
CURLOPT_RETURNTRANSFER: 結果を返すかどうか(直接出力しない)
CURLOPT_POSTFIELDS：送信情報
CURLOPT_HTTPHEADER: カスタム HTTP ヘッダー

エラー処理

<?php
if(curl_errno($ch)) {
  echo 'エラー:' 。カール_エラー($ch);
}
?>

PHPはネットワークポートを確認します

PHP では、特定のネットワークポート (ポート) がリッスンしているかどうかを確認します。通常は、ローカルサービスまたはリモートサービスが実行中であり、接続を受け入れているかどうかを確認します。最も一般的な方法は、ソケット関連の関数を使用して TCP 接続の確立を試みることです。

fsockopen() 関数を使用します (リモート検査に推奨)

fsockopen()この関数は、ネットワーク接続または Unix ドメインソケット接続を開くために使用されます。接続が成功した場合は、ポートがリッスンしていることを意味します。接続が失敗した場合は、通常、ポートが開いていないか、ファイアウォールによってブロックされていることを意味します。

PHPコード例

/**
 * 指定された IP/ホスト名のポートがリッスンしているかどうかを確認します
 *
 * @param string $host 確認するホスト名またはIPアドレス
 * @param int $port 確認するポート番号
 * @param int $timeout 接続タイムアウト秒数
 * @return bool 接続が成功した場合は true を返します。それ以外の場合は false を返します
 */
関数 is_port_listening(string $host, int $port, int $timeout = 2): bool {
    // ソケット接続を確立します。 @ 記号は、接続エラー メッセージを抑制するために使用されます。
    $connection = @fsockopen($host, $port, $errno, $errstr, $timeout);

    if (is_resource($connection)) {
        // $connection がリソース タイプの場合、接続が成功したことを意味します
        fclose($connection); // 成功したらすぐに接続を閉じます
        true を返します。
    } それ以外の場合は {
        // 接続に失敗しました。ポートが開いていないか、サービスが実行されていない可能性があります。
        // オプション: デバッグ用に $errstr と $errno をここに出力できます
        // echo "接続に失敗しました: $errstr ($errno)<br>";
        false を返します。
    }
}

// --- テスト例 ---
$remote_host = 'www.google.com';
$リモートポート = 80; // Google の HTTP ポートを確認する

$local_host = '127.0.0.1';
$local_web_port = 80; // ローカル Web サーバーのポートを確認します
$unoccupied_port = 65432; // このポートは使用されていないものとします

echo "<h3>ポート監視チェック結果</h3>";

// リモートサービスを確認する
if (is_port_listening($remote_host, $remote_port)) {
    echo "<p>{$remote_host}:{$remote_port} がリッスンしています (接続は成功しました)。</p>";
} それ以外の場合は {
    echo "<p>{$remote_host}:{$remote_port} が開いていないか、接続に失敗しました。</p>";
}

// ローカル Web サーバーを確認します (Web サーバーがポート 80 で実行されている場合)
if (is_port_listening($local_host, $local_web_port)) {
    echo "<p>{$local_host}:{$local_web_port} がリッスンしています (Web サーバーが実行中)。</p>";
} それ以外の場合は {
    echo "<p>{$local_host}:{$local_web_port} はリッスンしていません。</p>";
}

// 空いているポートを確認する
if (is_port_listening($local_host, $unoccupied_port)) {
    echo "<p>{$local_host}:{$unoccupied_port} がリッスンしています。</p>";
} それ以外の場合は {
    echo "<p>{$local_host}:{$unoccupied_port} はリッスンしていません (予期された結果)。</p>";
}

ソケットライブラリの使用 (下位レベルのコントロール)

下位レベルのソケット操作 (オプションの設定、ノンブロッキングモードなど) が必要な場合は、PHP のソケット関数ライブラリを使用できます (有効にする必要があります)。php_sockets拡大）。

function is_port_listening_socket(string $host, int $port): bool {
    // TCP/IP ソケットを作成します
    $socket = @socket_create(AF_INET, SOCK_STREAM, SOL_TCP);

    if ($socket === false) {
        // エコー "socket_create に失敗しました: " .ソケット_strerror(socket_last_error()) 。 "
";
        false を返します。
    }

    //接続してみる
    //socket_connect() は指定されたホストとポート上で接続を確立しようとします
    $result = @socket_connect($socket, $host, $port);

    ソケットクローズ($ソケット);

    return ($result !== false);
}

注意事項と制限事項

接続タイムアウト (タイムアウト):必ず合理的な値を設定してください$timeout値 (例: 2 ～ 5 秒)。この設定を行わないと、ターゲットホストに到達できない場合、スクリプトが長時間ブロックされる可能性があります。
ファイアウォール:リモートポートを確認すると、サービスが実行中であっても、ターゲットサーバーのファイアウォールが接続をブロックしている場合、fsockopen()それでも失敗します。
`allow_url_fopen`： fsockopen()通常、関数は PHP 構成ファイルには含まれません。allow_url_fopenこのコマンドはネットワークソケット上で直接動作するため、このコマンドには制限があります。
ローカルポートチェック:ネイティブサービスがリッスンしているかどうかを確認するには、通常、次のようにします。$hostに設定127.0.0.1またはlocalhost。

PHP は Web API の結果を取得します

PHP では、Web API の結果を取得して JSON を解析するには、通常、次を使用します。file_get_contents()または cURL ライブラリを使用して HTTP リクエストを送信し、使用しますjson_decode()返された JSON 文字列を解析する関数。

file_get_contents() を使用して API 結果を取得する

単純な GET リクエストの場合、file_get_contents()は簡単な方法です。ただし、API が特定の HTTP ヘッダーまたはより複雑なリクエストを必要とする場合は、cURL の方が適しています。

PHPコード例（GETリクエスト）

$api_url = 'https://jsonplaceholder.typicode.com/posts/1'; // サンプル API URL

// APIから返されるコンテンツを取得します（JSON形式の文字列）
$json_data = @file_get_contents($api_url);

if ($json_data === FALSE) {
    echo "API データを取得できないか、API リクエストが失敗しました。";
} それ以外の場合は {
    // JSON 文字列を解析して PHP 配列またはオブジェクトに変換します
    // 2 番目のパラメータは true に設定され、解析されて連想配列になります。
    // オブジェクトに解析するには false (デフォルト) に設定します。
    $data = json_decode($json_data, true);

    if ($data === null && json_last_error() !== JSON_ERROR_NONE) {
        echo "JSON 解析エラー:" .json_last_error_msg();
    } それ以外の場合は {
        echo "<h3>API 戻りデータ (関連付けられた配列)</h3>";
        //例: データ内の特定のフィールドにアクセスする
        echo "<p>title (タイトル): " . htmlspecialchars($data['title']) 。 "</p>";
        echo "<p>コンテンツ (本文): " 。 htmlspecialchars($data['body']) 。 "</p>";

        // 検査用に完全な構造を出力します
        echo "<h4>完全なデータ構造 (print_r)</h4>";
        echo "<pre>";
        print_r($data);
        echo "</pre>";
    }
}

cURL を使用して API 結果を取得します (複雑なリクエストに適しています)

cURL は、リクエストメソッド (POST、PUT、DELETE)、ヘッダー、タイムアウトなどの設定など、より詳細な制御を提供します。

PHP コード例 (cURL GET リクエスト)

$api_url = 'https://jsonplaceholder.typicode.com/posts/2';

// cURL セッションを初期化します
$ch =curl_init();

// cURL オプションを設定します
curl_setopt($ch, CURLOPT_URL, $api_url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); // 結果を直接出力するのではなく、文字列として返します。

// cURL セッションを実行し、結果を取得します
$json_data =curl_exec($ch);

// エラーが発生したかどうかを確認する
if (curl_errno($ch)) {
    echo "cURL エラー:" 。カール_エラー($ch);
    $data = null;
} それ以外の場合は {
    // JSONを解析する
    $data = json_decode($json_data, true);
    
    if ($data === null && json_last_error() !== JSON_ERROR_NONE) {
        echo "JSON 解析エラー:" .json_last_error_msg();
    }
}

// cURL セッションを閉じる
カール_クローズ($ch);

if ($data !== null) {
    echo "<h3>API 戻りデータ (cURL の例)</h3>";
    echo "<p>title (タイトル): " . htmlspecialchars($data['title']) 。 "</p>";
    echo "<p>ユーザー ID (userId): " 。 htmlspecialchars($data['userId']) 。 "</p>";
}

JSON解析関数: json_decode()

json_decode($json_string, $associative)

$json_string: 解析対象の JSON 形式の文字列。
$associative: ボリンジャー値。もしのためならtrue、関連付けられた配列を返します。もしfalse(デフォルト)、オブジェクトが返されます。

PHP exec() の非同期実行

PHPexec()機能とshell_exec()、system()同様に、これは基本的に同期ブロッキングです。つまり、PHP スクリプトは外部コマンドが完了するのを待ってから続行します。メインの PHP プログラムをブロックせずに外部コマンドを実行するには (「非同期」または「バックグラウンド実行」を実装)、シェル自体の特性を利用してコマンドを分離する必要があります。

非同期 exec() 実装の中心原則

ノンブロッキング実行を実現する鍵は、いつ渡すかです。exec()特定のシェル構文をコマンド文字列に追加します。

**バックグラウンド実行シンボル&:** これは、コマンドをバックグラウンド実行にプッシュするためのコアシンボルです。
**出力リダイレクト> /dev/null 2>&1:** これは、PHP のブロックを防ぐための鍵です。標準出力 (STDOUT) と標準エラー出力 (STDERR) の両方を空のデバイスにリダイレクトします。/dev/null。リダイレクトを使用しない場合でも、&シンボルを使用しても、PHP の一部のバージョンでは I/O ストリームが閉じるまで待機し、偽のブロックが発生する可能性があります。
**プロセスの切り離しnohup(オプションですが推奨): ** Linux/Unix システムでは、次を使用します。nohupこれにより、HTTP リクエストが終了したときやユーザーがブラウザを閉じたときなど、Web サーバーが終了した後もプロセスが実行し続けることが保証されます。

PHP コード例 (Linux/Unix 系システム)

例 1: 基本的な非同期実行

この例は、HTTP リクエストの完了後に実行する必要のない短期間のバックグラウンドタスクに適しています。

$command_to_run = 'php /path/to/my_long_task.php arg1 arg2';

// ノンブロッキングコマンドを組み合わせる
// 1. コマンド自体
// 2. STDOUT を /dev/null に送信します
// 3. STDERR (2) を STDOUT (&1) に送信します
// 4. & 記号を使用して背景をプッシュします
$async_command = $command_to_run 。 ' > /dev/null 2>&1 &';

$output = [];
$return_var = 0;

//ノンブロッキングコマンドを実行する
exec($async_command, $output, $return_var);

echo "<h3>非同期実行結果(exec)</h3>";
echo "<p>コマンドはバックグラウンド実行に送信されました。</p>";
echo "<p>PHP スクリプトはすぐに実行を継続し、外部スクリプトが完了するのを待ちません。</p>";
echo "<p>exec() によって返される出力配列 (\$output) は、ほとんど空になります。</p>";

例 2: nohup を使用してプロセスを分離する (長いタスクに推奨)

この例では、nohupバックグラウンドタスクが PHP Web サーバーの親プロセスから完全に分離されるようにするため、Web サーバーがシャットダウンされてもタスクは実行され続けます。

$command_to_run = '/usr/bin/python3 /path/to/process_data.py';
$log_file = '/var/log/my_app/task_log.log'; // 特殊なログファイル

// シェルインジェクション攻撃を防ぐためにコマンドパラメータが適切にエスケープされていることを確認します
$safe_command = エスケープシェルcmd($command_to_run);

// 出力とエラー出力を /dev/null ではなくログ ファイルに直接出力します
$detached_command = 'nohup' 。 $safe_command 。 ' >> ' 。エスケープシェルラーグ($log_file) 。 ' 2>&1 &';

exec($detached_command);

echo "<h3>nohup を使用してプロセスを切断します</h3>";
echo "<p>コマンドは nohup を使用して開始され、出力はログ ファイルに送られました。</p>";
echo "<p>タスクは完了するまでバックグラウンドで実行され続けます。</p>";

セキュリティに関する考慮事項: コマンドとパラメータのエスケープ

外部コマンドを実行する場合、セキュリティは最も重要な考慮事項です。 **決して**サニタイズされていない、またはエスケープされたユーザー入力をexec()または他のシェル実行可能関数。 PHP は、処理を支援する 2 つの関数を提供します。

escapeshellcmd($command): **コマンド文字列全体**をエスケープして、悪意のあるユーザーが複数のコマンドを挿入できないようにします。
escapeshellarg($arg):**単一パラメータ** をエスケープして、パラメータが単一の文字列として扱われるようにします。

$user_input = "テスト; rm -rf /"; // 悪意のある可能性のある入力

// エラー: 危険な行為です
// exec('my_script.sh ' . $user_input);

// 正解: 安全なアプローチ
$safe_input = エスケープシェルラーグ($user_input);
$safe_command = 'my_script.sh' 。 $safe_input;
//実行結果：my_script.sh 'test; rm -rf /' (単一パラメータとして扱われます)

PHP が Python を呼び出す

コンセプト

PHP は、システムコマンドを通じて Python プログラムを実行し、出力を取得できます。一般的に使用される方法は次のとおりです。

exec()
shell_exec()
passthru()
proc_open()（高度な）

基本的な使用法:shell_exec

<?php
$cmd = "python3 myscript.py 123";
$output = shell_exec($cmd);
echo $output;
?>

パラメータを渡す

<?php
$arg1 = 100;
$arg2 = "hello";

$cmd = "python3 script.py " . escapeshellarg($arg1) . " " . escapeshellarg($arg2);
$result = shell_exec($cmd);

echo $result;
?>

Python の例

#script.py
インポートシステム
a = sys.argv[1]
b = sys.argv[2]
print(f"入力パラメータ: {a}, {b}")

Python の複数行出力を取得します: exec

<?php
exec("python3 test.py", $output_lines, $status);

echo "<pre>";
print_r($output_lines);
echo "</pre>";
?>

上級: proc_open を使用して stdin / stdout を制御する

<?php
$記述子 = [
    0 => [「パイプ」、「r」]、
    1 => [「パイプ」、「w」]、
    2 => [「パイプ」、「w」]
];

$process = proc_open("python3 calc.py", $descriptor, $pipes);

if (is_resource($process)) {
    fwrite($pipes[0], "50\n");
    fclose($pipes[0]);

    $output = stream_get_contents($pipes[1]);
    fclose($pipes[1]);

    $error = stream_get_contents($pipes[2]);
    fclose($pipes[2]);

    proc_close($process);

    echo "出力: $output<br>";
    echo "エラー: $error
";
}
?>

注意事項

PHP は python3 を見つけることができる必要があり、次のように絶対パスを設定できます。/usr/bin/python3またはC:\\Python39\\python.exe
使用escapeshellarg()コマンドインジェクションを防止する
Windows システムでは、パスに二重引用符を追加することに注意してください。
長期的な操作が必要な場合は、キューまたはバックグラウンド実行 (systemd / スーパーバイザーなど) を使用することをお勧めします。

提案

必要な場合:

PHP は Python を呼び出して AI/ML 計算を実行します
双方向通信（PHP ↔ Python）
PHPクエリ用の常駐Pythonプログラム

PHP が HTTP 経由で Python を呼び出せるようにするには、Flask API または FastAPI を検討してください (最も安定したアプローチ)。

PHP-GTK

導入

PHP-GTK は、開発者が PHP を使用してデスクトップアプリケーション (GUI) を作成できるようにする PHP の拡張機能です。これは GTK+ グラフィックスツールライブラリに基づいており、PHP を単純な Web バックエンド言語からデスクトップアプリケーション開発まで拡張します。

特徴

PHP を使用して、クロスプラットフォームのデスクトップアプリケーションを作成します。
ボタン、テキストボックス、ドロップダウンメニュー、テーブルなどの GUI コンポーネントをサポートします。
データベースアクセス、文字列処理、ネットワーク関数など、PHP の既存の関数ライブラリと組み合わせることができます。
クロスプラットフォームで、Windows、Linux (GTK+ 環境) をサポートします。

設置方法

Windows: PHP-GTK バイナリパッケージをダウンロードし、解凍して使用します。
Linux: GTK+ をインストールしてから、ソースコードから PHP-GTK をコンパイルする必要があります。
インストールの確認：実行php -m読み込みの確認php-gtkモッド。

サンプルプログラム

<?php
if (!class_exists('gtk')) {
    die("PHP-GTK がインストールされていません\n");
}

$window = new GtkWindow();
$window->set_title("PHP-GTK の例");
$window->set_size_request(300, 200);
$window->connect_simple('destroy', array('Gtk', 'main_quit'));

$button = new GtkButton("クリックしてください");
$button->connect_simple('クリック', function() {
    echo "ボタンがクリックされました!\n";
});

$window->add($button);
$window->show_all();

Gtk::main();
?>

限界

PHP-GTK は長年にわたって更新が停止されており、現在はメンテナンスが少ない状態です。
大規模または高性能のデスクトップアプリケーションには適していません。
GTK+ 2 のみをサポートし、GTK+ 3 や 4 はサポートしません。

該当する状況

GUI とイベント駆動型プログラミングを学びます。
データベース管理ガジェットなどのシンプルなデスクトップツール。
PHP 構文を使用してデスクトップアプリケーションを迅速に開発したい。

PHP GUI 開発の代替手段

現状

PHP-GTK は長年更新されておらず、メンテナンスが少なく、古いバージョンの GTK+ しかサポートしていないため、最新のデスクトップアプリケーションの開発には適していません。 PHP でデスクトップ GUI を開発する場合は、次の代替手段を検討することをお勧めします。

代替

Electron + PHP使用Electron(Chromium および Node.js に基づく) デスクトップ GUI を作成しても、バックエンドは引き続き PHP プログラムを呼び出すことができます。これにより、HTML/CSS/JavaScript を使用して美しいクロスプラットフォームアプリケーションを構築し、API 経由で PHP と通信できるようになります。
NW.jsElectron と同様に、デスクトップアプリケーションは Web テクノロジーを使用して開発され、バックエンドコンピューティングとして PHP と組み合わせることができます。
PHP + Web ブラウザ (ローカル Web アプリ)デスクトップ上で PHP 組み込みサーバーを起動します (php -S localhost:8000）、次に、ブラウザを使用してページを開くと、デスクトップアプリケーションのように表示されます。 PWA (Progressive Web App) を使用すると、デスクトップアイコンとしてインストールすることもできます。
他の言語用の GUI フレームワークターゲットが PHP 自体ではなくデスクトップアプリケーションである場合は、次のことを考慮してください。
- Python + PyQt / Tkinter / Kivy
- Java + JavaFX / Swing
- C# + WinForms / WPF / .NET MAUI
これらは PHP-GTK よりも安定しており、継続的に維持されます。

提案

PHP を使用することにこだわる場合、最適な解決策は次のとおりです。Electron/NW.js + PHP、フロントエンドは Web テクノロジーで構築されており、バックエンドは引き続き PHP を使用するため、クロスプラットフォームで最新のものになっています。
他の言語が受け入れられる場合は、代わりに Python または C# を使用することをお勧めします。これにより、デスクトップ開発分野でのサポートが向上します。

単一ページのアプリケーション

シングルページアプリケーション (SPA) は、サーバーから新しいページ全体をロードするのではなく、現在のページを動的に書き換えることによってユーザーと対話する Web アプリケーションまたは Web サイトモデルです。このアプローチにより、ページ切り替え間の中断が回避され、ユーザーエクスペリエンスがデスクトップアプリケーションに近づきます。

SPA と従来のマルチページアプリケーション (MPA) の違い

従来のモデルでは、リンクがクリックされるたびに、サーバーから新しい HTML ファイルが要求されます。 SPA では、必要な HTML、CSS、JavaScript は最初の読み込み時にのみダウンロードされ、その後のデータ交換は AJAX または Fetch API を通じて完了します。

特性	SPA (シングルページアプリケーション)	MPA (複数ページアプリケーション)
ページの読み込み	1 回のみ読み込み、部分的に更新	操作ごとにページ全体をリロードする
ユーザーエクスペリエンス	スムーズでジャンプ感なし	明らかに白い画面と待機感あり
サーバー負荷	下位 (JSON データのみを送信)	高 (HTML を毎回レンダリングする必要がある)
SEOの最適化	より困難で追加の処理が必要になる	簡単かつ自然に検索エンジンに優しい

SPA のコアコンポーネント

フロントエンドルーティング (ルーティング):HTML ファイルは 1 つだけですが、JavaScript を使用して URL の変更 (ハッシュまたは履歴 API) を監視し、対応するコンポーネントを動的に表示します。
状態管理:異なるコンポーネント間でデータ (ユーザーのログインステータス、ショッピングカートの内容など) を共有します。
動的レンダリング:Vue、React、Angular などのフレームワークを使用して、データの変更に基づいて DOM 構造を即座に更新します。

単純な SPA ルーティングロジックの例

これはフレームワークに依存せず、ネイティブ JavaScript のみを使用して SPA スイッチングコンテンツのロジックをシミュレートします。

<!--index.html -->
<ナビ>
  <a href="#home" onclick="route()">ホームページ</a>
  <a href="#trading" onclick="route()">取引チャート</a>
</ナビ>

<div id="コンテンツ">
  <!-- 動的コンテンツがここに挿入されます -->
</div>

<スクリプト>
  const ルート = {
    "#home": "<h2>おかえり</h2><p>これはあなたのダッシュボードです。</p>",
    "#trading": "<h2>リアルタイム相場</h2><div id='tv-container'>チャート読み込み中...</div>"
  };

  関数ルート() {
    const ハッシュ = window.location.hash || "＃家";
    const contentDiv = document.querySelector("#content");
    contentDiv.innerHTML = ルート[ハッシュ];

    // 取引ページに切り替えると、ここで以前の TradingView ウィジェットを初期化できます
    if (ハッシュ === "#trading") {
      // initTradingView();
    }
  }

  // URL の変更を監視する
  window.addEventListener("hashchange", ルート);
  // 初期ロード
  ルート();
</スクリプト>

SPAのメリットとデメリット

アドバンテージ：高速、帯域幅消費の削減、フロントエンドとバックエンドの個別開発 (バックエンドは API を提供するだけで済みます)。
欠点:初期読み込み時間 (First Load) が長く、SEO は SSR (サーバーサイドレンダリング) またはプリレンダリング技術によって補う必要があります。

シングルページアプリケーションフレームワーク

シングルページアプリケーション (SPA) を開発する場合、適切なフレームワークソリューションを選択すると、開発効率とコードの保守性が大幅に向上します。現在の市場は 3 つの主流フレームワークによって支配されており、多くの新進気鋭のフレームワークが登場しています。

React

Meta (Facebook) によって開発および保守されており、現在世界で最も使用されている UI 関数ライブラリです。 Virtual DOM (仮想 DOM) と JSX 構文が導入され、コンポーネント化と一方向のデータフローが強調されます。

アドバンテージ：エコシステムは非常に大きく、コミュニティのリソースは豊富で、雇用市場の需要は膨大です。
一般的に使用される組み合わせ:React Router (ルーティング)、TanStack Query (データ取得)、Zustand/Redux (状態管理)。

Vue.js

You Yuxi によって開発され、その「進歩的な」フレームワークで有名です。学習曲線は比較的緩やかで、公式は非常に完全なツールチェーンを提供するため、開発効率を追求するプロジェクトに非常に適しています。

アドバンテージ：高いファイル親和性、双方向のデータバインディング、直感的な構文。
一般的に使用される組み合わせ:Vue Router (ルーティング)、Pinia (状態管理)、Vite (構築ツール)。

Angular

Google によって維持されている、TypeScript で書かれた完全なフレームワーク。ルーティング、フォーム検証、HTTP クライアントなど、必要なすべての機能を含む「ファミリーバケット」ソリューションを提供します。

アドバンテージ：厳密なアーキテクチャは大規模なエンタープライズレベルのプロジェクトに適しており、依存関係注入 (DI) が組み込まれています。
一般的に使用される組み合わせ:RxJS (リアクティブプログラミング)。

新しく軽量なソリューション

上記の 3 つの主要なフレームワークに加えて、近年、パフォーマンスを最適化するための多くの代替手段が登場しています。

フレーム名	特徴
Svelte	仮想 DOM はなく、プログラムコードはコンパイル段階で効率的なネイティブ JS に変換されます。
SolidJS	React 構文に似ていますが、究極の実行パフォーマンスを備えています。
Preact	React の軽量バージョンで、サイズはわずか約 3 KB で、互換性が高くなります。

選び方は？

フレームワークを選択するときは、通常、次のベンチマークを考慮することをお勧めします。

プロジェクトのサイズ:大規模なエンタープライズプロジェクトには Angular または React が推奨されます。中小規模のプロジェクトまたはラピッドプロトタイピングには Vue または Svelte をお勧めします。
チームの経験:チームが HTML テンプレートに精通している場合は、Vue を始めるのが簡単です。強力な型指定とアーキテクチャを好む場合は、Angular が良い選択です。
保守性:React と Vue のコミュニティは強力であるため、将来的にはサードパーティパッケージからのサポートを求めることが最も簡単になります。

Python 用のシングルページアプリケーションソリューション

Python エコシステムでは、SPA (シングルページアプリケーション) 開発ソリューションは主に 2 つのカテゴリに分類されます。1 つはバックエンド API として Python を使用し、もう 1 つは開発者が Python コードを記述するだけで SPA 機能を備えたフロントエンドインターフェイスを自動的に生成できる特定のフレームワークを使用します。

1. データサイエンスとラピッドプロトタイピング (UI-as-Code)

これらのフレームワークは、開発者が HTML/CSS/JS の知識を必要とせずにインタラクティブな単一ページの Web ページを即座に開発できるため、最も人気があります。

Streamlit：現在のデータサイエンスの主流。スクリプトは上から下に実行され、パラメータを変更するとローカル更新がトリガーされます。データダッシュボードを迅速に作成するのに適しています。
Gradio：機械学習モデルの表示用に特別に設計されています。このインターフェイスは高度にコンポーネント化されており、特に画像、音声入力、モデル出力間の相互作用の処理に優れています。
Dash (by Plotly)：Flask と React に基づいています。 Dash は、高度にカスタマイズされた複雑なグラフを必要とするエンタープライズレベルのデータアプリケーションにとって最も強力なツールです。

2. フルエンド Web アプリケーション (最新のフルスタック)

このタイプのフレームワークは、従来の React/Vue + FastAPI モデルに挑戦し、フルエンド開発をより統合しようとします。

フレーム名	特徴	技術アーキテクチャ
Reflex (以前は Pynecone として知られていました)	純粋な Python で書かれ、React アプリケーションにコンパイルされます。	Python + Next.js / Tailwind
NiceGUI	非常に単純な構文で、ハードウェア、ガジェット、または単純な Web ページの制御に適しています。	Python + Vue / Quasar
Flet	Web SPA とデスクトップアプリケーションとして同時に公開できる Flutter ベースの Python フレームワーク。	Python + Flutter

3. 従来のバックエンド API ソリューション (分離アーキテクチャ)

これは、最も標準的な商用ソフトウェア開発モデルです。 Python はロジックとデータのみを担当し、フロントエンドは専門的な JavaScript フレームワークに任せられます。

// アーキテクチャ図
バックエンド (Python): FastAPI / Django Ninja / Flask
トランスポート プロトコル: RESTful API または WebSocket
フロントエンド (JavaScript): Vue.js / React / Svelte (SPA のレンダリングを担当)

4. HTMX ソリューション (ミニマリスト SPA エクスペリエンス)

これは近年非常に人気のあるトレンドです。 HTMX を使用すると、従来の Python Web フレームワーク (Django や Flask など) で、複雑な JavaScript を記述せずに AJAX 部分ページ更新の効果を実現できます。

# Django + HTMX の例 (部分更新ボタン)
# クリック後、結果領域のみが置き換えられ、Web ページは更新されません。
<button hx-post="/get-data/" hx-target="#result">
    データを取得するにはクリックしてください
</ボタン>
<div id="result">待機中...</div>

提案を選択する

データサイエンティストの場合:選ぶStreamlitまたはGradio。
純粋な Python で美しい Web ページを開発したい場合:選ぶReflex。
究極のパフォーマンスとクロスプラットフォームを追求する場合:選ぶFlet。
従来の Web サイトを最も簡単な方法でアップグレードしたい場合:選ぶHTMX。

JavaScript や Python を超えたシングルページ Web 開発ソリューション

1. 最新の HTML 拡張ソリューション (HTMX / Alpine.js)

このタイプのソリューションの中核となるコンセプトは「HTML への回帰」です。彼らは、SPA の動的な効果を実現するために複雑な JavaScript フレームワークを作成する必要はない、と主張しています。

HTMX：HTML 属性を通じて AJAX リクエストを直接送信し、部分的なコンテンツを置き換えます。これにより、バックエンド (言語に関係なく) が JSON ではなく HTML フラグメントを直接返すことができます。
Alpine.js：「Tailwind CSS for the Web」として知られています。単純なロジックを HTML タグに直接記述します。これは、ほとんど対話を必要としない静的ページに最適です。

2. WebAssembly (Wasm) ソリューション

WebAssembly を使用すると、開発者は C++、Rust、Go などの高性能言語を使用してブラウザ側のロジックを作成でき、JavaScript の独占を打ち破ることができます。

言語	メインフレーム	特徴
C# / .NET	Blazor WebAssembly	.NET 開発者が JS ではなく C# でフロントエンドを作成できるようにします。
Rust	Yew / Leptos	極めて優れた実行パフォーマンスと強力な型安全性。
Go	Hugo / TinyGo	コンパイルは非常に高速で、論理的に複雑な操作の実行に適しています。

3. 静的サイト生成 (SSG)

このタイプのソリューションは、「ビルド時」にすべてのページを静的 HTML ファイルに生成します。これは非常に高速に読み込まれ、SEO に非常に適しています。

Astro：現代の SSG の代表者は「群島アーキテクチャ」を採用しており、対話が必要な部分にのみ JS をロードします。
Eleventy (11ty)：ミニマリストかつ柔軟で、複数のテンプレート言語をサポートしています。

4. クロスプラットフォーム UI ソリューション (Flutter for Web)

Googleが立ち上げたソリューションはDart言語を使用しています。標準の HTML/CSS レンダリングパスを使用せず、Canvas を通じてインターフェイス全体を描画します。

// フラッターロジックの例
void main() {
  runApp(const MyApp());
}
// インターフェースは完全に Canvas で描画されるため、視覚的な一貫性が高いアプリの移植に適しています。

5. ローコード/ノーコード

社内のエンタープライズツールやクイック起動要件の場合、手書きコーディングなしで SPA を作成できます。

Appsmith / Budibase：コンポーネントをドラッグしてデータベースに接続することで、管理バックエンドをすばやく作成します。
Webflow：デザイナーが高品質の Web ページを直接作成するためのビジュアルインターフェイスを提供します。

ソリューション比較の概要

プラン	該当する状況	技術的な閾値
HTMX	従来の Web サイトをインタラクティブな感覚でアップグレード	低 (バックエンド言語のみ必要)
WebAssembly	画像処理、複雑な演算、ゲーム	高 (コンパイル言語の基礎が必要)
Astro (SSG)	ブログ、ドキュメント、公式ウェブサイト	真ん中
Flutter for Web	アプリはWebページに同時に公開されます	中 (ダーツが必要)

自己カプセル化された Web アプリケーション

基本的な紹介

PHP + JavaScript などの従来の Web アーキテクチャはサーバー側の展開でよく使用されますが、ソースコードへのアクセスやコピーを効果的に防ぐことができないため、商用ライセンスや信頼できない環境での展開には適していません。この問題を解決するために、「セルフホスト型 Web アプリケーション」アーキテクチャが登場しました。バックエンドロジックを読み取り不可能な実行可能ファイルにコンパイルし、HTTP サービス機能が組み込まれているため、フロントエンドは引き続き HTML/JS と対話できる一方で、バックエンドは暗号化、セキュリティ、認可制御、その他の要件を実装できます。

アドバンテージ

バックエンドプログラムは、ソースコードを保護するために、読み取り不可能な実行可能ファイル (バイナリ) にカプセル化できます。
ライセンス管理システムを統合して不正使用を防止できます。
ローカルサービスまたはデスクトップアプリケーションとしてプラットフォーム間で展開できます。
フロントエンドは依然として標準の Web テクノロジーを使用して開発されており、学習コストは低く抑えられています。

欠点がある

開発アーキテクチャは比較的複雑で、フロントエンドとバックエンドの通信、承認、および更新メカニズムを処理する必要があります。
独自の展開プロセスとユーザーインストールプロセスを設計する必要があります。
一部のツールはデスクトップ統合性が低く、追加の UX 処理が必要です。

該当する状況

クライアント展開用の内部ツールまたは商用アプリケーションを提供する必要があります。
ソースコードは逆コンパイルや盗難から保護する必要があります。
認可管理、実行回数、時間管理などの制限が必要です。

技術比較表（市場シェア・利用率順）

名前	言語を使用する	ライセンス管理をサポートするかどうか	C#はサポートされていますか?	バイナリを生成できる	目的に合った	利用率・市場シェア
Electron	JavaScript + Node.js	認証システムと併用可能	いいえ	はい (デスクトップアプリ)	クロスプラットフォームのデスクトップ Web アプリ	非常に高い
Node.js + pkg	JavaScript	JWT/鍵認証で利用可能	いいえ	はい	Web API アプリケーションのカプセル化	高い
ASP.NET Core + Kestrel	C#	ネイティブサポート	はい	はい (.exe/.dll)	エンタープライズ Web API/ツール	高い
Go HTTP Server	Go	組み込みまたはカスタム	いいえ	はい	高性能 Web バックエンド	高い
Blazor WebAssembly + ASP.NET	C#	サポート認可の検証	はい	はい	SPA + Web APIの統合	中～高
Gradio	Python	サードパーティでも使用可能	いいえ	できる (PyInstaller)	ML/AI Web UI	真ん中
Streamlit	Python	サードパーティでも使用可能	いいえ	できる (PyInstaller)	データ可視化Web UI	真ん中
Tauri	Rust + JS	カスタム検証のサポート	いいえ	はい	超軽量デスクトップアプリ	真ん中
Mongoose / Civetweb	C / C++	埋め込み検証ロジック	はい (CLI を使用)	はい	組み込み Web サーバー	真ん中

述べる

市場シェアのランキングは、GitHub の使用状況、企業の導入率、開発者コミュニティの活動に基づいて推定されます。
C# ユーザーによる推奨: ASP.NET Core と Blazor が、Kestrel の自己構築 Web サーバーとともに最初の選択肢です。
フロントエンドが完成したら、上記のツールを使用してバックエンドサービスをバイナリとしてパッケージ化し、承認メカニズムを追加できます。

ASP.NET Core

導入

ASP.NET Core は、Microsoft によって開発されたクロスプラットフォームのオープンソースの高性能 Web アプリケーションフレームワークであり、Windows、Linux、および macOS をサポートします。これは .NET プラットフォームの一部であり、最新の Web API、Web アプリ、マイクロサービス向けに設計されています。従来の ASP.NET と比較して、Core バージョンは軽量かつモジュール式であり、独立した実行可能ファイル (.exe) にコンパイルできるため、自己カプセル化された Web アプリケーションアーキテクチャに非常に適しています。

特徴

クロスプラットフォームのサポート (Windows/Linux/macOS)
高パフォーマンス、低メモリ使用量
スタンドアロンの実行可能ファイル (自己完結型 .exe/.dll) にコンパイル可能
組み込み Web サーバー (Kestrel)、独立して導入可能
Razor Pages、Blazor、MVC、gRPC、その他のアーキテクチャを統合可能
機能拡張を容易にするミドルウェア機構をサポート
優れたセキュリティ、HTTPS、JWT、OAuth、その他の認証方法をサポート

自己カプセル化 Web アプリケーションの利点

IIS を使用せずに Kestrel Web サーバーを使用して直接実行可能
バックエンドは .exe または .dll としてパッケージ化でき、簡単には逆コンパイルされません。
認証メカニズム（シリアル番号、認証検証など）を組み込むことができます
フロントエンド HTML/JS または Blazor と併用して、Web UI をすばやく作成します
バージョン管理、自動更新、エラー追跡に便利

一般的な梱包パターン

後部：ASP.NET Core Web API を使用してスタンドアロンの実行可能ファイルにコンパイルする
フロントエンド：HTML/JS または Blazor フレームワークで使用でき、プロジェクトに埋め込まれるか、外部に保存されます。
展開する：クライアントによるローカル実行用に単一のフォルダー (実行可能ファイルと静的ファイルを含む) を作成します。

認可管理統合方式

シリアル番号/トークンメカニズムを備えた JWT を使用する
ハードウェアバインディング（MAC、CPU ID、UUIDなどのバインディング）
認可検証のためにライセンスサーバーに接続します
ローカル認可ファイル（暗号化認可情報）

実行可能ファイルの生成 (自己完結型ビルド)

dotnet publish -c Release -r win-x64 --self-contained true -p:PublishSingleFile=true

このコマンドは、ASP.NET Core アプリケーションをスタンドアロンの実行可能ファイル (「MyApp.exe」など) にコンパイルできます。このファイルは、.NET ランタイムをインストールせずにターゲットシステム上で直接実行できます。

アプリケーションシナリオに最適

クライアントに展開するか、デスクトップアプリケーションにパッケージ化する必要がある Web ツール
商用ソフトウェアシステムには認証制御とソースコード保護が必要です
内部エンタープライズアプリケーション、IIS またはクラウド展開への依存を回避

ASP.NET Core と .NET MAUI + Blazor の比較

位置

ASP.NET Core: Web アプリケーションと API を構築するためのクロスプラットフォームのサーバー側開発フレームワーク。
.NET MAUI + Blazor: .NET MAUI のクロスプラットフォームネイティブアプリケーションと Blazor の Web UI テクノロジを組み合わせて、開発者がデスクトップまたはモバイルデバイスで Web UI コンポーネントを再利用できるようにします。

サポートプラットフォーム

ASP.NET Core: Windows、Linux、macOS 上のサーバーにデプロイされ、ブラウザまたは API を介したアクセスが提供されます。
.NET MAUI + Blazor: Android、iOS、Windows、macOS、および Blazor コンポーネントが MAUI アプリケーションに埋め込まれている上で実行できます。

開発モード

ASP.NET Core: バックエンドロジック + Razor ページ / MVC / Blazor サーバー / Blazor WASM。
.NET MAUI + Blazor: Native Application Framework (MAUI) + BlazorWebView コントロールを使用して Blazor UI を埋め込みます。

UIレンダリング

ASP.NET Core: UI はブラウザーに依存し、HTML、CSS、および JS を使用してレンダリングされます。
.NET MAUI + Blazor: UI はネイティブアプリケーションに表示され、Blazor 部分は組み込みの WebView を通じて Razor コンポーネントをレンダリングします。

該当するシナリオ

ASP.NET Core:クラウドサービス、社内エンタープライズシステム、Web アプリケーション、API を構築します。
.NET MAUI + Blazor: すでに Blazor コンポーネントまたは Web UI があり、それをさまざまなプラットフォームのデスクトップやモバイルデバイスにすぐに移植したい場合。

統合

ASP.NET Core を .NET MAUI + Blazor のバックエンドとして使用して、データと API を提供できます。
すでに Blazor Web プロジェクトがある場合は、ほとんど苦労せずにそれを MAUI アプリに移動し、多くのコードを再利用できます。

要約する

ASP.NET Core はバックエンドと Web アーキテクチャに焦点を当てており、クラウドと API の開発に適しています。
.NET MAUI + Blazor は、ユーザー側のクロスプラットフォームアプリケーションに焦点を当てており、Blazor フロントエンドテクノロジスタックをすでに導入しているチームに特に適しています。
この 2 つを組み合わせると、「バックエンドサービス + フロントエンドクロスプラットフォームアプリ」の完全なソリューションを実現できます。

ASP.NET Core 開発に一般的に使用される IDE

Visual Studio

Microsoftが開発したASP.NET Core開発に最適なIDEです。
Windows のみをサポート (一部の機能は Windows のみ)
Razor、Blazor、Web API、EF Core などのすべての .NET 開発機能をサポートします。
グラフィカルデザイン、高度なデバッグ、単体テスト、NuGet、および公開ツールがすべて利用可能です。
Azure、Docker、Git、その他の開発サービスを統合可能
推奨バージョン:Visual Studio 2022 以降
バージョンの選択:
- Community(無料、個人および小規模な開発チームに適しています)
- Professional / Enterprise(有料のエンタープライズグレードのサポートと機能)

Visual Studio Code

クロスプラットフォーム (Windows、Linux、macOS)
軽量エディター。C# 拡張キットを自分でインストールする必要があります (OmniSharp が提供)
Razor、Blazor、Web API、EF Core などの ASP.NET Core 開発をサポートします。
デバッグとコンパイルのためにlaunch.jsonとtasks.jsonを手動で設定する必要がある
開発者が開発環境とツールチェーンをカスタマイズするのに適しています
無料でオープンソース

JetBrains Rider

JetBrains によって開発され、クロスプラットフォーム (Windows、Linux、macOS)
ASP.NET Core、Blazor、Razor、Web API、EF Coreなどをサポートします。
統合された ReSharper 分析ツール、強力な IntelliSense および再構築機能
Docker、Git、CI/CD ツールチェーンをサポート
有料ですが、Visual Studio Enterprise よりも低コストです

概要比較表

IDE	サポートプラットフォーム	特徴	無料ですか？	オブジェクトに適しています
Visual Studio	Windows	フル機能、最高の公式サポート	コミュニティ無料（別途料金がかかります）	エンタープライズおよびフルエンド開発者
Visual Studio Code	Windows / Linux / macOS	軽量で拡張性が高い	無料	クロスプラットフォーム開発者、学生
JetBrains Rider	Windows / Linux / macOS	ReSharper の統合、クロスプラットフォーム	有料	高度な開発者とクロスプラットフォームチーム

VS Code で ASP.NET Core プロジェクトを作成する

準備

インストール.NET SDK：へ行く.NET公式ダウンロードページ、最新バージョンをダウンロードしてインストールします。
インストールVisual Studio Code。
VS CodeにインストールするC# 拡張キット(マイクロソフト社提供)。

プロジェクトの作成

VS Code の統合ターミナルを開きます (ショートカットキー:Ctrl + `)。
次のコマンドを入力して、ASP.NET Core プロジェクトを作成します。
```
dotnet new webapp -o MyAspNetApp
```
- webapp: Razor Pages を使用して ASP.NET Core Web アプリケーションを構築します。
- -o MyAspNetApp:プロジェクトフォルダー名を指定します。
プロジェクトフォルダーを入力します。
```
cd MyAspNetApp
```

実行プロジェクト

ターミナルに次のように入力します。
```
dotnet run
```
デフォルトでは次のようになりますhttps://localhost:5001またはhttp://localhost:5000埋め込む。

VS Code でプロジェクトを開きます

選ぶファイル→フォルダを開く、新しく作成したものをロードしますMyAspNetApp。
必要な NuGet パッケージをインストールする場合は、次を使用します。
```
dotnet add package パッケージ名
```

一般的なプロジェクトの種類

dotnet new webapp → Razor Pages Web App
dotnet new mvc→ MVCアーキテクチャ
dotnet new webapi→ Web APIプロジェクト

VS Code の ASP.NET Core プロジェクト設定のデバッグ

デバッグプロファイルの作成

VS Code でプロジェクトフォルダーを開きます。
によるとCtrl + Shift + Pを入力して選択しますDebug: Open launch.json。
選ぶ.NET Core環境は自動的に生成されます.vscode/launch.json。

launch.json の例

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": ".NET Core Launch (web)",
      "type": "coreclr",
      "request": "launch",
      "preLaunchTask": "build",
      "program": "${workspaceFolder}/bin/Debug/net8.0/MyAspNetApp.dll",
      "args": [],
      "cwd": "${workspaceFolder}",
      "stopAtEntry": false,
      "serverReadyAction": {
        "action": "openExternally",
        "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
      },
      "env": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "sourceFileMap": {
        "/Views": "${workspaceFolder}/Views"
      }
    }
  ]
}

ビルド設定を作成する

VS Code も.vscodeフォルダーの生成tasks.json。

そうでない場合は、新しい建設ジョブを追加できます。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "command": "dotnet",
      "type": "process",
      "args": [
        "build",
        "${workspaceFolder}/MyAspNetApp.csproj"
      ],
      "problemMatcher": "$msCompile"
    }
  ]
}

実行とデバッグ

によるとF5または、左側の「実行とデバッグ」パネルから選択します。.NET Core Launch (web)。
VS Code は自動的に ASP.NET Core プロジェクトをビルドして開始し、ブラウザーで開きます。https://localhost:5001。
リアルタイムデバッグのために C# プログラムにブレークポイントを設定できます。

VS Code の ASP.NET Core Web API プロジェクト設定のデバッグ

Web APIプロジェクトを作成する

ターミナルに次のように入力します。

dotnet new webapi -o MyWebApiApp
cd MyWebApiApp
code .

これにより、Web API プロジェクトが作成され、VS Code で開きます。

launch.jsonの設定

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": ".NET Core Launch (web API)",
      "type": "coreclr",
      "request": "launch",
      "preLaunchTask": "build",
      "program": "${workspaceFolder}/bin/Debug/net8.0/MyWebApiApp.dll",
      "args": [],
      "cwd": "${workspaceFolder}",
      "stopAtEntry": false,
      "serverReadyAction": {
        "action": "openExternally",
        "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
      },
      "env": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "sourceFileMap": {
        "/Views": "${workspaceFolder}/Views"
      }
    }
  ]
}

task.json を設定する

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "command": "dotnet",
      "type": "process",
      "args": [
        "build",
        "${workspaceFolder}/MyWebApiApp.csproj"
      ],
      "problemMatcher": "$msCompile"
    }
  ]
}

APIの実行とテスト

によるとF5または、[実行とデバッグ] パネルから選択します。.NET Core Launch (web API)。
起動後、サーバーはhttps://localhost:5001またはhttp://localhost:5000。
利用可能Swagger UI(プロジェクトのデフォルト) ブラウザーで API をテストします。
Postman または VS Code の REST クライアントプラグインを使用して API をテストすることもできます。

RESTクライアントのテストサンプルファイルを作成する

RESTクライアント拡張機能をインストールする

VS Code 拡張機能ストアを検索するREST Client。
インストール後すぐに使用可能.httpまたは.restアーカイブテストAPI。

test.httpファイルを追加

### GET API をテストする
https://localhost:5001/weatherforecast を取得します
受け入れる: application/json

###

### POST API のテスト例
POST https://localhost:5001/api/sample
コンテンツタイプ: application/json

{
  「id」: 1、
  "名前": "テストデータ"
}

使用法

プロジェクトのルートディレクトリに作成test.http。
アーカイブを開くと、各リクエストの上に次の内容が表示されます。Send Requestボタン。
クリックすると、VS Code で API リクエストを直接送信し、応答を表示します。

Kestrel

導入

チョウゲンボウはASP.NET CoreMicrosoft が開発した組み込みのクロスプラットフォーム Web サーバー。高性能かつ軽量に設計されており、HTTP/1.1 および HTTP/2 をサポートし、ASP.NET Core アプリケーションのデフォルトサーバーです。 Kestrel を使用すると、開発者は Web アプリケーションを次のように直接ラップできます。自己パッケージ化実行可能ファイルを使用すると、IIS、Apache、Nginx などの外部サーバーに依存せずに、ローカルで HTTP サービスを開始して提供できます。

特徴

クロスプラットフォームのサポート (Windows、Linux、macOS)
HTTPS、HTTP/2、WebSocket、その他のプロトコルのネイティブサポート
高性能、組み込みまたはセルフパッケージング用途に最適
リバースプロキシとして機能できる内部サービスまたはスタンドアロンサーバー
追加のサーバーソフトウェアをインストールせずに直接実行可能

Kestrel と自己カプセル化された Web アプリケーション

ケストレルは次のように利用可能ですネイティブHTTP APIプロバイダー、フロントエンド UI で使用されます
ASP.NET Core での使用に適しており、アプリケーション全体を独立した実行ファイル (.exe) にコンパイルします。
認可および検証ロジックは、Web アプリケーションのセキュリティ基盤として統合できます。
浸透性のUseUrlsサービスのローカルポートとパスを設定します

簡単なサンプルコード

public class Program
{
    public static void Main(string[] args)
    {
        var builder = WebApplication.CreateBuilder(args);

        builder.WebHost.UseKestrel()
                       .UseUrls("http://localhost:5000");

        var app = builder.Build();

        app.MapGet("/", () => "Hello from Kestrel!");
        app.Run();
    }
}

導入方法

使用dotnet publishKestrel を使用してアプリケーションを単一の実行可能ファイルにパッケージ化する
外部 Web サーバーは必要なく、ターゲットマシン上で直接起動できます。
Blazor や HTML/JS などのフロントエンドとともにパッケージ化してデプロイ可能

IIS/Nginxとの違い

プロジェクト	Kestrel	IIS / Nginx
内蔵かどうか	はい (ASP.NET Core に組み込まれています)	いいえ (別途インストールする必要があります)
サポートプラットフォーム	Windows / Linux / macOS	サーバーによって異なります
管理者権限が必要ですか?	いいえ	プラットフォームと設定に依存します
自己カプセル化に適していますか?	非常に適した	不適切
パフォーマンス	高い	高 (ただし設定はより複雑)

該当する状況

ネイティブ Web アプリとしてパッケージ化する必要があるアプリケーション
外部サーバーに依存せずにさまざまなプラットフォームに展開したい
ライセンス認証とAPIを統合する必要がある商用アプリケーション

ASP.NET Core はフロントエンド (HTML/JavaScript) とともにパッケージ化され、デプロイされます。

導入

ASP.NET Core は、フロントエンドリソース (HTML、CSS、JavaScript、SPA など) とバックエンド API サービスを単一のアプリケーションに統合し、それを独立した実行ユニット (自己完結型アプリケーション) として展開して、シンプルな展開、ソースコードの保護、ライセンス管理の目標を達成することをサポートしています。

一般的なフロントエンド統合方法

静的ファイル:HTML/CSS/JSを入れるwwwroot/ASP.NET Core が静的リソースとして機能するフォルダー。
フロントエンドとバックエンドの分離 SPA (React/Vue/Angular):フロントエンドプロジェクト (Webpack/Vite などのツールを使用して構築) を静的リソースにビルドした後、それを次の場所にコピーします。wwwroot/。
Razor Pages / Blazor Server：ASP.NET Core が提供する UI フレームワークを使用して、ページを直接作成します (純粋な HTML/JS ではなく、フロントエンドロジックと緊密に統合されています)。

導入手順の例

ASP.NET Core プロジェクトを作成する (オプションの Web API + 静的 Web サイトまたは Blazor)
フロントエンドのビルド結果をwwwroot、例えば：
- Vue：npm run build後でdist/コピー先wwwroot/
- React：npm run build後でbuild/コピー先wwwroot/
確認するProgram.cs静的ファイルサービスは次の場所で有効になります。
```
app.UseStaticFiles();
```
SPA をサポートするようにキャッチオールルートを設定します (Vue/React の場合)。
```
app.MapFallbackToFile("index.html");
    
```
以下を使用してアプリケーションをデプロイします。
- 実行可能ファイルを生成します (自己完結型):
  dotnet publish -c Release -r win-x64 --self-contained
- Docker イメージファイルを生成します (プラットフォーム間でデプロイ可能)
- IIS、Nginx、Kestrel、またはクラウドプラットフォーム (Azure、AWS、GCP) にデプロイします。

アドバンテージ

フロントエンドとバックエンドを統合して展開し、メンテナンスプロセスを簡素化
単一の実行可能ファイルにパッケージ化して、ソースコードの配布と保護を容易にすることができます。
ライセンス管理とオフライン展開をサポート
.NET エコシステムを統合し、EF Core、ID、セキュリティ検証などをサポートします。

欠点がある

Razor/Blazor を使用する場合、.NET に慣れていない人にとっては学習のしきい値が存在します。
フロントエンドはコンパイルして統合する必要があり、開発プロセスは複雑です。
梱包後のサイズが大きくなる (特に内蔵モード)

ASP.NET Core MVC

ASP.NET Core MVCとは

ASP.NET Core MVC は、Microsoft が発表したクロスプラットフォームの Web アプリケーションフレームワークです。これは、Model-View-Controller (モデル-ビュー-コントローラー) 設計パターンに基づいており、動的な Web サイトと Web API を開発するための構造化されたモジュール式の方法を提供します。

主な特長

関心の分離: モデルはデータとロジックを担当し、ビューは UI プレゼンテーションを担当し、コントローラーはリクエスト処理を担当します。
ルーティングシステムをサポートし、URLルールを柔軟に定義可能
モデルへの簡単なバインドのための組み込みの厳密に型指定されたビューのサポート
依存関係の注入 (Dependency Injection) をサポートし、テストと拡張を容易にします。
RESTful API と動的 Web ページの構築に使用可能
Windows、Linux、macOS のクロスプラットフォームのサポート

基本構造

Model: データ構造とビジネスロジックを表します。
View: Razor 構文を使用して HTML UI を生成します
Controller: ユーザーリクエストを処理し、ビューまたはデータを返します。

簡単な例

// モデル
パブリッククラス製品
{
    public int ID { 取得;セット; }
    パブリック文字列名 { get;セット; }
    公開 10 進数 価格 { get;セット; }
}

//コントローラー
パブリック クラス ProductsController : コントローラー
{
    public IActionResult Index()
    {
        var products = 新しいリスト<製品>
        {
            新しい製品 { ID = 1、名前 = "ラップトップ"、価格 = 29999 }、
            新しい製品 { ID = 2、名前 = "マウス"、価格 = 499 }、
            新しい製品 { ID = 3、名前 = "キーボード"、価格 = 899 }
        };

        ビュー(製品)を返します。
    }
}

// ビュー (Index.cshtml)
@モデルリスト<製品>

<table border="1" cellpadding="6" cellpacing="0">
    <頭>
        <tr>
            <th>番号</th>
            <th>名前</th>
            価格
        </tr>
    </頭>
    <みんな>
        @foreach(モデル内の変数項目)
        {
            <tr>
                <td>@item.Id</td>
                <td>@item.Name</td>
                <td>@item.Price.ToString("C")</td>
            </tr>
        }
    </tbody>
</テーブル>

ASP.NET Core 表示テーブル

サンプルコード

<!-- Product.cs - データ モデル -->
パブリッククラス製品
{
    public int ID { 取得;セット; }
    パブリック文字列名 { get;セット; }
    公開 10 進数 価格 { get;セット; }
}

<!-- ProductsController.cs - コントローラー (ASP.NET Core MVC) -->
パブリック クラス ProductsController : コントローラー
{
    public IActionResult Index()
    {
        var products = 新しいリスト<製品>
        {
            新しい製品 { ID = 1、名前 = "ラップトップ"、価格 = 29999 }、
            新しい製品 { ID = 2、名前 = "マウス"、価格 = 499 }、
            新しい製品 { ID = 3、名前 = "キーボード"、価格 = 899 }
        };

        ビュー(製品)を返します。
    }
}

<!-- Views/Products/Index.cshtml - Razor ビュー ページ -->
@モデルリスト<製品>

<table border="1" cellpadding="6" cellpacing="0">
    <頭>
        <tr>
            <th>番号</th>
            <th>名前</th>
            価格
        </tr>
    </頭>
    <みんな>
        @foreach (モデル内の変数項目)
        {
            <tr>
                <td>@item.Id</td>
                <td>@item.Name</td>
                <td>@item.Price.ToString("C")</td>
            </tr>
        }
    </tbody>
</テーブル>

Razor

カミソリとは

Razor は、Microsoft が ASP.NET Core 用に開発したマークアップ言語で、開発者はこれを使用して C# コードを HTML ページに埋め込むことができます。標準の HTML と C# を組み合わせて、Web ページを動的に生成することをシンプルかつ直感的にします。

特徴

簡潔な構文、書きやすく読みやすい
サーバーサイドレンダリングのサポート
ASP.NET Core MVC または Razor Pages との緊密な統合
条件判定、ループ、関数呼び出しなどのC#言語の機能を直接利用できます。
コンパイル後のパフォーマンスが高く、大規模および中規模のWebアプリケーション開発に適しています

使用シナリオ

ASP.NET Core MVC ビューページ
Razor ページの動的ページ
静的コンテンツと動的コンテンツが混在する Web アプリケーション

例

@ページ
@modelインデックスモデル

<h1>Razor ページへようこそ</h1>

<p>今日の日付: @DateTime.Now.ToString("yyyy-MM-dd")</p>

@if(Model.Items != null && Model.Items.Any())
{
    
    @foreach(Model.Items の var item)
    {
        <li>@item</li>
    }
    </ul>
}
それ以外の場合
{
    <p>データが表示されません</p>
}

Razor @foreach での NullReferenceException の理由と解決策

問題文

Razor ビューでの使用:

@foreach(var item in Model)
{
    <div>@item</div>
}

次のエラーが発生した場合:

System.NullReferenceException: Object reference not set to an instance of an object.

急行Modelのためにnullとなり、ループできなくなります。

よくある原因

コントローラーはモデルをビューに渡しません。
渡された Model オブジェクトは null です。
モデルのタイプは IEnumerable または List ではありません。

解決

コントローラーに正しいモデルを渡していることを確認してください。次に例を示します。

public IActionResult Index()
{
    var data = new List<string> { "A", "B", "C" };
    return View(data);
}

Razor View ファイルの上でモデルの種類を宣言します。

@model IEnumerable<string>

モデルが null かどうかを確認してから、ループを実行します。

@if (モデル != null)
{
    foreach (モデル内の変数項目)
    {
        <div>@item</div>
    }
}
それ以外の場合
{
    <div>データなし</div>
}

提案

ベストプラクティスはモデルがコントローラーに値を持っている必要があることを確認してください(空のコレクションであっても) View が null 状況を処理するのを避けるため。例えば：

return View(data ?? new List<string>());

MVC にはコントローラーを使用する 2 つの正しい方法があります

基本的な概念

ASP.NET Core MVC では、プロジェクトに複数のコントローラーを含めることができ、各コントローラーは異なる機能または領域を担当します。例えば：

HomeController— ホームページと静的ページの処理
ProductController— 製品管理を担当します

複数のコントローラーを作成する

すべてのコントローラーは継承する必要がありますControllerカテゴリに保存されていますControllersフォルダ。

// HomeController.cs
パブリック クラス HomeController : コントローラー
{
    public IActionResult Index()
    {
        View()を返す;
    }
}

// ProductController.cs
パブリック クラス ProductController : コントローラー
{
    public IActionResult List()
    {
        var products = 新しいリスト<string> { "コンピュータ"、"携帯電話"、"タブレット" };
        ビュー(製品)を返します。
    }
}

対応するビュー

MVC の View は、デフォルトでコントローラー名に基づいてフォルダーを作成します。次に例を示します。

Views/Home/Index.cshtml
Views/Product/List.cshtml

ビュー内のさまざまなコントローラーのアクションを呼び出す

使用できますasp-controllerそしてasp-actionタグヘルパー:

<a asp-controller="ホーム" asp-action="インデックス">ホームページに戻る</a>
<a asp-controller="製品" asp-action="リスト">製品リスト</a>

ルーティング設定

存在するProgram.csまたはStartup.cs、デフォルトのルートは通常次のとおりです。

app.MapControllerRoute(
    name: "default",
    pattern: "{controller=Home}/{action=Index}/{id?}");

これは、URL が/、自動的にガイドされますHomeController.Index()。 URL が/Product/List、実行されますProductController.List()。

結論は

次の場合に限り、MVC で同時に複数のコントローラーを持つことができます。

各コントローラーは継承しますController
存在するViews対応するフォルダーとファイルを作成します
を通してasp-controllerそしてasp-action正しい呼び出し
ルーティング設定が正しいことを確認する

同じビューに複数のコントローラーを使用する方法

主要な概念

Razor View 自体は 1 つだけをバインドしますModel(または複合 ViewModel) ですが、同じページ上の複数のコントローラーからのデータ/アクションを表示またはリンクできます。
一般的な方法: データを単一の ViewModel、Partial View / ViewComponent にマージするか、AJAX を介して他のコントローラーを呼び出します。

方法 1: コントローラーでデータを ViewModel に結合する (推奨)

// モデル/ViewModels.cs
パブリック クラス HomePageViewModel {
    public IEnumerable製品 { 取得;セット; }
    public IEnumerable<Order> RecentOrders { 取得;セット; }
}

// HomeController.cs
public IActionResult Index() {
    var vm = 新しい HomePageViewModel {
        製品 = productService.GetTopProducts()、
        RecentOrders = orderService.GetRecentOrders()
    };
    ビュー(vm)を返します;
}

// ビュー/ホーム/Index.cshtml
@modelHomePageViewModel

<h2>製品</h2>
@foreach(var p in Model.Products){ <div>@p.Name</div> }

<h2>最近の注文</h2>
@foreach(Model.RecentOrders の変数){ <div>@o.Id</div> }

方法 2: 部分ビュー (各コントローラーがデータを提供し、親コントローラーが結合または部分を呼び出します)

// Views/Product/_ProductList.cshtml (部分的)
@model IEnumerable
@foreach(モデル内の変数 p){ @p.Name }

// Views/Home/Index.cshtml (親ビュー)
@modelHomePageViewModel
<div>
  @Html.Partial("_ProductList", Model.Products)

方法 3: ViewComponent (再利用可能な小さなコントローラー + ビューに相当)

// コンポーネント/ProductListViewComponent.cs
パブリック クラス ProductListViewComponent : ViewComponent {
    プライベート読み取り専用 IProductService _svc;
    public ProductListViewComponent(IProductService svc){ _svc = svc; }
    public IViewComponentResult Invoke(int count) {
        var products = _svc.GetTopProducts(count);
        ビュー(製品)を返します。 // Views/Shared/Components/ProductList/Default.cshtml
    }
}

// Razor で使用される
@await Component.InvokeAsync("ProductList", new { count = 5 })

方法 4: フロントエンド AJAX がさまざまなコントローラーから API を提供する (動的読み込みに適しています)

<!-- Views/Home/Index.cshtml -->
<div id="製品エリア">読み込み中...</div>

<スクリプト>
fetch('/api/product/top5')
  .then(r => r.json())
  .then(データ => {
    document.getElementById('製品エリア').innerHTML =
      data.map(p => `${p.name}`).join('');
  });
</script>

方法 5: ビュー内の異なるコントローラーへの複数のリンクを配置します (最も単純なナビゲーション)

<a asp-controller="製品" asp-action="リスト">製品リスト</a>
<a asp-controller="注文" asp-action="履歴">注文履歴</a>

提案を選択する

同じページに複数のデータソースを同時に表示する必要がある場合: 合成を使用します。ViewModelまたはViewComponent(よりモジュール化されたもの)。
ブロックを個別に再利用またはレンダリングするには、次を使用します。Partial ViewまたはViewComponent。
非同期またはオンデマンドの読み込みが必要な場合: AJAX を使用して、さまざまなコントローラーの API からデータを取得します。
責任の分離とテスト容易性を維持するために、データを取得するために View で他のコントローラーアクションを直接呼び出すことは避けてください (コントローラー/サービス層がデータの取得を担当する必要があります)。

ウェブの古いテクノロジー

Java Applet

基本的な概念

Java アプレットは、Java 言語で書かれた小さなアプリケーションで、Web ブラウザを通じて実行し、HTML ページに埋め込むことができます。アニメーション、ゲーム、グラフの視覚化などのインタラクティブな Web ページを作成するために 1990 年代に初めて広く使用されました。

実行方法

アプレットは、Java Plugin をサポートするブラウザ上で実行する必要があります。<applet>または<object>タグは HTML に埋め込まれ、ユーザー側の JVM (Java 仮想マシン) によってロードされて実行されます。

セキュリティ制限

アプレットはクライアント側で実行できるため、悪意のある動作を防ぐため、実行環境ではローカルファイルシステムへのアクセスや外部プログラムの実行を禁止するなど、セキュリティ隔離のための「サンドボックス機構」が採用されています。

サポート状況と現状

Google Chrome: NPAPI サポートは 2015 年以降完全に削除され、Java アプレットはサポートされなくなりました。
Mozilla Firefox: 2017 年に NPAPI プラグインのサポートを正式に停止しました。
Microsoft Edge: Java アプレットは発売以来サポートされていません。
Safari: Java アプレットの実行サポートは、macOS Catalina 以降完全に削除されました。

オラクル公式ポリシー

Oracle は Java 9 以降アプレット API の削除を発表しており、Java 11 ではアプレットを完全に廃止する予定です。もう 1 つのデスクトップ実行テクノロジである Java Web Start もメンテナンスから外れています。

代替

JavaFX：より最新の GUI フレームワークと Web 統合機能を提供しますが、ブラウザーのサポートは組み込まれていません。
HTML5 + JavaScript：クロスプラットフォームとより高度な双方向性をサポートする、主流の代替テクノロジーになりつつあります。
WebAssembly：他の言語はブラウザー実行可能形式にコンパイルできるため、ハイパフォーマンスコンピューティングの潜在的な選択肢になります。

要約する

Java アプレットは廃止の段階に入っており、最新の Web 開発トレンドでは、HTML5、JavaScript、WebAssembly などのオープン標準テクノロジを使用する傾向があります。開発者はアプレットの使用を避け、既存のアプリケーションを最新のテクノロジープラットフォームに移行する必要があります。

Java アプレットの例

以下は、単純なメッセージを表示する Java アプレットの例です。

HTMLコード

<!DOCTYPE html>
<html lang="zh-Hant">
<頭>
<メタ文字セット="UTF-8">
<title>Java アプレットの例</title>
</head>
<本体>
<h1>Java アプレットの例</h1>
<アプレットコード="HelloWorldApplet.class" width="300" height="300>
    <param name="メッセージ" value="こんにちは、世界! 「＞
    お使いのブラウザは Java アプレットをサポートしていません。
</アプレット>
</ボディ>
</html>

Java アプレットコード

import java.applet.Applet;
import java.awt.Graphics;

public class HelloWorldApplet extends Applet {
String message;

public void init() {
    message = getParameter("message");
}

public void paint(Graphics g) {
    g.drawString(message, 20, 20);
}
}

コンパイルして実行する

1. Java コードを次の名前で保存しますHelloWorldApplet.java、コマンドラインで実行しますjavac HelloWorldApplet.javaコンパイルします。

2. 生成された.classファイルは HTML ファイルと同じディレクトリにあります。

3. Java アプレットをサポートする環境を使用して HTML ファイルを実行します。

注意事項

最新のブラウザのほとんどは Java アプレットをサポートしなくなったため、同様の機能を実現するために他のテクノロジ (JavaFX や Web アプリケーションなど) の使用を検討することをお勧めします。

PHP v: 7.4.10

email: [email protected]

T:0000

資訊與搜尋 | 回dev首頁
email: Yan Sa [email protected] Line: 阿央

電話: 02-27566655 ,03-5924828

阿央
泱泱科技
捷昱科技泱泱企業

ウェブ開発

コンピュータの使用

ソフトウェア開発

ウェブサーバー

インターネットマーケティング

マルチメディア開発

開発情報サイト

ウェブサイト開発サービス

カスタマイズされたウェブサイトのデザイン

レスポンシブ Web 開発

ECプラットフォーム構築

バックエンドシステム開発

ウェブサイト最適化サービス

ウェブサイトのメンテナンスと更新

技術サポートとコンサルティング

HTML

インフラストラクチャー

一般的なタグのカテゴリ

物件申請

セマンティックタグ

CSSとJavaScriptとの関係

HTMLの色の名前

基本的な色

グレー系

ピンクと赤

青と緑

オレンジ、黄色、茶色の色

JavaScript

JavaScriptの特徴

1. 動的型付け言語

2. オブジェクト指向のサポート

3. 関数はオブジェクトです（高階関数）

4. 非同期操作のサポート

5. 広範なクロスプラットフォーム アプリケーション

JavaScript ブール値

ボリンジャー値の概念

1. 直接代入と比較

2. 条件判断で(If/Else)を使用する

3. 論理演算子

4. 真偽値（暗黙の変換）

1. 偽の値 (に変換されます)false価値）：

2. 真の値（に変換されます）true価値）：

JavaScript 配列

配列の作成と基本操作

スライス()メソッドを使用する

配列からランダムに5つの要素を取得する方法

JavaScript 配列メンバーのチェック

1. 使用方法が含まれます

2.indexOfメソッドを使用する

3. 何らかの方法を使用して複雑な条件を処理する

4. 関連する拡張使用法

5. パフォーマンスの最適化に関する提案

JavaScript配列に新しい配列を追加

concat メソッドを使用する

スプレッド演算子を使用する

プッシュメソッドとスプレッド演算子の使用

現在実行中の関数の名前を取得します

目的

関数の書き込み

応用例

出力結果

注意事項

拡張された提案

JavaScript 関数のビニングと分類管理

目的

推奨される実践方法

1. ES6 モジュール ビニングを使用する

2. 同様の機能は同じモジュールに分類されます

3. いつクラスを使用するのが適切ですか?

4. ツールとフレームワークを適合させる

サンプル構造の提案

JavaScript クラスのメンバー変数とメソッドの使用法

基本的な文法

例

使用法

メンバー変数の型

プライベート変数とメソッド (ES2022 標準)

継承とオーバーライド

これに関する注意事項

結論は

5. 広範なクロスプラットフォームアプリケーション

1. 偽の値 (に変換されます)`false`価値）：

2. 真の値（に変換されます）`true`価値）：

1. ES6 モジュールビニングを使用する

モジュールの例: シングルトンオブジェクトのシミュレーション

PHP エラーメッセージを含む XMLHttpRequest リターンメッセージを処理する方法