Zenn
📚

【収益化と技術選定】月間１億アクセスのWebアプリケーションの技術選定してみた

2023/07/24に公開
技術選定
インフラ
frontend
バックエンド
webアプリケーション
tech

目的

  • Webアプリケーションを作りたい。
  • どうせなら収益化も考えたい。
  • マーケティングリサーチしたら競合アプリは月間1億アクセスあった。

これらを踏まえて、月間1億アクセスに耐えうるWebアプリの技術選定をしてみようとなった。
（ちなみに私はWebアプリ開発は初心者であるので、正確性は保証できない。）

現在記事執筆途中。（徐々に追記予定）

目次

競合・市場・収益性リサーチ

収益化を考えるなら、競合がどれだけ儲かっているかは解析しておくとよい。
今の時代はありがたいことに、10年前では考えられないマーケティング解析ツールがたくさんあってとても便利。

マーケティングリサーチ

Semrushを利用すると、いろいろわかる。
以下、解析例。

  • グローバルランクと国別ランク: グローバルランクでは924位、日本では82位にランクインしています。

  • 訪問数とエンゲージメント: このサイトの訪問数は約1億1180万で、前月比で-1.1%の減少が見られます。平均訪問時間は11分12秒、ページ/訪問は2.0、バウンス率は54.56%です。

  • 国別トラフィック: "xxxxxxx.net"の主な視聴者は日本に位置しており、全体の92.73%が日本からのアクセスです。次いで、アメリカからのアクセスが5.11%、韓国が0.61%、フィリピンが0.58%、インドが0.43%です。

  • デバイス別トラフィック: 訪問者の99.2%がモバイルデバイスからアクセスし、0.8%がデスクトップからアクセスしています。

  • ウェブサイトのトラフィックジャーニー: "xxxxxxx.net"への訪問者の73.38%は直接訪問、9.50%はgoogle.com経由です。また、"xxxxxxx.net"訪問後、多くのユーザーが"xxxxxxx.com"や"xxxxxxx.com"に移動します。

  • 競合他社と代替案: "xxxxxxx.net"の視聴者は、他にも"xxxxxxx.net"を訪問します。

  • 有機的なウェブサイトトラフィック: "xxxxxxx.net"の有機的な検索トラフィックは月次で125.2%増加しています。

  • 主要な有機的なキーワード: "〇〇 ×× △△"、"〇〇 □□"、"〇〇"、"〇〇 △△"などが主な検索キーワードです。

収益化のための分析（軽めに）

  • 月間訪問数が1億人:
    申し分ない。収益-経費がどれほどになるかで収益性が変わる。
    経費はサーバー、CDN、API、の利用料。これがどれだけかさむのか未知数。
    収益は広告。これも未知数。単価やクリック率などで変わるか。（自社プロダクトがあればここから流入させて成約とってもいいが。）

  • 平均訪問時間は11分12秒、訪問者の73.38%は直接訪問:
    ユーザーが目的をもって利用していることがうかがえる。

総じてニーズがある。

  • 主要な有機的なキーワード:
    検索キーワードからニーズが計れる。他SNSマーケなどする上でも、顧客にリーチする方法が想像できる。

  • UIUX:
    サイトを利用している感じ、もっと改良の余地があると考えられる。（だからこそ作ってみようかなとなったわけだが）

開発技術リサーチ

BuiltWith、SimilarTech、whois.comなどから、競合サイトがどのような技術を使っているかを確認できる。
技術選定にはそれなりに理由があるはずなので、自分が開発する上でどんなことを考えて技術選定をすればいいかの参考にする。

以下、解析例。

  • 広告: xxxxxxx.netでは、日本のサプライサイドプラットフォームであるAdStirが使用されています​。
  • マーケティング: Googleの統合広告および分析ソリューションであるGoogle Marketing Platformが使用されています​​。
  • 分析: Google AnalyticsとNinja Access Analysisが使用されています。これらはウェブサイトのトラフィックとトラフィックのソースについて詳細な統計情報を提供し、コンバージョンと販売を測定します​​。
  • コンテンツ配信ネットワーク (CDN): サイトの高速化と保護を可能にするグローバルCDNおよびDNSプロバイダーであるCloudFlareが使用されています​​。
  • JavaScript: xxxxxxx.netでは、Bootstrap, Masonry, jQuery, そしてInfinite ScrollといったJavaScriptライブラリが使用されています​。
  • タグ管理: Google Tag Managerが使用されており、マーケターが分析、リマーケティング等のウェブサイトタグを追加し、更新するのを容易にします​​。
  • サーバーフレームワーク: Web開発に特に適した汎用的なスクリプト言語であるPHPが使用されています​​。
  • ドキュメント標準: サイトはHTTPSプロトコルを使用しています​​。

