blog.saqu.dev
Last updated on

金欠高校生はサクッとwebサイトを作ってみたい！

今年１年間で様々なwebサイト開発に携わる機会があったのでそれぞれのメリット、デメリットやどのくらいの規模に適しているかを個人的に見ていきたいと思います

今回、比較するのは以下の４つです

  • Django(フロントエンド・バックエンド)
  • Nuxt/Vue(フロントエンド)
  • Hugo(SSG)
  • 生のhtml

TL;DR

初めてのデータベースを使うようなwebアプリ開発にはDjangoがおすすめ APIが作れるならVue サクッとブログを作るならHugo １枚のページのwebサイトならフレームワークを使わずにhtmlのほうが書きやすい

比較

Django

特徴

  1. ORM（Object-Relational Mapping） 　データベースのマイグレーションの管理や操作までできる

  2. 管理画面の提供 　Djangoは自動生成される管理画面を提供してくれるので、コマンドを使わずにデータの編集や追加、削除ができる！

  3. フロントエンドとバックエンドの親和性が高い 　変数を直接htmlに記述することができるからAPIを使う場合に比べて本当に手軽に動的なサイトが作れる

ユースケース:

  • 大規模なウェブアプリケーションの構築 　Djangoは大規模なウェブアプリケーションの構築に適しています。セキュリティ、データベース、管理画面など、多くの機能が組み込まれているため、大規模で複雑なプロジェクトに対応できる。

  • 初心者に優しい 　APIを別で立てる必要もなく、ある程度のセキュリティも担保してくれるから初めてのwebサイト開発でも作りやすい (自分も最初に作ったwebアプリはdjangoで作りました…!)

Nuxt.js

特徴

  1. Vue.jsを使っている人は気軽に移行できる 　Nuxt.jsはVue.jsのフレームワークで、Vue.jsの機能を拡張してるからコンポーネントやデータバインディングなどの特徴をそのまま利用できる。

  2. SSRとSSGがサポートされてる 　サーバーサイドレンダリング(SSR)は、サーバー上でページを事前にレンダリングし、クライアントにHTMLを返すことで、SEO対策や初回読み込みの高速化が期待できる。静的サイト生成(SSG)は、ビルド時に事前にHTMLを生成し、サーバーレスで配信できる。

  3. ルーティングを自動生成してくれる 　ページとコンポーネントをプロジェクトに配置するだけで、Nuxt.jsが自動的にルーティングを生成してくれる(これ便利！)。

  4. プラグインとモジュールがある 　Nuxt.jsには多くのプラグインとモジュールが提供されてるので、デフォルトで組み込まれているものや、サードパーティのものを簡単に利用できる。

ユースケース:

  • 中規模から大規模なウェブアプリケーションの構築 　Nuxt.jsはVue.jsの力強さを活かしながら、構造や機能の整理が必要な中規模から大規模なウェブアプリケーションの構築ができる。

  • SEO対策も！ 　SSRがサポートされているので、検索エンジンがウェブアプリケーションのコンテンツを正確にクロールしやすくなる。

Hugo

特徴

  1. 高速なビルドとパフォーマンス 　HugoはGo言語で開発されてるので、非常に高速なビルドとパフォーマンスを得られる。

  2. シンプルな構造 　Hugoのプロジェクトはシンプルな構造を持っており、コンテンツやテーマの管理が容易です。ディレクトリ構造はフォルダとファイルのみで構成されているので、見やすい！

  3. 静的サイト生成 　Hugoはサーバーサイドの処理が不要で、静的なHTMLを生成してくれる！ 　だからこそ、安定性が高く、ホスティングが簡単な静的なサイトを構築できる。 　ただ、動的サイトには向いてない

ユースケース:

  • ブログや個人サイトの構築に向いてる 　Hugoはコンテンツの管理がシンプルであり、個人のブログやポートフォリオサイトの構築に適してる。

  • 高速で安定した静的サイトが手軽に作れる 　サーバーサイドの処理が不要で、ビルドが非常に高速なので、静的サイトに向いてる。 　特に大量のコンテンツを効率的に処理する場合に力を発揮してくれる。

生のHTML

特徴:

  1. 原点にして頂点 　ページのデザインや構造に完全な制御が可能 　手動でHTMLを書くことで、特定の要件に合わせて柔軟なデザインを実現できる。

  2. 軽量 　フレームワークやライブラリを使用せずに生のHTMLを書くことで、ページが非常に軽量になる。

  3. 大きなサイトには向いてない 　動的なサイトやページ数の多いサイトを作るのはちょっとしんどい…

ユースケース:

  • 簡単な静的サイトの構築 　小規模でシンプルな静的サイトを構築する場合、迅速な開発とシンプルなメンテナンスが求められる場合に有用

  • デザイン要件にこだわりがある場合 　フレームワークが提供するデフォルトのスタイルや構造を使用せず、独自のデザインを実現する場合

終わりに

それぞれのプロジェクトの必要とする要件と相談しながら楽してwebアプリ開発を楽しみましょう！