プログラミング

【HTML5入門】1-1 HTMLとは何か?

※本記事は、Tech Academyの下記YouTube動画を参考に書かせて頂いております。

筆者がプログラミングに最初に触れたのは、中学時代の技術の授業でした。当時はインターネットが普及してまだ間も無く、「HTMLで自分のサイトを作ろう」みたいな感じのテーマの授業だった記憶があります。

本記事執筆時点(2020年4月)で、私はプログラミングスクール「テックキャンプ エンジニア転職」を卒業しました。カリキュラムでも軽く触れたHTMLですが、「改めて基礎からアウトプットをしてみよう!」という軽い気持ちで、ブログにてアウトプットをしてみることにしました。

では、早速いってみましょう。

HTMLとは

HTMLは、私たちが普段インターネットなどで目にするWebページの表示を担っている言語です。俗にこれをマークアップ言語と呼びます。

実際に私たちが目にするWebページの文章や文字は、このHTMLを使って書かれている場合が非常に多いです。

しかし、HTMLだけでは、非常に簡素なWebページとなります。そこで、(後に出てくる)CSSJavaScriptなどを使って、ページのデザインをしたり、ページに動きをつけたりすることが可能になります。基本的にHTMLは、これらの言語と組み合わせて使用する言語となります。

HTMLファイルを作るためのルール

HTMLファイルを作るためには、大きく分けて以下の3つのルールがあります。

  • HTMLで書く
  • ファイル名の最後に「.html」をつける
  • テキストエディタで書く

それぞれ順番に見ていきましょう。

HTMLで書く

大原則ですが、HTMLファイルの中身にはHTMLのコードを記述します。厳密にいうと、いろいろな書き方を用いることで、それ以外のコードを書くこともできるのですが、現時点では、HTMLファイルの中には、原則、HTMLのみを記述するという認識でOKです。

ファイル名の最後に「.html」をつける

HTMLをWebページに反映させるためには、まず、HTMLを書き込むためのHTMLファイルを作る必要があります。ファイルを作る方法は非常に簡単で、作りたいファイルの名前の後ろに「.html」と記述するだけです。

例えば、”index”という名前のHTMLファイルを作りたい場合は、ファイルの名前を「index.html」とすれば、”index”という名前のHTMLファイルが完成します。

ここでいう「.html」は、一般的に拡張子と呼ばれるもので、ファイルがどんな種類のものなのかをわかりやすくします。例えば、音声ファイルだったら「.mp3」とか「.wav」、動画ファイルだったら「.mp4」や「.mov」などがありますよね。これらも拡張子の一種です。

テキストエディタで書く

HTMLは、パソコンに標準で入っているメモ帳などでも書くことができるのですが、コードを記述する際は、テキストエディタと呼ばれるソフトを使用するのが一般的です。

テキストエディタは、コードを書くのに特化したメモ帳のようなもので、HTMLに限らず、いろんな言語の記述を色分けして見やすくしてくれたりします。動画では「Sublime Text」が紹介されていますが、他にも「Atom」や「Visual Studio Code」など、数多くのテキストエディタが存在しています。

筆者は、テックキャンプで「Visual Studio Code」を使用したので、それをそのまま使用していますが、特に機能などには大きな違いはないかと思いますので、自分の好きなテキストエディタを使用されると良いと思います。

おわりに

今回は、初級HTML第一弾ということで、Tech Academyの動画に沿って解説をしてみました。今後も本動画に沿って記事を更新していく予定ですので、引き続きお楽しみにして頂けると幸いです。

次の記事はこちら

エンジニアとして働く上での最低限の質問力

3月まで「テックキャンプ」を受講してみて、プログラミングスキルはもちろん、質問の仕方などについても多くのことを学びました。

学んだ中で特に印象的だったのは、「プログラミングをする上で、どのような質問をすると相手が答えやすいのか?」という点について考えることです。もちろんこれは、プログラミングをする上での質問に限らず、全ての質問に当てはまるでしょう。

本記事では、エンジニアの質問に絞って書いていきますが、エンジニア以外の分野でも応用できる考え方も多くあると思うので、参考にしてもらえたら幸いです。

質問力とは