これらの技術は、ウェブサイトの機能性、パフォーマンス、ユーザーエクスペリエンスを向上させるために使用されます。

サーバーや細かい部分までは分からないが、それ以外のCDNやフロントエンド、バックエンド、解析ツール、広告ツールまで分かる。
神。

これらの情報から月間1億の訪問（トラフィックはもっと）に耐えつつ、セキュリティを担保しつつ、技術選定をする必要がある。

技術選定

インフラ、バックエンド、フロントエンド、収益化、マーケティングに関して、どんなものを利用するかを考えてみる。

インフラ

クラウドとCDN

月間１億人の訪問者がいるWebサイト開発を想定しています。
その場合、CDNを利用するのがよいと思いますか？またその場合、デプロイメントサーバーは何がいいと思いますか？参考にしている似たようなサイトはCloudFlareを使っているようでしたが、どのようにすればよいかアドバイスください。

月間1億人の訪問者があるという場合、効率的なコンテンツ配信とパフォーマンスを確保するために、確かにCDN（Content Delivery Network）を利用することが非常に重要となります。

CDNの利点:

グローバルな訪問者に対してコンテンツを高速に配信できます。CDNは通常、世界中のデータセンターにコンテンツのコピーを保存します。これにより、ユーザーは最も近いデータセンターからコンテンツを取得でき、待ち時間が短縮されます。
ネットワークの信頼性と可用性を高めます。サーバーに問題が発生した場合でも、CDNは他のサーバーからコンテンツを提供できます。
サーバーの負荷を減らし、トラフィックのスパイクを吸収します。これは、大量の訪問者がある場合に特に有用です。
CloudFlareは非常に人気のあるCDNプロバイダであり、DDoS攻撃防止やWebアプリケーションファイアウォールといったセキュリティ機能も提供しています。また、いくつかのパフォーマンス最適化機能（例えば、自動画像圧縮やHTTP/2優先配信）も備えています。

デプロイメントサーバーについて:

AWS（Amazon Web Services）やGCP（Google Cloud Platform）、Azureといったクラウドプロバイダは、大規模なトラフィックを処理するためのスケーラブルなサービスを提供しています。これらのプラットフォームは、必要に応じてリソースをスケーリングすることが可能で、さらに多くの機能（データベースサービス、機械学習、IoTなど）も提供しています。

CloudFlareと他のクラウドプロバイダとの併用:

CDNとサーバーは異なる目的を果たすため、両方を一緒に使用することが一般的です。つまり、CloudFlareを使用してコンテンツを高速に配信し、AWSやGCP、Azureを使用してアプリケーションのバックエンドをホストします。

具体的な選択は、あなたの具体的な要件（バジェット、地理的な対象範囲、必要な特定のサービスや機能など）に大きく依存しますが、CDNの利用と大手クラウドプロバイダの利用は、大規模なWebサイトにとって良い一般的な戦略と言えます。

ではAWSとCloudFlareという組み合わせでも問題ないですか？

はい、それは非常に一般的で効果的な組み合わせです。

AWS (Amazon Web Services) は、サーバー、データベース、機械学習、人工知能など、様々なクラウドベースのサービスを提供しています。AWSはそのスケーラビリティと信頼性でよく知られており、大規模なWebサイトやアプリケーションのバックエンドとして非常に適しています。

一方、CloudFlareは、CDN (Content Delivery Network) サービスとしての機能を提供しています。CDNは、ユーザーが近くのサーバーからコンテンツを取得できるようにすることで、ウェブサイトのパフォーマンスを向上させます。CloudFlareはまた、DDoS攻撃からの保護やWebアプリケーションファイアウォールなど、さまざまなセキュリティ機能も提供しています。

したがって、AWSを用いてバックエンドをホストし、CloudFlareをCDNとして使用するという組み合わせは、パフォーマンスとセキュリティの観点から非常に効果的です。この組み合わせにより、大規模なトラフィックを処理し、グローバルに分散したユーザーに対して高速にコンテンツを配信することが可能になります。

