Web 開発において REST API は、クライアント・サーバー間のコミュニケーションをスムーズにする重要な役割を担っています。

クライアントはフロントエンド、サーバーはバックエンドと考えて構いません。

クライアント (フロントエンド) とサーバー (バックエンド) は通常、直接やりとりすることができません。そこで仲介役として Application Programming Interface (API) というインターフェイスが使われます。

このようにクライアント・サーバー間の通信においては API が極めて重要であることから、API を設計する際には常にベストプラクティスを念頭におくべきでしょう。そうすることで開発者がその API を保守、あるいは利用する際に、問題が生じることなく作業できるようになります。

この記事では、REST API を開発する際の 9 つのベストプラクティスを紹介します。API の利用者にとっても使いやすい、ベストな API を作成する助けとなれば幸いです。

そもそも REST API とは？

REST とは Representational State Transfer の略です。ウェブ向けのアーキテクチャ設計の指針として 2000 年に Roy Fielding によって考案された、ソフトウェアアーキテクチャのスタイルです。

REST の設計原則に従っている API は「RESTful」であると言います。

簡単に言えば、REST API は 2 台のコンピューターが HTTP (Hypertext Transfer Protocol) を介して通信するための手段です。クライアントとサーバーも HTTP で通信します。

REST API 設計のベストプラクティス

1. データの送受信には JSON 形式を使う

かつては API リクエストの受付および返答は主に XML 形式で行われ、HTML が用いられることさえもありました。しかし現在では、API データの送受信に広く使われているデファクトスタンダードは JSON (JavaScript Object Notation) 形式となっています。

例えば XML を用いる場合、データのデコードとエンコードが少し煩雑になることが多いため、現在では XML をサポートするフレームワークは少なくなりました。

JSON は元々この使い道が想定されているため、例えば JavaScript なら、fetch API を通して JSON データを構文解析する組み込みメソッドがあります。Python や PHP など他のプログラミング言語を使う場合でも、それぞれの言語に JSON データを解析したり操作したりするメソッドがあります。

例えば Python では JSON データを扱うために json.loads() や json.dumps() というメソッドが提供されています。

そしてクライアントが正しく JSON データを解釈できるようにするためには、リクエストに対するレスポンスヘッダーの Content-Type を application/json に設定します。

一方、サーバーサイドフレームワークの多くは Content-Type を自動で JSON に定めます。例えば Express の場合、現在では express.json() ミドルウェアがこの目的で使われます。NPM パッケージ body-parser も同じように使われます。

2. エンドポイントには動詞ではなく名詞を使う

REST API を設計する際、エンドポイントのパスには動詞を使わない方が良いでしょう。エンドポイントには各エンドポイントの機能を表す名詞を使います。

この理由は、GET、POST、PUT、PATCH、DELETE など基本の CRUD (Create, Read, Update, Delete) 操作を行うための HTTP メソッドで既に動詞が使われているからです。

GET、POST、PUT、PATCH、DELETE は最もよく使われる HTTP メソッドです。他には COPY、PURGE、LINK、UNLINK などもあります。

つまり、エンドポイントは例えば https://mysite.com/getPosts や https://mysite.com/createPost のような形ではなく、https://mysite.com/posts のような形にすべきです。

まとめると、エンドポイントが実行する操作は HTTP メソッドの動詞で表現しましょう。GET ならばデータを取得する、POST ならばデータを作成する、PUT ならばデータを更新する、DELETE ならばデータを削除するというようにです。

3. コレクションは名詞の複数形で命名する

あなたの API のデータを、API の利用者が入力したさまざまなリソースの集まり (コレクション) だと考えてみましょう。

もし https://mysite.com/post/123 というエンドポイントがある場合、DELETE リクエストで投稿 (post) を削除したり PUT または PATCH リクエストで投稿を更新したりする分には問題ないかもしれませんが、コレクションの中に他の投稿があるかもしれないことがユーザーに伝わりません。これがコレクションには複数形の名詞を使うべき理由です。

つまり、https://mysite.com/post/123 ではなく https://mysite.com/posts/123 とすると良いでしょう。

4. エラーハンドリングにはステータスコードを使う

API へのリクエストに対する返答では常に、規定に従った HTTP ステータスコードを使うべきです。これにより API のユーザーは何が起きているか、リクエストが成功したのか、失敗したのか、何か他の状況かなどを知ることができます。

以下は各 HTTP ステータスコードの範囲とその意味の表です。

5. 関係を表すにはエンドポイントのネストを使用する

しばしば、異なるエンドポイントが関係している場合があります。そのような場合にはエンドポイントをネストして関係をわかりやすくしましょう。

例えば複数のユーザーが利用するブログプラットフォームのようなケースでは、異なる投稿 (post) はそれぞれ異なる著者 (author) によって書かれている可能性があります。そのような場合は https://mysite.com/posts/author のようなエンドポイントがネストの仕方として適切でしょう。

同様に、投稿にはそれぞれコメントがあるかもしれません。コメントのリストを取得するには https://mysite.com/posts/postId/comments のようなエンドポイントが理にかなっているでしょう。

ただし深さが 3 段階を超えるようなネストは、API が複雑になり読みづらくなるため避けた方がいいでしょう。

6. 要求されたデータの取得にフィルター、ソート、ページネーションを活用する

