ネットワークはなぜつながるのか第2版を読んだメモ

参考

とても良い本でした。

www.nikkeibp.co.jp

各操作抜粋

各操作の意味がわかったのが、この本を読んで一番良かった点。

（操作）リクエスト・メッセージをF12→ネットワークで見てみる

大量のリクエスト

（操作）自PCのネットワーク詳細の確認

右下のネットのとこクリックネットワークとインターネットの設定

→ネットワークと共有センタ→接続名をクリック→詳細

↓こんな感じでIPアドレスやら最寄りのDNSサーバーを設定する。

（操作）netstat -anoでソケットを見る（TCP担当部分）

• ローカルアドレス　　自分のIPアドレス : ポート番号
• 外部アドレス　　相手のIPアドレス　：　ポート番号
• 状態　　通信状態。listening相手からの接続待ち。established通信中。
• PID　　識別番号。タスクマネージャーで調べられる。

（操作）route printでルータの経路表を見る（IP担当部分）

• ネットワーク宛先：宛先IPアドレス
• ネットマスク：宛先のネットマスク
• ゲートウェイ：中継ルーターのIPアドレス
• インターフェース：端末がパケットを送り出すLANポート（ネットワークインターフェイス）のIPアドレス
• メトリック：送信コスト。小さい方が良い。

※ゲートウェイの「リンク上」同じネットワーク内にあるので中継いらず、ということ。

道順は、インターフェース→ゲートウェイ→宛先、となる。

ASCII.jp：ルーティングの基本動作を見てみよう

127.0.0.1＝localhost。自分自身を表す、ループバックアドレスと言う。

ローカル・ループバック・アドレス（127.0.0.1）とは？：Tech TIPS - ＠IT

https://wa3.i-3-i.info/word17065.html

（操作）tracert -d で宛先までの道順を見る（IP担当部分）

IPアドレス8.8.8.8に到達するまでの中継ルーターIPアドレスが表示される。

tracertコマンドでネットワークの経路を調査する【Windows 10トラブル対策】：Tech TIPS - ＠IT

（操作）arp -aでIPとMACアドレスの対応表を見る（イーサネット担当部分）

このIPアドレスを持つ機器は、このMACアドレスを持っていますよ、というIPとMACの対応表。 

ブラウザ（アプリケーション）のお仕事

URL入力

http:// ウェブサーバー
ftp:// ファイルサーバー URLに入力するとファイルサーバー用ソフトが起動する
mailto:// メールサーバー URLに入力するとメールソフトが起動する

file:// ファイル読み込み

www ワールワイドWEB。インターネットのこと。

例：HTTPプロトコルでWebサーバーにアクセス
http://user:password@www.google.com:80/dir/file1.htm

user	ユーザー名（省略可）
password	パスワード（省略可）
www	ホスト名（ウェブサーバー名）
google.com	Webサーバーのドメイン名
80	ポート番号（省略可）
dir/file1.htm	ファイルのパス名

例2：クライアント自身のファイルからデータ読み込み
file://localhost/c:/path/file1.zip

localhot	コンピュータ名（省略可
c:/path/file1.zip	ファイルパス

ブラウザに「file:///C:/Users/」と打ったらこんな画面が開いた！！！　ほえー初めて知ったわ。ブラウザでこんなことできるんやなあ。

例3：メール

mailto :abc@gmail.com

abc@gmail.com

メールアドレス

URLの解読

https://www.google.co.jp/
　上記のURLを入力するとブラウザは
　httpプロトコルで
　www.google.co.jpというドメイン名のWEBサーバー
　に接続するんだなあと解読する。

ファイル名を省略した場合にどこにアクセスするのか？
　デフォルトをindex.htmlとかmain.htmlとかをウェブサーバーに設定しておく。
　そうするとルートディレクトリにあるindex.htmlにアクセスする。
　↓こんなふうに解読する。
https://www.google.co.jp/root/index.html

HTTPリクエストメッセージの作成

リクエスメッセージに書かれていること

何を	URI　　https://www.google.co.jp/など
どうする	HTTPメソッド　GET/POST/PUTSなど

リクエスメッセージの中身

リクエストライン：メソッド・ URI・ HTTPバージョン

メッセージヘッダー：リクエストの付加的な情報

メッセージボディ：クライアントからサーバーに送るデータ。GETの場合は空。POSTの場合はFormに入力した値など。