その他CDNツール

競合サイトを分析したところ、CDNに関しては、CloudFlareの他に、jsDelivr、Bootstrap CDN、AJAX Libraries API、CDN JS、Cloudflare JS、UNPKG、というものが使われているようでした。それぞれどんなもので、どのように利用するものなのか教えていただけませんか？

それらのサービスは、特定の種類のコンテンツを配信するための公開CDN（Content Delivery Network）であり、主に開発者がウェブサイトやアプリケーションを構築するために使用します。以下に各サービスの概要を記載します。

  1. jsDelivr

jsDelivrは、JavaScriptライブラリやCSSフレームワーク、jQueryプラグインなど、各種のフロントエンドリソースを提供する無料の公開CDNです。GitHub、NPM、WordPress.orgなどと連携して、開発者が簡単に依存関係をロードできるようにしています。

  1. Bootstrap CDN

Bootstrap CDNは、Bootstrapフレームワーク（CSSとJavaScript）を提供するCDNです。開発者はこのCDNを使用して、Bootstrapを自分のプロジェクトに迅速に組み込むことができます。

  1. AJAX Libraries API (Google Hosted Libraries)

AJAX Libraries APIは、Googleが提供する無料のCDNサービスで、一般的なJavaScriptライブラリ（jQuery、AngularJSなど）を提供します。開発者はこのAPIを使用して、Googleのサーバーからこれらのライブラリをロードできます。

  1. CDN JS

CDN JSは、さまざまなJavaScriptライブラリとCSSライブラリを提供する公開CDNです。開発者はこのCDNを使用して、ウェブプロジェクトに必要なリソースを迅速に追加できます。

  1. Cloudflare JS

Cloudflareもまた、一部のJavaScriptライブラリを提供するCDNサービスを運営しています。ただし、一般的には全体的なCDNサービス（ウェブサイトのコンテンツ全体の配信）でより広く知られています。

  1. UNPKG

UNPKGは、NPMパッケージレジストリのすべてのファイルを提供するCDNです。開発者はこのサービスを使用して、NPMパッケージの任意のバージョンを直接ウェブ上で使用できます。

これらのサービスは通常、ウェブページの<head>セクションの中にある<script>タグや<link>タグを通じて使用されます。これにより、ブラウザは必要なリソースをCDNから直接取得できます。また、これらのCDNが提供するリソースは通常、全世界のユーザーに対して高速に配信され、ウェブページの読み込み時間を短縮します。

つまり、「フロントエンド開発を拡張するようなライブラリやパッケージをCDN方式で利用している」と解釈してよいでしょうか？

はい、その解釈は正確です。これらのCDNサービスは、特にフロントエンド開発を支援するために設計されています。JavaScriptライブラリやCSSフレームワークなどのリソースを提供することで、開発者は自分のウェブサイトまたはウェブアプリケーションに必要な機能を迅速かつ簡単に追加できます。

これらのリソースは、通常、各種ブラウザで動作するように設計されています。そのため、開発者はサーバーサイドのコードを書くことなく、これらのリソースを直接ウェブページに組み込むことができます。これにより、開発の速度と効率が向上します。

また、これらのCDNは全世界のデータセンターにリソースのコピーを保持しているため、ユーザーは最も近い位置からリソースをダウンロードすることができます。これにより、ウェブページの読み込み時間が短縮され、ユーザーエクスペリエンスが向上します。

AWSとCloudFlare

CloudFlare自体は、AWS上にあるデータをCDNで配信するために利用するので、これらのツールとは利用の仕方が異なるという解釈でよいですか？

はい、その理解は完全に正確です。

CloudFlareは主にウェブサイト全体のコンテンツ（HTML、CSS、JavaScript、画像など）の配信を高速化するために使用されます。その基本的な機能として、ユーザーの要求を最も近いデータセンターにルーティングし、そこからコンテンツを高速に配信します。このプロセスはウェブサイトの読み込み速度を向上させ、グローバルな規模でのパフォーマンスを確保します。また、CloudFlareはDDoS防止やWebアプリケーションファイアウォールなどの追加的なセキュリティ機能も提供しています。

一方、jsDelivr、Bootstrap CDN、AJAX Libraries API、CDN JS、Cloudflare JS、UNPKGといったサービスは、特定のライブラリやフレームワークなど、特定のフロントエンドリソースを提供する公開CDNです。これらのサービスは主に開発者が自身のウェブサイトやアプリケーションに必要な特定のライブラリやフレームワークを簡単に組み込むために利用します。