時には API のデータベースが非常に大きくなることもあります。そのようなデータベースからのデータの取得にはとても時間がかかる可能性があります。

フィルター、ソート、ページネーションは、REST API のコレクションに対して実行可能な操作です。このような操作によって、必要なデータのみを取得、並べ替え、ページを分けるなどして、サーバーがリクエストの処理で占有されすぎないようにすることが可能です。

フィルターを適用したエンドポイントの例は次の通りです:
https://mysite.com/posts?tags=javascript

このエンドポイントでは「JavaScript」というタグが付けられた投稿を取得します。

7. セキュリティのため SSL を使用する

SSL とは Secure Socket Layer の略です。SSL は REST API 設計のセキュリティ面で非常に重要です。SSL は API の安全性を高め、悪意のある攻撃を受けにくくします。

その他考慮すべきセキュリティ対策としては、サーバーとクライアント間の通信をプライベートにすること、API の利用者がリクエストした以上のものを取得できてしまわないようにすることなどが含まれます。

SSL 証明書のサーバーへの設定は難しくなく、最初の一年間無料で利用できる証明書などもあります。有料の場合も、高額なものではありません。

SSL を使用している REST API とそうでないものの明確な違いは、URL の HTTP に「s」が付いているかどうかです:
https://mysite.com/posts は SSL を使用しています。
http://mysite.com/posts は SSL を使用していません。

8. バージョンを明確にする

クライアント (ユーザー) を強制的に新しいバージョンへ移行させることのないように、REST API では複数のバージョンを利用できるようにしましょう。新バージョンへの移行は、注意深く行わなければアプリケーションが壊れる可能性がある作業です。

ウェブ開発で最も一般的なバージョニングシステムの 1 つがセマンティックバージョニングです。

セマンティックバージョニングのバージョン番号は、1.0.0 や 2.1.2、あるいは 3.3.4 のようになります。最初の数字はメジャーバージョン、二番目の数字はマイナーバージョン、三番目はパッチバージョンを表します。

大規模なテック企業の RESTful API も、個人開発の場合も、次のような形式がよく使われます:
https://mysite.com/v1/ がバージョン 1
https://mysite.com/v2 がバージョン 2

Facebook API では次のようにバージョン番号が付けられています。

Spotify でも同様のバージョン番号が付けられています。

すべての API がこの通りではありません。Mailchimp の API では異なる形式が使われています。

このような形で REST API を公開することにより、クライアントが新しいバージョンに移行しないことを選択した場合には移行を強制しないようにできます。

9. 正確な API ドキュメントを提供する

REST API を作成する際には、クライアント (利用者) が正しい使い方を学習、理解できるようにする必要があります。ベストな方法は良い API ドキュメントを提供することです。

ドキュメントには次の情報を含めましょう。

• API の適切なエンドポイント
• エンドポイントに対するリクエスト例
• いくつかのプログラミング言語での実装例
• 各種エラーのエラーメッセージとステータスコードのリスト

API ドキュメントの作成によく使われるツールの 1 つに Swagger があります。ソフトウェア開発で API テストツールとして使われることの多い Postman も、API ドキュメントの作成にも利用できます。

結論

この記事では、REST API の開発時に心に留めておくべきベストプラクティスについて学びました。

これらのベストプラクティスや慣習を実践することが重要です。そうすることで、スムーズに機能し、安全で、API 利用者にとって使いやすいアプリケーションを開発できるでしょう。

お読みいただきありがとうございました。早速この記事で学んだベストプラクティスを活かした API を作成してみましょう。

多くのデベロッパーは画像の扱いに苦労します。レスポンシブ対応や位置の処理、中でもページの中央に画像を配置することは特に困難です。

そこで、この投稿では、さまざまな CSS のプロパティを使用して画像を縦と横の両方で中央に配置する方法で最もよく使われるものをお見せします。

過去の投稿では、CSS の Position や Display プロパティを扱っています。もしこれらのプロパティに馴染みがなければ、この記事を読む前にそちらを確認することをおすすめします。

この記事の動画版はこちらです。

画像を横方向で中央に配置する

まずは、3 つの異なる CSS プロパティを使用して、画像を横方向で中央に配置することから始めましょう。

Text-Align

画像を横方向で中央に配置する最初の方法は、text-align プロパティを使用することです。しかし、この方法は画像が <div> などのブロックレベルコンテナ内に含まれている場合のみ成功します。

<style>
  div {
    text-align: center;
  }
</style>

<div>
  <img src="your-image.jpg">
</div>

Margin: Auto

画像を中央に配置する別の方法には、margin: auto プロパティを使用することが挙げられます (左右のマージンに対して)。

しかし、margin: auto プロパティを使用するだけでは、画像に適用できません。margin: auto を使用しなければならない場合、追加で 2 つのプロパティも使用する必要があります。

margin-auto プロパティはインライン要素に何の効果も発揮しません。<img> タグはインライン要素であるため、ブロックレベル要素に変える必要があります。

img {
  margin: auto;
  display: block;
}

次に、幅を指定する必要もあります。これにより、左右のマージンが残りの空白スペースを取り、自動整列させることができます。このようにすると (100% の幅を指定しない限り) うまくいきます。

img {
  width: 60%;
  margin: auto;
  display: block;
}

Display: Flex

画像を横方向で中央に配置する 3 つ目の方法は、display: flex プロパティを使用することです。text-align プロパティをコンテナ (外側の要素) に対して使用したように、display: flex もコンテナに対して使用します。

