Archives for 7月 2020

Visual Studio CodeでHTMLを書くときの便利な設定方法！ミスの防止や開発効率UPに役立てよう

2020-07-28 By プログラミング入門ナビ編集部

はじめに

HTML言語の習得に欠かせないのがエディタです。昨今は非常に便利なエディタが多く開発されていますね。

本記事では、その中でも特に人気の高いVisual Studio Codeで使えるおすすめの設定方法をお伝えします。

ミスの防止や開発効率のUPに役立つので、初心者の方はもちろん全てのエンジニアの方におすすめしたい内容です。

macOSとwindowsで多少メニューや見た目が異なるため、初心者の方でも混乱しないように両方の設定画面を掲載しています。

動画解説

本記事の内容を動画でも説明しています。

[macOS版の場合]

[windowsの場合]

Visual Studio Codeとは

プログラミングに欠かせないエディタですが、本サイトで一押しのおすすめエディタがVisual Studio Codeです（VSCodeと略称でも記載されます）。

ほぼ全てのプログラミング言語に対応し、使い勝手も良いため近年人気が急上昇しています。

使ったことの無い方もぜひ使用してみてください。下記から入手できます。

Download Visual Studio Code

タブの設定

コードを書く時にはタブでインデントが使えると便利ですね。この1タブあたりでスペースいくつ分のインデントがつくかを設定できます。

こだわりが特になければ、見やすさの観点から「2」を推奨します。

VSCodeではデフォルト値が4になっていることが多いので、下記の手順で変更しましょう。

[macOSの場合]

上部メニューバーの「Code」→「Preferences」→「Settings」を開きます。

検索窓で「tab size」と入力し、出てきた「Editor: Tab Size」の欄に2を入力しましょう。自動で保存されるのでそのまま閉じて構いません。

[windowsの場合]

上部メニューバーの「File」→「Preferences」→「Settings」を開きます。

検索窓で「tab size」と入力し、出てきた「Editor: Tab Size」の欄に2を入力しましょう。自動で保存されるのでそのまま閉じて構いません。

Emmetの日本語設定

次にEmmnet（エメット）の設定を行いましょう。Emmnetというのは、ざっくりといえば入力補間機能のことです。

例えばVSCodeで適当なHTMLファイルを新規作成し、最初にエクスクラメーションマーク「！」を入力しタブキーを押すだけで下記のようにHTML文書の雛形が自動で作成されます。

入力の手間が省けて便利ですが、VSCodeのデフォルト設定ではhtmlタグの言語（lang属性）が英語（en）になっているので、日本語の文書を作成することが多い場合はここを日本語にいちいち変える必要があります。

都度変更するのは面倒ですし変更忘れも心配なので、雛形自体を修正しておくのがおすすめです。

下記の通り実施してください。

[macOSの場合]

上部メニューバーの「Code」→「Preferences」→「Settings」を開きます。

下記のように検索窓で「emmet」と入力し、出てきた候補の中から「Edit in setting.json」を探してクリックしましょう。

setting.jsonが開くので、最後の中かっこの手前に下記のように追加します。Command+Sキーでファイルを保存してください。

[windowsの場合]

上部メニューバーの「File」→「Preferences」→「Settings」を開きます。

下記のように検索窓で「emmet」と入力し、出てきた候補の中から「Edit in setting.json」を探してクリックしましょう。

setting.jsonが開くので、最後の中かっこの手前に下記のように追加します。Ctrl+Sキーでファイルを保存してください。

なお、setting.jsonに追加するコードは下記です。必要に応じコピー&ペーストしてください。

    ,
    "emmet.variables": {
        "lang": "ja"
    }

設定後にもう一度「！」とタブキーを押して下記のようにlang属性が日本語になっていればOKです。

不可視文字の表示

スペースや予測不能なゴミデータは通常下記のように空白で表示され、見ることができません。そのため、いくつ分の空白が空いているのかや、全角なのか？半角なのか？も気付きにくいです。

ここに、全ての半角スペースを可視化する機能を適用すると下記のように半角スペースの部分に丸グロをつけることが可能です。

このように見やすくすることで、コーディング時にありがちな半角スペースと全角スペースを間違えるミスに気付きやすくなります。

設定は下記のように行います。

[macOSの場合]

上部メニューバーの「Code」→「Preferences」→「Settings」を開きます。

