プログラミングめもめも

学びのアウトプットや読書メモなどを書き溜めます

【Python】sysライブラリの使い方を解説します

sysとは、Pythonの実行環境やインタプリタで使っている変数や関数を扱うライブラリです。

docs.python.org

例えば、インポートされているモジュールを文字列で返すsys.pathや、LinuxmacOSなどのスクリプトが実行されている環境を返すsys.platformなどがあります。

本記事では、スクリプト実行時に渡されるコマンドライン引数を管理できるsys.argvの使い方を紹介します。

sys.argvとは

コマンドラインPythonスクリプトを実行する時、コマンドライン引数を設定することがあります。

例えば以下のように、hoge.pyを実行する時に2つのコマンドライン引数を渡すイメージです。

python hoge.py arg1 arg2

この時に渡される引数を扱えるようにするのが、sys.argvです。

sys.argvの使い方

例として、コマンドラインでカレンダーを表示するプログラムを作成するとします。

コマンドライン引数に-m 月を指定すると、指定した月のカレンダーが表示されるイメージです。

python hoge.py -m 10
      102024
Mo Tu We Th Fr Sa Su
    1  2  3  4  5  6
 7  8  9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31

この時、-m 10の部分がコマンドライン引数です。

1. sysをインポート

sys.argvsysライブラリをインポートして使います。

import sys

2. コマンドライン引数を取得

コマンドライン引数はsys.argvでリスト形式で取得できます。

print(sys.argv)
python hoge.py -m 10
['calendar.py', '-m', '10']

上記のように、リストの1番目(sys.argv[0])はファイル名で、sys.argv[1]からコマンドライン引数となります。

渡された引数によって処理を変えたい場合は、次のようにif~elseで条件分岐すると良いと思います。

if len(sys.argv) == 1:
    # 引数がない場合(要素数が1、ファイル名のみ)の処理
elif len(sys.argv) == 2 and sys.argv[1] == "hoge":
    # 引数が1つかつその値が"hoge"だった場合の処理
else:
    # ...

参考:argparseについて

コマンドライン引数を受け取る処理は、argparseというライブラリでも可能です。

docs.python.org

sys.argvはリストのインデックス番号でしか管理できないため、引数がたくさんあったり、省略可能な引数があったりする場合は処理が面倒になります。

そうした場合はargparseが便利だそうです。

上記と同様-m 月を引数として取る場合、次のように取得できます。

# ライブラリインポート
import argparse

# パーサーを作成
parser = argparse.ArgumentParser(description='プログラムの説明')
# 引数を設定
parser.add_argument('-m')
# スクリプト実行時に渡された引数を取得
args = parser.parse_args()
print(args.m)

これで実行すると、-mの後に指定した値が取得できます。

python hoge.py -m 10
10

# 未指定だとNoneが返る
python hoge.py
None

引数が1つだとあまり利便性が分かりにくいですが、数が増えていけばより管理しやすくなるんだと思います。

最後に

今回はsys.argvの使い方について紹介しました。コマンドラインの操作は一見難しいように感じますが、実際やってみると簡単にできました。

sysには他の機能もたくさんあるので、色々調べてみると良いと思います。

『プロを目指す人のためのRuby入門』を読みました

Rubyの入門書として以下の本を読んだので、その感想を書き留めておきます。

良かったところ

サンプルコードが多くわかりやすい

1つの説明に1つの例など、とにかくサンプルコードが豊富でわかりやすかったです。

ありがちなエラー例もたくさんあるので、初心者がやってしまいがちなミスも網羅されています。

写経して自分の環境でも試すことで、より理解が深まりました。

実務で使う・(あまり)使わないの補足があり学習の優先順位をつけやすい

当著書は著者の10年近い実務経験をもとにして書かれており、「実務でこの書き方はよく目にする」「こういう書き方はできるが実際それほど使われない」などの補足も何度も出てきます。

そのため、情報の取捨選択がしやすいのもメリットだと思いました。

