プログラミング入門ナビ編集部

APIって何？使い方やメリットを初心者にもわかりやすく解説！

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

はじめに

API（読み：エーピーアイ）という言葉を聞いたことがあるでしょうか。

簡単にいえば、ソフトウェアの機能の一部を外部のソフトウェアから使用できるようにする仕組みのことです。

これだけ聞いてもピンと来ない方もいらっしゃるでしょう。

この記事では、APIとは何なのか？どう役立つものなのか？を初心者にもわかりやすく説明します。

また、有名なAPIについても紹介しますので、実際に使ってみる際の参考になれば幸いです。

まずは体験：APIを使ってみよう

APIについて理解するには、まずは実際にAPIを使ってみるのが早いです。

MacOSを使っている方はターミナル、Windowsを使っている方はコマンドプロンプトを開いて下記のように打ち込んでみてください。

$ curl "http://zipcloud.ibsnet.co.jp/api/search?zipcode=1000014"

ここで登場したcurlは、サーバとのデータのやりとりをするためのコマンドで、APIを使う時に使用されることが多いです。

今回の例ではWebサーバ（http://zipcloud.ibsnet.co.jp）とのデータやりとりをするために使用していると考えてください。

このコマンドを実行すると下記のような実行結果が得られます。

{
	"message": null,
	"results": [
		{
			"address1": "東京都",
			"address2": "千代田区",
			"address3": "永田町",
			"kana1": "ﾄｳｷｮｳﾄ",
			"kana2": "ﾁﾖﾀﾞｸ",
			"kana3": "ﾅｶﾞﾀﾁｮｳ",
			"prefcode": "13",
			"zipcode": "1000014"
		}
	],
	"status": 200
}

何やら住所が出てきましたね。

実は先ほどのcurlコマンドを実行した際にアクセスしたWebサーバはzipcloudという郵便番号データ配信サービスです。

zipcloudのサービスURL（http://zipcloud.ibsnet.co.jp）に続く部分「/api/search?zipcode=1000014」では、「郵便番号100-0014の住所データが欲しい」とリクエストしています。

その結果「東京都千代田区永田町」の住所が返されたというわけですね。

外部からのリクエストを受けてzipcloudが保有している住所データベースを検索し、該当住所を返すというこの機能がまさにAPIなのです。

APIとは？

改めてAPIとは何なのか説明していきます。

API（Application Programming Interface）は、広い意味ではある機能をソフトウェア同士で共有するための仕組みです。

よく界隈で耳にする「APIを公開する」や「APIを叩く」といった文脈では、その中でも特に「Web API」のことを指します。

Web APIとは、APIの中でもWebサービスから提供されているもののことです。

冒頭の例でもzipcloudというサービスのWeb APIを使って住所情報を取得しましたね。先ほどはコマンドで手動で取得しましたが、通常は自分のWebサービスで二次利用するために活用します。

例えば自分のWebサービスでユーザーに住所入力をしてもらう時、郵便番号だけを入れたら住所を自動で補完入力してくれるような機能は、このWeb APIを使えばできますね。

このように、とあるソフトウェア（自分のWebサービス）から別のソフトウェア（今回の例ではzipcloud）の機能を利用するための仕組みがAPIです。

APIのメリット

APIを使うメリットについてみていきましょう。以下は主にWeb APIのことについて説明していきます。

提供する側

まず、APIを提供する側のメリットについてです。大抵のAPIは無料で提供されていることが多く、蓄えられたデータへのアクセスも許可するため、一見メリットがないように見えるかもしれません。

しかし、便利なAPIを公開しそれを使うWebサービスが増えれば増えるほどユーザーの目に触れる機会も増え、ついてはそれが自社サービスへの導線を拡大し、シェアを獲得することにつながります。

また、多くのWebサービスに使われるほど自社開発機能との組み合わせで新しい使い方が発見されたり、それがビジネス提携のきっかけになるなど、ビジネスチャンスを広げる機会としても有効です。

開発した機能を自社だけで独占するのではなく、多くの人に向けて公開し、さらなる便利な使い方を模索していくという考え方はまさにオープンイノベーションを体現しているといえます。

使用する側

次にAPIを使用する側のメリットですが、こちらは想像に難くないでしょう。