したがって、CloudFlareとこれらの公開CDNサービスは、それぞれ異なる目的と利用シナリオを持っていますが、どちらもウェブサイトのパフォーマンスを向上させる役割を果たします。

AWSにもCDN機能があると聞きました。それを使うよりもAWS＋CloudFlareを使う方がメリットがあるのでしょうか？

AWSのCDNサービスはAmazon CloudFrontと呼ばれ、AWSの他のサービスとシームレスに統合され、グローバルな分散ネットワークを介してコンテンツを迅速に配信します。CloudFrontはスケーラブルで、大規模なグローバルトラフィックを扱う能力があります。

一方、CloudFlareはCDNサービスだけでなく、さまざまな追加的な機能を提供しています。これには、Webアプリケーションファイアウォール（WAF）、分散型サービス拒否（DDoS）防御、レート制限などのセキュリティ機能、さらには負荷分散やDNSサービスも含まれます。

AWS CloudFrontとCloudFlareの間で選択する際のいくつかの考慮点は以下のとおりです。

  1. 統合: AWSの他のサービス（EC2、S3、Lambdaなど）を頻繁に使用する場合、CloudFrontはそれらのサービスとシームレスに統合され、一貫したユーザーエクスペリエンスを提供します。

  2. 機能: ウェブサイトやアプリケーションが特定のセキュリティ要件（DDoS防御、WAFなど）を必要とする場合、CloudFlareはこれらの機能を組み込みで提供します。

  3. コスト: CloudFrontとCloudFlareの料金体系は異なります。CloudFrontはデータ転送量とリクエスト数に基づいて課金します。一方、CloudFlareは基本的なCDNサービスを無料で提供し、追加機能に対して月額料金を課金します。

  4. パフォーマンス: CloudFrontとCloudFlareはいずれも高いパフォーマンスを提供しますが、特定の地域や特定のユースケースでは一方が他方よりも優れているかもしれません。実際のパフォーマンスは、多くの要素（ユーザーの地理的な位置、コンテンツの種類、トラフィックのパターンなど）によって変わるため、具体的なニーズに合わせて選択することが重要です。

それぞれの具体的な要件によりますが、AWSとCloudFlareを組み合わせると、AWSの強力なバックエンドとストレージ能力にCloudFlareの強力なCDNとセキュリティ機能を組み合わせることができ、これが多くのシナリオで理想的な解決策となります。しかし、全てはあなたの特定のニーズと要件によります。

インフラ利用技術確定

  • AWS
  • CloudFlare

細かいところはやりながら考える。

フロントエンド

HTML、CSS、JavaScriptを利用。
それぞれフレームワークで拡張する。

一般的なフレームワーク選定を考える

月間１億人の訪問者がいるウェブアプリを作ろうとしています。フロントエンドの技術選定をしたいです。どのように行えばよいですか？アドバイスください。

大規模なウェブアプリケーションのフロントエンド開発において、テクノロジーの選定は重要な要素です。以下の観点から考えてみてください：

ユーザー体験： 使用するフレームワークやライブラリが提供するUI/UXの品質は、最も重要な考慮事項の一つです。使いやすさ、対話性、応答時間など、エンドユーザーがアプリを使用する際の体験を良くするために適したツールを選びます。

パフォーマンス： レンダリング速度、効率的なデータバインディング、シームレスな状態管理など、ハイパフォーマンスなフレームワークを選ぶことで、大量のユーザーを迅速かつ効果的にサービスすることが可能になります。

スケーラビリティ： 開発チームが拡大し、アプリケーションが成長するにつれて、コードの維持と管理がより複雑になる可能性があります。そのため、コンポーネントベースのフレームワークや、明確な規則と構造を持つものを選ぶと良いでしょう。

コミュニティとサポート： 大規模な開発コミュニティと広範なサポートがあるフレームワークやライブラリを選ぶと、問題解決や新機能の追加が容易になります。

将来性： 長期的な観点から、継続的な開発とサポートが見込まれるフレームワークやライブラリを選択します。

具体的な技術としては、React.js、Vue.js、Angularなどのフレームワークが該当します。これらはユーザー体験の向上、高いパフォーマンス、優れたスケーラビリティ、大規模な開発コミュニティとサポート、そして継続的な開発と改善が行われているため、大規模なウェブアプリケーション開発に適しています。