とにかく情報量が多く網羅的なため、初心者で実務経験がない自分にとって「どの情報を優先的に取り込むか(取り込まないか)」の判断は難しいです。

そこを先読みして(?)書かれている点が初心者フレンドリーだなと感じました。

多言語での記述例もあり処理のイメージがつきやすい

「この書き方はJavaScriptでは〇〇に当てはまる」「C#ではこう書く」など、多言語の概念や文法と比較してRubyの説明がされており、非常にわかりやすかったです。

私は独学ですがJavaScriptを勉強していたため、Rubyで初めてみる書き方もJavaScriptと比較することで理解が深まりました。

また、「JavaScriptでは可能だが、Rubyではできない」(関数内でのみ使われる定数を定義する、など)といった気をつけるべきポイントもしっかり書かれていました。

学んだこと

Rubyの動かし方からテストの自動化、クラスやモジュールまで網羅的に学ぶことができたのですが、特に読んでいて面白く、勉強になったと感じた章をピックアップして紹介します。

自動テスト

第3章の「テストの自動化」です。

テストはそれほど優先順位の高いものではなく、書籍の一番最後でさらっと学ぶイメージでしたが、かなり序盤で学習しました。

テスト駆動開発とは、先にテストを書き失敗させてから、テストにパスするよう実装・リファクタリングしていく手法のことです。まずテストを書くことで、プログラムの仕様が理解しやすくなり、バグを早期に防ぐことができるそうです。

3章以降の例題でテスト駆動開発を何度も行うため、なんとなくですが開発の流れを掴めたのが良かったです。

正規表現

正規表現は前職でも何度か必要になる機会が多かったのですが、苦手意識があり後回しにしていました。

理解できるのか不安でしたが、著者のQiitaの記事が非常にわかりやすく、スムーズに理解できました。

qiita.com

Qiitaで一般的な正規表現を、書籍でRubyでの書き方を学びました(書籍内でQiita記事について言及されています)。

実際に勉強してみると、正規表現の便利さを痛感します。

これはとにかく使っていかないと身につかないと思うので、今後もどんどん使っていきたいです(SQLとかで便利そう)。

オブジェクト指向プログラミング

第7章の「クラスの作成を理解する」の章です。かなり難しかったですが、インスタンスやメソッドなどの考え方が理解できました。

特にインスタンスメソッドとクラスメソッドについては、ProgateでRubyを学習した時にその使い分け方がわからず、うやむやにしていました。

それがこの章を読んで違いがスッと理解でき驚きました。とにかく説明がわかりやすいです。

一方、selfは呼び出しによって意味するものが異なる、など、ややこしく難しい内容も多かったです。

クラスについてはまだまだ理解が浅くプログラムも自作できる自信がないのですが、デバッグしながら進めていきたいです。

デバッグ手法

Rubyデバッグ手法は第12章で解説されています。

gemを使ってデバッグする方法がわかりやすく説明されているのと、エラーの読み方やバグへの対処法など、実務で役立つ内容が多かったです。

この章を参考にVSCodeデバッグ環境を作りました。(書籍内で拡張機能の紹介があります)

今後課題や実務に取り組む際も便利そうで満足です。

難しかったところ

全体的にわかりやすく、プログラミング未経験の自分でも読み進めることができました。

ただ後半の章にいくにつれて内容が難しくなってきます。

著者も「第7章(クラスの作成)から第11章(パターンマッチ)まではかなり難しい」と言及しており、私もその部分は半分も理解できなかったと思います。

行き詰まっていたところ、著者がこの本の読み方を解説している動画を見つけました。


www.youtube.com

難しく、実務に入ってからの方がイメージしやすい処理などは理解するのは諦めて、「頭の中にインデックスを作る」という意識で読み進めました。

ここで理解できなかった部分は、今後課題や実務で出会った時に再度読んでみようと思います。

最後に

ページ数が多く、内容もやや複雑な部分が多かったですが、説明がわかりやすく理解しやすかったです。