他社ですでに開発された便利な機能や、蓄えられたデータを二次利用できるためより新しいサービスを効率よく開発することができます。

ユーザー側の視点からも便利な場合が多いです。例えば別のサイトでユーザーが登録したアカウント情報をAPIによりそのまま活用して自社サイトでのログインに使用してもらう場合、ユーザーは面倒な会員登録をせずに済みます。

また、アカウント情報は重要な個人情報です。自社のセキュリティレベルで管理するよりもより大きなサイトで信頼性の高いシステムを活用して管理した方が、より高いセキュリティレベルを保つことができます。

有名なAPI

より具体的に理解するため、様々なサイトで多く活用されている著名なAPIについて見ていきましょう。

Google Map

よく、レストランや美容院を探すWebサイト等で所在地を見ようとするとGoogle Mapが表示されることはありませんか？

これは、そのサイトでGoogle Map APIを使用しているためです。

このように、GoogleはWebサイトでGoogle Mapの地図やストリートビューを表示できるAPIを公開しています。

Amazon Pay

ネットでお買い物をするときいざ支払いの場面になると、通常はそのサイトで初めて購入する場合はアカウント作成から始まります。その中で支払い方法や配送先住所を登録しますよね。

しかし、サイトによってはここでアカウントを作成する以外にも「Amazon Payで支払い」のオプションが提示されることがあります。

これを選択すると、ユーザーがAmazonで登録している配送先や支払い方法をそのまま使用できるため、面倒なアカウント作成をせずに済みます。

このように、ユーザーの利便性を重視してAmazonが提供するAmazon Pay APIを活用しているサイトも多いです。

Facebook

Facebookはユーザーのログイン情報を提供するAPIを公開しています。

例えば、とあるWebサイトを利用するにはユーザー登録が必要だったとしましょう。

少し気になるコンテンツがあってそれを見たいだけだったのに、登録が面倒だからといって離脱してしまうユーザーは多いです。

そんな時、FacebookログインAPIを使えば、そのサイトでのユーザー登録の代わりにすでに保有しているFacebookアカウントでログインしてもらうことができます。

まとめ

APIについて、その用途やメリットを紹介しました。

自分のWebサービスならではの部分はもちろん自力での開発にこだわるべきですが、公開されているAPIで活用できそうなものはどんどん取り入れて効率よく開発しましょう。

また、自分でAPIを作って公開するのもおすすめです。実際に作ってみることでAPIに関する理解を深められるのはもちろん、いろんな人が使ってくれることで新しい使い道が見つかったり、ユーザーを自分のWebサービスへ誘導できることがあります。

まずはこの記事で取り上げたAPIを使って理解を深めてみると良いでしょう。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

Herokuとは？初心者にもわかりやすく解説！

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

はじめに

開発したWebサービスを公開してみたいけれど、サーバーを準備したり、環境構築をしたりするのは手間がかかるし面倒だな…と思ったことはありませんか？

そんな時は話題のHerokuを使ってみましょう。

この記事では簡単にWebアプリを公開できるHerokuについて紹介します。

Herokuは個人使用ならば無料で使用できるので、この記事で説明する使用方法を参考にぜひ使ってみてください。

Herokuとは？

上記はHeroku（読み方：ヘロク）のトップページです。一体何ができるものなのでしょうか？

PaaSの一種

HerokuはPaaS（Platform as a Service）の一種で、Webアプリケーションをホスティングするためのクラウドサービスです。

ここで、AWS（Amazon Cloud Service）が提供するEC2等はIaaS（Infrastructure as a Service）と呼ばれているけど、どう違うの？と思われたかもしれません。

IaaSではネットワーク・ハードウェア（マシン本体）・OSまでをセットにして提供するのに対し、PaaSではそれらに加えてミドルウェアまでを提供します。

ミドルウェアとは簡単にいうとアプリケーションを動かすために必要なソフトウェアのことで、Web開発ではサーバーソフトウェアやデータベースソフトウェアのことと考えてください。

Herokuには必要なミドルウェアがあらかじめインストールされているので、アプリケーションを送り込む（デプロイ）するだけで簡単にWebサービスが公開できるというわけです。

対応言語や選べる構成が多数