しかし、これらのフレームワークはそれぞれ特性と利点が異なります。例えば、Reactは柔軟性とスピードが強みであり、Vueは学習曲線が緩やかで直感的に理解しやすいことが特長です。Angularはフル機能のフレームワークであり、TypeScriptとの統合が強力で、大規模なプロジェクトに適しています。

したがって、具体的な要件と目標に基づいて、これらの選択肢から最適なものを選びます。

React.js、Vue.js、Angularに、BootStrapも加え、どれを使うか判断したいと思います。これらの中から何を選べばよいか判断するために、考慮すべき情報を分かりやすくまとめていただけませんか？

もちろんです。以下にそれぞれのフレームワークやライブラリ主な特徴と利点をまとめてみます：

1. React.js

  • 強み： Reactはフェイスブックによって開発・維持され、大規模なコミュニティと広範なエコシステムを持っています。仮想DOMを使い、非常に高速なパフォーマンスを実現します。また、Reactはコンポーネントベースのライブラリで、再利用可能なコンポーネントの作成を助け、メンテナンス性と可読性を高めます。

  • 用途： シングルページアプリケーション（SPA）や動的なウェブアプリケーションに適しています。また、React Nativeを使用すれば、Reactの知識を用いてモバイルアプリケーションも開発できます。

  • 学習曲線： 独自の概念（JSX、props、state、ライフサイクルメソッドなど）があり、それらを学ぶ必要がありますが、その基本的な概念は比較的すぐに理解できます。

2. Vue.js

  • 強み： Vue.jsは規模が大きくないものの、活発なコミュニティを持っています。また、文法がシンプルであり、ReactとAngularの間の良いバランスを提供しています。また、Vue CLIを使えば、プロジェクトのセットアップが簡単になります。

  • 用途： シングルページアプリケーションや動的なウェブアプリケーションの開発に適しています。

  • 学習曲線： Vue.jsは比較的学習が容易で、初心者にとって非常に優れた選択肢です。その文法は直感的で、HTML、CSS、JavaScriptの知識があればすぐに取り組むことができます。

3. Angular

  • 強み： AngularはGoogleによって開発・維持されており、大規模アプリケーションの開発に向いています。TypeScriptを使用し、高度なエラーチェックとエディタサポートを提供します。

  • 用途： エンタープライズレベルの大規模アプリケーションやシングルページアプリケーションの開発に適しています。

  • 学習曲線： Angularは他のフレームワークに比べて学習曲線が急で、TypeScriptやAngularの特有の概念（ディレクティブ、モジュール、デコレーターなど）を学ぶ必要があります。

4. Bootstrap

  • 強み： Bootstrapは最も人気のあるフロントエンドフレームワークの一つで、レスポンシブデザインとモバイルファーストの設計を容易にします。また、プレビルドコンポーネントとテーマを使用して、迅速にプロトタイプを作成することができます。

  • 用途： ウェブサイトやアプリケーションのレイアウトを素早く構築する場合、特にレスポンシブデザインが必要な場合に適しています。

  • 学習曲線： Bootstrapは簡単に学ぶことができ、HTML、CSS、そして少量のJavaScriptの知識があればすぐに使用できます。

5. jQuery

  • 強み： jQueryはブラウザ間のJavaScriptの不一致を抽象化し、軽量で使いやすいAPIを提供します。また、非常に大きなコミュニティと広範なプラグインエコシステムを持っています。

  • 用途： 主にアニメーション、AJAXリクエスト、DOM操作に使用されます。

  • 学習曲線： jQueryは学習が容易で、JavaScriptの基本的な知識があれば使用できます。

これらの技術を比較すると、React、Vue、Angularは主にシングルページアプリケーションや動的ウェブアプリケーションを作成するために使用され、Bootstrapはレイアウトやデザインのために、jQueryはDOM操作やアニメーションのために使用されます。それぞれのフレームワークやライブラリは特有の強みと学習曲線がありますので、プロジェクトの要件と開発者のスキルセットに基づいて選択することが重要です。

また、これらのフレームワークは互いに排他的ではなく、適切に組み合わせて使用することも可能です。例えば、ReactやVueとBootstrapはしばしば一緒に使われ、ReactやVueのコンポーネント内でBootstrapのスタイリングが利用されます。

各フレームワークの難易度