ただ当然全てを理解できたわけではないので、今後実際にプログラミングする中で、何度も読み直して知識を定着させたいです。

HC1ヶ月目の振り返り

12月にHappiness Chainというプログラミングスクールに入会して、1ヶ月が経ちました。

※スクールは現時点で全コース満員のため募集は停止しているみたいです。駆け込んでおいて良かった、、、

この1ヶ月でやった勉強や所感などを書き残しておこうと思います。

学習内容

最初の1ヶ月で学習した内容です。

  • Progateでプログラミングに触れる
  • Markdown記法
  • ブラインドタッチの練習
  • Web技術の基礎
  • VSCodeの使い方
  • Vim基礎
  • Linux基礎
  • Git & GitHub
  • HTML/CSS
  • Web開発の基礎
  • Docker
  • Ruby(途中まで)

MarkdownLinux、Gitは前職でも触ったことがあるので比較的スムーズに進められました。

ただ改めて勉強してみると、知らなかった便利な使い方がたくさんありました。

特にLinuxコマンドは便利なオプションがたくさんあり、非常に勉強になりました。

あとDockerは初めて触りましたが、とても面白かったです。

やはりターミナルの黒い画面で操作してうまくいってるログが出てると「できる人感」がありますね(?)

学習時間

12月の学習時間は110時間でした。

結構やっていたつもりでしたが、1日あたりに換算すると約4時間くらいです。

時間をかければ良いってものではありませんが、週5で働いている方々よりは時間があるはずなので、そのアドバンテージをもっと利用してガンガン進めるべきだろうと思います。頑張ります。

今後の課題

今はRubyのインプットで『プロを目指す人のためのRuby入門[改訂2版] 言語仕様からテスト駆動開発・デバッグ技法まで』を読んでいますが、ボリュームが多くて大変です。

難しいな〜〜と感じることも多く、なかなか前に進んでいる感覚がないのですが、著者の言う「頭の中にインデックスを作るつもりで」読むようにしようと思います。

今月中にRuby課題は終わらせたい、、、!!

最後に

この1ヶ月はほぼ毎日コツコツ勉強できたと思います。

とにかく辞めずに淡々と継続ことを第1の目標にしながら、インプットとアウトプットを続けていきたいです。

今月も頑張ります!

Webアプリをdocker化する方法を紹介します

この記事では、railsプロジェクトをdocker化してブラウザで動作確認できるようにするまでの方法を紹介します。

当方の環境のバージョンは以下の通りです。

  • OS:macOS:12.7.2
  • docker:v24.0.6
  • docker compose:v2.23.0-desktop.1

RubyRuby on Rails、postgresのバージョンは以下です。

1. GitHubからクローン

プロジェクトがGitHubにある場合はクローンします。

git clone {リポジトリURL}

2. dockerコンテナ起動に必要なファイルの準備

Dockerfile、docker-compose.ymlをプロジェクト直下に新規作成します。

Dockerfile

FROM ruby:3.2.2
RUN apt-get update && apt-get install -y \
    build-essential \
    libpq-dev \
    nodejs \
    yarn
WORKDIR /myapp
COPY Gemfile Gemfile.lock /myapp/
RUN bundle install

簡単なコマンド解説です。

コマンド 説明
FROM ruby:3.2.2 DokerhubからRubyのイメージを取得
RUN apt-get update... railsプロジェクトに必要なソフトウェアをコンテナにインストール
WORKDIR /myapp コンテナのホームディレクトリをmyapp/に指定
COPY Gemfile Gemfile.lock /myapp/ Railsプロジェクトに必要なパッケージを記載したGemfileをコンテナにコピー
RUN bundle install COPY...でコンテナにコピーしたGemfileからパッケージをインストール

docker-compose.yml

version: '3'
volumes:
  db-data:

services:
  web:
    build: .
    command: bundle exec rails s -p 3000 -b '0.0.0.0' # docker-compose upで実行されるコマンド
    ports:
      - "3000:3000" # localhost:3000でブラウザ表示
    volumes:
      - ".:/myapp" # カレントディレクトリをコンテナの/myappにマウント
    environment:
      - "POSTGRES_PASSWORD=postgres"
    tty: true # コンテナ内でbash操作するため
    stdin_open: true # コンテナ内でbash操作するため
    depends_on:
      - db

  db:
    image: postgres:12
    volumes:
      - "db-data:/var/lib/postgresql/data" # DBデータをdocker volumeのdb-dataにマウント
    environment:
      - "POSTGRES_PASSWORD=postgres"

3. データベース設定

config/database.ymlにDB接続情報を追加します。

# ...
default: &default
  adapter: postgresql
  encoding: unicode
# 以下を追加
  host: db
  user: postgres
  port: 5432
  password: <%= ENV.fetch("POSTGRES_PASSWORD") %>

passwordはdocker-compose.ymlenvironmentで指定しているものです。

4. コンテナを起動

以下のコマンドを実行し、コンテナを起動します。

docker-compose up

上記により、イメージができていない場合もイメージビルドからコンテナ作成・起動まで実行できます。

ただ、この時点ではコンテナのDBが作成されていないので、 http://localhost:3000 にアクセスしてもエラーが表示されます。

5. DB作成

dockerコンテナのweb、db(上記のdocker-compose.ymlで記載したサービス)がどちらも起動中であることを確認したら、ターミナルの別タブを開いてコンテナに対してDB作成・マイグレーションのコマンドを実行します。

# DB作成
docker compose exec web rails db:create
# マイグレーション
docker compose exec web rails db:migrate

上記が正常に完了したら、再度 http://localhost:3000 にアクセスしてみてください。

プロジェクトのトップページが表示されたらOKです。

最後に

開発環境の構築はPCの環境によって様々なエラーが発生してしまいますが、dockerを使えばチームで簡単に同じ環境を共有・構築できます。

今後も新しい言語やフレームワーク、プロジェクトを自分のPCで構築する機会があれば、積極的にdockerを使っていきたいと思いました。

既存プロジェクトのdocker化の参考にしていただければ幸いです。

GitHub PagesでWebサイトを公開する方法

この記事では、GitHub Pagesを使ってWebサイトを公開する手順を紹介します。

GitHubアカウントさえあれば無料で公開できます。

サイト公開の手順は大きく分けて次の通りです。

今回の解説は、GitHubにアカウントを持っていることを前提としています。

すでにGihHubにソースをPushしている状態であれば、「4. 設定 > PagesでWebサイトの公開設定」のみをご覧ください。

1. GitHubリポジトリを作成

まずは公開するサイトのリポジトリGitHub上で作成します。

GitHubのマイページ→repositoryタブをクリックし、新規リポジトリを作成します。

リポジトリ作成画面でリポジトリ名を指定します。

Public(ソースコードが公開)、Private(非公開)はPublicを指定してください。

無料枠だとPublicでないとGitHub Pagesが使えないためです。

それぞれ設定し、「Create repository」をクリックすればリモートリポジトリが作成されます。

2. GitHub(リモートリポジトリ)と自分のPCのリポジトリを紐付け

上記で作成したリモートリポジトリに、自分のPCのリポジトリを紐付け、Pushします。

リモートリポジトリを新規作成した際に表示されるコマンドを、紐付けたいディレクトリで入力すればOKです。

# git初期セットアップ
git init
git commit -m "first commit"
git branch -M main
git remote add origin git@github.com:{リポジトリ名}
git push -u origin main

上記コマンドでリポートリポジトリと紐付け&Pushまでできます。

これができたら、ブランチを切ってサイトのコーディングを行います。

3. ソースコードGitHubにPush

ローカルでコーディングができたら、リモートリポジトリにPushします。

# 変更内容を全てステージング
git add .
# コミット
git commit -m 'コメント'
# リモートリポジトリにPush
git push origin main