2007年にアメリカでHeroku社が創業した時はRuby on Railsのアプリケーションに特化したホスティングサービスでしたが、現在ではJava、Node.js、Python、PHP等といった様々なプログラミング言語をサポートしています。

また、下記のようにホスティングしたいWebアプリケーションの規模や目的に応じて様々な構成が用意されているのも特長です。

このように、言語や構成を目的に合わせて選べるため汎用性の高いPaaSとしてHerokuは近年人気を集めています。

Herokuのおすすめポイント

ここからはHerokuを使うメリットについて説明します。

アプリ開発に集中できる

これはHerokuに限ったことではありませんが、まず何といっても面倒なサーバーの立ち上げや環境構築が必要ないため、Webサービスを提供するにあたって肝であるアプリ開発に集中できることがメリットです。

立ち上げの時間やコストを低減できるということももちろんメリットですが、運用についても同じことがいえます。

サーバーやミドルウェアを自分で全て準備すると、古くなってきたときや重大なセキュリティ問題が発生するたびに対応が必要ですが、Herokuを使っていれば常に最新のアップデートを行ってくれるため、安心して開発に集中することができるのです。

スケールアウト（処理能力の拡張）が容易

Webサービスの公開直後はそこまでアクセス数も多くないため、小さな構成でローンチすることも多いでしょう。

しかし、軌道に乗ってくるとユーザーも増えアクセス数が膨大になっていきます。

そんな場合に小さな構成のままだとサイトがダウンしてしまうこともあり得るため、通常はユーザー数の増加に伴いサーバーを増やす「スケールアウト」という作業が必要です。

Herokuではこのスケールアウトが簡単な操作でできる仕組みになっています。

便利なアドオン機能

Webアプリの運用では、デプロイをシンプル化したり、毎日決まった時間に特定のタスクを実行したりといった作業が必要になります。

また、サイトへ訪れるユーザー向けにアカウント登録をしてもらいサービスを提供するならば、メール配信をしたり、モノやサービスを提供するならば決済を行うための仕組み等が必要です。

こういった機能を自分で開発するのもいいのですが、Herokuにはこれらの機能を実現する150種類以上のアドオンがあり、後付けで追加して利用することができます。

Webサイトに必要とされる汎用的な機能を楽に追加できるのはとても便利ですね。

Herokuの使用方法

Herokuを使うにはどうすれば良いのでしょうか。

公式サイトで無料の新規登録をすればすぐに使い始めることができます。

登録後の詳しい使い方については、下記講座でアプリ開発後の手順として紹介していますので、気になった方はぜひ受講してみてください。

Ruby on Rails 入門（Proglus）

まとめ

近年注目を集めるPaaSであるHerokuの特長やメリットについて紹介しました。

環境構築や運用に時間を取られていては肝心のアプリ開発に集中できないため、このように便利なサービスをどんどん活用してステップアップしていきましょう。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

px, em, rem, vw, vh, % の違いとは? font-sizeの指定の仕方について解説！

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

この記事では、CSSでfont-sizeプロパティを用いてフォントサイズを指定する方法について説明します。

この記事は、オンライン講座「ウェブ開発入門完全攻略コース – プログラミングをはじめて学び創れる人へ！未経験から現場で使える開発スキルを習得！」のサポート記事です

font-sizeプロパティとは

CSSでは、font-sizeプロパティを用いることでフォントのサイズを調整することが出来ます。

以下はaタグに対して50pxの文字サイズを指定する例です。

a {
  font-size: 50px;
}

フォントサイズ指定の単位

font-sizeでは、様々な単位を用いてフォントサイズを指定することができます。

pxを用いる方法

ピクセル数で指定する方法です。ピクセルとはコンピューター上で画像を扱う際の最小単位を指します。

ブラウザの表示領域の大きさも縦×横のピクセル数で表されるので、フォントサイズをピクセル値で指定することで、環境によらず同じ大きさでフォントを表示することが可能です。

pタグで表示する文字サイズを20ピクセルに指定したい場合は、20pxと指定します。

p {
   font-size: 20px;
}

%を用いる方法

親要素の大きさの相対的な割合で指定する方法です。