私はウェブアプリ開発の初級者です。作りたいアプリは、訪問者が月間1億人と多いですが、画面自体はそんなに複雑な機能を持たせません。その場合のどのフレームワークを使うのがよいと思いますか？
また、これらのフレームワークを難易度順にまとめていただけますか？

フロントエンド開発の初級者であり、アプリケーションの機能が特に複雑でないのであれば、Vue.jsやReact.jsは良い選択肢になるかもしれません。これらのフレームワークはコミュニティサポートが活発で、学習リソースも豊富です。また、それぞれがコンポーネントベースのアーキテクチャを採用しており、保守性とスケーラビリティに優れています。さらに、アプリケーションの規模が大きくなるにつれて、これらのフレームワークの柔軟性とパフォーマンスが大きな利点となるでしょう。

具体的には以下のようになります：

  1. Vue.js：Vueはその直感的なAPIと優れたドキュメンテーションで知られており、初心者が最初に取り組むには最適なフレームワークです。また、Vue CLIを使えば、プロジェクトの設定や構築が容易になります。

  2. React.js：Reactは非常に人気があり、大きなコミュニティと多数の学習リソースがあります。Reactの学習曲線はVueよりも少し高いかもしれませんが、そのコンポーネントベースのアーキテクチャとリアクティブなデータフローは、より大きなアプリケーションでの開発を容易にします。

一方、BootstrapとjQueryは主にデザインやDOM操作に使われるため、これらは必要に応じて学ぶことをおすすめします。

これらのフレームワークとライブラリを学習の難易度順にまとめると以下のようになります：

  1. Bootstrap：CSSフレームワークで、主にレイアウトとデザインに使用されます。非常に直感的で、HTMLとCSSの基本的な知識があればすぐに使い始めることができます。

  2. jQuery：このライブラリはDOM操作とアニメーションを簡単にするために使用されます。基本的なJavaScriptの知識があれば、比較的簡単に学ぶことができます。

  3. Vue.js：Vueは直感的なAPIとシンプルな構文を持っており、初心者にとって非常に優れた選択肢です。

  4. React.js：Reactの学習はVueよりも少し難しいかもしれませんが、それでも初心者が取り組むには十分な範囲です。

  5. Angular：Angularは他のフレームワークに比べて学習曲線が急で、TypeScriptやAngularの特有の概念（ディレクティブ、モジュール、デコレーターなど）を学ぶ必要があります。

このリストはあくまで一般的な見解であり、個々の開発者によって学習の難易度は異なることを覚えておいてください。最も重要なのは、それぞれの技術があなたのプロジェクト要件にどのように適合するかを理解し、それに基づいて最適な選択をすることです。

あなたの話では、VueやReactよりBootstrapやjQueryの方が難易度が低いようですが、Vueを選択するのには特別な理由がありますか？

Vue.jsやReact.jsのようなモダンなフロントエンドフレームワークを選択する主な理由は、そのスケーラビリティとメンテナンス性、パフォーマンスに優れたアーキテクチャ、そしてリアクティブなデータバインディングなどの先進的な機能にあります。これらのフレームワークはアプリケーションを小さな再利用可能なコンポーネントに分割し、それぞれが独自の状態を管理することを可能にします。これはコードの可読性とメンテナンス性を高め、開発の生産性を向上させます。

一方、BootstrapやjQueryは異なる目的で使われます。Bootstrapは主にレイアウトとデザインのためのフレームワークであり、jQueryはDOM操作とアニメーションを簡単にするためのライブラリです。これらは非常に有用で、多くの場合Vue.jsやReact.jsと組み合わせて使用されますが、大規模なウェブアプリケーションを構築する際には、VueやReactのようなモダンなフレームワークの方が適しています。

したがって、Vueを選択する主な理由は、よりスケーラブルでメンテナブルなコードベースを作成し、先進的なフロントエンド開発の概念とパターンを利用する能力にあります。さらに、Vueはその直感的なAPIと学習のしやすさで知られており、初心者にとっては非常にアクセスしやすいフレームワークです。

ちなみに同じ機能を持つ競合アプリは、Bootstarpを使っているようでした。その場合Bootstrapに限定して構築した方が、学習コストはかなり抑えられますよね？

はい、その通りです。あなたが既にBootstrapとjQueryに精通している場合、または競合他社がこれらの技術を使用していて、その機能やデザインをベースにする場合、BootstrapとjQueryだけで開発するという選択は学習コストを大幅に抑えることができます。