リクエスト・メッセージに書くURLは1つだけ

画像がある場合は、画像の枚数分リクエストを送っているらしい。
画像に限らずjsファイル、CSSファイルなんかの読み込みにもリクエストを送っていると思う。
1つのページを開くのに大量のリクエストが送られていることの謎が解けた。
↓html以外にも大量のリクエストがある。

大量のリクエスト

（操作）リクエスト・メッセージをF12→ネットワークで見てみる

上記画像のようなものが見れる。

DNSサーバーに問い合わせ

ブラウザから最寄りのDNSサーバーにwww.google.comというサーバーのIPアドレスを教えて、と問い合わせる。

IPアドレスの基本

	10進数表記		2進数表記
IPアドレス	10. 1.    2.   3		00001010.00000001.00000010.00000011
サブネットマスク	255.255.255.0		11111111.11111111.11111111.00000000

サブネットマスク2進数表記の「１」の部分がネットワーク部。

「０」の部分がホスト部。

例： 10.11.12.13/255.255.255.0
全32ビット中の上位24ビットがネットワーク、下位8ビットがホストであることを示す。

10.11.12.13/24でも同じ意味。上位24がネットワーク部ですよということ。

ドメイン名とIPアドレスを使い分ける理由

ドメイン名の方が人間にはわかりやすいが、データ量が多くなってしまうため。
IPアドレス：32ビット
ドメイン名：数十～２５５バイト

（操作）自PCのネットワーク詳細の確認

右下のネットのとこクリックネットワークとインターネットの設定

→ネットワークと共有センタ→接続名をクリック→詳細

↓こんな感じでIPアドレスやら最寄りのDNSサーバーを設定する。

IPアドレスって怖いから隠すけど、DHCPなら毎回変わるし関係なさそう。

最寄りのDNSサーバーがばれる方が危ないのかなあ。

DNSサーバーの基本動作

クライアントからDNSサーバーへの問い合わせ内容

名前	サーバーやメール配送先
クラス	常に「IN」　INはインターネットを表す。最初はインターネット以外も使う想定だった名残。
タイプ	A：IPアドレス　MX：メール配送先

例

名前	クラス	タイプ
www.google.com	IN	A

↑www.google.comのIPアドレスは？という問い合わせ。

DNSサーバーからクライアントへのレスポンス

名前	クラス	タイプ	レスポンス
www.google.com	IN	A	192.0.2.226

↑www.google.comのIPアドレスは192.0.2.226だよというレスポンスが返ってくる。

返ってくるのはレスポンス部分だけ。

ドメインの階層

例：www.lab.glasscom.com

comドメインが最上位で、comの中のglasscomの中のlabドメインという順に探す。

DNSサーバーも同じ構造になっていて最上位のDNSサーバーにcomが登録されていて、その下位にglasscocom→labが登録されている。

なので、DNSサーバーを上から順にたどっていくと目当てのドメインに辿り着ける。

目的のドメインを探す流れ

クライアント→最寄りのDNSサーバー→ルートDNSサーバー→comDNSサーバー→glasscomDNSサーバー→labDNSサーバー→目的のドメイン（IPアドレス）

※最寄りのDNSサーバーはクライアントに設定しておく。

URLからIPアドレスを割り出すことを「名前解決」という。

プロトコルスタックにメッセージ送信を依頼する

プロトコルスタックとは？

プロトコルスタックとは、コンピュータ上で、通信を実現するための一連の通信プロトコル群を実装しているモジュール（プログラム部品）のことである。

通信プロトコルは階層的な構造を持っている。 その各階層で、それぞれ異なる役割のプロトコルが機能しており、各プロトコルが連携して初めて通信が実現されてる。 例えば、インターネットで用いられているTCP/IPでは、TCPやIPに加えて、HTTP、Ethernet（IEEE 802.3）などの通信プロトコルが機能しており、それらが連携して初めて通信機能を実現している。 プロトコルスタックは、一揃い（suite）という意味で、プロトコルスイートと呼ばれることもある。 特にTCP/IPの場合は、「インターネットプロトコルスイート」と呼ばれることも多い。 ちなみに、スタック（stack）とは「積み重なり」といった意味である。

用語検索 - ZDNet Japan

IPアドレスが分かったら、宛先にメッセージを送るようにOS内部にあるプロトコルスタックに依頼します。