例えば以下の場合は、divタグの子セレクタであるpタグには、20pxの50%で、10pxがフォントサイズとして適用されることになります。

div {
  font-size:20px;
} 
div > p {
  font-size:50%;
}

emを用いる方法

親要素のフォントサイズを基準に指定する方法です。%と似ていますが、emの場合は親要素のフォントサイズを基準として、その割合で指定します。すなわち100%が1emになり、50%が0.5emに相当します。

例えば以下の場合は、pタグには、divタグのフォントサイズの半分である10pxが適用されます。

div {
  font-size:20px;
}
div > p {
  font-size:0.5em;
}

%やemについては、親要素のフォントサイズを基準としているため、親要素のフォントサイズが変われば子要素のフォントサイズも合わせて変化する、という点に注意してください。

remを用いる方法

root要素、すなわちブラウザにデフォルトで設定されているフォントサイズを基準に指定する方法です。

ブラウザのデフォルトのフォントサイズは16pxであることが多いです。emと同様、root要素のフォントサイズを1として、0.5remなどと割合で指定します。

すなわち以下の場合では、ブラウザのデフォルトのフォントサイズが16pxの時、pタグの文字は8pxの大きさで表示されることになります。

p { 
   font-size: 0.5rem;
}

vw, vhを用いる方法

ビューポートの大きさを100として指定する方法です。

ビューポートとは「表示領域」のことで、パソコンやタブレット、スマートフォンなどディスプレイの大きさの異なる端末で開いた場合でも、統一的にフォントの大きさを決めることが出来ます。

ですので、vwやvhはレスポンシブ対応に適したフォントサイズの単位であると言えます。

以下の場合では、pタグに対して10vwの大きさを指定しています。

p {
   font-size: 10vw;
}

よって以下のように5つの文字を横に並べた場合、幅は合計で50vwとなり、表示領域の半分の大きさを閉めることになります。

まとめ

この記事ではフォントサイズの5種類の単位の指定の仕方について解説しました。

フォントサイズを指定する際は、どのようなレイアウトを実現したいかに応じて、適切に単位を使い分けてみてください。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

JavaScriptのundefinedとnullの違いを徹底解説！0や空文字列についても確認しよう

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

はじめに

JavaScriptのコンソールで「undefined」や「null」といった単語を目にしたことはありませんか？

どちらも変数を参照した時のエラー発生時等に出てくるワードですが、この2つの違いは何なのだろう？0(ゼロ)や空文字列（””）とはどう違うの？

といった疑問を初心者の時は特に抱えやすいです。

この記事では、そんなモヤモヤを解決します！

undefinedは「存在しないデータ」

まずundefinedはどんな時に登場するのでしょうか。下記の例を見てください。

var value = 1;
console.log(value);　//1

このように、変数valueを宣言し、その時に値を代入すればログに出力するために参照されても問題なくその値を表示することができます。しかしこの時、値を代入しないとどうなるでしょうか？

var value;
console.log(value);　//undefined

上記のように、valueという変数を宣言したけれどもまだ値を何も入れていない場合、この変数の中身を表示しようとしても何も表示できず「undefined」となります。

JavaScriptでは変数の中身に応じたサイズの「入れ物」（メモリのこと）を確保しますが、上記のように、宣言されただけでまだ何の値も入っていない場合はどんなサイズの入れ物を用意すればいいのかわからないため、実はまだ入れ物すら用意されていない状態です。つまりデータとしてまだ存在していません。

また、下記の例も見てください。

var list = {id: 1, name: "apple"};
console.log(list.price);    //undefined

listという連想配列に、id、nameというキーがありますね。nameにappleという要素が入っているので、商品管理用か何かのデータと想像してください。

ここに、価格を表すキーがあっても良さそうなので、次の行で「list.price」というふうにpriceというキーを呼び出しています。

しかしそのようなキーは存在せず、ここでもundefinedが返ってきます。

このように、存在していないデータ・または宣言されただけでまだ値の代入がされていないデータを参照しようとした時に返されるのがundefinedです。

nullは「値なし」

undefinedと混同されやすいものに「null」があります。

nullとは「意図的にオブジェクトの値が存在しないことを表す値」です。下記の例を見てください。