質問力のある質問は、最低限、以下の項目を達成していると思います。

  • 質問相手の気持ちを考えている
  • 質問相手の時間を拝借することを考えている
  • 質問内容が具体的である(検索のストーリー性)

例えば、自分自身が先輩エンジニアだとして、コードを書いた後にエラーが出力された時に、新入社員から下記のような質問が来たとします。

質問例①


○○さん

お疲れ様です。
頼まれたコードを書いていたら、エラーが出ました。
スクショ添付します。

原因は何だと思いますか?

お返事お待ちしています。

××

このような質問をされたら、多くの人は答える気を無くすと思います。これでは答える方は、まず原因を0から考えなくてはならず、原因の特定に時間がかかってしまうかもしれません。

自分自身で仮説を立てて検証をしたかどうかもわからないので、同じ検証をした場合、単純に時間のロスになります。

相手の気持ちに立つには、最低限、上記3つの項目を抑える必要があります。では、実際に3つの項目を意識して書き換えた文章を見てみましょう。

質問例②


○○さん

お疲れ様です。

先ほど依頼を受けたコードを書いていたら、エラーが出力されてしまいました。
お忙しい中失礼致しますが、お時間ございましたらエラー解消にご協力頂けますと幸いです。

エラー内容:◆◆◆が正常に動作しない

私が考えた仮説と、その検証結果をお伝え致します。

仮説:○○○の×××にミスがあるのではないか
検証:○○○の×××を確認したが、目視ではミスが確認できなかった。

念のため、該当部分のスクリーンショットを添付致します。

ご確認頂けますでしょうか。
よろしくお願い致します。

××

このように、まずは相手の立場に立って文面を考え、また、自分自身が試したことを、背景と共に伝えることで、質問を受ける側も、気持ちよく答えることができるようになると思います。

さらに質の高い質問文を作るために

より良い質問文を作るには、これ以外にも気をつけるべき点は沢山あります。詳しくは下記記事を参照してみてください。

質問は恥ではないし役に立つ – Qiita

質問力の有無は、生産性、ひいては全体の業績をも左右しうる重要な要素となります。筆者自身も、さらに質問力を高めることによって、より良いエンジニアを目指していこうと思います。

GitHub Pagesでポートフォリオサイトを作ったらとても快適だった

GitHub Pagesを使って自分のポートフォリオサイトをリリースしてみました。

https://drash5296.github.io/portfolio-ryusaito/

今回は、GitHub Pagesを使用する上で思ったことを書いていきます。

GitHub Pagesの使い方

詳しい使い方は下記記事を参考にしました。

無料で使える!GitHub Pagesを使ってWebページを公開する方法
https://techacademy.jp/magazine/6445

なぜGitHub Pagesを使ったのか

プログラミングスクールに通っていた時は、デプロイにAWSを使いましたが、正直、あまり理解しきれないまま卒業してしまいました。

そのため、AWSの仕様が良く分かっておらず、少額ではありますが、料金が発生してしまいました。

以上のことから、自分で作成したWEBサイトを公開することにはかなり不安がありました(その後AWSの方は(多分)今後の料金発生を封じ込むことに成功しました)。

でも、ポートフォリオサイトを公開しないことには案件獲得もままならないので、何とか自分の力でもサイトを公開できるツールを探しました。

最初は元々WordPressで使用していた自分のドメインの一部を使用して制作する考えもありましたが、それにはサブドメインなどの知識なども必要だった為、GitHubPagesを使用するに至った、という経緯です。

GitHub Pagesを使ってみて思ったこと

まずは公開が非常に楽だなと思いました。

難しいプログラムのアップロードはできそうにない感じですが、ポートフォリオページなどの公開には非常に適している印象です。

そして、お金のことを考えなくても良いというのも、個人的には高評価なところです。

自分自身がそうなのでお話しさせて頂きますと、GitHub Pagesによるページの公開を検討するような人は、あまりWEB公開にお金を使いたくない人が多いと思います。

GitHub Pagesは、WordPressやデプロイによる公開とは異なり、費用ゼロで公開ができる為、自分のようにまだプログラミングで稼ぐような経験をしたことがなくて、なるべく費用を抑えたいような人にはとても良いサービスのように思います。

ぜひ使ってみてください。