mainブランチ以外で作業してPushする場合は、git push origin {ブランチ名}でリモートリポジトリにも同名のブランチが作成・Pushされます。

4. 設定 > PagesでWebサイトの公開設定

リモートリポジトリ(GitHub)にソースコードをPushできたら、最後にGitHub Pagesの設定です。

リポジトリページの「Setting」タブをクリックします。

左サイドバーの「Pages」をクリックしてください。

「Branch」設定エリアで公開したいブランチを選び、パスは「/(root)」のまま、「save」をクリックするとWebサイトが作成されます。

次のキャプチャのように、サイトURLが表示されればOKです。 「Visit site」をクリックしてWebサイトを見てみましょう。

URLが表示されるまで少し時間がかかります。しばらく経ったらページを再読み込みしてください。

最後に

GitHub Pagesはほんの数分で全世界に自分のWebサイトを公開できる便利な機能です。

ポートフォリオの公開などに便利だと思いました。 無料で利用できるので、ぜひ試してみてください。

Webサイトにダークモードを実装する方法【CSS / JavaScript】

CSSJavaScriptでダークモードを実装する方法です。

やることは次の通りです。

バイスの設定を反映させる

まずは、各デバイスのシステム設定などで指定しているライトモード・ダークモードをそのままWebサイトに反映させます。

以下はサンプルです。ご自身のデバイス設定に合ったモードで表示されているはずです。

See the Pen darkmode-systemDefault by hachicombu (@hachicombu) on CodePen.

やり方は簡単で、CSSのカスタムプロパティでライトモード・ダークモードそれぞれの値を指定するだけです。

/* light mode */
:root {
  --background: #fff;
  --text-color: #333;
}

/* dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #000;
    --text-color: #ddd;
  }
}

ライトモードは@media (prefers-color-scheme: light)のメディアクエリでもOKです。

これをHTML要素で使用すると、設定が反映されます。

html {
  padding: 2rem;
  transition: 0.5s;

  /*  色指定  */
  background-color: var(--background);
  color: var(--text-color);
}

ユーザーがブラウザ上で切り替えできるようにする

多くのサイトでは、ユーザーがボタンなどをクリックすることでライトモード・ダークモードを切り替えできるようになっています。

この機能を実現するためには、JavaScriptでクラスの付け外しなどを実装します。

やることは、次の2点です。

  • バイスで設定されているモードを判定し、初期表示時に反映させる
  • ボタンクリックでクラスを付け外し、モードを切り替える

サンプルではトグルボタンクリックでライトモード・ダークモードが切り替わります。

See the Pen dark-mode-without-storage by hachicombu (@hachicombu) on CodePen.

トグルボタンは以下のサイトから生成しました!便利!

pote-chil.com

OSで設定されているモードを判定し、初期表示時に反映させる

バイスの設定はwindow.matchMediaで取得します。

// デバイスの設定がダークモードかどうか
const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;

developer.mozilla.org

CSSのメディアクエリと同じ書き方で、ダークモードかどうかが取得できます。

判定(boolean)はmatchesに格納されています。

上記で取得したisDarkModeから、初期表示時のモードを設定しておきます。

if (isDarkMode) {
  // HTML要素に.darkを追加
  rootEl.classList.add("dark");
  // トグルボタンをcheckedに
  btn.checked = true;
} else {
  // HTML要素から.darkを削除
  rootEl.classList.remove("dark");
  btn.checked = false;
}

バイス設定がダークモードの時はHTML要素に.darkを追加します。

トグルボタンのchecked属性はボタンの切り替えに使っています。

CSSのカスタムプロパティは次のように修正しました。

:root {
  --background: #fff;
  --text-color: #333;
  --button-bg: #ffac7533;
  --button-color: #ffac75;
}
:root.dark {
  --background: #333;
  --text-color: #ddd;
  --button-bg: #57525233;
  --button-color: #575252;
}

/* 以下は削除 */
/* @media (prefers-color-scheme: dark) {
  :root {
    --background: #000;
    --text-color: #ddd;
  }
} */

