Rust   |  Web   Todo   |   Read

ホーム  
はじめの一歩
Web Todo

概要

Rust で Todo ウェブアプリケーションを作ります。今回は Read の実装です。

Cargo.toml


[package]
name = "todo"
version = "0.1.0"
edition = "2024"

[dependencies]
askama = "0.14.0"
axum = "0.8.4"
tokio = { version = "1.47.1", features = ["full"] }
tower-http = { version = "0.6.6", features = ["full"] }


main.rs


//******************************
// main.rs
// copyright   : vivacocoa.jp
// last modified: Sep. 13. 2025
//******************************
use axum::{response::{Html, IntoResponse}, routing::get, Router};
use askama::Template;
use tower_http::services::ServeDir;

#[derive(Template)]
#[template(path = "index.html")]

struct Todos
{
    todos: Vec<Todo>,
}

struct Todo
{
    message: String,
}

#[tokio::main]
async fn main()
{
    let serve_dir = ServeDir::new("public");

    let app = Router::new()
        .nest_service("/static", serve_dir)
        .route("/", get(index));
    let listener = tokio::net::TcpListener::bind("127.0.0.1:3000").await.unwrap();
    let addr = listener.local_addr().unwrap();
    println!("Listening on {}", addr);
    axum::serve(listener, app).await.unwrap();
}

async fn index() -> impl IntoResponse
{
    let todos = vec![
        
            Todo{ message: "すること 1".to_string(),},
            Todo{ message: "すること 2".to_string(),},
            Todo{ message: "すること 3".to_string(),},
    ].into_iter().collect();
    let todos = Todos { todos};
    Html(todos.render().unwrap()).into_response()
}


index.html

プロジェクトのルートディレクトリに templates というディレクトリを作り、 その中に次の index.html を作ります。


<!-----------------------------
 index.html
 copyright    : vivacocoa.jp
 last modified: Sep. 13, 2025
 ------------------------------>
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Todo</title>
  <link rel="stylesheet" href="/static/style.css">
</head>

<body>
  <div class="container">
    <h1>Todo</h1>
    {%for todo in todos %}
    <p class="todo">{{ todo.message }}</p>
    {% endfor %}
  </div>
</body>

</html>


style.css

プロジェクトのルートディレクトリに public というディレクトリを作り、 その中に次の style.css を作ります。


/*****************************
style.css
copyright    : vivacocoa.jp
last modified: Sep. 13, 2025
******************************/
body {
  background-color: #efefef;
}

.container {
  width: 500px;
  margin: 16px auto;
}

h1 {
  font-size: 20px;
}

.todo {
  height: 80px;
  width: 100%;
  border-radius: 4px;
  padding: 0px 8px;
  line-height: 80px;
  box-sizing: border-box;
  background-color: white;
  margin-bottom: 0px;
}

ターミナルでプロジェクトのルートディレクトリに移動して、cargo run とコマンドしてサーバーを起動してください。 そしてお使いのブラウザで localhost:3000 もしくは 127.0.0.1:3000 を開いてください。



184 visits
Posted: Sep. 13, 2025
Update: Sep. 13, 2025

ホーム   目次