検索窓で「render control characters」と入力し、出てきた「Editor: Render Control Characters」の欄にチェックを入れ、「Editor: Render Whitespace」はallを選択しましょう。自動で保存されるのでそのまま閉じて構いません。

[windowsの場合]

上部メニューバーの「File」→「Preferences」→「Settings」を開きます。

全角スペースの表示

「全角スペースを間違えて入れてしまう」のは初心者が陥りやすい頻出ミスです。

先ほどの半角スペース可視化を行っても全角スペースには丸グロがつかず、発見できない可能性があるためさらに対策を講じましょう。

ここではVSCodeの拡張機能である「zenkaku」をインストールして、下記のように全角スペースに色（この画面例ではグレー）を付けるよう対策します。

これで全角スペースが入っていたら一目でわかりますね。

下記が具体的なやり方です。

[macOSの場合]

左側メニューアイコンにカーソルを当て、「Extensions」と出るものをクリックします。

次に検索窓に「zenkaku」と入力して出てきた下記のアイコンをクリックし、緑の「Install」ボタンを押しましょう。完了後にVSCodeの再起動が必要です。

[windowsの場合]

下記の左側メニューアイコンをクリックします。

次に検索窓に「zenkaku」と入力して出てきた下記のアイコンをクリックし、緑の「Install」ボタンを押しましょう。完了後にVSCodeの再起動が必要です。

構文チェック機能の追加

次に、HTMLの構文間違いを指摘してくれる拡張機能「HTML Hint」を導入しましょう。

これを使用すると、終了タグがなければならないのに誤って開始タグにしてしまった場合や、半角で書かなければならない部分を全角で書いている場合などに波線でマーキングして教えてくれます。

該当部分にカーソルを当てるとヒントも表示してくれるのが便利です。

これがあればミスに気づきやすいですね。

インストール方法は下記の通りです。

[macOSの場合]

左側メニューアイコンにカーソルを当て、「Extensions」と出るものをクリックします。

次に検索窓に「html hint」と入力して出てきた下記のアイコンをクリックし、緑の「Install」ボタンを押しましょう。複数候補が出る場合はバージョンの新しい方を選択してください。完了後にVSCodeの再起動が必要です。

[windowsの場合]

下記の左側メニューアイコンをクリックします。

次に検索窓に「html hint」と入力して出てきた下記のアイコンをクリックし、緑の「Install」ボタンを押しましょう。複数候補がある場合はバージョンの新しい方を選んでください。完了後にVSCodeの再起動が必要です。

HTMLフォーマッタ

最後に、自動でHTMLの構文に即したインデントをつけるなど、HTMLを自動整形する機能を設定しましょう。

この機能を有効にすると、下記のようなコードが、

macOSの場合：SHIFTキー+optionキー+Fキーで、windowsの場合：SHIFTキー+ALTキー+Fキーで下記のように自動整形されます。

headとbodyにインデントがついて見やすくなりましたね。

時間短縮になるのでぜひ活用してください。

設定は下記のように行います。

[macOSの場合]

上部メニューバーの「Code」→「Preferences」→「Settings」を開きます。

検索窓で「html.format.enable」と入力し、出てきた「Enable/disable default HTML formatter」の欄にチェックを入れます。すでに入っている場合はそのままで構いません。

また、再度検索窓に戻り「html.format.indentInnerHtml」と入力し、出てきた「Indent <head> and <body> sections」の欄にチェックを入れます。自動で保存されるのでそのまま閉じて構いません。

[windowsの場合]

上部メニューバーの「File」→「Preferences」→「Settings」を開きます。

まとめ

HTMLのコーディングにおすすめしているVisual Studio Codeでの便利な設定について紹介しました。

少し数が多いですが、最初のこの一手間で驚くほど快適になるのでぜひ全て設定することをおすすめします。

また、本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門（Proglus）

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

ウェブ開発でわからないことがあったらどうすればいい？MDNの使い方やメリットを紹介！

2020-07-28 By プログラミング入門ナビ編集部

はじめに

HTMLやCSS、JavaScript等を学習していると「このタグはどういう意味なんだろう？」「この記述は必須？不要？どっちだったっけ？」といった疑問が出ることがよくあります。

全てを熟知し覚えておく必要はないのですが、こういった場合に自分で調べられるようにしておくと学習が捗りますね。

この記事ではウェブ開発においてわからないことが出てきた時のおすすめの調べ方を紹介します。

動画解説

