HTMLは、これからプログラミング学習を始めたい方の初めの第一歩として強くおすすめできる言語です。なぜなら、他の言語のような環境構築や、複雑なロジックは不要だからです。HTMLをやってみることで、「プログラミングって案外簡単なのでは?」と思えるはずです。
本格的なプログラミングではプログラムを書いて実行することというよりは全体設計が難しいのですが、HTMLを学習することで、プログラムを書いて実行すること自体は非常に簡単ということが分かるはずです。
このページでは、HTMLでできること、学習方法、仕事内容などについて解説していきます。
<目次>
●HTMLってどんな言語?
●HTMLの特徴は?
・HTMLのメリット
・HTMLで開発されたサービスの事例
・HTMLのデメリット
●他言語との違いは?
・Javaとの違い
・PHPとの違い
・相性の良い他言語
●HTMLを使ってどんな仕事ができる?
・職種の例
・仕事内容の例
●HTMLを学びたい! まずは何をすればいい?
・学習の大まかな流れ
・HTML学習におすすめの書籍、サイト
・ライブラリ/フレームワークとは
●HTMLで就職できる企業を探すには?
・HTMLで就職できる企業の探し方
●この記事のまとめ
●先輩エンジニアの選考体験談が見られる! ONE CAREER for Engineerのご紹介
・ONE CAREER for Engineerではどんなことができる?
HTMLってどんな言語?
HTMLは、Hyper Text Markup Language(ハイパーテキスト・マークアップ・ランゲージ)の略です。名前から何となくイメージできる通り、見出し、段落、表、リンクなどウェブページの表面、特に文章パーツを作る言語です。どのウェブページも開くと文章が書かれていますが、この文字はHTMLです。
HTMLにはタグという概念があるのですが、このタグで文章を囲うことでページ表面に出力しています。タグの例をご紹介すると、以下のようなイメージです。
<p>サンプル</p>
上記のように、文章の前後にタグを書くとHTMLになります。ちなみに、<p></p>は通常のテキストという意味です。
HTMLの特徴は?
HTMLの概要は上でご紹介した通りです。次に、HTMLの特徴について簡単にご紹介します。
HTMLのメリット
まずはHTMLのメリットをご紹介します。
学習の難易度が低い
HTMLは多言語と比較すると、とにかく学習の難易度が低いです。上でも触れましたが文字を記述したい場合はタグで囲むだけなので、タグさえ把握していればHTMLを記述できます。
また、タグを覚える必要はありません。ざっくりと把握していればその都度調べることが可能で、よく使うタグはいつの間にか覚えているはずです。よく使うタグは辞書登録しておいて、簡易的に入力できるようにしておくのもいいかもしれません。
開発向きのエディタを使用するのもいいのですが、例えばメモ帳にべた書きして拡張子だけ変えてもすぐにHTMLファイルを作成できます。ちなみに、拡張子は「.txt」から「.html」に書き換えるとHTMLファイルになります。HTMLファイルはダブルクリックすると自動的にウェブブラウザーで表示されます。
使い道が多い
HTMLの役割は、ウェブページ表面の実装です。つまり、ウェブサイト、ウェブアプリ、ウェブシステムであればほとんどHTMLが使われているということです。ウェブ開発において、HTMLは基本スキルです。
HTMLで開発されたサービスの事例
HTMLで開発されたサービスは挙げきれないほどあります。Amazonや楽天市場のような通販サイト、ファーストリテイリングや良品計画(無印良品)のようなメーカーのサイト、ニュースサイトなどでもHTMLが使われています。
ただし、最近はCMS(Contents Management System)などが充実しているのでHTMLなしでもウェブサイト、ECサイトを作ることが可能です。CMSとは、ウェブサイト制作の土台のようなものです。もともと土台があるので、ノンプログラミングでサイト制作ができます。ちなみに、CMSは実際の開発現場でもよく使われています。
HTMLのデメリット
次に、HTMLのデメリットを挙げていきます。
アルゴリズムを学べない
HTMLはハードルが低く、プログラミング初心者が取っつきやすい言語ということでした。しかし、取っつきやすい反面、プログラミングに重要なアルゴリズムを学べないという欠点があります。
アルゴリズムとは、ざっくり言えばどのように処理していくかの設計のようなものです。大枠の設計ではないのですが、プログラミングにはいくつか代表的な処理の流れがあります。
例えば、データを入力して、ループで回してデータを照合して、最終的に出力する、といった流れを指します。HTMLにはこのようなアルゴリズムの概念がないので、他の言語に移行した際に難しく感じる可能性があります。とはいえ、HTMLの後に学習していけば問題ないでしょう。
HTML単体で使うことは少ない
HTMLはCSS(Cascading Style Sheet)やJavaScript(ジャバスクリプト)といった言語とセットで使われることが多いです。CSSは、HTMLで作成した文章を配置したりデザインしたりする言語です。JavaScriptはウェブページに動きを付ける言語です。例えば、ポップアップを表示したり、カーソルを当てたらオブジェクトが大きくなったりするイメージです。
ウェブサイトのフロントエンドはだいたい上記3つの言語で作られているので、HTMLを学習した後にCSSとJavaScriptを学習するのが一般的です。
他言語との違いは?
HTMLはCSS、JavaScriptとセットで使われることが多いということでした。では、他の言語と比較するとどのような違いがあるのでしょうか。ご紹介していきます。
Javaとの違い
プログラミング言語の中で知名度が高いものにJava(ジャバ)があります。プログラミングに関心がない人でも、耳にしたことはあるかと思います。Javaはサーバーサイドの実装で使用されることの多い言語で、上でも触れた大規模な設計やアルゴリズムが必要です。HTMLとJavaは難易度が大幅に異なるので、HTMLを学習した後に本格的な学習が必要です。
PHPとの違い
PHP(PHP:Hypertext Preprocessor)は簡易的なアプリケーション開発で使用されることが多いですが、簡易的といってもHTMLのような簡単さがあるわけではありません。Java同様サーバーサイドの開発で使用されることが多く、アルゴリズムや設計の知識も必要です。
相性の良い他言語
HTMLと相性の良い言語は、上でも触れた通りCSSとJavaScriptです。これら3つのスキルがあれば、フロントエンドの実装ができます。そして、上で挙げたJavaやPHPのスキルが加われば、サーバーサイドの実装もできるのでシステムとして完結します。
CSSはHTMLと近いので、HTMLの次のステップアップとしてちょうどいいでしょう。JavaScriptは比較的簡易に扱える言語ですが、JavaやPHP同様アルゴリズムや設計の概念はあります。
つまり、HTML→CSS→JavaScript→PHPといった流れで学習していけばスキルアップがスムーズです。
HTMLを使ってどんな仕事ができる?
HTMLを使えばウェブページ表面に文章を作れるということでしたが、職種や具体的な仕事内容としてどのようなものがあるのか、ご紹介していきます。
職種の例
HTMLを使う職種の例として、フロントエンドエンジニアやアプリケーションエンジニアが挙げられます。ただし、上でもご説明した通りHTML単体では難しいです。CSSとJavaScriptは最低限、身に付けている必要があるでしょう。
仕事内容の例
HTMLのスキルがあれば、ウェブ開発、システム開発、ゲーム開発などに生かせます。ただし、いずれもHTML単体でできるわけではありません。HTMLにできるのはあくまでも表面の文章のみなので、内部のロジックなどは別の言語が必要です。
HTMLを学びたい! まずは何をすればいい?
HTMLの学習方法をご紹介します。
学習の大まかな流れ
HTMLを含めて、プログラミングを学習するにはインプットとアウトプットの両方を行う必要があります。しかし、アウトプットと言っても何をプログラミングすればいいのか分からないでしょう。
そこでおすすめの方法は、書籍やサイトで学習しつつ、そこで出てくるプログラムを書いて実行していくことです。学習した内容を実際に手を動かして確認する流れです。
HTML学習におすすめの書籍、サイト
HTML学習に向いている書籍は多数あります。そして、どれで学んでもおおむね必要なスキルは身に付くでしょう。好みで選んで問題ありませんが、ここでは代表的なものをご紹介します。
・『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』(SBクリエイティブ、2019年)
・『これだけで基本がしっかり身につく HTML/CSS&Webデザイン1冊目の本』(翔泳社、2021年)
サイトについても、有名どころのサイトで基本を学習すれば間違いないです。代表的なサイトは以下です。
ライブラリ/フレームワークとは
プログラミングには、ライブラリやフレームワークという概念があります。ライブラリは便利な機能の集まりで、フレームワークはプログラミングを行う土台かつ便利な機能を引用できる仕組みのことです。
ライブラリやフレームワーク自体もプログラミングによって作られていて、そこから機能を借りることにより自分でプログラムを書かなくても機能を使えるイメージです。
ライブラリやフレームワークは利便性の高いものですが、HTML単体では用意されていません。HTMLには複雑な機能はないからです。今後JavaScriptやサーバーサイドの言語を学ぶ際に詳しく学んでいくのがおすすめです。
HTMLで就職できる企業を探すには?
HTMLのスキルを身に付けることで、企業に就職することはできるのでしょうか。
HTMLで就職できる企業の探し方
HTMLのスキルで就職できる企業を探すには、「HTML 新卒」で検索をかける、もしくは気になる企業の募集要項より、「求めるスキル」をチェックするといいです。ただし、HTMLのスキル単体で企業に就職するのは難しいかもしれません。
→スキルを生かして就職する場合、最低でもCSSとJavaScriptのスキルは必要だと思われます。サーバーサイドの言語が扱えるとよりいいです。また、年齢が若い場合はポテンシャル採用などで、スキルゼロの状態から就職できる可能性もあります。
この記事のまとめ
HTMLはウェブページなどの表面に出力される文章を作成する言語です。HTMLは他の言語と比べて難易度が低く、最初に学習する言語としておすすめです。HTMLのスキルを身に付けた後には、CSS、JavaScriptのスキルをセットで身に付けるのがおすすめです。
フロントエンドの言語が身に付いたら、サーバーサイドの言語もあわせて学習することでスキルの幅が広がり、需要のあるエンジニアに成長できます。
先輩エンジニアの選考体験談が見られる! ONE CAREER for Engineerのご紹介
エンジニア就活をこれから始める、今まさに選考を受けている皆様へ、このような悩みはないでしょうか?
「総合職やビジネス職ばかりで、エンジニア職の体験談が見つからない」「内定を獲得した先輩が、どんな開発経験を積んでいたのか/どんな対策をしていたのか知りたい」
こういった悩みをお持ちの方に向けて、エンジニア職特化の就活サイト、「ONE CAREER for Engineer」をリリースいたしました!
▼ONE CAREER for Engineerエンジニアや技術職の就活・選考体験談を探す ※選考体験談の閲覧には、別途会員登録が必要です。
ONE CAREER for Engineerではどんなことができる?
1. エンジニア特化の選考体験談が見られる!
エンジニア人気企業を中心に、先輩のESや選考体験談を公開中です。
エンジニア就活ならではといえる、「コーディングテスト」の体験談も多数公開しています!
2. 登録いただいたプロフィール情報をもとにポートフォリオを自動生成!
「ご自身の技術経験を企業へどう伝えよう……」とお悩みの方は、こちらの機能をご活用ください!
3. エンジニア職の選考体験談投稿で謝礼(Amazon ギフト券)をもらえる!
ご自身の選考の体験談をご登録いただくことで、謝礼(Amazonギフト券)をプレゼントしております!
エンジニア就活をこれから始める方、選考対策にお困りの方は、ぜひこの機会にご登録をお待ちしております!
(Photo:BAIVECTOR/Shutterstock.com)