具体的にはSocketライブラリのプログラムを決められた順番に呼び出して依頼するらしい。

ちょっとここらへんよくわからなかった。

イメージとしては

ソケットというのは通信用の出入り口。

まず、Webサーバー側が通信用のソケットを用意してリクエストが来るのを待ち受ける。

ウェブサーバーはソケット常時用意して、常に待ち受けている。

クライアント側は、通信するときだけソケットを作り、ウェブサーバーまでパイプを繋いで通信をする。

通信が終了したら、パイプを外してソケットを抹消します。

1. ソケットを作る
2. サーバー側のソケットにパイプを繋ぐ
3. データを送受信する
4. パイプを外してソケットを抹消する

これらの動作はブラウザではなく、OS内部のプロトコルスタックの担当。

ブラウザは依頼するだけ。

OSのお仕事　TCP/IP プロトコルスタックとLANアダプタを探検

1. ソケット作成
2. サーバー接続
3. データ送受信
4. サーバーから切断してソケット抹消
5. IPとイーサネットの送受信動作

ここまでの流れ

 URL入力→URL解読→HTTPリクエスト・メッセージの作成

→DNSサーバに問い合わせ→プロトコルスタックにメッセージ送信依頼

ソケットの実体（イメージ）

本来は概念的なもので実体はない。

実体↓

• IPアドレス
• ポート番号
• 通信状態など

（操作）netstat -anoでソケットを見る

• ローカルアドレス　　自分のIPアドレス : ポート番号
• 外部アドレス　　相手のIPアドレス　：　ポート番号
• 状態　　通信状態。listening相手からの接続待ち。established通信中。
• PID　　識別番号。タスクマネージャーで調べられる。

クライアントからサーバーへの接続動作の実際

クライアントがサーバーのソケットに接続→クライアントがTCPヘッダー作成

→IP担当部にわたす→IP担当部がパケット送信

→サーバー側IP担当部が受け取り、TCP担当に渡す→TCPのヘッダーを解析

→該当するソケットを探し出す→TCP担当が返事返す

→TCPヘッダー作成→ここからは同じ→切断動作

TCPのお仕事

通信の接続、送受信、切断をIP担当に依頼すること？

主にヘッダー情報の作成してIP担当に渡すまで、というこになるのかしら。

IPとイーサネットのパケット送受信動作

ここらへんからハードウェアが出てくる。

xxxxというアドレスはxxxx番目のケーブルだ、みたいな。

ルーターとハブ

ルーターはIPのルールでパケット運ぶ

ハブはイーサネットのルールでパケットを運ぶ

ルーターが経路表を元に、次の宛先ルーターを特定

→ルーターがハブ（イーサネット）に依頼

→宛先ルーターのMACアドレスを調べて送る

どちらもヘッダー情報を参照しているが

• ルーター：IPヘッダー。IPアドレス。
• ハブ：MACヘッダー（イーサネット用のヘッダー）MACアドレス。.

という違いがある。

ちなみにIPアドレスはLANアダプタに付与する。

1つのPCにLANアダプタが複数あれば、その数だけIPアドレスがある。

プロトコルの流れ：TCP→IP→イーサネット

という順番で依頼していく。

• TCPが通信の接続、送受信、切断担当
• IPがルーターまでの宛先、IPアドレス
• イーサネットがハブから先の宛先、MACアドレス

という認識でいいじゃろか。

（操作）route printでルータの経路表を見る

• ネットワーク宛先：宛先IPアドレス
• ネットマスク：宛先のネットマスク
• ゲートウェイ：中継ルーターのIPアドレス
• インターフェース：端末がパケットを送り出すLANポート（ネットワークインターフェイス）のIPアドレス
• メトリック：送信コスト。小さい方が良い。

※ゲートウェイの「リンク上」同じネットワーク内にあるので中継いらず、ということ。

道順は、インターフェース→ゲートウェイ→宛先、となる。

ARPはIPを元にMACを調べる

ARPはサブネット内のPC全部に「XXXというIPはいますか？いたらMACアドレス教えて」と伝える。

全員に聞く仕組みをブロードキャストという。

（操作）arp -aでIPとMACアドレスの対応表を見る

このIPアドレスを持つ機器は、このMACアドレスを持っていますよ、というIPとMACの対応表。 

IPのお仕事