Bootstrapはデザインのフレームワークで、レスポンシブなレイアウトを作成するのに役立ちます。また、jQueryはJavaScriptのライブラリで、DOM操作を簡単にし、ブラウザ間のJavaScriptの違いを抽象化してくれます。

ただし、このアプローチの一部の欠点も考慮する必要があります：

  1. スケーラビリティ: jQueryとBootstrapの組み合わせは、シンプルなウェブサイトや小規模なアプリケーションには適していますが、アプリケーションが大きくなると、メンテナンスとスケーラビリティが問題となる可能性があります。これらのツールは、ReactやVueのようなモダンなフレームワークが提供するコンポーネントベースのアーキテクチャや状態管理の機能を欠いています。

  2. パフォーマンス: jQueryはDOM操作を簡単にしますが、これらの操作はしばしばパフォーマンスを低下させます。これは特に大規模なアプリケーションやDOM操作が頻繁に発生するアプリケーションで顕著となります。

これらの制約を考慮に入れて、BootstrapとjQueryだけを使ってウェブアプリを構築するか、VueやReactなどのモダンなフレームワークを使って長期的なメンテナンス性とパフォーマンスを向上させるか、適切な選択を行ってください。

競合からフレームワーク選定

SimilarTechやBuiltWithなどを利用して、競合サイトで利用されているフレームワークやパッケージを調査。
それぞれ使い方を学習し、必要なものを使っていく。

Google Hosted Libraries、Google Hosted jQuery、Popper.js、Infinite Scroll、imagesLoaded、Masonryについて教えてほしいです。

以下に、それぞれの技術について説明します：

  • Google Hosted Libraries: Google Hosted LibrariesはGoogleが提供する無料のCDNサービスで、一般的なJavaScriptライブラリ（jQuery、AngularJS、ReactJSなど）のホスティングを提供します。これにより、開発者はライブラリを自分のサーバーにホスティングする必要なく、迅速にこれらのライブラリを利用できます。また、ユーザーが他のサイトで同じライブラリをロードしている場合、ブラウザのキャッシュを利用して迅速にページをロードすることができます。

  • Google Hosted jQuery: これはGoogle Hosted Librariesの一部で、jQueryという非常に人気のあるJavaScriptライブラリをホストしています。jQueryは、HTML文書の操作、イベントハンドリング、アニメーション、Ajax操作を容易にするための高度に便利なAPIを提供します。

  • Popper.js: Popper.jsは、"ポッパー"（ツールチップ、ポップオーバー、ドロップダウンなどの表示要素）をウェブページ上の正しい位置に配置するためのライブラリです。つまり、要素が常に可能な限り目標の近くに表示されることを保証します。

  • Infinite Scroll: Infinite Scrollは、ユーザーがページの下部にスクロールすると自動的に次の内容がロードされる、「無限スクロール」機能を実装するためのJavaScriptライブラリです。

  • imagesLoaded: このJavaScriptライブラリは、画像がブラウザで完全にロードされた後にイベントをトリガーします。これにより、例えば画像ギャラリーなどで画像のロードが完了したタイミングでアニメーションや操作を行うことが可能になります。

  • Masonry: MasonryはJavaScriptグリッドレイアウトライブラリで、ブロックを縦に配置することで空間を最小限に抑える「石積みレイアウト」を実現します。これはPinterestのようなレイアウトでよく見られます。

以上のライブラリやツールは、ウェブ開発者がウェブサイトやウェブアプリケーションのユーザー体験を改善するために使用するものです。

自身のスキルからのフレームワーク選定

JavaScript初心者です。C#の開発（WPFや.NetFramework）は行ったことがあります。このスキルセットの場合、jQuery+Bootstrapで開発を行うか、Vue.js+Bootstrapで開発を行うか、どちらがいいと思いますか？

あなたがC#の開発経験があり、特にWPFの知識があるとのことなら、Vue.jsの方が適しているかもしれません。理由は以下の通りです：

  1. データバインディング: Vue.jsとWPFは両方ともデータバインディングというコンセプトを利用します。これは、ユーザーインターフェースの要素とデータソースを連携させる方法です。この経験はVue.jsに移行する際に役立つでしょう。

  2. コンポーネント指向: Vue.jsはコンポーネントベースのフレームワークで、ユーザーインターフェースを独立した再利用可能な部品に分割します。これはWPFのユーザーコントロールやカスタムコントロールと似た概念です。

  3. 学習曲線: Vue.jsの学習曲線は比較的緩やかで、特に他のフロントエンドフレームワーク（ReactやAngular）と比べて、初心者に優しいと評価されています。

