技術スタックの意味を理解するために、Web アプリケーションを作成する目的について説明しましょう。
構築するアプリケーションは高速で、ユーザーにインタラクティブな閲覧体験を提供する必要があります。ユーザーがより多くの情報を求める場合、アプリケーションは情報を迅速に取得し、見やすい形で整理できる必要があります。
さらに、アプリケーションの人気が高まるにつれて、アプリケーションエコシステムにパフォーマンスのオーバーヘッドを追加することなく、適切に増やすことができる必要があります。
これを実現するには、次の要件を満たす適切なテクノロジーとインフラストラクチャが必要です。
- コスト効率に優れています。
- シームレスなフロントエンドエクスペリエンスをユーザーに提供します。
- アプリケーション開発者に、迅速でスムーズな開発体験を提供します。
- 必要に応じてスケールアップおよびスケールアウトします。
エンドツーエンドの Web アプリ、モバイルアプリケーション、IoT、または同様のアプリケーションを構築するために選択して使用する一連の技術が、技術スタックを構成します。MEAN スタックは、注目を集めている技術スタックの例です。
目次
- 技術スタックとは何ですか？
- 現代の技術スタックとは？
- 技術スタックの例とは？
- 技術スタックコンポーネントの概要
- 適切な技術スタックのメリット
- テクノロジースタックの選択/ビルド方法
- 次のステップ
- よくある質問
技術スタックとは何ですか？
スタックとは、物事を順番に重ねて整理した状態のことです。技術スタックとは、あらゆるアプリケーションを構築するためにスタック（積み重ね）される一連の技術のことです。技術インフラストラクチャまたはソリューションスタックとして一般的に知られる技術スタックは、メンテナンスが容易でスケーラブルな Web アプリケーションを構築するために不可欠なものとなっています。
技術スタックによって、構築できるアプリケーションの種類、実行できるカスタマイズのレベル、およびアプリケーションの開発に必要なリソースが決まります。
例えば、 Web 技術スタックは通常、次のようになります。
ほとんどの技術スタックは、JavaScript（ユーザーインターフェイス）、Python（プログラミング言語）、MongoDB（データベース）、Apache（サーバー）などのフロントエンドおよびバックエンド技術を組み合わせたものです。
現代の技術スタックとは？
現代の技術スタックには、ユーザーがアプリケーションにアクセスするデバイス数の増加や、イベントやデータ処理の膨大な量により、さらに多くのコンポーネントが含まれています。
これらには、コンテナ化、パフォーマンスの監視、ビジネスインテリジェンス、イベント処理、データレイク、クラウドサービス、マイクロサービス、アナリティクスなどのツールが含まれる場合があります。使用する技術スタックは、プロジェクトのニーズやその他の要素に基づいて選択する必要があります。これについては、この記事の後半で説明します。
技術スタックの例とは？
技術スタックの最も一般的で最も簡単な例の1つは、MEAN スタックです。MEAN は、 MongoDB-Express-Angular-Node.js の頭字語です。Angularを React に置き換えたもの（MERN スタック）を使うこともできます。React も特にシングルページウェブアプリケーションで人気が高まっているからです。
上の図では、Node.js は Web アプリケーションのランタイム、Angular はユーザーインターフェイスを提供し、Express は Node.js 上に構築された Web フレームワークであり、MongoDB は、データをより有用な形式に変換する能力を備えたデータプラットフォームまたはデータスタックです。
MEAN スタックとMERN スタックは、Web 開発で注目を集めている技術スタックです。多くのフルスタック開発者は、スタック全体で共通して使用される技術である JavaScript により、これらの技術スタックは学習と実装が容易だと感じています。詳細なチュートリアルで、MEAN スタックについて詳しく学ぶことができます。
もう 1 つの一般的な技術スタックの例として LAMP があります。これは、Linux、Apache、MySQL、PHP の頭文字を取ったものです。
一般に、技術スタックにはフロントエンド技術スタック、バックエンド技術スタック、またはその両方の組み合わせ、つまりフルスタックがあります。
フロントエンド技術スタック
ほとんどの Web アプリケーションにおいて、フロントエンド技術スタックの選択肢は同じです。最新の Web アプリケーションは、HTML、CSS、JavaScript、Typescript、または React、Vue、Express といった JS ベースのフレームワークに基づいています。
HTML
HTML (Hypertext Markup Language) は、ページの基本的なレイアウトと構造を定義します。たとえば、セクション、箇条書き、テーブルは HTML タグを使用して作成されます。
CSS
Web ページに適用されるすべてのスタイル設定は CSS に由来します。例として、MongoDB ページの緑色のテーマがあります。
JavaScript
ページの動的要素は、開発者が記述した JavaScript コードから取得されます。たとえば、画像にマウスを合わせたときや、提出、いいね、コメントのボタンをクリックしたときに何が起こるかは、コード内の JavaScript イベントによって決定されます。
Bootstrap、Vue、React、Angular、jQuery など、JavaScript を基盤として構築されたフレームワークやライブラリは他にも数多くあり、追加機能や一般的なユースケースを提供することで、開発者の作業を大幅に簡素化しています。
バックエンド技術スタック
バックエンド技術スタック（またはサーバー側技術スタック）は、データベース、サーバー、フレームワーク、オペレーティングシステムなど、多くのコンポーネントで構成されています。サーバー側のフレームワークとツールは慎重に選択する必要があります。一部のテクノロジーは軽量で高速、基本的な目的に適していますが、複雑なアプリケーションにのみ必要な機能を多数搭載しているテクノロジーもあります。
フルスタック技術スタック
これは、デスクトップ Web アプリケーションで使用される最も一般的なタイプのスタックです。これは、フロントエンドとバックエンドの両方の技術で構成されています。例えば、UI 用の Angular、アプリケーションロジック用の Django のようなフレームワーク、データ管理用の MongoDB のようなデータベースです。
技術スタックコンポーネントの概要
次に、技術スタックの主要な構成要素を見ていきましょう。
ユーザー インターフェース
プロジェクトのスタイル設定のニーズに応じて、HTML や CSS スタイルシートのようなマークアップ、または Bootstrap や Tailwind のようなフレームワークを使用できます。
プログラミング言語
プログラミング言語は、アプリケーションに必要な重要なビジネスロジックを処理します。主なプログラミング言語には、 JavaScript、 Typescript、 Java、 Python、 Ruby、 Scala、 PHP、 C# などがあります。
フレームワーク
フレームワークはアプリケーションに構造を提供し、共通のユーティリティを持つため、すべてのロジックを一から書き直す必要がなくなります。一般的な Web フレームワークには、Express、Spring、Django、Laravel、Rails、.NET などがあります。
ランタイム環境
ランタイム環境とは、アプリケーションが実行されるソフトウェアのことです。ランタイムは、クロスプラットフォーム互換性を提供します。Java Runtime Environment（JRE）、Node.js、Common Language Runtime（CLR）は、技術スタックにおけるランタイム環境の例です。
サーバー
Web サーバーはクライアント（ブラウザなど）からのリクエスト（http）を受け入れ、リクエストされた情報をデータベースに渡し、応答を取り扱います。Apache HTTP と Nginx は一般的に使用される堅牢な Web サーバーです。
データベース
データベースは、技術スタックの不可欠な部分です。アプリケーションが単純であっても、多くのワークフローがあっても、すべての情報を保存する場所が必要です。MongoDB や MySQL などが一般的なデータベースとして挙げられます。MongoDB のような最新のデータプラットフォームは、インテリジェントなクエリ、アグリゲーション、変換機能に加え、データのストレージや検索機能を提供することで、データベースの機能をさらに強化しています。
API、アナリティクスツール、BIツール、クラウドサービス、マイクロサービスなど、アプリケーションの機能を強化できるコンポーネントは他にも多数あります。
適切な技術スタックのメリット
では、そもそもなぜ技術スタックが必要なのでしょうか？
第一に、より多くの人に利用してもらえるアプリケーションを構築できる可能性が高まります。適切にスケーリングできるフレームワークとデータベースを選択すれば、計画段階で、ユーザーベースの拡大に伴う水平方向および垂直方向のスケーリングの問題を回避できます。
また、適切な技術スタックを選択すれば、フルスタック開発者や個々の技術の専門家を採用できるため、開発プロセスを迅速化できます。現在のチームの専門知識を活用するために、特定の技術スタックを選択することもできます。
さらに、開発者はアプリケーションの動作について、より簡単に情報共有できるようになります。
技術スタックを事前に計画することで、リソース、インフラストラクチャ、オートメーション、ハードウェア、その他のプロジェクト要件を事前に把握し、コストと時間の両方を節約できます。
最後に、これから構築するプロジェクトや Web アプリの目的と規模が分かっているため、スタックの複雑さを決め、プロジェクトに実際には必要のない技術や操作の使用を控え、肥大化したリソースを避けることができます。
テクノロジースタックの選択/ビルド方法
アプリケーションに適した技術スタックを選択するにはどうすればよいですか？
唯一の正しい技術スタックというものは存在しません。さまざまな技術スタックにそれぞれ独自の利点があります。
適切な技術スタックの構築は、アプリケーションごとに異なります。技術スタックを選択または構築する際に考慮すべきいくつかの要因を以下に示します。
アプリケーションの目的
「Web アプリケーションで何を実現したいか？」と自問してみてください。多数の他のシステムと交流する必要がありますか？または、データベースとの頻繁なやり取りが必要ですか？大量の静的で整理されたコンテンツなどを表示するページですか？
これらの質問に答えることで、どのような技術スタックであるべきかを判断するのに役立ちます。
アプリケーションが単一ページのアプリケーションである場合は、React などの簡単で軽量なテクノロジーを選択できますが、さまざまな Web ページにわたって多くの機能がある場合は、さまざまなワークフローやシステム間の統合のために、より高度なツールやフレームワークが必要になります。
また、モバイル開発をサポートするテクノロジーは広く採用されているため、そうしたテクノロジーを選択することをお勧めします。
設計とユーザーエクスペリエンス
優れたユーザーエクスペリエンスは、より多くのトラフィックを引き付けるための鍵です。ユーザーインターフェースの目的を最も効果的に果たし、設計チームの期待に応えるツールを選択します。Web サイトがコンテンツ主導型の場合は、サーバーサイドレンダリングをサポートするテクノロジーを選択します。
実稼働までの時間
目標は、できるだけ早くアプリケーションを稼働させることです。一般的なユースケースや機能向けのユーティリティやソリューションを提供するテクノロジーを選択してください。さらに、テクノロジーが優れたコミュニティサポートを備えていると、特にプロジェクトに取り組むリソースが少ない場合に、新しい機能をより迅速に導入するのに役立ちます。最後に、開発者が簡単に学習およびテストできるテクノロジーを選択するようにします。
コスト
技術スタックでクラウド技術（MongoDB AtlasやAWSなど）を使用すると、展開とメンテナンスのコストを削減できます。また、統合が容易な技術を選択しましょう。より専門的または高度な技術を選択すると、開発者の給与とソフトウェアのメンテナンスのニーズに多額の費用を費やす必要が出てきます。
習得が容易なテクノロジー、またはチームがすでに知っているテクノロジーを選択することで、開発時間を短縮し、プロジェクト全体のコストを削減できます。
スケーラビリティ
実際には、スケーラビリティの実現は困難です。ほとんどの場合、拡張や最適化が難しいのは、データベースシステムやクエリです。MongoDB のような最新の NoSQL データベースには多くの拡張オプションが用意されており、データ集約型のアプリケーションには特に適しています。
同様に、優れたフレームワーク設計（Model-View-Controller など）は、コードを適切な方法で記述するのに役立ち、将来の拡張を容易にします。
セキュリティ
100％のセキュリティを保証できるテクノロジーはありませんが、データとトランザクションのセキュリティを最大限に確保し、脆弱性を最小限に抑えるために、一連のベストプラクティスに従うテクノロジーを常に選択してください。
アプリケーションのフロントエンドおよびバックエンドを構築するために使われる技術には以下のようなものがあります。
たとえば、多数のユーザー操作やデータベース操作があり、グローバルに展開するアプリケーション向けに、以下のようなカスタム技術スタックの基盤を構築できます。
互換性があり、プロジェクトと予算の要件を満たしている限り、テクノロジーは任意に組み合わせて使用できることに注意してください。
次のステップ
技術スタックが不可欠な理由と、開発環境に適した技術スタックを見つける方法を理解したら、次は実際にそれを使ってみましょう。MEAN スタックまたは MERN スタックから始めることができます。
これらは学びやすく、ビルドも簡単でありながら、最小限のコーディング作業で本番環境対応にできる、スケーラブルで堅牢な Web アプリを作成するのに十分な強力さを備えています。