バイス設定がダークモードかどうかはJavaScriptで判定し、クラスを付けて管理するようにしたため、CSSのメディアクエリが必要なくなりました。

トグルボタンもモードにより色が変わるので、その設定も上記でしています。

ボタンクリックでクラスを付け外し、モードを切り替える

トグルボタンのクリックにより、.darkの付け外しをしています。

btn.addEventListener("click", () => {
  if (btn.checked) {
    rootEl.classList.add("dark");
  } else {
    rootEl.classList.remove("dark");
  }
});

ボタンのchecked属性がtrue(=ダークモード)の時はクラスを削除し、false(=ライトモード)の時は追加する処理です。

ブラウザ上で切り替えた内容を記憶して、再読み込みした際にも設定を反映させる

これまでの実装だと、手動で切り替えたモードがブラウザに記憶されておらず、再読み込みすると初期表示の状態に戻ってしまいます。

再読み込みやブラウザを閉じても直前の設定が反映されるように、ブラウザのローカルストレージを使って、トグルボタンクリック時に設定が保存されるようにします。

See the Pen switch-darkmode by hachicombu (@hachicombu) on CodePen.

まずはボタンのクリックイベントに、localStorage.setItem("theme", "dark");を追加します。

引数にkeyとvalueを指定すると、その値がローカルストレージに保存されます。

btn.addEventListener("click", () => {
  if (btn.checked) {
    rootEl.classList.add("dark");
    localStorage.setItem("theme", "dark");
  } else {
    rootEl.classList.remove("dark");
    localStorage.setItem("theme", "light");
  }
});

Chromeの場合は開発者ツール(F12)→ Application → Storage → Local storageから確認できます。

Lightモードを選んだ時

さらに、初期表示や再読み込み時にはローカルストレージの値を元に、ダークモードかライトモードかを指定します。

if (localStorage.getItem("theme") === "dark") {
  darkModeOn();
} else if (localStorage.getItem("theme") === "light") {
  darkModeOff();
}

これで、ブラウザを閉じて再表示しても、元の設定内容になっているはずです。

ローカルストレージのデータは、ブラウザ履歴からストレージデータを削除するか、JavaScript側で削除処理(localStorage.clear())を行わないと削除されません。

ブラウザを閉じたらデータが削除されるsessionStorageを使っても良いかな、と思いました。(再読み込みでは削除されません)

developer.mozilla.org

今回は以上です!

セマンティックHTMLでマークアップを書きたい

セマンティックHTMLとは、要素の目的や役割に応じてHTMLのタグを使い分けることを言います。

ただ見た目を整えるだけなら全て<div>で作っても良いですが、見出しや文章の区切りなど、ドキュメントの構成を正しく伝えるためにはHTMLのセマンティック要素を使う必要があります。

例えば、最上位の見出しは<h1>、ナビゲーションは<nav>、文章のセクションは<section>で表すなどです。

セマンティック要素はおよそ100もあるようですが、その中でもずっと使い方が曖昧だったセクショニング・コンテンツと呼ばれる次の4つの要素についてまとめたいと思います。

  • section
  • article
  • aside
  • nav

そもそもなぜセマンティックHTMLで書く必要があるのか

セクショニング・コンテンツの使い方の説明の前に、そもそもセマンティックHTMLがなぜ重要かを、以下の3つの観点から紹介します。

  1. SEO対策
  2. Webアクセシビリティ
  3. コードの保守性

1. SEO対策

検索エンジンがWebサイトを探索する際、HTMLタグを参考にします。

セマンティックHTMLで構造的に正しいマークアップがされていると、クローラーがそのサイトを理解しやすくなり、結果的に検索順位の向上につながります。

2. Webアクセシビリティ

目の不自由なユーザーがWebサイトを操作する際、スクリーンリーダーと呼ばれる読み上げソフトを利用します。

適切なマークアップは、それらのユーザーが必要なコンテンツにアクセスするサポートをしてくれます。

