はじめに
プログラム言語のHTMLとCSS、そしてJavaScriptを学習する意義は、WebサイトやWebアプリケーションを開発するための基本的なスキルを身につけることであるとされる。
HTMLとCSSは、Webページの構造や見た目を定義する言語で、JavaScriptは、Webページの動作や機能を制御する言語である。したがって、これらの言語を使えば、自分のオリジナルのWebサイトやWebアプリケーションを作成することができる。
また、HTMLとCSS、JavaScriptは、他のプログラミング言語の基礎となる概念やロジックを学ぶのにも役立つ。つまり、Webサイトの作成方法を学ぶ際には、HTMLタグの基本やHTMLとCSSの違いを理解することから始めれば良い。
これらのプログラミング言語を学習することで、Web開発の世界に入るための第一歩を踏み出すことができるはずである。
PWA（Progressive Web Apps）を活用するためには、HTML、CSS、そしてJavaScriptの知識が重要になるという。これらのプログラム言語は、PWAの構築や機能実現において基礎的かつ不可欠であるらしい。これらのプログラム言語は、PWAを効率的に活用するための土台となっているからである。
私がプログラム言語のHTMLとCSS、そしてJavaScriptを独学で学習しようと思い立った動機は、PWAでポートフォリオサイトを構築したいと思い立ったからである。
HTML
HTML（HyperText Markup Language）は、ウェブページの構造を定義するためのプログラム言語である。つまり、HTMLとはWebの仕組みの根幹となる言語であり、文章の構造を指定するために用いる。例えば、コンテンツの配置やセクションの作成に使用される。
PWAとの使用では、PWAのベースとなるウェブページを作成して、ウェブアプリマニフェストやサービスワーカーとリンクさせるために必要である。
HTMLは、インターネットで閲覧しているWebサイトに表示される画面をつくっているプログラム言語である。つまり、Web上で公開しているページのテキスト（文書）やレイアウトなどの構造を定義している書式となる。
Webサイト内のどこにタイトルや本文を配置し、段落のどこまでをひとまとまりにするかなど、文章の構造を明確にする役割で、基本的には作成者にとって使いやすい仕様を目指している。
Webサイトの見た目を変化させるために「HTMLタグ」という目印を使って、作成者がコンピューターに指示を出しているものと理解すればよい。
HTMLタグの基本
Webサイトを作成する際に活用するHTMLタグとは、文章の構造をコンピューターに指示し、見出しや段落、画像の表示や他の文書へのリンクなどを指定する言語である。
HTMLタグの代表的な種類
| <h1>〜<h6> | 見出しを作成するタグ （数字が小さいほど大きい見出し） |
| <a> | リンクを埋め込むタグ （他のページへリンク先の指定） |
| <p> | 段落指定するタグ |
| <br> | 改行指定するタグ |
| <hr> | 罫線を水平歩行に引くタグ |
| <img> | 画像を挿入するタグ |
| <button> | ボタンを作成するタグ |
HTMLタグは、上表のような目印（タグ）を使って、表示する文字に意味を持たせることができる。
例えば、「HTMLとは？」という見出しを作成する場合は、
| <h1>HTMLとは？</h1> |
HTMLタグ「<h1>」を使って、見出しだとわかるように開始と終了部分を囲む。見出しは「<h1>〜<h6>」まで、表したい文字の大きさや見出しの種類によって選定可能である。
| h1 | 大見出し（タイトル） |
| h2 | 中見出し（章・目次など） |
| h3 | 小見出し（各章のポイント） |
| h4 | 超小見出し（h3よりも小さい補足） |
また、「HTMLタグ」というボタンを作成したい場合には、以下の囲みで作成できます。
| <button>HTMLタグ</button> |
ボタンのタイプ（種類）は「type=””」で表す。例えば、汎用ボタン（クリック時の動作が決まっていないもの）で「ボタン」を作成する場合は
| <button type=”button”>ボタン</button> |
となる。表したいボタンをタイプで指定することがポイントである。
囲みの終了タグには、基本的に</h1>や</button>のようなバックスラッシュが入る。
CSS
CSS（Cascading Style Sheets）は、デザインやレイアウトを整えるためのプログラム言語である。サイトの視覚的な美しさを向上させる。
PWAとの使用では、PWAがモバイルデバイスで快適に動作するよう、レスポンシブデザインを実装する際に役立つ。
HTMLが文章構造自体を指定する言語なのに対し、CSSは文章にどのような装飾（デザイン）を行うかを指定できる言語である。つまり、文章の内容を表すのがHTML、その文章の色やサイズなどを指示するのがCSSである。
HTMLタグやHTMLファイル（HTMLタグで囲んだ文章を集めたファイル）に直接記述したり、CSSファイル（外部に作ったファイル）に記述したりして作成する。
CSSを活用すれば、見出しを吹き出しや帯（リボン）の形にすること、背景にグラデーション効果を施すこと、アニメーションを作ることなども可能である。
1文字ずつ時間差で登場するテキストアニメーションや、波紋のように円が広がるアニメーション、さまざまな種類の回転や紙吹雪もCSSで指定することができる。
【おすすめの独学用書籍】
| 書名 | 1冊ですべて身につくHTML & CSSとWebデザイン入門講座 |
| 特徴 | Webサイトを構築・設計するために必要なHTMLとCSSのスキルが学べる。コードが学べるのは勿論だが、デザインスキルも学べるのが嬉しい。体系的に必要な知識を学べるので、初心者に向いていると思う。 |
| 出版 | SBクリエイティブ |
| 価格 | 2,486円 |
JavaScript
JavaScriptは、ウェブページに動的な機能を追加するプログラム言語である。ユーザー操作やデータ処理をスムーズに実現するために使用される。
PWAとの使用では、PWAの中核を担うサービスワーカー（キャッシュ管理やオフライン機能を実現するスクリプト）を作成したり、プッシュ通知を設定する際に不可欠である。
JavaScriptは、動的なWebページを作成できるプログラミング（動作を定義するプログラム）言語であるため、アニメーションでさらに動きを出したいときは、CSSとJavaScriptと組み合わせて表現するとよい。
JavaScriptを活用すると、ユーザーのアクションに応じたコンテンツの表示や、ブラウザ上で地図やグラフィックアニメーションなども表示できる。
Webサイトの多くはHTML、CSS、画像、JavaScriptのデザインで作られている。
【おすすめの独学用書籍】
| 書名 | 1冊ですべて身につくJavaScript入門講座 |
| 特徴 | プログラミングの基本から実践までこの一冊で学べる。アニメーションとイベントの知識も学べる。体系的に必要な知識を学べる丁寧な入門書なので、初心者に向いていると思う。 |
| 出版 | SBクリエイティブ |
| 価格 | 2,794円 |
追加で役立つ知識
- ウェブアプリマニフェスト（Web App Manifest）
- JSONファイルで、PWAの名前やアイコン、インストールオプションを定義する
- HTTPS
- PWAは安全性の高い通信プロトコル（HTTPS）環境で動作するため、SSL証明書の設定が必要である
あとがき
PWA（Progressive Web Apps）を活用するために、HTML、CSS、JavaScriptといったプログラミング言語を学ぶことは、リベラルアーツの学習に大いに繋がるはずである。これらのプログラミング言語を学ぶプロセスは、リベラルアーツが重視している論理的思考・創造性・多学問的アプローチと密接に関係しているからである。
リベラルアーツとの繋がり
- 論理的思考力の強化
- プログラミング言語を学ぶと、問題を分析し解決する論理的アプローチが自然と身につく
- JavaScriptで動的な機能を構築する際には、コードの流れやデータの管理を体系的に考える必要がある
- この過程は数学や哲学で論理的推論を学ぶのと似ており、リベラルアーツの基本的な能力を育ててくれる
- 創造性とデザイン思考
- HTMLとCSSは、ウェブサイトやアプリのデザインを形作るためのツールである
- これらを学ぶことで、自分の創造的なビジョンを具体化し、視覚的に魅力的なアプリを作るスキルを磨ける
- ユーザー体験（UX）を向上させるために、デザインと機能を調和させることはアートやデザイン学と密接に関連している
- 多学問的な視点の融合
- JavaScriptで実現する動的なインタラクションは、心理学（ユーザー行動の理解）やデータサイエンス（利用データの解析）といった他の分野の知識と組み合わせることで、より洗練された結果を生み出す
- PWAのオフライン機能を設計する際には、技術（サービスワーカー）、倫理（使いやすさや透明性）、経済（商業利用の可能性）といった視点が統合される
リベラルアーツ学習における実践の価値
- 実践的な課題解決
- PWAの開発を通じて、抽象的な知識を具体的な成果物に変える能力が磨かれる
- これは、リベラルアーツが追求する知識を社会でどう活用するかというテーマに沿った学びである
- 人間中心のデザイン
- ユーザーが何を求めているのかを理解し、それに応える設計を行うことは、リベラルアーツが重視する人間の理解と直結する
学び方の提案
- 基礎の学習から応用へ
- 最初にHTMLとCSSで静的なウェブページを作成し、次にJavaScriptを学んで動的な要素を追加すると学習が円滑に進む
- その後、サービスワーカーやウェブアプリマニフェストを学び、PWAを実装する経験を積むと良い
- 他の分野との連携を意識する
- 技術だけでなく、心理学、デザイン学、経済学といったリベラルアーツ分野の知識を同時に学ぶことで、より多面的な理解が深まる
このように、PWAを活用するためにHTML、CSS、JavaScriptといったプログラミング言語を学ぶことは、単に技術スキルを向上させるだけでなく、リベラルアーツの中心的なテーマである広い視野での知識活用・人間理解・社会との接続を実践する貴重な機会となる。これらの取り組みを通じて、リベラルアーツの学びを深めていきたいと思う。