はじめに
初投稿です。駆け出しエンジニアの学習ログです。アウトプットがてら記事に残します。
Webの基礎動作を検証しながら理解中です。自分が詰まったポイントや理解しづらかったこと、試したことや勉強したことの要点を中心に備忘録としてまとめています。
つまるところ、学習過程での検証・思考ログです。
実行環境
- Windows11
- Google Chrome
Web開発の技術
Webアプリを作りたければ「フロントエンド」と「バックエンド」の二つを開発する必要があります。
それぞれメモついでに解説
- ・ フロントエンド
-
Webサイトを訪れた人が目にする、「ブラウザに表示される部分」のこと。
ここの開発がお上手だと、見栄えの良い、使いやすいインターフェースが出来る。
有名な技術だと Next.js や vue.js とか。
今回使う予定の技術は下記。
| 技術 | 概要・用途 |
|---|---|
| HTML | Webページの構造を定義 |
| CSS | ページのレイアウトやデザインを制御 |
| JavaScript | Webブラウザ上で動く 相互的な機能や動的要素を追加 |
| React | JSのフレームワーク 動的に表示を変えるUI構築に便利なライブラリ |
- ・ バックエンド
-
ユーザーの見えないところ、「サーバー側で動作するプログラムやシステム」のこと。
例としては、ネットでお買い物したときの、クレカと請求会社側のやり取りとか。
有名な技術だと PHP や Ruby on Rails とか。
今回使う予定の技術は下記。
| 技術 | 概要・用途 |
|---|---|
| Node.js | JavaScriptの実行エンジン 通常Webブラウザで動くJSを独立して使えるようにする |
| Express | JSのフレームワーク Webサーバーを作る基本的な機能が備わっている |
| SQL | データアクセス言語 データベース制御に用いる |
各項目の深堀りはまた今後。
基本はフロントエンドとバックエンドの2つを組み合わせてWebアプリが動くっぽいです。
検証1：lang属性を変えたら具体的に何が変わるの？
指定をミスすると、具体的にどう困るのか？
ふと気になったので検証してみる。
他の要素はいじらず<html lang="jp">から変更点はlang="en"のみ。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
</head>
<body>
<h1>これで大きな文字</h1>
<p> <p>タグは段落を示す</p>
<a href="https://qiita.com/">これでQiitaのホームにとぶ</a>
</body>
</html>
結果はこちら
表面上はなにも変化していない。
調査してみた結果、langで言語コードを指定することで以下の変化が現れる様子。
・デフォルトのフォントに変更が入る
・翻訳ツールを動作させるか確認が入る
・ブラウザによっては検索者の言語と紐付いて結果を返すため、検索結果に影響が出る
参照
https://www.tohoho-web.com/html/attr/lang.htm
https://www.seoptimer.com/ja/blog/html-lang-attribute/
https://developer.mozilla.org/ja/docs/Web/HTML/Reference/Global_attributes
検証2：meta charsetがズレていたら文字化けするの？
エンコードの違いで文字化けが...とは、ファイルをいじって遊んでいればよくある話だ。
meta charsetが実際のファイル保存形式とズレていれば、文字化けが起こるのは自明だが、実際どうなるのか検証してみる。
こちらも他の要素はいじらず<meta charset="UTF-8">から変更点はcharset=" "
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset=" ">
<title>Hello!</title>
</head>
<body>
<h1>これで大きな文字</h1>
<p> <p>タグは段落を示す</p>
<a href="https://qiita.com/">これでQiitaのホームにとぶ</a>
</body>
</html>
結果はこちら
やっぱりブラウザの表示上はなにも変化なし。
ページは正常に表示されているように見える。
お、おかしい...エンコードを指定していない以上、文字化けするはずでは...！？
試しにcharset="Shift-JIS"やcharset="ASCII"、charset="UTF-16"も指定してみたが表面上の変化はなし。ファイルは変わらずUTF-8で保存。BOMも外している。
ここまで来るとむしろ文字化けを起こしたくなったので色々実験。meta指定とファイル保存方法を色々いじってみたので下表に記載。
| meta指定とファイルの中身 | 結果 |
|---|---|
| なし, UTF-8 (BOMあり) | 化けない |
| UTF-16, UTF-8 (BOMあり) | 化けない |
| UTF-16, UTF-8 (BOMなし) | 化けない |
| UTF-8, UTF-16(BOMあり) | 化けない |
| UTF-8, UTF-16(BOMあり) | 化けない |
| UTF-8, Windows-1252 | 化ける |
Windows-1252でファイルを保存した場合に文字化けが発生した。
Windows-1252はラテン文字の文字コードで日本語非対応。
そもそも表現できない言語を無理矢理保存したので、文字化けもむべなるかな。
中身と不一致なエンコードを指定しても文字化けしなかった理由。
結果としては、「ブラウザが文字コードを自動検出・補正していた」ことが原因かと考えられる。たぶん。
以下各結果の理由について。
| ファイルの中身 | 結果 | 原因 |
|---|---|---|
| UTF-8 (BOMあり) |
化けない | BOMがついていたため 「これはUTF-8だな」 と判別して自動補正を行っていた |
| UTF-8 (BOMなし) |
化けない | ファイル先頭から内容をスキャンして 「UTF-8らしさ」を判別して自動補正を行っていた |
| UTF-16 (BOMあり) |
化けない | BOMがついていたため 「これはUTF-16のLE（またはBE）だな」 と判別して自動補正を行っていた |
| Windows-1252 | 化けた | 日本語非対応なので 変換テーブルに載ってない＝そもそも表現できない よって、日本語文字の各バイトが無理やりそのまま保存され「意味不明なバイト列の集まり」になっていた。 |
参照
https://zenn.dev/40_comeback_eng/articles/c55e643fcfd840
補足：ブラウザの文字コード判定処理について
先ほどの参照記事ではブラウザの文字コード判定処理について
Content-Type charset が指定されていない場合、以下の順序で文字コードを判定します。
- BOMチェック
- HTMLのメタタグチェック
- ヒューリスティック解析
とあるが、上記の検証結果では
meta=UTF-16 ファイル=UTF-8(BOMなし)においても文字化けは発生しなかった。
ローカルで開いているため、ブラウザはHTTPレスポンスヘッダを受け取っていない。そのためContent-Type charsetも指定されていない筈である。
つまり、優先順位として ヒューリスティック解析>メタタグチェック となっているのではないかと考えられる。
一方で、これがファイル保存にUTF-8を使用しているが故の仕様である可能性も考えられる(ブラウザにおけるデフォルトの文字エンコードはUTF-8であるため)。
あくまで考察なので、正確なところは分からない。
誰かChromeのエンコードの仕様に詳しい方教えてください。
CSSの記述順序を変えてみる
プログラミング言語は基本同期処理(一つずつ順番に処理される)だが、CSSはどうなんだろう。
サンプルのHTML/CSSを用意し、<style></style>の中身は変えず、順番だけ変更して記述してみる。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
<style>
h1 {
color: brown;
background-color:antiquewhite;
}
h1#second{
color: yellowgreen;
}
</style>
</head>
<body>
<h1>これで大きな文字</h1>
<h1 id="second">これは大きい文字2</h1>
<p> <p>タグは段落を示す</p>
<a href="https://qiita.com/">これでQiitaのホームにとぶ</a>
</body>
</html>
これで作成したページを確認してみると
となる。次はCSSの記述順序を変えてみる。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello!</title>
<style>
h1#second{
color: yellowgreen;
}
h1 {
color: brown;
background-color:antiquewhite;
}
</style>
</head>
<body>
<h1 id="first">これで大きな文字</h1>
<h1 id="second">これは大きい文字2</h1>
<p> <p>タグは段落を示す</p>
<a href="https://qiita.com/">これでQiitaのホームにとぶ</a>
</body>
</html>
変更点はh1#second{color: yellowgreen;}の記述箇所のみ。
実行結果は
変化なし。
つまり記述の順番に関わらず、単純な<h1></h1>タグへのスタイル指定より、idを使った<h1 id=""></h1>タグへの指定の方が優先される。
まとめ
・lang属性は指定をミスっていても、表示上は問題なく動く
影響としては
・デフォルトのフォントに変更が入る
・翻訳ツールを動作させるか確認が入る
・ブラウザによっては検索者の言語と紐付いて結果を返すため、検索結果に影響が出る
また、
・meta charsetは指定をミスっても、ある程度融通が利く
理由としては
・「ブラウザが文字コードを自動検出・補正していた」から
・ブラウザの自動補正機能は想像以上に優秀
・meta charsetを書かなくても表示上問題なく動くこともあるが、あくまでブラウザの補正頼り
・誤認・混乱・互換性の問題を避けるためにも、明示的に記述するのがベスト。ちゃんと書くべし