3. コードの保守性

Webサイトはリリース後に何度も修正や更新が行われます。

その際、セマンティックHTMLでマークアップしていると、コードを見ただけで「この部分はどんな役割を表現しているのか」がすぐに理解でき、開発スピードが上がります。

developer.mozilla.org

セクショニング・コンテンツの役割と使い方

ここからは、4つのセクショニング・コンテンツについて詳細をまとめます。

以下の書籍を参考にしています。セクショニング・コンテンツ以外のHTMLタグへの理解も深まるのでおすすめです。

武器になるHTML - 柴田 宏仙

1. section

ページの章や節、項など自立したセクションを表します。

また<h1><h6>マークアップした階層を、より明確にするために使われます。

そのため、<section>には1つ以上の見出しタグが必要です。

<section>
    <h2>旅行先を選ぶ</h2>
    <p>目的地をお選びください。</p>

    <section>
      <h3>アジア</h3>
      <p>...</p>

      <section>
        <h4>東南アジア</h4>
        <p>...</p>
      </section>

      <section>
        <h4>南アジア</h4>
        <p>...</p>
      </section>
    </section>

    <section>
      <h3>ヨーロッパ</h3>
      ... 省略
    </section>
  </section>

2. article

マークアップした範囲を他から切り離しても、独立したコンテンツとして成り立つ場合に使います。

ブログ記事やニュース記事、ユーザーのコメントなど、個別に配信や再利用することを意図したコンテンツです。

<article>
    <h2>行ってよかった旅行先ベスト3</h2>
    <p><time datetime="2023-11-21">2023.11.21</time></p>

    <p>過去当社を利用されたことのあるお客様50名に聞いた、行ってよかった国・地域を紹介します。</p>
        ...省略

    <p>この記事を書いた人:xx支店店長</p>
</article>

<article>入れ子にする場合、内側の<article>は外側と関連するコンテンツになります(記事に対するコメントなど)。

<article>
    <h2>行ってよかった旅行先ベスト3</h2>
    <p><time datetime="2023-11-21">2023.11.21</time></p>

    <p>過去当社を利用されたことのあるお客様50名に聞いた、行ってよかった国・地域を紹介します。</p>
        ...省略

    <p>この記事を書いた人:xx支店店長</p>

    <section>
      <h3>コメント</h3>
      <article>
        <h4>タイはおすすめ</h4>
        <p>投稿者: Aya</p>
        <p><time datetime="2023-11-22 12:00">20分前</time></p>
        <p>この記事を読んでタイに行ってきました!</p>
      </article>
    </section>
  </article>

個人的に<section><article>の使い分けがややこしいと感じましたが、次のような基準で判断すると良いそうです。

  • section:サイトの話題を構成する一部
  • article:ブログやSNSで投稿した場合、それだけで1つのコンテンツとして成り立つ

Webサイトによくある「About(〇〇について)」「Contact(お問い合せ)」「Feature(特集)」など、ページを構成する1要素は<section>アーカイブの1記事などは<article>を使うと良さそうです。

3. aside

サイドバーなど、メイン要素から切り離せる補足情報や余談、広告などに使います。

4. nav

グローバルナビゲーション、パンくずリスト、目次などに利用します。

<nav>は複数指定可能ですが、主要なナビゲーション1つのみに<nav>を使うことが推奨されています。

なぜなら、<nav>はスクリーンリーダーでナビゲーションのランドマークと読み上げられ、ユーザーのページ移動の目印となります。

<nav>が複数あると区別がつきにくく、ユーザーの混乱を招く可能性があるからです。

そのため、フッターによくある利用規約やプライバシーポリシーなどは<nav>で囲む必要はありません。

以上、セマンティックHTMLのざっくりとしたまとめと、セクショニング・コンテンツの使い方の紹介でした。

私もまだまだ正しいマークアップができていないので(特にWebアクセシビリティの理解はほぼないです)、これからも学習を続けたいと思います!