とうゆのメモ帳

日常とか勉強とか

【TODOアプリ】画面の作成 ~ Vue.js 実装編 ~

TODOアプリ Vue.js Nuxt.js

TODOアプリの画面Iを作成します。Nuxt.jsを使用して、TODOの登録・閲覧・編集・削除操作を実装します。細かい解説は省くのと、最小構成での実装方法をまとめます。

実行環境

  • Node.js v14.18.1
  • npm 8.1.1
  • NuxtJS v2.15.8
  • tailwind 4.2.0

実装手順

1. プロジェクトの雛形を作成

以下のコマンドを実行しプロジェクトの雛形を作成

$ npm init nuxt-app simple-todo-nuxt

$ cd simple-todo-nuxt
$ npm install
$ npm run dev
# http://localhost:3000 にアクセスして動作確認

f:id:toyukun:20211026215024p:plain
nuxt.js セットアップ情報

2.APIを呼ぶ実装を追加

 methods: {
    async getTasks () {
      this.tasks = await this.$axios.$get('http://localhost:8080/tasks')
    },
    async createTask () {
      await this.$axios.$post('http://localhost:8080/tasks', this.form)
      await this.getTasks()
    },
    async deleteTask (taskId) {
      await this.$axios.$delete(`http://localhost:8080/tasks/${taskId}`)
      await this.getTasks()
    }
  }
}

3. 表示側の実装を追加

<template>
  <div v-for="task in tasks" :key="task.id">
    <div @click="deleteTask(task.id)">Delete task</div>
    <div>
      <h2>{{task.title}}</h2>
      <p>{{task.description}}</p>
    </div>
  </div>
  <form>
    <div>
      <label for="title">Title</label>
      <input id="title" v-model="form.title" type="text">
    </div>
    <div>
      <label for="description">Description</label>
      <textarea id="description" v-model="form.description" rows="5"></textarea>
    </div>
    <button @click="createTask">TODO追加</button>
  </form>
</template>

** サンプルコードから省略してあります。

ローカル動作確認

1. APIを実行

github.com

をクローンしてきて、

$ docker-compose up

2. 画面を実行

$ npm run dev

3. アクセス

http://localhost:3000 にブラウザでアクセスして動作確認

サンプルコード

github.com

【jEnv】Javaバージョン切り替え設定

LTSのJava8, 11, 17をインストールし、jEnv使用してバージョン切り替えるようにする

Javaのインストール

$ brew update
# Java8のインストール
$ brew tap AdoptOpenJDK/openjdk
$ brew install adoptopenjdk8
# Java11のインストール
$ brew install java11
# Java17のインストール（実行時は17が最新）
# brew install java

jEnv インストール (bash)

$ brew update
$ brew install jenv
$ echo 'eval "$(jenv init -)"' >> ~/.bash_profile
$ jenv enable-plugin export

# java 8, 11, 17のインストールパスをjenvに設定
$ jenv add $(/usr/libexec/java_home)
$ jenv add /usr/local/opt/openjdk@11
$ jenv add /usr/local/opt/openjdk@17

# インストール後の確認　OKになってるはず
$ jenv doctor

切り替え方法

$ jenv versions
  system
  1.8
* 11 (set by /Users/oki/.jenv/version)
  17
...

$ jenv global 17
$ java -version
openjdk version "17" 2021-09-14
OpenJDK Runtime Environment Homebrew (build 17+0)
OpenJDK 64-Bit Server VM Homebrew (build 17+0, mixed mode, sharing)

実行環境

  • Mac OS mojave 10.14.6
  • Homebrew 3.2.17

Reference

【TODOアプリ】【Java】HTTP APIの作成 ~ 実装編 ~

Java API TODOアプリ

TODOアプリ用APIを作成します。Java + Spring Bootを使用して、MySQLサーバーへ登録・閲覧・編集・削除操作を実装します。細かい解説は省くのと、最小構成での実装方法をまとめます。（細かい解説は、別パートで解説したい、、）

実装手順

1. Spring Initializer からプロジェクトの雛形を作成する

f:id:toyukun:20211020220600p:plain
spring initializer sample

  • Spring Boot 2.6.5
  • Java 8

* lombok pluginを使用する場合はココをクリック

build.gradleに以下を追記

plugins {
    id 'org.springframework.boot' version '2.5.5'
    id 'io.spring.dependency-management' version '1.0.11.RELEASE'
    id 'java'
    id "io.freefair.lombok" version "6.2.0" <= これを追加
}

Spring Initializerからlombok選択した場合はこの作業をスキップしてください。

2. DB操作のモジュールの作成 (Repository)

データクラスのTaskEntity.javaを作成

@Getter
@Setter
@ToString
@Builder
@NoArgsConstructor
@AllArgsConstructor
@Entity
@Table(name = "tasks")
public class TaskEntity {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    private String title;

