## Dockerとは何かわかりやすく解説

まずは「Dockerとは何か？」という所からわかりやすく解説します。Dockerで何ができるのか、そもそも仮想環境とは何か、Dockerと他の仮想マシンの違い、Dockerの使いどころについてまとめたので、Dockerについて詳しく知らない方はこの機会にぜひ学んでください。

DockerとはDocker社が開発した*仮想環境を作るためのソフトウェア*を指します。Dockerでは**コンテナと呼ばれる技術を使って仮想環境を作っており、他の仮想マシンとは少し異なる手法を用いています。**

【参考】：[Docker](https://www.docker.com/)

【Docker入門】メリットや用途を交えて基本情報を解説！

仮想環境とは、**コンピュータ内で構築された仮想的な環境を意味します。**仮想環境内では通常のコンピュータと同じような手順で、アプリを動かしたりプログラムを開発したりできます。また、Windowsの中にLinuxの仮想環境を構築する、といったこともできるため、Linuxでしか使えないアプリをLinuxパソコンを持っていなくても使うことが可能です。

なお、仮想環境を作るには、コンピュータのCPUやメモリなどのリソースを仮想環境にも分け与える必要があります。あくまで元々あったリソースを使っているだけなので、*速度などの性能は通常よりも落ちますが、実機をもう1台用意しなくて良いというコスト面のメリットがあります。*

### Dockerと他の仮想マシンの違い

Dockerと並ぶ代表的な仮想マシンにVMware Playerなどがありますが、それらは仮想環境の作り方がDockerとは異なります。*他の仮想マシンではパソコンのOS上に別のOS（ゲストOS）を作り、そのOS上に仮想環境を作ってアプリを動かします。*

たとえば、WindowsOS上でVMware Playerを起動させてLinuxOSを作り、その上でExcelを動かすといった具合です。この場合、ExcelはゲストOSであるLinuxOSによって管理されます。しかし、このやり方ではExcelを使う度にゲストOSを動かす必要があるため、起動が遅くなってしまうデメリットがあります。

対して**Dockerでは、ゲストOSを作らずにホストOSのカーネル（OSの基本機能）を共有します。**ゲストOSが必要ないのでその都度ゲストOSの立ち上げを待つこともなく、起動が速いメリットがあります。

【参考】：[VMware Workstation Player](https://www.vmware.com/info/workstation-player/evaluation)

Dockerは**主に開発環境を構築する際に使われます。**Dockerを使えば開発チームの環境を全く同じにできるのがメリットです。

*開発環境が違うと開発中のアプリの挙動が変わってしまうことがあり、連携が取りにくくなってしまいますが、Dockerはその問題を解決します。*Dockerで全員同じ状態の仮想環境を作り、そこに共通のアプリやツールをインストールすれば、開発がスムーズに進みます。

Dockerは、*Dockerエンジン・Dockerイメージ・コンテナの3つから成り立っています。*この3つの役割や特徴を知ることで、Dockerの仕組みについて理解できます。

**DockerエンジンはDockerそのものを指します。**Dockerエンジンを起動させるとパソコンのOS上でコンテナが動くようになります。Dockerは*公式サイトからWindows用、Mac用、Linux用それぞれをインストールすることが可能です。*

【Dockerインストール】Windows・Linux・MacOS

コンテナを取得する前にDockerイメージを用意する必要があります。Dockerイメージは**コンテナの実行に必要なファイルがまとめられたものであり、アプリごとに別々の種類のイメージが用意されています。**

Dockerイメージは*Docker Hubから入手することが可能です。*Docker Hubには各Dockerイメージを入手するためのコマンドが書かれているので、そのコマンドをコマンドプロンプトで叩きます。

【参考】：[Docker Hub](https://hub.docker.com/)

Dockerイメージとコンテナの違いとは？作成の流れ入門

Dockerイメージを入手したら、Dockerイメージによってコンテナを作ります。**コンテナとはDockerエンジン上に構築されるアプリケーションの実行環境（仮想環境）のことで、コンテナ1つ1つが独立して作動しています。**

Dockerイメージからコンテナを作成することを「ビルドする」と言います。OS、WebサーバーやDBサーバー、アプリケーションなど、用途に応じてさまざまな環境をビルドすることができます。

エンジニア初心者でも分かる！Dockerコンテナの超入門！

## Docker環境の構築が簡単になる「Docker Desktop」

Docker Desktopとは、WindowsやMacOS上でDockerを使用する際に便利なアプリケーションです。Docker Desktopはシンプルなインターフェースで使いやすく、これを使えば**専用のGUI上でコンテナの稼働状況の確認やコンテナの停止・再開・廃棄といった管理作業が簡単にできるようになります。**

【参考】：[Docker Desktop](https://www.docker.com/ja-jp/products/docker-desktop/)

### Docker Desktopの有料化について

Dockerそのものは無料で利用できますが、Docker Desktopは2021年9月から有料化されています。

**有料サブスクリプション契約が必要なのは「従業員が 251 人以上、または、年間収入が 1,000 万米ドル以上」の大企業における商用利用で、個人や規定以下の規模の企業、非商用における利用については引き続き無料となります。**

【参考】：[The Grace Period for the Docker Subscription Service Agreement Ends Soon – Here’s What You Need to Know](https://www.docker.com/blog/the-grace-period-for-the-docker-subscription-service-agreement-ends-soon-heres-what-you-need-to-know/)

エンジニア必見！ Docker Desktop有料化の影響と対策

今までDocker DesktopにはMac版とWindows版しかありませんでしたが、**2022年5月からLinux版も利用できるようになりました。**

Linux版が登場したことで、OSの違いによる動作環境や機能の差をなくし、すべての主要なOSでエクスペリエンスを統一できるようになりました。

【参考】：[Docker Desktop for Linux (ベータ版)](https://matsuand.github.io/docs.docker.jp.onthefly/desktop/linux/)

Docker Desktop 4.6が登場！最新版の新機能やインストール手順を解説

Dockerを使うと、具体的にどのようなメリットを得られるのでしょうか。ここでは、Dockerは他の仮想マシンと比べてどういった点が優れているのか、詳しく解説します。

Dockerのメリットを徹底解説！仮想マシンとは何が違う？

### 開発環境の構築が簡単にできる

*Dockerエンジンをインストール後、利用したいアプリのDockerイメージを入手してコンテナを作成するだけで、開発環境が構築できます。*Docker Hubでは実に多様なDockerイメージが公開されており、目的に応じたイメージを選べばすぐに開発環境を構築することができます。

また、開発環境を作り直したい場合はコンテナを削除して再び作成するだけで済み、ホストOSに影響を及ばさないため、安心して作り直すことが可能です。

Docker Hubとは？仕組みからアカウント作成方法まで紹介

### 負荷が小さく処理速度が速い

Dockerは、*他の仮想マシンと比べて容量が小さく軽量です。*パソコンのCPUやメモリなどのリソースを必要最低限しか利用しないため、パソコンに与える負荷を小さくすることができます。

DockerはホストOSのカーネルを共有していますが、*1つのコンテナの中でミドルウェアやアプリケーションを含めた環境が完結しており、まるで別々のマシンが動いているかのような動作を実現できます。*そのため、負荷を抑えて高速に処理することが可能になっています。

### ハードウェアコストを削減できる

Dockerを使えば、1つの物理サーバ上に複数のコンテナを作成でき、効率的に運用することができます。従来はアプリケーションごとにサーバを用意する必要がありましたが、Dockerを導入することで、1台のサーバで複数のアプリケーションを動かすことができるため、*ハードウェアの利用効率が大幅に向上*します。

その結果、ハードウェアにかかるコストも大幅に削減できるでしょう。例えば、これまでは10アプリケーションのために10台のサーバを用意していたのが、Dockerの導入で1台のサーバで済むようになれば、コスト削減の効果が非常に大きいことがわかります。

チームで複数のメンバーと開発作業を行う際や、新しいメンバーが入った際も、Dockerであれば*イメージを共有することで、各人が同じ環境を簡単に構築することができます。*

コンテナを作成するためのDockerイメージには、アプリケーションの実行に必要なリソースがすべて含まれています。独自のコンテナ環境も、パッケージ化したイメージという形で保存し、配布することで簡単に共有できます。

また、*開発のために作成したDockerイメージはそのまま本番環境でも使うことができます。*このことから、開発環境と差がなくプロダクトの品質が保たれる、といったメリットも得られます。

### バージョン管理・ロールバックがしやすい

*コンテナやイメージはレイヤー化されていて差分保存される仕組みなので、変更を加えると新しいレイヤーが追加されます。*変更内容は変更ログとして保存されるため、バージョンを追跡することができます。

現在のバージョンで問題が発生した場合に以前のバージョンにロールバックしたり、新旧バージョン間の変更箇所のみをアップロードしたりもできるので、開発作業をより効率的に進めることができます。

ここまでDockerのできることやメリットを紹介しましたが、Dockerのデメリットもいくつかあります。ここでは、Dockerにおけるデメリットをまとめました。

### ノウハウの習得に時間がかかる

Dockerは**他の仮想マシンとは異なる手法で仮想環境を構築するため、構築方法について1から理解する必要があります。**Dockerの動作手順をよく理解しないまま使用すると、思わぬトラブルが発生することも多いので、安全に効果的な運用を行うには十分な学習が必要となります。

Dockerでは、同一のOS上に複数のコンテナを作成します。このことによって起動や処理の速さなどのメリットが得られるわけですが、同時にデメリットを引き起こしてしまうこともあります。

例えば、**OS違いの検証をしたい場合は別のマシンや仮想マシンを用意しなければなりませんし、ホストOSに未対応のアプリケーションは起動できません。**

### 規模が大きくなると管理が大変になる

Dockerの規模が大きくなり大量のコンテナを管理する必要が出てくると、オーバーヘッドのリスクが高まります。そのため慎重な設計が求められますが、大規模利用ではDockerのみですべての管理を行うのは難しいです。

そこで、*通常は大量のコンテナを管理するためにKubernetesといったオーケストレーションツールが用いられます。*その場合、コストや習得の手間などが追加で発生することになります。

DockerとKubernetesの概要・使い分けポイントを解説

コンテナ化を楽に！KubernetesとDockerの違いを解説

### セキュリティリスクに注意が必要

1台のマシン上で多数のコンテナが作動することは大きなメリットでもありますが、このように*分離レベルが低い状態では、1つの脆弱性がホストマシン全体に影響を及ぼすリスクがあります。*

あるコンテナに悪意のあるソフトウェアや第三者が入り込むと、ホストOSや他のコンテナまでもが危険にさらされます。したがって、ユーザの権限設定なども含め、コンテナ単位でのセキュリティ対策が非常に重要になります。

### コンテナ同士の連携が難しい

コンテナ同士を連携させたい場合、*適切に設計できていないと運用が上手くいかないこともあります。*そのため、コンテナの連携は難易度が高いと言えます。

コンテナ間でファイルやデータを共有することは可能ですが、連携の方法によってはセキュリティリスクが高まってしまったり、設定が複雑だと運用の手間がかかってしまったりします。また、連携によって処理速度や処理性能の低下が招かれる恐れもあります。コンテナを連携させる場合は、設計の段階から十分に検討する必要があります。

最後に、Docker初心者が1から学ぶにあたって最適な本をまとめました。Docker関連の本は数多く出版されていますが、その中でも*今回挙げる3つの本はDockerの仕組みについて分かりやすく書かれており、初心者におすすめです。*

### 開発系エンジニアのためのDocker絵とき入門

本書は、*Dockerの基本的な知識からインストール方法や使い方・活用例、トラブルシュートの方法まで、フルカラーの図解でわかりやすく解説されている入門書です。*Docker 初心者が躓きやすい箇所が視覚的に理解できるように解説されており、Dockerを利用するために必要な知識がきちんと身に付きます。

▪著者：鈴木　亮
▪ページ数：352ページ
▪出版社：秀和システム
▪発売日：2024/01/20
【参考】：[開発系エンジニアのためのDocker絵とき入門｜秀和システム](https://www.shuwasystem.co.jp/book/9784798071503.html)

### Docker/Kubernetes実践コンテナ開発入門 改訂新版

Docker初心者から中級者までおすすめの本です。*DockerやKubernetesといったコンテナ技術の基礎知識から実際のアプリケーションの作り方まで徹底解説した入門書となっています。*Dockerの基礎から実践まで一通り学びたい、コンテナの基礎知識はあるが実際に動かして体験したい、という方に適しているでしょう。

▪著者：山田明憲
▪ページ数：600ページ
▪出版社：技術評論社
▪発売日：2024/02/24
【参考】：[Docker/Kubernetes実践コンテナ開発入門 改訂新版｜技術評論社](https://gihyo.jp/book/2024/978-4-297-14017-5)

*企業におけるDockerを用いたコンテナ環境の構築・運用・活用のノウハウを網羅した書籍です。*現場の技術者はもちろん、意思決定を行う立場の人がDockerの導入検討ができる内容になっています。経験がなくてもコンテナ基盤の構築と運用が行えるようになる、実践的な内容です。

ITエンジニアをしていても、Dockerについて詳しく知らない方は多いかもしれません。本記事では、Dockerとは何か初心者にもわかりやすく解説します。Dockerの仕組みやメリット・デメリット、おすすめの本などについてまとめましたので、この機会にぜひ学んでください。

Dockerはコンテナ技術を使って仮想環境を作るためのソフトウェア

Dockerは、Dockerエンジン・Dockerイメージ・コンテナの3つの要素から成り立っている

Dockerで開発チームの開発環境を簡単に統一でき、他の構築方法より負荷も軽い

Dockerとは？仕組みやメリット・デメリットをわかりやすく解説

**SPA開発とは、SPA（シングルページ・アプリケーション）構成をとるアプリケーションの開発を指します。**ここでは、SPA開発の概要やメリットとデメリット、主要なSPA開発のフレームワークやライブラリについて解説していきます。

*SPAとは、シングルページ・アプリケーション（Single Page Application）の略で、ユーザエクスペリエンス（UX、User eXperience）の向上を図ったウェブの画面レイアウトを指します。*

ブラウザ画面をデスクトップのように使用し、単一のウェブ画面でありながらあたかも通常のアプリケーションを操作するような操作感を提供します。

*SPA開発は、1つのウェブページ上にアプリケーションを表示させるSPAを使用したアプリ開発です。*完成したアプリケーションは、画面遷移がウェブページで完結し、デスクトップアプリケーションを実行しているような操作感をユーザに与えることができます。

SPAを用いたソフトウェア開発は手間がかかるため、効率的な開発と利用を促進するために多くのフレームワークがリリースされています。フレームワークを使用することで、デメリットを抑制してメリットをよりシステムに活かせます。

SPAのメリットは、ウェブページを移動せずに、表示やコンテンツを切り替えるため、操作感が高まることが挙げられます。ページ全体が別のページをロードしないため、統一された表示が可能で、シームレスな描画とともに使いやすさも高められます。

*SPA開発では、SPAの特徴を活かしたデザインが可能となり、最初のロード時にファイルを読み込むことから、その後の処理はサーバへの負荷が少ないメリットもあります。*キビキビとした画面表示は使用者に好印象を与えることができます。

また、ブラウザ上でアプリケーションを動作させるためシステムの互換性が高まり、マルチプラットフォームで動作させることが簡単にできます。

SPAのデメリットとしては、最初にアプリケーションコードをロードするために時間を要することが挙げられます。最初の起動が遅くなるため、あらかじめ表示するHTMLを生成しておいたり、動的に必要なものだけを読み込んだりする工夫がされているものもあります。

*SPA開発においては、ブラウザ自体のロードが高いため、アプリに適するブラウザについての評価を行う必要があります。*クライアントサイドやサーバサイドのフレームワークが必要なため、システム移行性の低下や構築難易度が高いこともデメリットに挙げられます。

また、コンテンツの表示がクライアント側で行われることから、検索エンジンの最適化（SEO）の評価に反映されない場合もあります。

SPA開発では、HTMLとCSSに加えて、JavaScriptベースのフレームワークまたはライブラリを用いて、アプリケーションの開発を行います。そのため、*ベースとなるプログラミング言語の知識としてHTMLとCSS、JavaScriptが必要です。*それぞれの内容を入門書などで学んでおくと良いでしょう。

HTML・CSSとは何か？使い方やできること、独学方法を解説！

JavaScriptライブラリで何ができる？特徴やメリット・おすすめを解説！

### ウェブページがSPAかどうかを見分けるには

従来のMPA（マルチページ・アプリケーション）では、ウェブページをクリックするとリクエストがサーバに送られ、表示されるページがロードされます。

そのため、クリックごとに通信が発生し、画面がリフレッシュされます。簡単な見分け方は、クリックしたときの画面表示が滑らかかどうかを見ると、ある程度は区別がつきます。

ただし、ページを遷移せずに行うAjaxなどの非同期通信や、非同期通信をサポートするブラウザプラグインモジュールも多数リリースされているため、一概に違いを判断できるものではありません。

*SPA開発を行う上では、どのフレームワークを使うと開発生産性が高いのかなど、総合的に判断すると良いでしょう。*

Ajaxとは？HTTP通信の基本からAjaxの利用法まで解説！

## SPA開発で使用するフレームワーク

*SPA開発で使用するフレームワークとしては、JavaScriptのフレームワークが数多くリリースされています。*ここでは、主要なフレームワークであるAngular、React、Vue.js、Svelteを紹介し、どのようにSPA開発に利用できるのか解説していきます。

Angularは、Google CloudやGoogle FontsなどGoogleが提供するウェブアプリで用いられています。Googleと個人やコミュニティによって開発されました。

JavaScriptを大規模プロジェクトで利用できるように改良したTypeScriptをベースとした、フルスタックのフレームワークで、AngularJSの後継バージョンとなります。

Angularを採用するWebサイトの例には、Microsoft、Google、IBMなどがあります。

Angularは、コンポーネントをベースとしたアーキテクチャによって大規模アプリの開発に適しています。フルスタックのフレームワークであり、必要な機能が揃っているため、ウェブユーザインターフェースの構築以外にも対応できます。

*AngularはSPA開発をするためにコンポーネントを組み合わせ、複雑なウェブアプリケーションに対応可能です。*必要な機能が揃っている反面、コードサイズに関しては多少大きくなります。また、SPA開発やTypeScriptの知識が必要ですので多少知識のハードルが上がります。

【参考】：[Angular](https://angular.jp/)

Angular 14が正式リリース！その新機能とリリースポリシーを解説！

Reactは、ユーザインターフェース構築のためのフロントエンド用JavaScriptライブラリです。Reactは、Meta（旧Facebook）とコミュニティによって開発されたライブラリで、ユーザインターフェース用コンポーネントを用いてアプリケーションを開発します。

Reactを採用するWebサイトの事例には、Meta、PayPal、Netflixなどがあります。

Reactでは、クライアントサイドで仮想DOMを利用しており、DOMの状態をメモリ上にキャッシュし効率化を図っています。従来サーバサイドで行っていた処理をJavaScriptで行うために、JSXと呼ばれるJavaScriptの拡張言語を使用します。

*Reactはコンポーネントベースのため、コンポーネント単位で開発を行い、それらを組み合わせて複雑なインターフェースを構築していきます。*そのため、大規模なプログラム開発が簡単にできます。

ライブラリのみなのでコードサイズが小さい特長がありますが、SPA開発などで双方向の通信などが必要な場合などは、Node.jsを併用してサーバサイドで処理を行うことも可能です。

【参考】：[React](https://ja.react.dev/)

Reactとは？入門編！意味や将来性を初心者にもわかりやすく説明

Vue.jsは、ユーザインターフェース構築のためのJavaScriptフレームワークです。Googleの開発者がAngularの良い部分を取り入れ、軽量なフレームワークを目指して開発しました。

ユーザインターフェース構築用ですが、プログレッシブフレームワークと名付けられており、段階的な採用や移行が可能です。そのため、ビュー層のライブラリから段階的に導入することができます。

Vue.jsを採用するWebサイトとしては、Trivago、Nintendo、Appleなどがあります。

*Vue.jsでは、ページ全体を制御するとともに、データの更新を再読み込みせずに行うSPAでの開発や構築が可能です。*

再利用可能なコンポーネントを用いて、大規模アプリケーションの開発が可能であり、リアクティブという、単純で直観的に管理できるJavaScriptオブジェクトのシステムを採用し、レンダリングを管理しています。

【参考】：[Vue.js](https://ja.vuejs.org/)

Vue.jsとは？すぐに分かる概要から特長・使い方まで解説！

SvelteはJavaScriptベースのフレームワークと異なり、HTMLテンプレートをコンパイルして使用するプログラミング言語です。フロントエンドフレームワークとして動作し、プログラミングはテンプレート構文を用いて拡張したHTMLで、.svelteファイルを作成して使用します。

HTMLテンプレートをコンパイルすると、JavaScriptモジュール（.js）とスタイルシートファイル（.css）が生成されます。この機能は、アプリ全体をSvelteで実装することも可能ですが、部分的に作成して段階的な移行も可能です。もちろんコンポーネントを配布して利用することもできます。

Svelteを採用するWebサイトの事例には、LINEヤフー、IKEA、Spotifyなどがあります。

*SPA開発で用いる処理はリアクティブで、コンポーネントの状態を変更して再レンダリングを行うには、ローカルで宣言された変数に代入するだけで、再描画が行われます。*Svelteは、JavaScriptベースのフレームワークと異なりますが、必要なスキルはHTMLとCSS、JavaScriptと違いはありません。

【参考】：[Svelte](https://svelte.jp/)

フロントエンドとは？バックエンドとの違いや使う言語について解説

## SPA開発はフレームワークを利用することで生産性が向上します

SPA開発は、HTMLとCSS、JavaScriptのスキルが求められます。使用するフレームワークによって実装方法が異なることから、フレームワーク自体のスキルも必要です。1度フレームワークの使い方に慣れれば、コンポーネントの再利用が可能です。

**SPA開発では、すでに実装済みのWebサイトや公式サイトの情報を参考に、必要なフレームワークを選定し効率的に活用すると良いでしょう。**

SPA開発とは、シングルページ・アプリケーション構成をとるアプリケーションの開発を指します。SPA開発では、ユーザエクスペリエンスの向上が期待できます。ここでは、SPA開発の概要やメリットとデメリット、使用するフレームワークやライブラリについて解説します。

SPA開発とは、シングルページ・アプリケーション構成をとるアプリケーションの開発を指します

ブラウザ画面をデスクトップのように使用し、ユーザエクスペリエンスを向上します

JavaScriptのフレームワークなどを用いて、SPA開発の生産性を高めることができます

SPA開発とは？概要やメリット・デメリット、フレームワークを解説

**Bootstrapとは、フロントエンドで用いるウェブアプリケーションのフレームワークを表します。**HTMLとCSSをベースとしたテンプレートとして構成されており、利用者が多いフレームワークです。

ここでは、Bootstrapの概要やできること、フレームワーク別のパッケージの種類を解説していきます。

古い情報にはTwitter Bootstrapとの記載がありますが、Twitter Bootstrapとは昔の名称を指します。当初、Twitter BlueprintあるいはTwitter Bootstrapと呼ばれていましたが、オープンソース化に伴ってBootstrapに改められています。

【参考】：[Bootstrap](https://getbootstrap.jp/)

Bootstrapは、ウェブアプリケーションのフレームワークです。*初心者の方向けにわかりやすく言うと、Bootstrapは、ウェブデザインを簡単に行うための部品集とツールがセットで提供されたもの、と覚えると良いでしょう。*

Bootstrapは、HTMLとCSSのデザインテンプレートとして利用され、オプションでJavaScriptにも対応します。日本語表示にこだわりを持つテーマも公開されるなど、必要なデザインを選択して使用することができます。また、以前は必要であったjQueryは、Bootstrap 5からは不要となっています。

JavaScriptはフロントエンド開発に必須？その理由やフレームワークを解説

Bootstrapは、色、サイズ、フォント、レイアウトをウェブプロジェクトに用い、HTMLの要素にスタイルの定義を反映し、全体の外観を簡単に統一することを目的としています。HTML要素の他、ボタンの拡張やラベルなども統一します。

さらにCSSのクラスによって詳細にカスタマイズすることもできます。*Bootstrapを使うことによって、統一感があるウェブデザインが簡単に実装できます。*

Bootstrapの特徴は、レスポンシブデザインに対応していることが挙げられます。レスポンシブデザインでは、PCやスマホ、タブレットなどの機器の仕様に応じてウェブページのレイアウトが自動的に調整される特徴があります。

また、実装に必要なCSSとJavaScriptの各ファイルはビルドせずにCDNから取り込むことができます。

【参考】：[Bootstrap はじめに](https://getbootstrap.jp/docs/5.3/getting-started/introduction/)

*Bootstrapを使用するには、インストールする方法とCDNから指定する方法があります。*インストールする場合は、コンパイル済みのBootstrapのコードをダウンロードし、使用中のnpmやRubyGemsなどのパッケージマネージャでインストールします。

CDNを使って利用する場合は、ダウンロード・インストールせずにコードをロードすることができます。

【参考】：[Bootstrap はじめに](https://getbootstrap.jp/docs/5.3/getting-started/introduction/)
【参考】：[Bootstrap ダウンロード](https://getbootstrap.jp/docs/5.3/getting-started/download/)

RubyGemsとは？gemのインストールや使い方も解説！

*Bootstrapは、Windows、macOS、Android、iOSでサポートされます。*ブラウザはChrome、Firefox、Edge、Safari、Operaや、各プラットフォームの標準ブラウザがサポートされます。Android・iOSのモバイルデバイスでは使用上の制限がいくつかありますので、動作確認が必要です。

【参考】：[Bootstrap ブラウザとOS](https://getbootstrap.jp/docs/5.3/getting-started/browsers-devices/)

*Bootstrapのテーマとは、Bootstrapを用いて作成したデザインを公開している公式マーケットプレイスのデザイン集を指します。*拡張フレームワークやコンポーネント、プラグインなどが出展されています。

サイトでは無償版と有償版が掲載されています。有償版は、必ずしも実際に購入をおすすめするものではありませんが、Live Preview機能によってウェブの操作感を確認できます。Bootstrapの仕上がりを確認できるため、サンプルサイトとして役立てられます。

【参考】：[Bootstrap Themes](https://themes.getbootstrap.com/)

## フレームワークで動作するBootstrapパッケージの種類

Bootstrapでは、JavaScriptプラグインがオプションとして提供されています。JavaScriptプラグインは、ブラウザのモジュールとして使用できるため便利です。

その反面、他のフレームワークでの使用時の考慮点もあります。DOMベースで実装されているReactやVue.js、Angularはリソース競合を生じる場合があります。

これを回避するためには、フレームワークが提供するBootstrapパッケージを使用することで、共存させることができます。言い方を換えると、*人気のフレームワークで、デザイン性の高いBootstrapを使用できます。*

ここでは、対応するフレームワーク版Bootstrapを解説していきます。

【参考】：[Bootstrap JavaScript](https://getbootstrap.jp/docs/5.3/getting-started/javascript/)

Reactは、フロントエンド用JavaScriptライブラリです。ユーザインターフェース構築のために、提供コンポーネントを利用して開発を行います。

React Bootstrapは、React用に再構築したユーザインターフェースのコンポーネントです。BootstrapのJavaScriptを置き換えて使用します。

*React Bootstrapは、Bootstrapスタイルシートに完全に適合し、掲載されているBootstrapのテーマで動作します。*それぞれのコンポーネントは、デフォルトで動作するコンポーネントモデルであり、それぞれのフォームと機能をより柔軟にコントロールすることができます。

【参考】：[React](https://ja.react.dev/)
【参考】：[React Bootstrap](https://react-bootstrap.github.io/)

Vue.jsは、ユーザインターフェース構築のためのJavaScriptフレームワークです。段階的な採用や移行に対応し、プログレッシブフレームワークと名付けられています。

*BootstrapVueは、Vue.jsにBootstrapのCSSライブラリを取り込むために提供されます。*Bootstrapの特徴であるレスポンシブでモバイルファーストな環境がVue.jsに実装されます。多くのコンポーネントやプラグイン、ディレクティブがVue.js向けに提供されます。

【参考】：[Vue.js](https://ja.vuejs.org/)
【参考】：[BootstrapVue](https://bootstrap-vue.org/)

Angularは、フルスタックのフレームワークで、ウェブアプリで用いられます。JavaScriptを大規模プロジェクトで利用できるように改良したTypeScriptをベースとしています。

*ng-bootstrapは、Angular用Bootstrapのラッパーです。*Angularのコンポーネントやディレクティブ構文からBootstrapの機能を呼び出すことができます。

これによってリッチなデザインが簡単に適用できるとともに、レスポンシブデザインによって画面サイズに合わせて表示を最適化させることが可能です。

【参考】：[Angular](https://angular.jp/)
【参考】：[Bootstrap widgets / The angular way](https://ng-bootstrap.github.io/#/home)

WordPressは、コンテンツマネジメントシステム（CMS）として簡単にウェブサイトやブログなどを作成することができます。通常HTMLやCSSを知らないと思ったようにプログラミングできませんが、WordPressは専門知識なしにウェブサイトを維持できます。

このようなWordPressですが、フロントサイド・プログラミングで用いるフレームワークではないものの、Bootstrapが活用されています。

*BootstrapWPは、WordPressのカスタムテーマを開発するためのベーステーマです。*導入することで、WordPressでBootstrapを取り込み、グリッド、タイプ、フォーム、ナビゲーションなどのコンポーネントを活用できます。

【参考】：[WordPress](https://wordpress.com/ja/)
【参考】：[BootstrapWP](https://bootstrapwp.com/)

## Bootstrapは見栄えの良いウェブデザインが簡単にできます

Bootstrapは、統一感があるウェブデザインに用いられ、色合い調整のほか、HTML要素、ボタンの拡張やラベルなども調整し、全体を統一できます。**Bootstrapはレスポンシブデザインであり、画面サイズに最適化されたウェブアプリケーションが簡単に作成できる、おすすめのフレームワークです。**

Bootstrapとは、ウェブアプリケーションのフレームワークを表します。デザインテンプレートとして、フロントエンドのウェブデザインを簡単に行うことができます。ここでは、概要やできること、フレームワーク別のパッケージの種類を解説していきます。

Bootstrapとは、フロントエンド用ウェブアプリケーションのフレームワークを表します

Bootstrapを使うことによって、統一感があるウェブデザインが簡単に実装できます

JavaScriptプラグインの整合性を高めるために、フレームワーク別のパッケージを使用します

Bootstrapとは？概要やできること・パッケージの種類を解説

**ストアドプロシージャとは、リレーショナルデータベース管理システム（RDBMS）のアクセス手順を、事前にまとめて格納するための機能を指します。**手順を格納することから、英語では「Stored Procedure」と名付けられています。

ここでは、ストアドプロシージャの概要やメリット、デメリット、書き方などを学んでいきます。

### ストアドプロシージャの概要

ストアドプロシージャは、RDBMSのアクセスの手続きを事前登録したものです。複数のSQL命令をまとめてグルーピングした手続きを格納しておき、効率的に呼び出すことができます。*プログラミング言語における関数・サブルーチンを定義する手順と同じようにデータベースアクセスを行うことができます。*

初心者でもわかるSQL基礎：基本構文や学習方法、書き方を解説

### ストアドプロシージャのメリット

ストアドプロシージャは、あらかじめ格納しておくことでSQL文が実行可能な形式で保存されます。*ストアドプロシージャを使わない場合と比較して、実行速度が速い特徴があります。*また、実行時に都度解釈させる場合と比較して、オーバーヘッドが低減し、通信やサーバ負荷が削減されます。

加えて、プログラミング言語の関数同様に特定の手順をまとめて定義できるため、保全性の向上と特定処理に限定したセキュリティ面での維持も期待できます。

### ストアドプロシージャのデメリット

ストアドプロシージャは、複数のSQLステートメントを1つの呼び出しで実行することができます。

コードの保全性が高まる半面、そのストアドプロシージャの実装部分については、業務要件の知識やSQLの知識が求められるため、むしろ保全の難易度が高まる場合があります。

このことで、安易な修正は不具合を誘発してしまい、不具合の修正のつもりが問題あるコードを増やすリスクがあります。

言語・開発の記事（14ページ目）