デスクトップアプリ開発に必要なWebページを作るため「HTML5＋CSS＋JavaScript」の文法を学ぼう！

フロントエンジニアのための「Tauri 2.0」ではじめるRustプログラミング　第3回

　本連載では、デスクトップアプリを開発しながら、「Rust」と「Tauri 2.0」について学んでいきます。第3回は、Tauri 2.0のフロントエンドで使うWebページを作る技術であるHTML5＋CSS＋JavaScriptの最低限知っておくべき文法を解説します。

はじめに

　前回は、デスクトップアプリ開発に必要な必要最低限のRustの文法を学びました。今回は、Webページを作るのに使う技術である「HTML5＋CSS＋JavaScript」について最低限知っておくべき文法を解説します。

HTML5の文法

　HTMLは「ハイパー・テキスト・マークアップ・ランゲージ」の頭文字をとったマークアップ言語です。HTML5は、HTMLの2024年12月現在最新のバージョン5であり、拡張子は「.html」や「.htm」のファイルです。インタプリタ言語のようにコンパイルすることなく即座に実行できるマークアップ言語となっています。

　言語とは言いましたが、処理の制御はできず、文字や画像やリンクや動画などを配置できるだけです。ただしHTML5がなければ、CSSで装飾することも、JavaScriptでプログラミングして制御することもできません。

　第1回でWebページのHTML5＋CSS＋JavaScriptが、MVCのViewに当たると言いましたが、これらの中でも細かく分けるとHTML5とCSSがViewで、JavaScriptがControllerや一部Modelに当たることにもなります。

HTML5＋CSS＋JavaScriptのMVC

<html>タグ

　HTMLはすべてタグを「<タグ名>」と書いて囲んで機能分けします。

　まず1行目に<!doctype html>タグを記述することで、このHTMLファイルがHTML5であることを宣言します。それ以降は、必ず<タグ名></タグ名>や<タグ名 />と記述して閉じる必要があります。<html>～</html>タグの中には、<head>タグと<body>タグがほぼ必須です。

HTMLの書き方

<!doctype html>

<html>

　<head>

　（ヘッダ）

　</head>

　<body>

　（ここにWebブラウザに表示する本文を記述）

　</body>

</html>

<head>タグ

　<head>〜</ head> タグの中には、HTMLの情報を記述します。

　<head>タグの中に記述するものには、Webページのタイトルを記述する<title>、Webページの情報を検索エンジンやブラウザに伝える<meta>、リンクするファイルを記述する<link>、スクリプトを記述する<script>などがあります。<meta>タグには文字コードや検索キーワードや検索の説明やスマートフォンの設定などを記述します。<link>タグは主にCSS（スタイルシート）を、<script>タグは主にJavaScriptを指定します。

サンプルコード「index.htm」

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ここにタイトル</title>
    <meta name="keywords" content="キーワード1,キーワード2,キーワード3" />
    <meta name="description" content="ここにこのWebページの説明を書きます。" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
    <script type="module" src="./main.js" defer></script>
  </head>
  <body>
    (ここにWebブラウザに表示する本文を記述)
  </body>
</html>

サンプルコードの解説

<meta charset="UTF-8" />タグ：文字コードをUTF-8にします。

<title>タグ：Webページのタイトルを記述します。

<meta name="keywords" content="キーワード" />タグ：検索エンジン向けに使うこのWebページのキーワードを「,」区切りで記述します。

<meta name="description" content="説明" />タグ：検索エンジン向けに使うこのWebページの説明を記述します。

<meta name="viewport" content="設定" />タグ：スマホやタブレットのビューポートを設定します。

<link rel="stylesheet" href="cssファイル" />タグ：スタイルシートのcssファイルを指定します。

<script src="jsファイル"></script>タグ：JavaScriptのjsファイルを指定します。他にも<script>〜</ script>にはJavaScriptのスクリプトを記述します。

<body>タグ

　<body>〜</ body>タグの中にはWebブラウザに表示する本文のタグを記述します。

　よく使うタグは、ハイパーリンクする<a>タグや、画像を表示する<img>タグや、キャンバスを表示する<canvas>タグや、動画を再生する<video>タグや、サウンドを再生する<audio>タグや、ハイライトの<h1>～<h6>タグや、改行の<br />タグや、太字の<b>タグや、要素を一括りにする<div>タグや、リストの<ul>や<li>タグや、段落の<p>タグや、頭にくる<header>タグや、後ろにくる<footer>タグや、テーブルを表示する<table>や<tr>や<td>タグなどがあります。

単純なWebページ

サンプルコード「index.html」

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Tauri 2.0ではじめるRustプログラミング</title>
  </head>
  <body>
    <nav>
      <table>
        <tr>
          <td><h1>CodeZine</h1></td>
          <td><a href="#about">ABOUT</a></td>
          <td><a href="#tauri">TAURI 2.0</a></td>
          <td><a href="#rust">RUST</a></td>
        </tr>
      </table>
    </nav>

    <h2>Tauri 2.0ではじめるRustプログラミング</h2>

    <h3 id="about">ABOUT</h3>
    <ul>
      <li>Tauri 2.0ではじめるRustプログラミング</li>
    </ul>

    <h3 id="tauri">TAURI 2.0</h3>
    <ul>
      <li>Tauri 2.0ではじめるRustプログラミング</li>
    </ul>

    <h3 id="rust">RUST</h3>
    <ul>
      <li>Tauri 2.0ではじめるRustプログラミング</li>
    </ul>
  </body>
</html>

サンプルコードの解説

<nav>タグ：ナビゲーション（直訳すれば、Webページ間の航法）を表示します。

<table>タグ：テーブルを作成します。

<tr>タグ：テーブルのセルの行を表示します。

<td>タグ：セルの列を表示します。

<a>タグ：ハイパーリンクするアンカーを表示し、今回はハイパーリンクをクリックしたら同じページ内のidを頭出しするようにしました。

<h1>タグ：1番重要なハイライト文字を表示します。

<h2>タグ：2番目に重要なハイライト文字を表示します。

<h3>タグ：3番目に重要なハイライト文字を表示します。

<ul>タグ：リストを用意します。

<li>タグ：リストの1項目ずつを表示します。

コラム「UTF-8」

　文字をエンコードする文字コードは、それぞれの文字に振られている一意の番号のようなものの規格を表すものです。文字コードはUTF-8にすることをお勧めします。なぜなら世界中のパソコンやスマホで文字化けすることなく見ることができるからです。以前は日本語の場合Shift_JISやEUCのエンコードが使われることが多かったので、Webブラウザによっては間違って文字化けすることが多々ありました。