Web 開発: フルスタック Siege ガイド

著者: 禅とコンピュータープログラミングの芸術

1 はじめに

Web開発とは何ですか?

ウェブ開発とは、ネットワーク情報化を実現するために、インターネットを通じて消費者にコンピュータソフトウェアおよびハードウェアのアプリケーションとサービスを提供することを指します。Web 開発は、Web フロントエンド、バックエンド、データベースの 3 つの主要な部分で構成され、明確な分業、コミュニケーションと調整、厳格なプロジェクト管理が行われているため、独特です。

なぜWeb開発を学ぶのですか?

今日、インターネット情報の爆発的な成長により、情報技術に対する人々の需要はますます高まっています。インターネット製品の研究開発も、Web 開発エンジニアの参加と切り離すことができません。Web開発エンジニアの責任は、コンピュータ関連技術を使用して、プログラミング言語とフレームワークを通じて完全に機能するWebサイトシステムを開発し、ユーザーのニーズを満たし、効率を向上させることです。同時に、技術革新は人類社会の共通の問題を解決するためにも利用できます。したがって、Web 開発に携わりたい学生、技術者、企業にとって必須のスキルです。

Web 開発を始めるにはどうすればよいですか?

まずはWeb開発の基本的な概念や用語を理解し、コンピュータ関連の知識をある程度理解しておきましょう。次に、HTML/CSS/JavaScript 言語と、その一般的に使用されるライブラリとフレームワークをマスターします。3 番目に、データベースの原理と一般的に使用されるデータベース管理ツール MySQL をマスターします。4 番目に、Web サーバーの原理と、Apache、Nginx などの一般的に使用される Web サーバーソフトウェアを理解します。最後に、バージョン管理ツール Git の使用に習熟し、Web 開発用の IDE やエディターなどのプログラミング環境と連携できるようにします。さらに、コンピュータセキュリティ、クラウドコンピューティングなど、Web 開発の重要な側面となるスキル要件は他にもたくさんあります。つまり、十分な基礎知識と必要な能力、積極的な姿勢、継続的な学習と研究の精神があってこそ、業界で前進することができるのです。

2. 基本的な概念と用語の説明

HTML

HTML (HyperText Markup Language) はハイパーテキストマークアップ言語であり、Web ページの作成に使用されるマークアップ言語であり、WWW (World Wide Web) の基礎です。これは、Web ページのコンテンツ構造と動作を定義するために使用される言語のセットです。次の 5 つの部分が含まれます。

Doctype ステートメント: ドキュメントで使用される仕様 (通常はここで使用される) をブラウザに伝えます。
html タグ: Web ページの主要な構造をラップします。通常、、、の 3 つのタグが含まれます。
ヘッドタグ: 、> およびその他のタグなど、Web ページのメタデータが含まれます。、
ボディタグ: Web ページのメインコンテンツが内部に配置されます。

その他のタグ: 例:

、

-

、、、、

、

HTML 構文の例:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My first webpage</title>
  </head>
  <body>
    <h1>Welcome to my webpage!</h1>
    <p>This is the first paragraph on my page.</p>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </body>
</html>

CSS

CSS (Cascading Style Sheets) は、Web ページを美しくするために使用されるスタイル言語です。これにより、Web ページ作成者は、色、サイズ、配置、境界線などの属性を含む要素の外観を個別に設定でき、複数のページ上の要素に作用できます。

CSS 構文の例:

/* 设置网页的默认字体和背景色 */
body {
  font-family: Arial, sans-serif;
  background-color: #f0f0f0;
}

/* 设置标题 */
h1 {
  color: navy; /* 浅蓝色 */
  text-align: center;
}

/* 设置链接 */
a {
  color: blue; /* 深蓝色 */
  text-decoration: none; /* 删除下划线 */
}

/* 设置列表 */
ul {
  list-style-type: square; /* 方块点 */
  margin: auto; /* 水平居中 */
  padding: 10px; /* 外边距 */
}

/* 设置图片 */
img {
  max-width: 100%; /* 宽度充满整个容器 */
  height: auto; /* 自动调整高度 */
}

JavaScript

JavaScript (JS と略されることもよくあります) は、Web ページに埋め込まれた動的スクリプト言語であり、軽量の Java プログラミング言語です。これは、Web ページに対話性を追加し、Web ページを動的、AJAX (Asynchronous JavaScript And XML)、動的 Web ページにするために使用されます。

JavaScript 構文の例:

// 创建一个按钮，点击时弹出提示信息
var button = document.createElement('button');
button.innerHTML = 'Click me!';
document.body.appendChild(button);
button.addEventListener('click', function() {
  alert("Hello world!");
});

// 获取输入框的值，打印到控制台
var input = document.getElementById('input');
console.log(input.value);

jQuery

jQuery は、DOM 操作、イベント処理、Ajax インタラクション、プラグイン開発などを簡素化する効率的な js ライブラリです。多くの優れたフロントエンドコンポーネントは jQuery に基づいて開発されています。

jQuery 構文の例:

$(document).ready(function(){
  // 下拉菜单
  $('#select').change(function(){
    var value = $(this).val();
    console.log(value);
  });

  // 轮播图
  $('.carousel').carousel({interval: 3000});
});

PHP

PHP (ハイパーテキストプリプロセッサ) は、サーバー側のスクリプト言語です。動的サイトの作成をサポートしており、Apache や Nginx などの Web サーバーとともに使用することも、Windows や Linux 上で独立して実行することもできます。

PHP 構文の例:

<?php
  echo "Hello World!";
?>

SQL

SQL (Structured Query Language) は、リレーショナルデータベースシステムへのアクセスと操作に使用される構造化クエリ言語であり、ANSI/ISO 標準です。SQL ステートメントは、リレーショナルデータベース内のデータへのアクセス、更新、管理に使用されます。

SQL 構文の例:

CREATE TABLE users (
  id INT PRIMARY KEY AUTO_INCREMENT,
  name VARCHAR(255),
  email VARCHAR(255) UNIQUE NOT NULL
);
INSERT INTO users (name, email) VALUES ('John Doe', '<EMAIL>');
SELECT * FROM users WHERE name LIKE '%Doe%';
DELETE FROM users WHERE id=1;
UPDATE users SET name='Jane Smith' WHERE id=2;

ギット

Git は、Linux カーネル開発の管理に特化して Linus Torvalds によって作成されたオープンソースの分散バージョン管理システムです。現在では、大手ソフトウェア会社の「バックボーン」開発ツールとなっています。

Git 構文の例:

git init          // 初始化一个Git仓库
git add file      // 添加文件到暂存区
git commit -m "..." // 提交文件到本地仓库
git remote add origin https://github.com/username/project.git   // 关联远程仓库
git push -u origin master       // 把本地仓库的修改推送到远程仓库的master分支

待って。