タスク管理システム #2 （Hello World）

前回の記事

タスク管理システム #1 （開発環境構築 Kotlin + React + TypeScript + Docker）

1. バックエンド（Kotlin）の「Hello, World!」

1. bsckend\appへ移動

cd backend\app

2. 起動

以下コマンド実施

gradle run

以下、出力内容

PS my-task-manager\backend\app> gradle run
Starting a Gradle Daemon (subsequent builds will be faster)
Calculating task graph as no cached configuration is available for tasks: run

> Task :app:run
Hello World!

BUILD SUCCESSFUL in 1m 17s
2 actionable tasks: 1 executed, 1 up-to-date
Configuration cache entry stored.

3. 補足

kotlinは開発環境構築すると「Hello World!」を表示するコードが
自動生成されているっぽい。

my-task-manager\backend\app\src\main\kotlin\org\example\App.kt

/*
 * This source file was generated by the Gradle 'init' task
 */
package org.example

class App {
    val greeting: String
        get() {
            return "Hello World!"
        }
}

fun main() {
    println(App().greeting)
}

ちなみにテストコードも自動生成

my-task-manager\backend\app\src\test\kotlin\org\example\AppTest.kt

/*
 * This source file was generated by the Gradle 'init' task
 */
package org.example

import kotlin.test.Test
import kotlin.test.assertNotNull

class AppTest {
    @Test fun appHasAGreeting() {
        val classUnderTest = App()
        assertNotNull(classUnderTest.greeting, "app should have a greeting")
    }
}

テスト結果は以下に出力

my-task-manager\backend\app\build\reports\tests\test\index.html

開くとこんな感じ

2. フロントエンド（React + TypeScript）の「Hello, World!」

1. App.tsxの修正

my-task-manager\frontend\src\App.tsxを以下に修正

import React from 'react';

function App() {
    return (
        <div>
            <h1>Hello, World!</h1>
        </div>
    );
}

export default App;

2. 開発サーバ起動

以下コマンドを実施

cd frontend
npm start

(http://localhost:3000) へアクセスすると「Hello World!」表示

以上です。