• IPヘッダーの作成：TCPヘッダーを元に最終目的を知り、それを元に経路表から、次のルータの宛先をヘッダー情報に組み込む
• MACヘッダーの作成：ARPでMACアドレスを割り出し、その情報をMACヘッダーに組み込む。

 此処から先はイーサネットのお仕事。

 LAN機器のお仕事　ハブ、スイッチ、ルーター、ケーブル

※ここから先は雑まとめになります。疲れた。

1. ケーブルとリピーターハブの中を信号が流れる
2. スイッチングハブのパケット中継動作
3. ルーターのパケット中継動作
4. ルーターの付加機能

LAN機器の重要な役割は、信号を劣化させないこと。

• リピーターハブ：ブロードキャスト。LAN全体に信号をばらまく。
• スイッチングハブ：宛先のMACアドレスにだけ信号を送る。
• ルーター：ポートごとにIPとMACアドレスが存在する。
• NAT：これもルーターの仕事。グローバルIPとプライベートIPの変換。グローバルとプライベートの対応表を持ってて、それを元に宛先を割り出す。

電話局、プロバイダのお仕事

ADSLとか光ファイバのお話。

サーバー側のLANのお仕事

• Webサーバー
• ファイアーウォール
• 負荷分散
• キャッシュサーバー

のお話。

Webサーバーは社内にあるとは限らない。

データーセンターにあったり、クラウド上にあったりするよ。

ファイアーウォールの仕組み

パケットフィルタリングはパケットのヘッダー情報を元にフィルターする。

IPアドレス・MACアドレス・ポート番号など。

例：Webサーバーは送信元ポート番号80以外は遮断する。

Webサーバーのお仕事

サーバーアプリケーションの構造

アパッチやらNginxのこと。

サーバーは複数のクライアントと同時に通信を実行する。

でも、これを1つのプログラムで実現するのは大変。

なので、クライアントが接続してくる都度、新たにプログラムを起動する。

複数のプログラムを同時起動するということ。

だから、プログラマーが作るプログラムは1つのクライアント処理だけを意識して作れば良い！

プログラムとクライアントは常に1対1ということになる。

ちなみに、接続のたびに新しいプログラムを起動するのはOSのお仕事。

OSがマルチスレッドで頑張ってるんやね。

まとめ

大雑把にMVCでのリクエスト→レスポンスの流れをまとめてみた。

1. ユーザーがリクエスト送信
2. ブラウザがHTTPリクエストを作成
3. DNSサーバーに問い合わせて、URLから宛先IPアドレスを解析
4. ルーターが経路表を元に宛先IPまでの順路を割り出す
5. arpでネットワーク内の機器に「このIPアドレスをもつ人いますか？」と聞く
6. 「私が持っています。MACアドレスはXXXXです。」と返答が来る
7. 5と6を繰り返してWebサーバーにたどり着く
8. Webサーバーがリクエストごとにプログラムを起動する
9. apサーバーがリクエストをControllerで受け取る
10. ControllerがModelに値をセット
11. ModelがDBに値をセット
12. DBが結果を返す
13. Controllerがレスポンスを返す
14. クライアントがレスポンスを受け取る
15. ブラウザが画面をレンダリングして表示！

for文でvarを使うと危険

参考

JavaScriptの変数宣言はletにすべきか 『入門JavaScriptプログラミング』から解説：CodeZine（コードジン）

基本

varは関数スコープ。同じ関数ないなあらスコープ外からでも参照可能。

letはブロックスコープ。すこーぷ内からのみ参照可能。

letを使いましょう。

letでfor文

下記の部分をvar i = 0;にしたら上手く行かなかったのでメモ。

for (let i = 0; i < link.length; i++) {}

コメントの中に説明を全部書いてしまった。

JavaScript

  /** for文を var i = 0;にするとだめな理由
   * 前提：varは関数すこーぷ。
   * 前提2：for文は i = 3になった時点でループを抜ける。
   * 前提3：var i = 0;は無名関数のスコープ外で宣言されている。
   * 前提4：iをスコープ外である無名関数の中で使っている link[i].classList.addのところ
   * しかし、varだとループを抜けてスコープ外に出てもi = 3が保持され続ける。
   * だから、イベント発火して、link[i].classList.add('visited');のところで
   * i[3]になってしまい、配列の範囲外エラーが出てしまう。
   * デバッグモードでiの値を見てみるとわかる。
   * */ 
  for (var i = 0; i < link.length; i++) {
    // 各ボタンをイベントリスナーに登録
    link[i].addEventListener('click', function (event) {
      event.preventDefault();

      // visitedクラスを付与
      link[i].classList.add('visited');
    });
  }
});

