こんにちは、ウェブ開発者の皆さん！ 今日は、たった1つや2つではなく、9種類ものウェブフレームワークを一挙にご紹介します！🤯
まず最初に... なぜこんなことをしたかと言いますと、数々の国で暮らし、ソフトウェア開発界に革命を起こす野望を持つ MarsX - ローコードプラットフォーム の創設者兼CEO（6歳からです 🤯）である私にとっては日常業務だからです！
そういうわけで、これら各言語でシンプルなToDoリストアプリを作成しました。それぞれの経験を詳しくお伝えするために記事化してみました。
それでは早速登場人物たちを見ていきましょう：
- Next.js
- Ruby on Rails
- Python
- Django
- PHP
- Laravel
- Java Spring
- C# .NET
- Go Gin
- Swift Vapor
- Kotlin Ktor
- MarsX (bonus)
それぞれの言語・フレームワーク組み合わせでは 構築時間⏱️ ,ルーティング🚦 ,データベース連携💾 ,そして全体的なアーキテクチャ を取り上げます。 もちろん、コードも見せますよ...私のスパゲッティコードです :D
1) Next.js Code
import { useState } from 'react'
export default function TodoList() {
const [todos, setTodos] = useState([])
const [inputValue, setInputValue] = useState('')
const addTodo = () => {
if (inputValue) {
setTodos([...todos, inputValue])
setInputValue('')
}
}
return (
<div>
<h1>Todo List</h1>
<ul>
{todos.map((todo) => (
<li key={todo}>{todo}</li>
))}
</ul>
<form onSubmit={(e) => e.preventDefault()}>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<button onClick={() => addTodo()}>Add</button>
</form>
</div>
)
}
Next.jsはReactを簡単なセットアップで活用し、最初から素晴らしい開発体験が実現します！
セットアップ: 簡単！🍋 ルーティング: 内蔵された動的ルーティング。 データベース連携: Node.js に対応したデータベースであれば何でも使えます。
2) Ruby on Rails Code
# todo.rb
class Todo < ApplicationRecord
validates :title, presence: true
end
# todos_controller.rb
class TodosController < ApplicationController
before_action :set_todo, only: [:show, :edit, :update, :destroy]
def index
@todos = Todo.all.order(created_at: :desc)
end
def create
@todo = Todo.new(todo_params)
if @todo.save
redirect_to todos_path, notice: 'Todo was successfully created.'
else
render 'new'
end
end
private
def set_todo
@todo = Todo.find(params[:id])
end
def todo_params
params.require(:todo).permit(:title) # add additional parameters as needed.
end
end
# index.html.erb
<h1>Todos</h1>
<ul>
<% @todos.each do |t| %>
<li><%= t.title %></li>
<% end %>
</ul>
<%= form_for(@todo) do |f| %>
<%= f.text_field :title %>
<%= f.submit "Add" %>
<% end %>
Ruby on Rails は古典的なフレームワークであり、今でもお気に入りの一つです！
セットアップ：rails new コマンドでさっと始められる！🚀 データベース連携：ActiveRecordがサポートしてくれて簡単にデータベースを扱えます。 ルーティング：RESTful ルーティングが内蔵されておりシンプルです。
3) Python Django Code
# models.py
from django.db import models
class TodoItem(models.Model):
title = models.CharField(max_length=200)
completed = models.BooleanField(default=False)
def __str__(self):
return self.title
# views.py
from django.shortcuts import render
from .models import TodoItem
def todo_list(request):
todo_items = TodoItem.objects.all()
context = {
'todo_items': todo_items,
}
return render(request, 'todo/todo_list.html', context)
# urls.py (inside app folder)
from django.urls import path
from .views import todo_list
app_name = 'todo'
urlpatterns = [
path('', todo_list, name='list'),
]
# templates/todo/todo_list.html
{% extends "base.html" %}
{% block content %}
<h1>Todo List</h1>
<ul>
{% for item in todo_items %}
<li>{{ item.title }} - {{ item.completed }}</li>
{% endfor %}
</ul>
{% endblock %}
Python Django - 「締切り厳守の完全主義者向け」ウェブフレームワーク。期待通り優秀です。そして誰もがPython愛好家ですね？
セットアップ: django-admin startproject を使用してすぐに作業開始可能。 ルーティング：URL設定は他のフレームワークよりも複雑ですが、管理可能です。 データベース連携：ORM によりデータベース操作がスムーズに行えます⛵️。
4) PHP Laravel Code
// routes/web.php
Route::get('/', 'TodoController@index');
Route::post('/todos', 'TodoController@store');
// Todo model
class Todo extends Model {
protected $fillable = ['title'];
}
// Todo controller
class TodoController extends Controller {
public function index() {
$todos = Todo::all();
return view('todo.index', compact('todos'));
}
public function store(Request $request) {
$this->validate($request, [
'title' => 'required'
]);
Todo::create(['title' => request('title')]);
return redirect('/');
}
}
// resources/views/todo/index.blade.php
<form method="POST" action="/todos">
{{ csrf_field() }}
<label>Title:</label>
<input type="text" name="title">
<button type="submit">Add</button>
</form>
<ul>
@foreach ($todos as $todo)
<li>{{ $todo->title }}</li>
@endforeach
</ul>
Laravel では綺麗な文法と楽しい開発体験を提供しており、PHP 開発をエレガントにします！
セットアップ: Composer を使って簡単（composer create-project --prefer-dist laravel/laravel my_todo_app） ルーティング: web.php ファイルでシンプルなルート定義🗺️。 データベース連携: Eloquent ORM で全て整理整頓されます。
5) Java Spring Code
@RestController
@RequestMapping("/todos")
public class TodoController {
private final TodoRepository todoRepository;
public TodoController(TodoRepository todoRepository) {
this.todoRepository = todoRepository;
}
@GetMapping("/")
public List<Todo> getAllTodos() {
return this.todoRepository.findAll();
}
@PostMapping("/")
public ResponseEntity<Object> createTodo(@RequestBody Todo newTodo) {
try {
this.todoRepository.save(newTodo);
return ResponseEntity.ok().build();
} catch (Exception e) {
return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).build();
}
}
}
@Entity
@Table(name = "todos")
public class Todo {
@Id
@GeneratedValue(strategy=GenerationType.AUTO)
private Long id;
private String title;
private boolean completed;
}
Java Spring は堅牢なフレームワークと豊富な設定オプションで Java の力をウェブ開発に引き出します！
セットアップ：少し手間取るかもしれませんが、問題ありません。 ルーティング：注釈付きコントローラで簡単にルート設定ができます。 データベース連携：JPA がしっかりしたデータベースサポートを提供しています。
6) C# .NET Code
using System;
using System.Collections.Generic;
class Program {
static void Main(string[] args) {
List<string> todos = new List<string>();
Console.WriteLine("Todo list");
while (true) {
Console.Write("> ");
string input = Console.ReadLine();
if (input == "quit") {
break;
}
if (input.StartsWith("+")) {
string todo = input.Substring(1).Trim();
todos.Add(todo);
Console.WriteLine($"Added: {todo}");
} else if (input.StartsWith("-")) {
int indexToRemove = int.Parse(input.Substring(1).Trim()) - 1;
if (indexToRemove >= 0 && indexToRemove < todos.Count) {
string removedTodo = todos[indexToRemove];
todos.RemoveAt(indexToRemove);
Console.WriteLine($"Removed: {removedTodo}");
}
} else if (input == "") {
Console.WriteLine("Todos:");
for(int i=0; i<todos.Count; i++){
Console.WriteLine($"{i+1}: {todos[i]}");
}
}else{
//invalid command entered
}
}
}
}
C# .NET は抜群のパフォーマンスを発揮し、フルスタックのウェブアプリ開発に必要な機能が詰まっています。
セットアップ：Visual Studio か CLI ツールを使って、どちらでも簡単⛵️。 ルーティング：属性ベースのルーティングでコントローラー・メソッド上で直接定義🎯。 データベース連携: Entity Framework Core は強力でエコシステムとよく統合されています。
7)Go Gin Code
package main
import (
"github.com/gin-gonic/gin"
)
type Todo struct {
ID int `json:"id"`
Title string `json:"title"`
Completed bool `json:"completed"`
}
var todoList []Todo
func main() {
r := gin.Default()
// GET all todos
r.GET("/todos", func(c *gin.Context) {
c.JSON(200, todoList)
})
// POST a new todo
r.POST("/todos", func(c *gin.Context) {
var newTodo Todo
c.BindJSON(&newTodo)
// Generate unique ID for the new todo item
if len(todoList) == 0 {
newTodo.ID = 1
} else {
lastID := todoList[len(todoList)-1].ID
newTodo.ID = lastID + 1
}
// Append the newly created item to the list of todos.
todoList = append(todoList, newTodo)
c.JSON(201, gin.H{
"message": "New ToDo added successfully",
"todo": &newToDo,
})
})
r.Run(":8080")
}
GinはGo言語のシンプルさと速さを好む方に選択肢です。軽量でありながら多機能です！
セットアップ: go mod init を使用して簡単な設定🚀。 ルーティング: 数行程度のコードだけで簡単に路線設定！ データベース連携: GORM がデータベース操作を楽しくします💾。
8) Swift Vapor Code
import Vapor
final class Todo: Content {
var id: Int?
var title: String
init(title: String) {
self.title = title
}
}
func routes(_ app: Application) throws {
// create a new todo item
app.post("todo") { req -> EventLoopFuture<Todo> in
let todo = try req.content.decode(Todo.self)
return todo.save(on: req.db).map { todo }
}
// get all todos from the database
app.get("todos") { req -> EventLoopFuture<[Todo]> in
return Todo.query(on: req.db).all()
}
}
Swift VaporではSwift のパフォーマンスをサーバーサイド開発に応用し、焼きたてりんごパイ 🍏 のように素晴らしい体験が得られます！
セットアップ：Xcode 設定時間も含めると少々手間取るかも知れません。 ルーティング：直感的で読みやすいルート定義です。 データベース連携：Fluent ORM は強力で表現豊かです。
9) Kotlin Ktor Code
data class Todo(val id: Int, val task: String)
val todos = mutableListOf<Todo>()
fun main() {
embeddedServer(Netty, port = 8080) {
install(ContentNegotiation) {
json()
}
routing {
get("/todos") {
call.respond(todos)
}
post("/todos") {
val todo = call.receive<Todo>()
todos.add(todo)
call.respond(HttpStatusCode.Created)
}
delete("/todos/{id}") {
val id = call.parameters["id"]?.toIntOrNull()
if (id == null || !todos.removeIf { it.id == id })
call.respond(HttpStatusCode.NotFound)
else
call.respond(HttpStatusCode.OK)
}
}
}.start(wait = true)
}
Ktor はJetBrains の言語イノベーション💡とシンプルさを組み合わせて、Kotlin を使ったウェブアプリ開発の手助けをします！
セットアップ: 最初に少し設定が必要だが、問題なく進めることが可能。 ルーティング: DSL を使用して綺麗でエレガント🎩なルート設定！ データベース連携: Exposed ライブラリはデータベース操作がシンプルでパワフル⚙️。
10) MarsX (Bonus) 🚀 帽子をしっかりお持ち下さい！まったく新しいフレームワーク/言語ではToDoリスト作成も驚異の7分間しかかからず、私の祖母でも簡単に作れました！
ただし一つ注意点として - それはまだ非公開β版であり、待機リストに登録されるほどの戦いが予想されます。参加したい方はこちらから申し込んでください。
<schema>
<array name="todo">
<object>
<string name="title" />
</object>
</array>
</schema>
これで以上です！ 同じアプリを作るために使用された9つの異なるフレームワーク - どれを選んでも、スタートアップがデカ・ユニコーン🦄へと成長することを願っています。ただし、賢明に選択してください。何故なら、選んだフレームワークは今後9年間あなたの人生を左右するからです😉。
ツイッターでフォローまたはご挨拶をお願いします：johnrushx
開発楽しみましょう！