    private String description;
}

DB操作クラスのTaskRepository.javaを作成

public interface TaskRepository extends JpaRepository<TaskEntity, Long> {
}

3. HTTPルーティング用のモジュール作成 (Controller)

@RestController
@AllArgsConstructor
@RequestMapping("/tasks")
public class TaskController {
    // 上で作ったDB操作用モジュール
    private final TaskRepository repository;

    // 登録用
    @PostMapping
    @ResponseStatus(HttpStatus.CREATED)
    public TaskEntity createTask(@RequestBody CreateTaskRequest request) {
        val entity = TaskEntity.builder()
                               .title(request.getTitle())
                               .description(request.getDescription())
                               .build();
        return repository.save(entity);
    }

    // 一覧閲覧用
    @GetMapping
    public List<TaskEntity> getTasks() {
        return repository.findAll();
    }

    // 閲覧用
    @GetMapping("/{id}")
    public TaskEntity readTask(@PathVariable("id") Long id) {
        return repository.findById(id)
                         .orElseThrow(() -> new ResponseStatusException(HttpStatus.NOT_FOUND, "Data Not Found"));
    }

    // 編集用
    @PutMapping("/{id}")
    public TaskEntity updateTask(@PathVariable("id") Long id,
                                 @RequestBody CreateTaskRequest request) {
        val entity = repository.findById(id)
                               .orElse(TaskEntity.builder()
                                                 .title(request.getTitle())
                                                 .description(request.getDescription())
                                                 .build());
        return repository.save(entity);
    }

    // 削除用
    @DeleteMapping("/{id}")
    public void deleteTask(@PathVariable("id") Long id) {
        repository.deleteById(id);
    }
}

4. 設定ファイルを作成 (application.yml)

DB用のテーブル定義ファイル src/main/resources/sql/DDL.sql を作成

CRETATE DATABASE IF NOT EXISTS http_api_db;

CREATE TABLE IF NOT EXISTS `http_api_db`.`tasks`
(
    `id`          INT(11) PRIMARY KEY AUTO_INCREMENT,
    `title`       TEXT NOT NULL,
    `description` TEXT NOT NULL
) ENGINE = InnoDB
  CHARACTER SET utf8mb4
;

アプリケーション設定ファイル src/main/resources/application.ymlを作成

server:
  port: 8080

logging:
  file:
    name: "log/main.log"
  level:
    com.toyu.simple.http.api: DEBUG

spring:
  datasource:
    # 使用するMySQLサーバーの設定に合わせてください
    url: "jdbc:mysql://localhost:3306/http_api_db"
    username: "root"
    password: "rootpass"
    driver-class-name: "com.mysql.cj.jdbc.Driver"
  sql:
    init:
      schema-locations: "classpath:sql"

ローカル環境のMySQL構築方法は、前回の記事をご参考ください。