本記事の内容を動画でも解説しています。

MDNとは

MDNはMozilla Developer Networkの略称で、ブラウザのFireFoxなどを開発しているMozilla Foundationが運営している公式サイトです。

ウェブ開発に携わる人々の役に立つよう、関連する技術情報を公開しています。

わからないことがあったら、まずはこのMDNを参照するのがおすすめです。

強くおすすめする理由としては次のようなものがあります。

信頼性の高い情報が手に入る

ウェブ開発の学習をしていてわからないことがあった場合、基本的には検索サイトで調べる方が多いですね。

それ自体は問題ないのですが、検索結果に多く出てくる個人の方が書いたブログや技術系投稿サイトの情報を鵜呑みにしてしまうのは少々問題です。

よくまとまっていて大変参考になることも多いのですが、情報が古かったり、正確性が担保されていないといった懸念があります。

結局、そういった情報を参考にあの手この手を試してみたものの、なかなかその記事に書いてある通りにならず、よく調べてみるとかなり古いバージョンについての話だった、といったケースはよくある話です。

こうなってしまうと貴重な時間と労力の無駄ですね。

一方、MDNは情報の質が高いので実際の業務で参照しているエンジニアも多く非常におすすめのリファレンスです。

個人発信の記事と比較すれば多少取り付きにくい部分はあるかもしれませんが、こういった信頼性の高いサイトで調べることにも慣れていくことを強くおすすめします。

ウェブ開発に関する情報が一通り揃っている

MDNのサイトで「テクノロジー」というメニューをクリックすると、取り扱っている情報のカテゴリが見られます。

HTML・CSS・JavaScriptといったウェブ開発に必須の技術に加え、グラフィックやHTTPプロトコルの話題もありますね。

特定の分野に絞って詳しく解説しているサイトは多くありますが、このように必要な情報が体系立てて網羅されているのがMDNの利点です。

HTMLならここ、CSSならこっち、というようにいろんなサイトを調べなくとも、MDNを参照すれば一通りの情報が揃うのは学習効率を上げるための大きなメリットといえます。

無料で使用可能

ここまでの信頼性と網羅性を兼ね備え、かつ日本語版もあるという便利なMDNですが、無料で参照することが可能です。

教科書にすれば数冊分の情報に匹敵することを考えると、素晴らしい価値のあるサイトですね。

リファレンスという立ち位置である以上、ウェブ開発学習の全てを担うことは難しいですが、プログラミング講座や教材で開発の流れを掴みながら、わからないことがあったときに参照するにはうってつけです。

取り組んでいる講座や教材と組み合わせて使用すれば抜群のコストパフォーマンスを発揮します。

MDNを使ってみよう

早速、MDNの使い方を見てみましょう。

ブックマークしておくのがおすすめ

MDNは下記のリンクから閲覧可能です。ブックマークしておくとわからないことがあった際にすぐ調べられるので便利ですね。

MDN web docs

特定のワードについて調べたい場合は「テクノロジー」メニューからカテゴリを選ぶ方法がおすすめです。

例えばHTMLのアンカー要素<a>のタグに指定できる属性はどんなものがあるのか調べたい場合について見てみましょう。

「テクノロジー」メニューでHTMLをクリックし、左側の「HTML elements」をクリックして展開すると<a>がありますね。

これをクリックするとアンカー要素<a>の詳細ページに入り、指定可能な属性一覧を確認できます。

Google検索も便利

もしくは、調べたいワードが決まっているならばGoogle検索でMDNページを見つけ出すのも手っ取り早いです。

たとえばHTMLの段落要素<p>について調べたいとき「mdn html p」とGoogle検索してみましょう。

検索結果に出たMDNのサイトをクリックすると、直接詳細ページに飛ぶことができます。

まとめ

ウェブ開発でわからないことがあった際、おすすめの調べ方としてMDNの使い方やその利点を紹介しました。

自分で調べる癖が付けられると、学習スピードがぐんと上がります。

ぜひプログラミング学習のお供に活用してください。

本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門（Proglus）

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

HTML文書で改行やインデントがないとどうなる？なぜ必要なのか理由を解説

2020-07-25 By プログラミング入門ナビ編集部

はじめに

HTML文書を書いたことのある方なら誰でも一度は「改行やインデント（行の開始位置を数段ずらすこと）をいちいち入れないといけないなんて面倒だな…自分の好きなように書いちゃダメなの？」と考えたことがあるのではないでしょうか？