しかし、display: flex の使用だけでは不十分です、コンテナは justify-content という追加のプロパティを持たなければなりません。

div {
  display: flex;
  justify-content: center;
}

img {
  width: 60%;
}

justify-content プロパティは display: flex と一緒に使われて初めて機能し、画像を中央に配置できます。

最後に、画像の幅はコンテナの幅より小さくなければなりません。そうでなければ、スペースの 100％ を取り、中央配置することができなくなります。

重要: display: flex プロパティは古いバージョンのブラウザではサポートされていません。詳しくはこちらをご覧ください。

画像を縦方向で中央に配置する

Display: Flex

縦方向を揃える場合にも、display: flex が非常に便利です。

コンテナの高さが 800px あるのに対し、画像の高さが 500px しかない場合について考えてみましょう。

div {
  display: flex;
  justify-content: center;
  height: 800px;
}

img {
  width: 60%;
  height: 500px;
}

この場合、コンテナに align-items: center という 1 行のコードを追加するだけで上手くいきます。

div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 800px;
}

align-items プロパティは、display: flex と一緒に使用すると、要素を垂直方向に配置できます。

Position: Absolute と Transform プロパティ

縦方向を揃えるもう 1 つの方法は、position プロパティと transform プロパティを一緒に使用することです。これは少し複雑なので、順を追って説明しましょう。

Step 1: Position プロパティを Absolute に定義する

まず、画像の配置動作を static から absolute に変更します。

div {
  height: 800px;
  position: relative;
  background: red;
}

img {
  width: 80%;
  position: absolute;
}

また、相対配置されたコンテナ内に置く必要があるため、そのコンテナの div に対して position: relative を追加します。

Step 2: Top と Left プロパティを定義する

次に、画像の top プロパティと left プロパティを定義し、それらを 50% に設定します。これにより、画像の開始点 (左上) がコンテナの中心に移動します。

img {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
}

Step 3: Transform プロパティを定義する

しかし、Step 2 では、画像がコンテナの外に部分的にはみ出てしまいます。それを内側に戻す必要があります。

transform プロパティを定義し、その X 軸と Y 軸に -50% を追加するとうまくいきます。