動作確認 (コマンドライン）

# アプリケーション実行(停止は、Ctrl + c)
$ ./gradlew bootRun
結果> ...（省略）
2021-10-24 15:11:03.121  INFO 58815 --- [           main] o.s.b.w.embedded.tomcat.TomcatWebServer  : Tomcat started on port(s): 8080 (http) with context path ''
2021-10-24 15:11:03.134  INFO 58815 --- [           main] com.toyu.simple.http.api.EntryPoint      : Started EntryPoint in 6.267 seconds (JVM running for 6.742)

# 登録
$ curl -X POST -H 'Content-Type: application/json' -d '{"title": "テストたいとる", "description": "説明をココに"}' http://localhost:8080/tasks
結果> {"id":2,"title":"テストたいとる","description":"説明をココに"}

# 閲覧
$ curl -X GET  http://localhost:8080/tasks/1
結果> {"id":1,"title":"テストたいとる","description":"説明をココに"

# 編集
curl -X PUT -H 'Content-Type: application/json' -d '{"title": "テストたいとる（編集後）", "description": "説明をココに（編集後）"}' http://localhost:8080/tasks/1
結果> {"id":1,"title":"説明をココに（編集後）","description":"description"}

# 削除
$ curl -X DELETE http://localhost:8080/tasks/1

サンプルコード

github.com

RabbidMQ 3.8.9 ローカル環境構築

RabbitMQ

RabbitMQ 3.8.9

Docker を使ったローカル環境構築手順

実行環境

  • Mac OS mojave 10.14.6
  • Docker Desktop 20.10.5
  • Docker Compose 1.28.5

ディレクトリ構成

.
├── docker-compose.yml
└── data
    └── xxx

方法

1. docker-compose.yml ファイルを作成 docker-compose.yml

version: '3'
services:
 rabbitmq:
    image: rabbitmq:3.8.9-management
    ports:
      - '5672:5672'
      - '15672:15672'
    volumes:
      - ./rabbitmq-data:/var/lib/rabbitmq
    # コンテナ名を明示的に指定する
    container_name: rabbitmq-container

2. コマンド実行

# 起動
$ docker-compose up

# 停止
$ docker-compose down

3. 動作確認

ブラウザから、http://localhost:15672/#/ へアクセス

初期ID: guest 、パスワード: guest

f:id:toyukun:20211019220134p:plain
RabbitMQコンソール

サンプルコード

github.com

MySQL Ver 8.0 ローカル環境構築

MySQL

MySQL Ver 8.0

Docker を使ったローカル環境構築手順

実行環境

  • Mac OS mojave 10.14.6
  • Docker Desktop 20.10.5
  • Docker Compose 1.28.5

ディレクトリ構成

.
├── docker-compose.yml
├── conf
│  └── my.cnf
├── data
│  └── xxx
└── logs
    ├── mysql-error.log
    ├── mysql-query.log
    └── mysql-slow.log

方法

  1. docker-compose.yml ファイルを作成 docker-compose.yml
version: "3"
services:
  db:
    image: mysql:8.0
    volumes:
      - ./conf/my.cnf:/etc/mysql/conf.d/my.cnf
      - ./data:/var/lib/mysql
      - ./logs:/var/log/mysql
    environment:
      - MYSQL_ROOT_PASSWORD=rootpass
      - TZ=Asia/Tokyo
    ports:
      - 3306:3306 # ホストポート:コンテナポート
    # コンテナ名を明示的に指定する
    container_name: mysql8-container
  1. MySQL設定ファイル作成 ./conf/my.cnf
# MySQLサーバーへの設定
[mysqld]
# 文字コード/照合順序の設定
character-set-server = utf8mb4
collation-server = utf8mb4_bin

# タイムゾーンの設定
default-time-zone = SYSTEM
log_timestamps = SYSTEM

# デフォルト認証プラグインの設定
default-authentication-plugin = mysql_native_password

# エラーログの設定
log-error = /var/log/mysql/mysql-error.log

# スロークエリログの設定
slow_query_log = 1
slow_query_log_file = /var/log/mysql/mysql-slow.log
long_query_time = 5.0
log_queries_not_using_indexes = 0

# 実行ログの設定
general_log = 1
general_log_file = /var/log/mysql/mysql-query.log

# mysqlオプションの設定
[mysql]
# 文字コードの設定
default-character-set = utf8mb4

# mysqlクライアントツールの設定
[client]
# 文字コードの設定
default-character-set = utf8mb4
  1. コマンド実行
# 起動
$ docker-compose up

# 停止
$ docker-compose down

# ログイン
$ docker exec -it mysql8-container bash
$ mysql -u root -prootpass

サンプルコード

github.com

ディレクトリ毎にgitの設定を切り替える方法

GIT

会社用と個人用等でディレクトリを分けて、gitconfigを切り替えたい場合

構成例

会社用ディレクトリ構成

~/company_repos
    ├─ RepositoryA
    └─ RepositoryB

個人用ディレクトリ構成

~/private_repos
    ├─ RepositoryC
    └─ RepositoryD

設定方法

$ mkdir ~/.gitconfig_profiles

$ echo -e "
[core]
\tsshCommand = "ssh -i ~/.ssh/${company用_id_rsa}_id_rsa -F /dev/null"
[user] 
\tname = company_username
\temail = company@address.com
"  > ~/.gitconfig_profiles/company

$ echo -e "
[core]
\tsshCommand = "ssh -i ~/.ssh/${private用_id_rsa}_id_rsa -F /dev/null"
[user] 
\tname = private_username
\temail = private@address.com
"  > ~/.gitconfig_profiles/private

$ git config --global -e

[user]直下に、以下を追加

[includeIf "gitdir:~/company_repos/"]
        path = ~/.gitconfig_profiles/company
[includeIf "gitdir:~/private_repos/"]
        path = ~/.gitconfig_profiles/private

Note:

  • .gitconfig_profilesのディレクトリを作成しprofile毎に管理
  • [core] 部分にプロファイルに応じてssh keyの切り替えを設定を記述
  • echo -eは、エスケープシーケンスを使用するため

記事のガイドライン

１日１記事を目安に書いていきます。

投稿する記事は、書き途中のものも含む。

忙しく書けない場合があると思うので、書き途中で投稿し後日更新するように。

WEBアプリのフロントエンドからバックエンド・インフラ等を中心に技術系の記事を書いていく。

理解のため読んだ本のまとめを書くこともします。著作権等に注意し、要約と自分の感想を交えて書くように。

記事を書くときに残した方が良い情報として

  • 実行環境の情報（OSのバージョンなど）
  • 使用するツールのバージョン
  • 投稿日（はてぶで見れるから書く必要ないかも）

を残すように心がける。

間違えてしまうことも多々あると思うので、記事はその都度更新するように心がける。

おわり