tiny_sample_java_web_application

HTML

これまでのおさらい

お待たせしました。前の章ではこれからの作業の準備として、開発をしていくのに必要なことを覚えてもらいました。「そんなことより、Spring Initializrからダウンロードしてきた私のからっぽアプリはどうしたらいいんだ」とお思いですね。

・・・もしかして、もう忘れてました？

おさらいしましょう。Javaなどこれから使う言語やツールをインストールした後、Spring Initializrというサイトから私たちがこれから作るアプリのひな形をダウンロードしてきました。

そして、チュートリアルに言われるがままHelloControllerクラスを新たに作り、”/”にマップしたindexメソッドを作りました。そのメソッドが文字列を返すようにします。そして、gradle bootRunでひな形アプリを起動し、http://localhost:8080/としてアクセスすると、ちゃんとindexメソッドに記述した内容が表示されました。

indexメソッドはこんな内容でした。

@GetMapping("/")
public String index() {
    String html = """
        <html>
            <body>
                <h1>Hello, world!</h1>
            </body>
        </html>        
    """;
	return html;
}

この”"”の間に囲まれた部分が、相手のブラウザに表示されます。ちゃんと大きめの太字でHello, world!が告げられたものと思います。ハロー、世界。

HTML

世界にハローを告げた部分はHTMLで記述されていました。さっきのサンプルはたった5行しかないものでしたが、ちゃんとウェブサイトを作りたいのならもっとHTMLを学ぶ必要があります。

HTMLは有名ですよね。HTMLをまったく知らない人はあまりいないと思います。が、逆に読者の中に「ああ、HTMLなら特に不自由なくサラサラと書けますよ」という人もたぶんいないでしょう。というか、私もサラサラは書けません。

だいたいどういう書式なのかとか、<h1>とか<a>とかいうタグというものがあるんだよねと、そういうことは知っているけども、実際にウェブページの1枚を全部書いたことがあるという人の方が少ないでしょう。見出しやリンク、箇条書きや表が書けることは知っているけど、それでどうやったらAmazonみたいなサイトが作れるのか、さっぱりわからないよという人もいるでしょう。

気持ちはよくわかります。というか、私にはAmazonそっくりにレイアウトされたHTMLを作ることは出来ません。うーん、このパターンばっかりだ。

Amazonの難しそうなページ

とはいえ、この難しそうなページもHTMLで書かれていることは間違いありません。ブラウザの「ソースを表示」機能でそのHTMLを見ることができます。見ても何が何だかさっぱりわからないでしょうけどね。

このようなページを作れるようになるには、最新のHTMLに通じていることに加えて、CSSという画面の装飾のための別の技術、そしてJavascriptという画面に表示されているものを人間の操作に応じて変化させる(例えば、マウスカーソルをボタンの上に持ってきたら色が変わるとか)ための別の技術を習得する必要があります。それ全体は、かなり難しいです。

その難しさを理解してもらうために言っておきましょう。このAmazonのページそっくりの画面を、HTMLとCSSを駆使して作れたらあなたはJavaなんて1行も書けなくてもこの業界でメシを食っていくことが出来ます。このスクリーンショットを見て、「はいはい、こんな感じね」と再現出来たらかなりのものです。そのぐらいの技術です。

私に教わってそこまで出来ることは期待しないでください。でも、簡単なページを表示させることならすぐに出来ますし、あなたがきっちり極めればここまでいけます。自分がやったことがすぐ画面上で確認できる技術ですから、楽しく学んでいけると思います。やってみましょう。

HTMLの一次資料

HTMLはWebのもっとも基本的な技術要素であり、Webがこの世に誕生した瞬間から存在するものでもあります。なので、非常に古い教科書もありますし、非常に古い内容を紹介したWebサイトもあります。あまり古い情報が古びない分野ではあるのですが、作成の基本方針のようなものが30年の間にちょっとずつ変わっていますから、できれば最新のチュートリアルをやりたいところです。

Web開発の最新の情報といえば、誰もが足を向けて寝られないというMDNを最初に見に行くのが良いでしょう。MDNは、もともとはFirefoxブラウザを作っているMozillaが運営している開発ガイドだったのですが、今やChromeを作っているGoogleなどの他のWeb関連組織も「せっかく流行っているから、ここに書いてることはみんなが正しいって認めたものばかりってことにしようや」と運営に参加して作られています。なので、Webの標準を勉強したかったらここを見るのが間違いないです。

MDNにはいろんなレベルのドキュメントがありますが、チュートリアルは初心者向けなので難しいことには言及されていないハズですが、少し表現が硬いところもあるので、引っかかってしまう初心者もいるかもしれません。しかし、これより易しいものを探すよりは、引っかかったところを教えてくれる人を身近で探す方がオススメです。イマドキ、だいたい1人ぐらいは見つかります。一杯奢って教えてもらってください。その方が安くつきます。

まずは、MDNの初心者向けの入り口は、ここです。

ウェブ開発を学ぶ

今回はこのページにあるHTML入門を読んでいきましょう。

「HTML入門」は、基礎なのでいったん一通りざっと読んで欲しいです。その上で、以下のところだけは実際にサンプルを自分のPCに保存して、表示して確かめていってください。このように本やサイトを、サンプルを自分で動かしながら読んでいくことを「写経」と呼びます。学習に最も有効な手段の1つです。
- 「HTML を始めよう」
- 「HTML テキストの基礎」
- 「ハイパーリンクの作成」
「マルチメディアと埋め込み」は「HTML の画像」だけを読んで下さい。
「HTML 表」は「HTML の表の基本」だけを読んで下さい。

ここまでで、だいたいどんな「書類」でも作れるようになったはずです。議事録や報告書なんかを書くには十分ですね！

・・・確かにビジネス文書は書けそうですが、素敵なWebページの作成からはまだ距離がありそうです。というのも、そもそもHTMLのご先祖様はこのような書式の整ったビジネス文書を書くための技術だったんです。それこそ雑誌のページやチラシのデザインをするDTP(Desktop Publishing)と呼ばれる技術とは全然別のところから発展しました。

そんなHTMLから、どうやって今のようなカラフルでデザインに満ちたWebページが作られているのか。それを知るためには次節でCSSを学ばなければなりません。次へ進みましょう！