var zip1 = "112-0004";
var zip2 = "112004";
var pattern = /^\d{3}-\d{4}$/g;
console.log(zip1.match(pattern));   //[ '112-0004' ]
console.log(zip2.match(pattern));   //null

上記ではmatchメソッドを用いてパターンとのマッチングを行い、与えられた文字列が郵便番号として成り立つかどうかを確認しています。

matchメソッドは特定のパターンとマッチする文字列があればその文字列を返しますが、もしない場合は何を返すでしょうか？

空の文字列？そうではありません。

あまり無いケースですがもし入力文字列も検索文字列も空文字列「””」であった時、空文字列が見つかりそのまま空文字列が返されることになりますが、ここで「見つからなければ空文字列を返す」というルールだと矛盾が生じてしまうからです。

似たようなことは他のメソッドでもあり得ます。

そこで、「該当はありませんよ」ということを明示的に表すための値が必要です。

これがnullですね。

実際に上記のコードでzip1とzip2という文字列を郵便番号パターンに該当するかどうかmatchメソッドで確かめています。

zip1には該当文字列があったためその文字列が返されていますが、zip2はパターンとマッチする文字列がなかっためnullが返ってきていますね。

注意したいのが、このzip1.match(pattern)もzip2.match(pattern)もそれぞれmatchメソッドの返り値として存在するデータであり、前者には文字列が、後者にはnullが入っているということです。

このように、データとして存在はしているが「値なし」であることを明示的に示すための値がnullです。

0や空文字列””は「値あり」

同じようにundefinedやnullと混同されがちなのが0（ゼロ）や空文字列（””）です。

立派な値としての0・空文字列

ゼロや空文字列は立派な値です。

nullも値ですが、先述の通り「値なし」を表す特殊な値でした。undefinedはそもそもデータとして存在しないことを表します。

例として山田さん・鈴木さん・佐藤さんからなるクラスでテストを実施したとしましょう。

山田さんの点数は70点、鈴木さんは0点、佐藤さんは遅刻したためテストを受けられませんでした。

ここで、田中さんの点数は何点でしょう？鈴木さんは？佐藤さんは？

答えは順に「undefined、0、null」となります。田中さんはこのクラスに存在していないですし、佐藤さんは存在していますがテストを受けられなかったので点数はつけられません。

鈴木さん（と山田さん）だけがテストの点数という値を持っていて、0点ではありますがこれもれっきとした点数であり、ここが田中さん（undefined）や佐藤さん（null）との違いです。

混同されやすい理由

なぜこれらは混同されやすいのでしょうか。それはよく条件分岐などで書かれる下記の記述が原因かもしれません。