ちなみにaddEventListenerの中身は、for文で回転中には実行されない。 イベント発火した時に実行される。 なので、for文ではイベント登録がされるだけ。

html

            <p><a class="link" href="#">click1!</a></p>
            <p><a class="link" href="#">click2!</a></p>
            <p><a class="link" href="#">click3!</a></p>

CSS

a {
  color: blue;
}

/* click済みの所を紫にする */
.visited {
  color: purple;
}

どうしてもvarでfor文したいなら

即時関数を使います。

参考

qiita.com

window.addEventListener('load', function () {
  // 複数のlinkクラスを配列で取得する
  const link = document.getElementsByClassName('link');

  for (var i = 0; i < link.length; i++) {
    // 各ボタンをイベントリスナーに登録
    (function () {
      var x = i;
      link[x].addEventListener('click', function (event) {
      
        // visitedクラスを付与
        link[x].classList.add('visited');
        event.preventDefault();
      });
    })();
  }
});

正直意味がわからないけどこれで上手くいく。

なぜ x = i; するのだろうか。

i がスコープ外とはいえ、for文回している最中なら普通に012と増えていくのを参照できそうな気がするんだけど。

そしてもうIE対応はやめて！！！

頼む！！！

JavaScriptのreturn falseでイベント制御

return falseの意味を知らなかったのでメモ。

JavaScriptのイベントってonclickとかaddEventListenerとかでイベント設定して、それを制御するのだけだと思っていた。

けど、htmlのイベントも制御できるようです。

return falseとかで。

例

• リンククリック
• formタグのsubmit

こういうhtmlのイベントをストップできる。

<a id="link" href="google.co.jp">リンク</a>

let link = document.getElementById("link");

link.addEventListener('click', function(e) {

e.preventDefault(); //画面遷移しない
e.stopPropagation(); // 画面遷移しない。
return false; // 画面遷移しない。
});

それぞれの違いなどは下記参考サイトがわかりやすい↓

freelance-jak.com

リンクやsubmitをクリックするとhtmlのイベントより前に、JavaScriptのclickイベントが発生するんですね。

Javaの文字化け対策

文字化けで混乱したところ

文字化け済みの文字にgetBytes("UTF-8")とかやってもしょうがないんだよ。

化けた文字を別の文字コードに変換してるだけだから、別の文字コードでまた化けた文字ができるだけ。

文字化けしてるってことはめちゃくちゃなバイト配列になってるから、それにエンコードかけてもまた変なバイト配列ができるってことね。

→これを解決する方法みつかった。「別の文字コードに変換する方法2」のところに書いた。

文字化けの原因特定

下記サイトで文字化け前の文字を入力して調査する。

ltside.com

ここで原因がわかったら下記のコードで文字コードを変換する。

String str = "あああ" // ←ここが文字化けしている想定
String s = new String(str.getBytes("ISO-8859-1"), "変換したい文字コード");

基本

基本的には開発環境の文字コードとファイルの文字コードを合わせればOK。

例えばEclipseでtest.propertiesファイルを見たら文字化けしてた！という時。

まずはEclipseをUTF-8にする。

test.propertiesファイルをサクラエディタとかで開いて、UTF-8に設定する。そして中身を編集して保存する。

これだけで普通はOK。

デフォルトの文字コードを見る方法

System.out.println("デフォルト文字コード；" + System.getProperty("file.encoding"));

リクエスト値に文字コードを設定する

ただし、GETはダメでPOSTのみ有効らしい。

request.setCharacterEncoding("UTF-8");

別の文字コードに変換する方法

String str = "あ";
byte[] bytes = str.getBytes("UTF-8"); // UTF-8でバイト配列に変換
String str2 = new String(bytes, "UTF-8"); //文字に戻す

// 元の文字が文字化けしてなければ、どの文字コードでも変換できるはず？→多分ダメ
byte[] bytes = str.getBytes("SJIS");
String str2 = new String(bytes, "SJIS");

qiita.com

www.sejuku.net