img {
  width: 80%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

水平方向と垂直方向の中央揃えには他にも方法がありますが、最も一般的な方法を説明しました。この投稿が、ページの中央に画像を配置する方法を理解するのに役立つことを願っています。

Web 開発について詳しく知りたい場合は、お気軽に私の YouTube チャンネルを見てみてください。

読んでくれてありがとうございます！

ユーザーが値を選択できるドロップダウンメニューを作成するには、HTML の select タグを使用します。これは、サーバーに送るデータを収集するのに役立つ機能です。

通常、select タグは form 要素内に置かれ、別のタグ <option> 内に選択肢の項目を置きます。select タグ単独で配置することもできますが、その場合も、特別な属性の一つである form を使用して form 要素と関連付けます。

このチュートリアルでは、コーディングプロジェクトでのデータ収集に使用できるように、select タグでドロップダウンメニューを作成する方法について紹介します。スタイリングが難しいことで有名な select タグのスタイリング方法についても触れます。

Select タグの属性

select タグを使ってドロップダウンメニューを作成する方法を説明する前に、select タグがとる属性について説明しておく必要があります。

以下がその属性です。

• name: サーバーに送信された後にデータを参照するのに使用されるため、form control には全て名前を付ける必要があります。
• multiple: この属性により、ユーザーはドロップダウンメニューから複数のオプションを選択できます。
• required: 通常、検証に使用されます。これにより、ユーザーがドロップダウンから少なくとも一つのオプションを選択しない限り、フォームは送信されません。
• disabled: この属性により、ユーザーはオプションを操作できなくなります。
• size: 数値で表される size 属性は、一度に表示されるオプションの数を指定するために使用されます。
• autofocus: この属性は、select を含むすべてのフォーム入力で使用され、ページの読み込み時に入力がフォーカスされるように指定します。

Select タグを使ってドロップダウンメニューを作成する方法

select タグを使ってドロップダウンメニューを作成するには、まず form 要素が必要です。なぜなら、データをサーバーに送信するためには、form 要素内に送信ボタン (submit) も必要になるからです。

<form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

この例では、ドロップダウンとボタンを中央揃えにし、body の背景をライトグレーにするための簡単な CSS を追加します。

body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh;
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

より洗練され、アクセスしやすいものにするために、セレクトボックスを label 要素と関連付け、label テキストをクリックしたときにフォーカスするようにすることもできます。次のコードでそれを実現できます。

<form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

送信ボタンをクリックしたときに 404 エラーが表示されないように、action 属性の値として番号記号 (#) を入力します。

そして、CSS を少し変更する必要があります。

 body {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     height: 100vh; 
     background-color: #f1f1f1;
   }

input {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

label {
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
   }

select {
     margin-bottom: 10px;
     margin-top: 10px;
   }

最終的に次のような結果が得られます。

これで終わりではありません。ページを開いてすぐ送信ボタンをクリックした場合、ドロップダウン項目のうちの一つがデフォルトで表示されており、選択されてしまいます。

しかし、ユーザーエクスペリエンスの観点から、これは好ましくありません。「言語を選択 (select a language)」をドロップダウンの最初の項目に設定することで、これを避けることができます。

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="select">Select a language</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

また、ユーザーが項目を選択するためにセレクトボックスをクリックするときも、ドロップダウンが送信ボタンに重なって表示されます。これもユーザーエクスペリエンスを低下させる原因になり得ます。

これを解決するには、ドロップダウン内にデフォルトで決まった数の項目を表示し、その他の項目をスクロール表示するようにする size 属性が使用できます。

これにより、一部の項目が自動的にユーザーに表示されるため、ダミーの最初の項目を取り除くこともできます。

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang" size="4">
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

multiple 属性を使用すると、ユーザーがドロップダウンから複数の項目を選択できるようになります。

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang" multiple>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

multiple 属性により、デフォルトで四つの項目が表示されます。複数の項目を選択するには、Shift キーまたは Ctrl キーを押しながらマウスで選択する必要があります。

select タグと <option> タグでできることはこれだけではありません。<select> タグ内に <optgroup> 要素を使用して、複数階層のセレクトボックスを作成することもできます。

次のように、先ほど作成したドロップダウンを複数階層のセレクトボックスに変換できます。

<form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <optgroup label="first-choice">
          <option value="select">Select a language</option>
          <option value="javascript">JavaScript</option>
          <option value="php">PHP</option>
          <option value="java">Java</option>
          <option value="golang">Golang</option>
        </optgroup>
        <optgroup label="second-choice">
          <option value="python">Python</option>
          <option value="c#">C#</option>
          <option value="C++">C++</option>
          <option value="erlang">Erlang</option>
        </optgroup>
      </select>
      <input type="submit" value="Submit" />
</form>

Select 要素をスタイリングする方法

select 要素のスタイル設定は分かり辛く、ブラウザー内での表示方法も一貫しないことが多いです。しかし、次のような設定を試してみることもできます。

 <form action="#">
      <label for="lang">Language</label>
      <select name="languages" id="lang">
        <option value="select">Select a Language</option>
        <option value="javascript">JavaScript</option>
        <option value="php">PHP</option>
        <option value="java">Java</option>
        <option value="golang">Golang</option>
        <option value="python">Python</option>
        <option value="c#">C#</option>
        <option value="C++">C++</option>
        <option value="erlang">Erlang</option>
      </select>
      <input type="submit" value="Submit" />
</form>

 select {
        margin-bottom: 10px;
        margin-top: 10px;
        font-family: cursive, sans-serif;
        outline: 0;
        background: #2ecc71;
        color: #fff;
        border: 1px solid crimson;
        padding: 4px;
        border-radius: 9px;
      }

上記の CSS コードスニペットでは、セレクトボックス内のテキストに次の外観を付与しました。

• フォントファミリー「cursive」と色「白」
• アウトライン「0」: フォーカスされたときの不恰好なアウトラインを削除
• 背景「緑色」
• 境界線「1px、深紅色」
• 境界半径「4px」: 全辺にわずかに丸みを帯びた境界線を付与
• パディング「4px」: 少し間隔を空ける

これによりセレクトボックスの見栄えが良くなりました。

結論

select タグは、HTML でドロップダウンやコンボリストを作成する場合に非常に便利です。ラジオボタンとチェックボックスを一つのパッケージにまとめたようなものです。

ラジオボタンではリストから一つの項目しか選択できませんが、チェックボックスでは複数の項目を選択できることを覚えているでしょうか。select は、単一のアイテムのみまたは複数のアイテムを受け付けるようにも設定できるため、より柔軟です。

select タグの問題の一つは、スタイルが非常に難しいことです。合理的な解決策は、優れたユーティリティ クラスを提供する CSS ライブラリを使用して、select 要素やフォームのスタイルを設定することです。

このチュートリアルで select タグに慣れ、プロジェクトで使用できるようになったのであれば嬉しいです。

読んでいただきありがとうございます。引き続きコーディング頑張ってください。

CSS は難しいですが、自由度も高いです。そして、この高い自由度のおかげで、たとえ行き当たりばったりでもスタイルを適用することができます。

ページは一見問題なく読み込まれます。「クラッシュ」もしません。

ではページ全体の幅と高さを設定したい場合、HTML 要素にどのような設定をすればいいか分かりますか。body 要素についてはどうでしょう。

上手くいくことを願いながらただ当てずっぽうにスタイルを適用していませんか。

もしそうであっても、あなたは一人じゃありません。

これらの質問に対する答えは直感的ではないのですから。

私自身、どのプロパティをどの要素に適用すべきかを正確に把握せずに、両方の要素にスタイルを適用していたという罪深い過去があります。🤦‍♂️

次の例のように、CSS プロパティが HTML と body の両方の要素に適用されていることは珍しくありません。

html, body {
     min-height: 100%;
}

それって問題なの？

はい、かなり問題です。

上のスタイル定義は以下のような問題を引き起こします。

両方の要素の min-height (最小の高さ) を 100% に設定しても、body 要素はページ全体を埋めるようになりません。これは思っていた動作と異なるかと思います。結果として表示されたスタイルの値を開発ツールで確認してみれば、body 要素の高さがゼロになっていることが分かるでしょう。

一方で、HTML 要素はブラウザーの表示領域と同じ高さになっています。

次の Chrome Dev Tools のスクリーンショットを見てください。

なぜこんなことが起こるの？

パーセンテージをサイズの値として使用する場合、その要素はパーセンテージの基準として親要素を参照します。

HTML 要素は、目に見える表示領域の高さを高さ値として持つビューポートを参照します。しかし、上の例では HTML 要素の min-height を設定しているだけで、height プロパティの値は設定していません。

したがって、body 要素には、100% が何に等しいかの基準として参照する親の height 値がないことになります。

そして、問題は目に見えないかも

もし、ページを埋め尽くすほどのコンテンツがあった場合、この問題には気付かないかもしれません。

そして、より気付きにくくなる原因として、両方あるいは片方の要素に背景色を設定した場合、ビューポートはその色で埋め尽くされます。これによって、body 要素がビューポートと同じ高さを持つと錯覚してしまうのです。

それは間違いで、高さはゼロのままです。

先ほどの画像は次の CSS で表示されたものです。

html, body {
    min-height: 100%;
}
body { background-color: dodgerblue; }

逆継承？

奇妙な現象ではありますが、もし HTML 要素の背景色を個別に設定しない場合、HTML 要素には body 要素の背景色が適用されます。

では、レスポンシブなフルページの理想的な高さ設定は？

何年もの間、答えは次の通りでした。

html {
    height: 100%;
}
body {
    min-height: 100%;
}

これにより HTML 要素は親となるビューポートを参照し、ビューポートの高さの 100% に等しい height の値を持つことができます。

HTML 要素に height 値が設定されたことで、body 要素に割り当てられた min-height は、body 要素の最小の高さを HTML 要素の高さと同じにします。

この設定はまた、コンテンツがページの見えている部分より大きい場合に、あわせて body の高さを大きくすることもできます。

唯一の欠点は、HTML 要素は見えているビューポートの高さを超えて大きくならないことです。ただし、body 要素が HTML 要素を超えて大きくなることは問題ないと考えられてきました。

最新の解決策はもっと簡潔です

body { min-height: 100vh; }

この例では、単位 vh (viewport height) を使用することで、body がビューポートの全高に基づいて高さの最小値を設定できるようにしています。

先ほど述べた背景色と同じように、HTML 要素に height 値を設定しない場合、body 要素に与えられた height 値と等しい値が採用されます。

したがって、この解決策であれば以前の解決策の欠点であった HTML 要素のオーバーフローが回避され、両方の要素がコンテンツと共に大きくなります！

単位 vh の使用は、過去には一部のモバイル端末で異常をきたすこともありましたが、現在では Chrome と Safari ではビューポート単位は正常に動作するようです。

ページの高さによっては水平スクロールバーが表示されることがあります

えっ、どういうこと？

「ページ幅」じゃなくて？

いいえ、違います。

別の奇妙な現象として、ページの高さがブラウザーの水平スクロールバーをアクティブにする場合があります。

ページのコンテンツがビューポートの高さを超えると、右側の垂直スクロールバーがアクティブになります。これによって、同時に水平スクロールバーが表示される可能性があります。

どうやって修正するの？

ページ幅設定が原因であることを知っておくと安心かもしれません。

この問題は HTML 要素や body 要素だけでなく、要素を 100vw (viewport width) 単位に設定することに起因します。

ビューポート単位は垂直スクロールバーが占める約 10px の幅を考慮していません。

したがって、垂直スクロールバーがアクティブになると水平スクロールバーも表示されることがあるのです。

ページをフル幅に設定する方法

設定しないというのも一つの方法です。

HTML 要素と body 要素に幅を設定しない場合のデフォルトは画面全体のサイズになります。width の値を auto 以外に設定するときには、初めに CSS をリセットするようにしましょう。

デフォルトで、body 要素の全サイドのマージンが 8px に設定されていることを覚えていますか。

CSS リセットにより、これが削除されます。マージンを削除する前に幅を 100% に設定すると body 要素のオーバーフローを引き起こします。私がよく使う CSS リセットは次のコードです。

* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

好みの幅に設定する方法

必ずしも幅を設定する必要はありませんが、通常、私は設定するようにしています。

単なる癖かもしれません。

body 要素の幅を 100% に設定すると、ページ全体の幅になります。これは基本的に、幅の値を設定せずにデフォルトを許可することと同じです。

body 要素を小さなコンテナとして使用し、HTML 要素でページを埋めたい場合は、body に幅の最大値を設定することもできます。

例えば次のように設定できます。

html { background-color: #000; } 
body {
    min-height: 100vh;
    max-width: 400px;
    background-color: papayawhip; 
    margin: 0 auto;
}

結論

HTML 要素に height 値がない場合、body 要素の height や min-height を 100% に設定しても (コンテンツを追加する前は) 高さはゼロになります。

一方、HTML 要素に width 値がない場合は、body 要素の width を 100% に設定すると幅はフルページの幅になります。

これは直感に反するため、混乱するかもしれません。

レスポンシブなフルページの高さを実現するには、body 要素の min-height を 100vh に設定しましょう。

ページ幅を設定する場合、水平スクロールバーが意図せず表示されることを避けるため、100vw よりも 100% を選択しましょう。

私の YouTube チャンネルのチュートリアルでは、全画面サイズかつコンテンツと共に拡大する HTML ページ作成のために、CSS の高さと幅をどのように設定すればよいかを実際に再現しながら紹介しています。

CSS の幅と高さを設定する他の方法を知っていますか？

‌ぜひ教えてください！

新しくウェブサイトを開設する際、基礎が固まっていることは重要です。この記事では、HTML 5 ボイラープレートとは何か、そして基本のテンプレートをどのようにして作成するかについて解説します。

HTML 5 ボイラープレートとは？

ウィキペディアでは次のように定義されています。

ボイラープレートコード (英: boilerplate code、または単にボイラープレート) は、コンピュータプログラミングでは、殆ど、または全く変化することなく、複数の場所で繰り返される定型コードのセクションのこと。

HTML におけるボイラープレートとは、プロジェクト開始時に追加するテンプレートのことを指します。HTML ページの作成には必ずボイラープレートを使用するようにしましょう。

HTML 5 ボイラープレートの例

基本的な例がこちら。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
	<script src="index.js"></script>
  </body>
</html>

HTML の文書型とは？

HTML コードの一番最初の行では、文書型宣言を行う必要があります。文書型宣言によって、ブラウザはウェブページがどのようなバージョンの HTML で書かれているか認識することができます。

<!DOCTYPE html>

もし、この一番最初の行を忘れてしまうと、 <article> < footer > <header> などの HTML 5 タグがブラウザによって認識されない可能性があります。

HTML ルート要素とは？

<html> タグは HTML ファイルの最上位要素です。その中に、<head> と <body> をネストします。

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body></body>
</html>

開始タグ <html> 内の lang 属性は、ページで使用する言語を設定します。スクリーンリーダーが文字を正しく発音できるようにする、といったアクセシビリティの観点からも言語の設定は大切です。

HTML のヘッダータグとは？

<head> タグには機械によって処理される情報を含めます。<head> タグの中には、機械に対して文書そのものの情報を提示する「メタデータ」をネストします。

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>HTML 5 Boilerplate</title>
    <link rel="stylesheet" href="style.css">
</head>

UTF-8 文字エンコーディングとは?

UTF-8 は、ウェブページで使用すべき標準的な文字エンコーディングです。これは <head> 要素の中の <meta> タグで最初に表示する必要があります。

 <meta charset="UTF-8">

World Wide Web Consortium によると、

A Unicode-based encoding such as UTF-8 can support many languages and can accommodate pages and forms in any mixture of those languages. Its use also eliminates the need for server-side logic to individually determine the character encoding for each page served or each incoming form submission.

UTF-8 などの Unicode ベースのエンコーディングは、多くの言語をサポートし、それらの言語が混在するページやフォームに対応できます。 また、これを使用すると、サーバー側のロジックにより、提供される各ページまたは受信フォーム送信ごとに文字エンコードを個別に決定する必要がなくなります。（英文を翻訳）

HTML のビューポートタグとは？

このタグはデバイスの画面サイズに対するページの幅を与えます。例えば、モバイル端末の幅が 600px の場合、ブラウザのウィンドウの幅も 600px になります。

initial-scale はズーム度合いをコントロールします。initial-scale の値が 1 の場合、ブラウザによるデフォルトのズームが防止されます。

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

X-UA-Compatible とは？

この <meta> タグは、Internet Explorer の文書モードを指定します。 IE=edge は、サポートされている最高のモードです。

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

HTML タイトルタグとは？

<title> タグはウェブページのタイトルを指定します。このテキストは、ブラウザのタイトルバーに表示されます。

    <title>HTML 5 Boilerplate</title>

CSS スタイルシート

このコードにより、カスタムの CSS を HTML ページにリンクすることができます。rel="stylesheet" によって、HTML ファイルと外部スタイルシートの関係性を定義します。

    <link rel="stylesheet" href="style.css">

HTML のスクリプトタグ

外部スクリプトタグは body の終了タグの直前に配置されます。ここで外部の JavaScript コードをリンクすることができます。

	<script src="index.js"></script>

結論

HTML 5 ボイラープレートを HTML ページに追加するようにしましょう。このスターターコードには文書型、メタデータ、外部スタイルシート、スクリプトタグ等の重要な情報が含まれています。

筆者は毎週だいたい 18 回くらいは JSON データを扱うことがあると思います。それでもまだ、目的に合わせてデータを操作する方法をほぼ毎回 Google で検索しています。その答えが常に見つかるような究極のガイドがあれば良いと思いませんか？

この記事では、JavaScript でオブジェクトの配列を操作するための基本を紹介します。

JSON 形式のデータを使用したことがあれば、JavaScript オブジェクトを使用したことがあると言えるでしょう。JSON とは JavaScript Object Notation の略です。

オブジェクトの作成はとてもシンプルです。次のように書くだけです。

{
  "color": "purple",
  "type": "minivan",
  "registration": new Date('2012-02-03'),
  "capacity": 7
}

上記のオブジェクトは車を表現しています。車にはさまざまな種類や色があり、各オブジェクトは特定の車を表します。

さて、多くの場合、このようなデータを外部のサービスから取得します。しかし、オブジェクトとその配列を自身で作成することもあるでしょう。筆者がこのオンラインショップを作成した時もそうでした。

このカテゴリー一覧の各アイテムが、HTML で書くと下記のようになっていると考えてみてください。

このコードを 12 回繰り返して書きたくはありませんでした。メンテナンスが困難になるからです。

オブジェクトの配列を作成する

では車の例に戻りましょう。この車のセットを見てください。

これは、次のように配列で表現することができます。

let cars = [
  {
    "color": "purple",
    "type": "minivan",
    "registration": new Date('2017-01-03'),
    "capacity": 7
  },
  {
    "color": "red",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    ...
  },
  ...
]

オブジェクトの配列は、ずっと同じ状態とは限りません。ほとんどの場合、何かしらの操作をする必要が出てきます。では、既存の配列にオブジェクトを追加する方法を見てみましょう。

オブジェクトを最初に追加する - Array.unshift

配列の最初の位置にオブジェクトを追加するには、Array.unshift を使用します。

let car = {
  "color": "red",
  "type": "cabrio",
  "registration": new Date('2016-05-02'),
  "capacity": 2
}
cars.unshift(car);

オブジェクトを最後に追加する - Array.push

配列の最後の位置にオブジェクトを追加するには、Array.push を使用します。

let car = {
 "color": "red",
 "type": "cabrio",
 "registration": new Date('2016-05-02'),
 "capacity": 2
}
cars.push(car);

オブジェクトを途中に追加する - Array.splice

配列の途中の位置にオブジェクトを追加するには、Array.splice を使用します。この関数はアイテムを取り除くこともできるため、とても便利です。引数の取り方には少し注意が必要かもしれません。

Array.splice(
  {変更の開始位置のインデックス},
  {取り除くアイテムの数},
  {追加するアイテム}
);

したがって、赤いフォルクスワーゲンのカブリオ (Cabrio、オープンカー) を 5 番目の位置に追加したい場合には、次のようになります。

let car = {
  "color": "red",
  "type": "cabrio",
  "registration": new Date('2016-05-02'),
  "capacity": 2
}
cars.splice(4, 0, car);

オブジェクトの配列をループして操作する

ここで質問があります。あなたはなぜオブジェクトの配列をループしたいのでしょうか？

なぜそのようなことを聞くかというと、ループすること自体が最終的に達成したい目的であることはほとんどないからです。

JavaScript では、ループを使って自分でロジックを実装しなくても問題を解決できるように多くの関数が用意されています。では見ていきましょう。

配列内のオブジェクトを値で検索する - Array.find

例として、赤い車を見つけたいとしましょう。そのためには Array.find という関数を使うことができます。

let car = cars.find(car => car.color === "red");

この関数は最初に一致した要素を 1 つ返します。

console.log(car);
// 出力:
// {
//   color: 'red',
//   type: 'station wagon',
//   registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
//   capacity: 5
// }

また、複数の値を条件にして検索することもできます。

let car = cars.find(car => car.color === "red" && car.type === "cabrio");

この例では配列内の最後の車が取得されます。

配列から条件に当てはまる複数のオブジェクトを取得する - Array.filter

Array.find 関数はオブジェクトを 1 つだけ返す関数でした。赤い車をすべて取得したい場合には Array.filter を使う必要があります。

let redCars = cars.filter(car => car.color === "red");
console.log(redCars);
// 出力:
// [
//   {
//     color: 'red',
//     type: 'station wagon',
//     registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 5
//   },
//   {
//     color: 'red',
//     type: 'cabrio',
//     registration: 'Sat Mar 03 2012 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 2
//   }
// ]

配列内のオブジェクトを変換する - Array.map

これはよく必要になる操作です。あるオブジェクトの配列を異なるオブジェクトの配列へと変換します。これは Array.map の役割です。では、車をサイズに基づいて 3 つのグループに分類する例を考えましょう。

let sizes = cars.map(car => {
  if (car.capacity <= 3){
    return "small";
  }
  if (car.capacity <= 5){
    return "medium";
  }
  return "large";
});
console.log(sizes);
// 出力:
// ['large','medium','medium', ..., 'small']

サイズ以外の値も必要であれば、新しいオブジェクトを作成することも可能です。

let carsProperties = cars.map(car => {
 let properties = {
   "capacity": car.capacity,
   "size": "large"
 };
 if (car.capacity <= 5){
   properties['size'] = "medium";
 }
 if (car.capacity <= 3){
   properties['size'] = "small";
 }
 return properties;
});
console.log(carsProperties);
// 出力:
// [
//   { capacity: 7, size: 'large' },
//   { capacity: 5, size: 'medium' },
//   { capacity: 5, size: 'medium' },
//   { capacity: 2, size: 'small' },
//   ...
// ]

配列内の全オブジェクトにプロパティを追加する - Array.forEach

では、車にサイズの情報を追加したい場合はどうしますか？その場合、元のオブジェクトに新しいプロパティ size を追加して拡張できます。これは Array.forEach 関数が役に立つ場面です。

cars.forEach(car => {
 car['size'] = "large";
 if (car.capacity <= 5){
   car['size'] = "medium";
 }
 if (car.capacity <= 3){
   car['size'] = "small";
 }
});

配列をプロパティでソートする - Array.sort

オブジェクトの変換が完了したら、次はオブジェクトを何らかの方法で並べ替えたいことがよくあります。

ソートは通常、すべてのオブジェクトが持っているプロパティの値に基づいて行います。ソートには Array.sort 関数が使用できますが、並べ替えのメカニズムを定義する関数を用意する必要があります。

例えば車を定員 (capacity) に基づいて降順に並べ替えたいとしましょう。

let sortedCars = cars.sort((c1, c2) => (c1.capacity < c2.capacity) ? 1 : (c1.capacity > c2.capacity) ? -1 : 0);
console.log(sortedCars);
// 出力:
// [
//   {
//     color: 'purple',
//     type: 'minivan',
//     registration: 'Wed Feb 01 2017 00:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 7
//   },
//   {
//     color: 'red',
//     type: 'station wagon',
//     registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 5
//   },
//   ...
// ]

Array.sort は、2 つのオブジェクトを比較し、もし並べ替え用の関数の実行結果が正の数であれば、1 番目のオブジェクトを 2 番目の位置に動かします。つまり、並べ替え用の関数は「1 番目のオブジェクトを 2 番目に配置すべきですか？」という質問だと考えることができます。

不要な位置交換を避けるために、両方のオブジェクトの値が同じだった場合を示す 0 (ゼロ) のケースを加えることを忘れないでください。

配列内のオブジェクトが条件を満たすかチェックする - Array.every, Array.some

Array.every と Array.some は、各オブジェクトが特定の条件を満たすかのチェックだけを行いたい場合に便利です。

例えば、配列内に赤いカブリオがあるでしょうか？すべての車に最低 4 人が乗車できるでしょうか？もっとウェブに関連した例で言うと、ショッピングカート内に特定の製品があるでしょうか？

cars.some(car => car.color === "red" && car.type === "cabrio");
// 出力: true

cars.every(car => car.capacity >= 4);
// 出力: false

もしかしたら、Array.some によく似た関数の Array.includes を覚えているかもしれません。しかし、Array.includes はプリミティブ型の配列でのみ動作します。

まとめ

この記事では、オブジェクトの配列を作成、操作、変換、ループする基本的な関数について説明しました。つまずきがちなケースのほとんどをカバーしているはずです。

より高度な機能を必要とするユースケースがあれば、こちらの配列についての詳細なガイド (英語) や W3Schools のリファレンス (英語) を参照してください。

または筆者にご連絡ください。また別の記事を用意します :-)

Visual Studio Code は最も人気のあるコードエディターの 1 つです。それは無料で、すっきりしたインターフェースを備えており、プログラミングをより簡単で楽しいものにする無数の拡張機能を備えています。

私 (原著者) はフロントエンドのウェブ開発者で、仕事中や私のYouTube チャンネルで VS Code を使用しています。これまで、コーディング中に再読込ボタンをクリックせずに自動的にブラウザーを再読込させる方法について、多くの人から質問がありました。

それは、Live Server と呼ばれる VS Code の便利な拡張機能を設定することで実現できます。この投稿では、それがどのように動作するのかについて、また VS Code エディターに Live Server をインストールして設定する方法について、詳しくお伝えします。

なぜ Live Server 拡張機能を使用すべきなのか？

通常、コードを変更したり何か新しいものを記述した時には、ページを手動で更新して変更を確認する必要があります。

言い換えれば、毎日 100 回変更する場合、ブラウザーを 100 回更新する必要があります。

ところが Live Server 拡張機能は、これを自動化してくれます。Live Server をインストールした後では、たったひとつのボタンで、自動化されたローカルホスト (localhost) を起動して、ブラウザー上で動作させることができます。

Live Server は、いったんコードを変更したり何か新しいものを記述すると、それを保存した後に、ブラウザーを自動的に更新します。これで、素早く自動的に変更を確認できるようになるでしょう。

もしよろしければ、以下のチュートリアル動画を見ることもできます:

最初に、VS Code をインストール

すでに VS Code をパソコンにインストール済みであれば、この手順をスキップしてかまいません。そうでない場合は、公式サイトから VS Code をダウンロードできます。

VS Code のダウンロードとインストールが済んだら、次のようなウェルカム画面が表示されます:

左側にいくつかのアイコンが見えるはずです。その内の 1 つ (デバッグアイコンの下) が拡張機能のボタンです:

そのボタンをクリックすると、検索バーが現れます。そこに「live server」と入力してください。

多くの選択肢が表示され、システムに適したものをどれでも選ぶことができます。私は Ritwick Dey の Live Server を使用しているので、この例ではそれを選びます:

install ボタンをクリックすると拡張機能をインストールできます。

新しい HTML ページを作成

Live Server を起動するには、少なくとも 1 つの HTML ページを作成する必要があります。それを用意するには、左側に見えているいくつかのボタンの、一番上にあるファイルのアイコンのボタン (Explorer ボタン) をクリックしてから、New File ボタンをクリックし、index.html と入力してください:

設定の問題と対処法

HTML ページを作成して Live Server 拡張機能をインストールした後ならば、「Go Live」アイコンが下の青い領域 (ステータスバー) に表示されるはずです:

表示されていない場合は VS Code を再起動してください。それでうまくいくはずです。

「Go Live」ボタンをクリックすると、(ポート番号が指定された) ローカルホストがデフォルトのブラウザー上で起動するはずです。同じボタンをクリックすることで、Live Server をいつでも起動または停止できます。

もしこの段階に到達したならば、おめでとうございます！ :) これで Live Server と連動できます。その他にまだ問題がある場合は、こちらの投稿で詳細情報をご確認ください。

結論

この投稿が、VS Code の Live Server 拡張機能のインストールと設定に役立つことを願っています。ウェブ開発についてさらに学習したい場合は、私の YouTube チャンネルにお気軽にアクセスしてください。

お読みくださいましてありがとうございました!