if(!data) { //処理; }

このdataには例えば新規メールの件数が入っていて、もし新しいメールが来ていたら読み上げる処理をするといったことができます。

もしくはdataには何かのアンケートの備考欄に書かれた内容が入っていて、もし何か入力されていたらアラートを出すといったこともできますね。

いずれもdataがゼロだったり空文字列だったりするとその処理をする必要がないため上記のコードのように「!dataが正ならばこの処理をする」（!dataで「dataの否定」という意味になります）と書かれるのが一般的です。

同様に、dataがそもそも存在しないデータ(undefined)だったり、nullが入っていてもこの書き方ではじいて処理をさせないようにできます。

実際に、真偽判定（trueかfalseか判定すること）では下記の通り全て偽（false）となります。

console.log(0 == true);             //false
console.log("" == true);            //false
console.log(null == true);          //false
console.log(undefined == true);     //false

そのため、この4つ（undefined・null・0・””）は同じなのでは？と混同されやすいようです。

しかし、先述の通りれっきとした違いがありますので混同しないように注意しましょう。

まとめ

undefined・null・ゼロ（と空文字列）の違いを解説しました。

初心者の時にはなかなか掴みにくい概念ですが、少しでも理解の助けになれば幸いです。

今すぐにわからなくても書きながら次第に理解が進んでいきますので、頑張りましょう！

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する

VSCodeのプラグインBracket Pair Colorizerを導入して括弧を見やすく！HTMLに適用する方法も解説！

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

はじめに

微笑むエンジニア — Image of unshaven smiling programmer man showing thumb up while working with computers in office

プログラミングをしていると、とにかく括弧がたくさん出てきませんか？

入れ子になっていたりすると、括弧がさらに増えて何が何だかわからなくなる…

誰でも一度は経験したことがあるのではないでしょうか。

この記事では、そんな悩みを解決するためのおすすめの方法を解説します。

括弧が見やすくなるとバグも格段に減らせるので、打ち間違いが多発してなかなか効率が上がらないという方にもおすすめです。

Visual Studio Codeとは

今回ご紹介するのはVisual Studio Codeというエディタ向けの方法です（VSCodeと略称でも記載されます）。

このエディタは本サイトでもイチオシしていて、ほぼ全てのプログラミング言語に対応し、使い勝手も良いため近年人気が急上昇しています。

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

Download Visual Studio Code

Bracket Pair Colorizerとは

VSCodeで使用できる便利なプラグイン（後付け便利機能）がBracket Pair Colorizerです。

（プラグインはExtensionとも呼ばれます。）

これを使うとソースコードが下記のようになります。

括弧の始まりと終わりを同じ色にして、またその括弧に挟まれた部分を色付きの棒でつないでくれるのでど、こからどこまでが一括りなのかとても見やすくなりますね。

詳しい説明を読みたい方は下記の公式ページをご覧ください。

Bracket Pair Colorizer（Microsoft Visual Studio Market Place）

インストール方法

VSCodeを開いたら画面左側下のアイコン（ブロックのようなマーク）をクリックして検索画面を開き「bracket」で検索してください（下図参照）。

おそらく一番上に「Bracket Pair Colorizer」が出てくるので右下の「Install」ボタンをクリックします。

ほんの数秒でインストールは完了です。試しにJavaScript等のソースコードを見てみてください。

先ほどの画面例のように括弧が色付けされていれば成功です。

HTMLへの適用方法

初期設定では色付けされる括弧は「()」「[]」「{}」の3種類だけなので、JavaScriptやRubyなどは見やすくなりますが、HTMLには変化がありません。

せっかくですので、HTMLのタグも見やすくしてみましょう。

適用前

例えばこんなHTMLのソースコードがあったとします。

VSCodeのデフォルト機能により、正しくインデントができていれば縦棒で対応する開始タグ・終了タグが繋がれているためある程度は見やすいですね。

しかし括弧（<>）が全て同じ色なので、書いている途中にはわかりづらく、間違えてインデントしてしまうことがありそうです。

設定方法

Bracket Pair Colorizerの設定からHTMLにも対応できるようにカスタマイズできます。

MacOSの場合

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

上に出てくる検索窓で「bracketpair」と検索するといくつかの候補が出てくるので、下図のように「Bracket Pair Colorizer: Consecutive Pair Colors」の項目を探して下線が引かれている「Edit in settings.json」をクリックしてください。

「settings.json」はプラグインの設定項目が記載されたファイルです。これに手を加えることで細かいカスタマイズができます。

下図赤枠の部分を追記しましょう。

コピー＆ペースト用に下記コードも書いておきます。

["<", "</"],
["<", "/>"],

Command+Sキーでファイルを保存してください。保存できたらファイルを閉じても構いません。

Windowsの場合

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

以降は上記「MacOSの場合」と同様です。

最後は、Ctrl+Sキーでファイルを保存してください。

適用後

早速、先ほどのHTMLファイルを見てみましょう。

タグの始まりと終わりが同色で表示され、別のタグだと黄色・ピンク・水色で色が使い分けられているのでかなり見やすくなりましたね。

また、カーソルを当てたところ（下図25行目〜32行目、section要素の部分）には開始タグから終了タグに挟まれた中身の部分が縦棒で繋がれているので、範囲がとても見やすいです。

まとめ

女性の横顔 — Photo of smiling cute woman using laptop and studying with exercise book while sitting in cozy cafe

VSCodeで括弧の対応が見やすくなるBracket Pair Colorizerについて、導入方法とHTMLへの対応方法を解説しました。

コードが見やすくなると些細なミスが減りますし、気分も上がりますよね。

簡単に導入できるので、ぜひやってみてください。

動画でプログラミング入門をしよう

オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！

プレミアムプランを2週間無料体験しよう

今すぐ詳細を確認する