別の文字コードに変換する方法2（まずはこれをやる！）

この方法が一番良い気がする。
元の文字が文字化けしていてもOK！

String str = "あ" //←これが文字化けしている想定

// byte配列をそのまま取り出す
byte[] iso = str.getBytes("ISO-8859-1");

// あとはお好みの文字列に自由に変換可能
String utf3 = new String(iso, "UTF-8");
String sjis = new String(iso, "SJIS");
String eucjp = new String(iso, "EUC-JP");

・参考
ISO-8859-1とは : JavaA2Z

jspに文字コード追加

<%@page contentType="text/html; charset=UTF-8" %>

<% request.setCharacterEncoding("UTF-8"); %>

web.xmlに文字コードフィルターを追加する方法

追加したらプロジェクトをクリーンする。

<?xml version="1.0" encoding="UTF-8"?>

<web-app>
  <display-name>Struts Blank Application</display-name>
  
<!-- ↓ここからフィルター -->
    <filter>
        <!-- ↓フィルターの名前を設定 -->
        <filter-name>EncodeFilter</filter-name>
        <!-- ↓上記で放り込んだフィルタークラスのパス -->
        <filter-class>filters.SetCharacterEncodingFilter</filter-class>
        <!-- ↓フィルタークラスのフィールドの初期化。この場合はUTF-8でエンコーディングさせる設定 -->
        <init-param>
            <param-name>encoding</param-name>
            <param-value>UTF-8</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <!-- ↓使いたいフィルターの名前と一致させる -->
        <filter-name>EncodeFilter</filter-name>
        <!-- ↓どのURLを呼んだときに上記フィルタを起動させるか設定。この場合は全てのURLに対してフィルタを使う -->
        <url-pattern>/*</url-pattern>
    </filter-mapping>
<!-- ここまでフィルター -->
  
  <!-- Standard Action Servlet Configuration -->
  <servlet>
    <servlet-name>action</servlet-name>
    <servlet-class>org.apache.struts.action.ActionServlet</servlet-class>
    <init-param>
      <param-name>config</param-name>
      <param-value>/WEB-INF/struts-config.xml</param-value>
    </init-param>
    <load-on-startup>2</load-on-startup>
 </servlet>


  <!-- Standard Action Servlet Mapping -->
  <servlet-mapping>
    <servlet-name>action</servlet-name>
    <url-pattern>*.do</url-pattern>
  </servlet-mapping>


  <!-- The Usual Welcome File List -->
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>

</web-app>

・参考
Linuxに使われる日々 : strutsで日本語が文字化けするのを直す - livedoor Blog（ブログ）

sever.xmlで文字コード指定

Serversプロジェクトのserver.xmlに赤字部分を追記。
追加したらプロジェクトをクリーンする。

URIEncoding="UTF-8" useBodyEncodingForURI="true"/>

・参考

Linuxに使われる日々 : strutsで日本語が文字化けするのを直す - livedoor Blog（ブログ）

Unicodeとは

文字コードの規格の1つ。

Unicode規格で策定されたUTFにはUTF-8、UTF-16、UTF-32の3種類がある。

符号化文字集合：Unicode

文字符号化方式：UTF-7、UTF-8、UTF-16、UTF-32

ということらしい。

https://wa3.i-3-i.info/word11422.html

プログラムはなぜ動くのかを読んだメモ

私が読んだのは第2版。

www.nikkeibp.co.jp

型宣言はメモリ領域の確保

charは1バイト型

shortは2バイト型

longは4バイト型

型宣言すると上記のメモリ領域が確保される。

C言語のポインタ

ポインタはデータ型を意識すると理解しやすい。

ポインタ宣言はWindows用プログラムの場合、32ビットのメモリ領域を確保する。

char *d; // charのポインタ宣言。32ビットメモリ領域。

short *e; // shortのポインタ宣言。32ビットメモリ領域。

long *f; // long型のポインタ宣言。32ビットメモリ領域。

どの型で宣言してもポインタはメモリ領域を32ビット確保する。

じゃあ何が違うのか？

ポインタに格納されたアドレスから一度に何バイトのデータを読み書きするかが違う。

charなら1バイトずつ読み書き。

shortなら2バイトずつ読み書き。

longなら4バイトずつ読み書き。

Javaが機械語に変換されるまで

ソースコード（sample.java）→バイトコード(sample.class)
→ネイティブコード（ここでJava仮想マシンが各OSに合わせる）

ちなみにCPUの種類が変わればネイティブコードの種類も変わる。
x86/x64/AMD64とか色々あるらしい。

 32bitCPUと64bitCPU

32bitCPUが4GB以上のメモリを認識できないのは2の32乗が4GBだから。

64bitは128TB。

128TBのメモリが普及するのはいつ頃だろう。

リンク・リンカーとは

ソースコードには書かれていないが必要なものを取ってくる処理。
たとえばSystem.out.println()とソースに書いたとする。
しかし、そのソース内にはprinlnメソッドの処理内容は書かれていない。
なので、必要なソースを取ってきて結合する。
ちなみに不要な記述を削除するのもやっているらしい。

ソースコード（sample.java）→リンク→バイトコード(sample.class)→ネイティブコード→.exeファイル

.exeと.dllの違い

.exeは特定のアプリケーションの実行ファイル。
.dllは複数のアプリケーションの実行時に呼び出されるファイル。色々な関数とかが入っているらしい。
ダイナミックリンクライブラリだからライブラリだったんですねえ。

DLLファイル（Dynamic Link Library）とは - IT用語辞典 e-Words

インタプリタとコンパイル

インタプリタ：実行時にソースコードの内容を1行ずつ解釈して処理する。
コンパイラ：実行前にソースコード全体を解釈して処理する。

ビルドとは

コンパイルとリンクを行うこと。

システムコール

OSのカーネル機能の呼び出し。

カーネルとはアプリケーションとハードウェアの架け橋。

例：printf
printf→OSに対してシステムコール→OSがハードウェアを制御→ディスプレイに文字列表示

windowsではシステムコールのことをAPIと言うらしい。

ハードウェア制御のときだけシステムコールされる？

ハードウェア視点でのプログラム処理の流れ

補助記憶装置（HDD/SSDなど）にある高級言語がネイティブコードに変換される
→ネイティブコードが主記憶装置（メモリ）に格納される
→CPUがメモリから命令やデータを読み出し、CPU内部のレジスタに格納して処理する

レジスタとは

レジスタとは、マイクロプロセッサ（MPU/CPU）内部にある、演算や実行状態の保持に用いる記憶素子。

最も高速な記憶装置だが、一般的なCPU製品で数個から数十個（容量に換算して数十バイト程度）と数が限られる。

GPUなど特殊なプロセッサでは数万個（数百キロバイト）のレジスタを内蔵するものもある。

 レジスタ（register）とは - IT用語辞典 e-Words

クリックされた要素をJavaScriptで取得する

複数の同じURLのリンクがあってどれがクリックされたか判定したかった↓

イベントオブジェクトから取得

こっちはクラス名がなくてもできる。

html

            <p><a href="#" onclick="changeColor2(event)">click4!</a></p>
            <p><a href="#" onclick="changeColor2(event)">click5!</a></p>
            <p><a href="#" onclick="changeColor2(event)">click6!</a></p>

JavaScript

function changeColor2(event) {
  // event.targetでイベントが発生した要素を取得
  const link = event.target;
  link.classList.add('visited');
}

CSS

a {
  color: blue;
}

/* click済みの所を紫にする */
.visited {
  color: purple;
}

getElementsByClassNameで取得

html

            <p><a class="link" href="#">click1!</a></p>
            <p><a class="link" href="#">click2!</a></p>
            <p><a class="link" href="#">click3!</a></p>

JavaScript

// 複数のlinkクラスを配列で取得する
const link = document.getElementsByClassName('link');

for (let i = 0; i < link.length; i++) {
  // 各ボタンをイベントリスナーに登録
  link[i].addEventListener('click', function () {
    
    // visitedクラスを付与
    link[i].classList.add('visited');
  });
}

CSS

.link {
  color: blue;
}

/* click済みの所を紫にする */
.link.visited {
  color: purple;
}

参考

www.mdn.co.jp

www.javadrive.jp

CSS修正の心得

心得

アンチパターン

検証モードで修正点を1個見つけては、1個ずつ修正する。

良いパターン

検証モードでページ全体をみて、まとめて修正できるポイントを探す。

レイアウト崩れの犯人探し

崩れているレイアウトの最上位タグを怪しむところから始めよう。

最上位から下へCSSの設定が伝播していくので。