ただし、Vue.jsの学習と実装には時間がかかります。一方、あなたがプロジェクトをすぐに始めたいと考えているか、またはJavaScriptの経験がほとんどなくてもすぐにプロジェクトを進めたい場合は、jQueryとBootstrapの組み合わせも考慮に入れるべきです。これらは直感的で学習が簡単なため、すぐにでもウェブ開発を始めることができます。

結論としては、あなたのプロジェクトの要件、時間枠、そして将来のスケーラビリティとメンテナンスを考慮に入れて、Vue.js+BootstrapまたはjQuery+Bootstrapのどちらを使用するかを選択してください。

下記のアイデアについてどう思いますか？

一旦競合サイトを参考に、基本となる1ページをBootstrapとjQueryを利用して作ってみる。（その過程でHTML、CSS、JavaScriptの学習を深める。）
並行して要件定義しつつ、速度やスケールなどの精査を行い、Vue.jsを利用するかどうかを決める。

そのアイデアは素晴らしいと思います！特に、ウェブ開発とフロントエンド技術に新しい人にとっては、このアプローチは効果的であると思います。以下に、その理由をいくつか挙げてみます。

  1. 基本の理解: まず、HTML、CSS、JavaScriptの基本的な理解を深めることは、どんなフロントエンドフレームワークを学ぶにしても非常に重要です。これらの基本的な技術を理解していると、Vue.jsなどのフレームワークを学ぶときに、その裏で何が起こっているのかを理解するのがずっと簡単になります。

  2. 段階的な学習: jQueryとBootstrapから始めるというのは、より簡単で直感的なツールから始めるという意味で、良いアプローチです。これにより、ウェブ開発の基本的な概念とパターンを学び、それからより高度なフレームワークに移行することができます。

  3. 実用的な視点: 実際に何かを作りながら学ぶことは、新しい技術を習得する最良の方法の一つです。競合サイトを参考にしながら実際のページを作成するというアプローチは、実践的な視点から学ぶことを可能にします。

  4. 適切な技術選択: 同時に、要件を定義し、将来的な需要（速度、スケーラビリティなど）に基づいて最適なフレームワークを選択するという考え方は非常に賢明です。

したがって、このアプローチは、ウェブ開発を始めるにあたって非常に効果的であると思います。

フロントエンド技術選定確定

  • 一旦競合サイトを参考に、基本となる1ページをBootstrapとjQueryを利用して作ってみる。（その過程でHTML、CSS、JavaScriptの学習を深める。）

  • 並行して要件定義しつつ、速度やスケールなどの精査を行い、Vue.jsを利用するかどうかを決める。

  • 競合サイト解析、ChatGPTでの要件定義や技術調査、Code Interpreter等も使いつつ、やりながら最適解を探す。

基本的にはいろんなライブラリを組み合わせて、必要な機能を実現すると思われる。

バックエンド

競合サイトはPHPを利用しているようだ。
私はPythonDjangoを利用したい。
今後の業務でPythonDjangoを扱うし、処理速度なども問題なさそう。

というかここまでやって思った。
「要件定義と基本設計などやってからの方がより具体的に技術選定ができる」と。

よってこれ以下は、とりあえず要件定義などをやってみてから考えたい。

詳細は後ほど追記予定。

収益化

サーバー代金と広告収益を考えて、収益をプラスにしないといけない。
別の新興競合サイトも見てみたが、サーバー代が赤字とのことだったので、広告配信モデルやなんやかやは調整する必要がありそう。
あとはマッチングするアフィリリンクを自動生成するなど、ビジネスモデルの調整も必要かもしれない。

詳細は後ほど追記予定。

マーケティング

プロダクトがよくて、リピーターがつくならば、あとはなんとなくユーザーを増やしていけばいいと思う。ツイッターとかやりやすいところで。
後は拡散させる仕組みを作る必要もある。

Googleアナリティクス4などを利用して、効果測定をする必要もあるかな。

詳細は後ほど追記。

モバイル

モバイル対応も必要。
ここらへんはあまり詳しくないので、調査必要。

詳細は後ほど追記。

Discussion