この記事ではそんな疑問に対するお答えと、改行やインデントの必要性について説明します。

動画解説

本記事の内容を動画でも解説しています。

改行やインデントがないとどうなる？

例えばこのようなHTML文書を考えてみましょう。VSCodeなどのエディタで実際に打ち込んでみてください。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title> はじめてのHTML</title>
    <style>
     h1 {
       color: red;
     }
    </style>
  </head>
  <body>
    <h1>はじめての見出し</h1>
    <p>はじめての段落</p>
  </body>
</html>

これをブラウザで表示すると下記のようになります。

次にコードから改行やインデントを取り除いてみましょう。下記のように、とても雑然としたコードになります。これでは実際のページもレイアウトが崩れてしまいそうですが、実際はどのようになるのでしょうか？

 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title> はじめてのHTML</title> <style> h1 { color: red; } </style> </head> <body> <h1>はじめての見出し</h1> <p>はじめての段落</p> </body> </html>

エディタで保存したら先ほどのブラウザをリロードしてみましょう。

なんと表示はそのまま変わりません。実は、改行やインデントがなくても正しく書けてさえいればこのようにきちんと表示されるのです。

改行やインデントはなぜ必要？

これではますます冒頭のように「改行やインデントなんて、Word文書みたいに自分の好きなタイミングで付けたらいいのでは？」という思いが強まってしまうかもしれませんが、お待ちください。

どんなプログラミング参考書でも改行やインデントは必ずつけるよう指南があります。

それだけ、改行やインデントには実は非常に重要な役割があるのです。ここからはその理由を説明していきます。

コードを読みやすくする

これは直感的に理解しやすいかもしれません。先ほどの改行・インデントなしのコードを見て「何が書いてあるのかわかりづらくなったな…」と思われた方が多いのではないでしょうか。

先ほど改行やインデントを取り除いてもきちんと表示できたのは、ブラウザが改行やインデントを無視してコードを読み込むためです。

「HTML文書の存在理由はブラウザに読み取ってもらってWebページとして表示されることなので、それさえできればいい」といってしまえばそれまでなのですが、その考えは少々短絡的といえます。

というのも、実際のWebサイトはいくつものWebページを保有する大規模なものであるため、基本的には複数人で開発します。そのため、誰かが書いたコードは人間である他の開発者が目にすることが多いです。

ページ同士の連携や機能拡張のために修正する等、目的は様々ですがそんな時に先ほどのような改行やインデントのないコードを書いていれば、間違いなくブーイングが起きます。

エンジニアのお作法として、他の人にも読んでわかりやすいように必ず改行やインデントを入れるようにしましょう。

バグを少なくする

それなら、せめて改行は入れるけどインデントまではなくてもいいのでは？と思われたかもしれません。

インデントのない下記のコードを見てください。実はこのコードでブラウザに表示させようとすると、真っ白な画面になってしまいます。

どこかにバグがあるからなのですが、見つけられますか？

<html lang="ja">
<head>
<meta charset="utf-8">
<title> はじめてのHTML</title>
<style>
h1 {
color: red;
}
</head>
<body>
<h1>はじめての見出し</h1>
<p>はじめての段落</p>
</body>
</html>

次にインデントを付けた下記ならばどうでしょうか。インデントの有無以外で上記のコードと差はありません。

<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title> はじめてのHTML</title>
    <style>
      h1 {
        color: red;
      }
  </head>
  <body>
    <h1>はじめての見出し</h1>
    <p>はじめての段落</p>
  </body>
</html>

8行目でh1のスタイル指定が終わった後「}」から、9行目の</head>まで通常ならばインデントが1段ずつ戻るのが、一気に2段下がっているのが不自然です。

本来はこの8行目の下に終了タグ</style>があるべきでしたが、無いということが見つけやすいですね。

このように、インデントがあれば書かれたコードを見ても不自然な箇所からバグを見つけやすいですし、書いている途中でもインデントを意識していれば間違いに気付きやすいです。

また、要素ごとにインデントがあるのでHTML文書の要素同士の階層構造が見やすいという利点もありますね。

まとめ

HTML文書での改行とインデントの重要性について説明しました。

無くともブラウザに表示はされますが、エンジニアの嗜みとして改行とインデントは必ず入れるようにしましょう。また、他の言語でも同様の理由から入れるようにしてください。

本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門（Proglus）

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する