【JavaScript/Vue.js】Vue.jsとVuetifyを使ってTodoリストを作ってみた

ちょっと会社でVueを触る機会があったので、勉強がてらTodoリストを作ってみました。
リポジトリと動作サンプルは下記
GitHub - beatdjam/training_vue-cli-todo
サンプルページ

やったこと

vue-cliインストール

$ npm install -g @vue/cli

プロジェクト作成

$ vue create my-project

Vuetify導入

$ vue add vuetify

ファイル整理

Todoを作り始めるにあたっていらないファイルを削除
[remove]Unnecessary files removed · beatdjam/training_vue-cli-todo@3fb851f · GitHub

完成イメージを考える

適当にUIイメージをメモに書き出すなど

必要なComponentをVuetifyのサイトで検索して配置

とりあえず今回はこの辺のドキュメントをサラッと眺めました

• v-toolbar
• v-form
• v-text-field
• v-btn
• v-date-picker
• v-list
• v-checkbox
• v-icon

Quick Start — Vuetify.js

追加・削除の処理などを実装

コンポーネントに頼ったので、ロジック的には追加・削除しか書かずに実装できました。

Github Pagesに公開

下記のページを参考に設定
https://www.shookuro.com/entry/2019/02/02/174655

感想

Vue.jsの機能とVuetifyのコンポーネント群を利用することで、
曖昧な理解でも簡単にそれなりのアプリケーションを構築することができてしまいました。
小さめのプロダクトをスモールスタートするときに使うには良いと思います。
ただ、jQuery等と同様に、裏側の処理等を知らないまま負債を積み上げてしまうような気がしました。
最近 Vue.js入門 基礎から実践アプリケーション開発まで を購入したので、
読み進めながらもっと勉強していきたいと思います。

Vue.js入門 基礎から実践アプリケーション開発まで

【Kotlin】data classにJavaから呼び出せるBuilderを用意する

はじめに

Kotlinには名前付き引数を利用することができるので、
コンストラクタに渡す引数をわかりやすく記述することができます。

Person(
  name = "taro",
  age = 20
)

しかし、JavaとKotlinが混在している場合は、Javaからは名前付き引数の仕組みを利用できません。
そうした場合には、KotlinのclassにBuilderを定義することで、
Java、Kotlin両方から扱いやすいclassにすることができます。

data classにBuilderを定義した例

以下の例はKotlinのdata classにBuilderを定義したものです。

data class Person(
    val name : String,
    val age : Int
) {
    class Builder(
        private var name : String? = null,
        private var age : Int? = null
    ) {
        fun name(name : String) = this.also { it.name = name }
        fun age(age : Int) = this.also { it.age = age }
        fun build() = Person(this.name!!, this.age!!)
    }
    companion object {
        @JvmStatic
        fun builder() = Builder()
    }
}

Kotlin・Javaからの呼び出し方

このdata classは、Kotlinからは冒頭と同様に下記の形でインスタンスを作成できますし、

Person(
  name = "taro",
  age = 20
)

Javaからはこのように呼ぶことができます。

Person.builder()
  .name("taro")
  .age(20)
  .build();

より良い書き方があるかもしれないので、ご存知の方はコメントなどでお知らせください。

【雑記】29歳になりました。

さて、まぁ掲題の通りなんですが、29歳になりました。
(この記事は予約投稿なので書いているときはまだ28ですが) ついに20代最後の歳ですね。

前置き

元号が令和に切り替わり、GWも折り返しを過ぎちゃいましたね。
私は連休中、Androidの勉強をしたり、普段できていない部屋の片付けをしたりしていました。
本当は最近一番ハマっているストVもやりたいんですが、なかなかまとまった時間が取れてなくて…
(IDはbeatbeat-djamです！フレンド募集してます！)

近況報告

近況ですが、

• 仕事とかプログラミングとか
  500人未満くらいの規模の自社サービスの会社で、
  アプリのサーバーサイドをメインにいくつかのサービスを持たせてもらってます。
  毎日Kotlinが書けて楽しい！
  今年は未経験領域への挑戦として、Android勉強してアプリリリースまでしようと思ってます。
  できるといいなぁ。
  スキルセットその他の話はProfileを参照くださいな。

• 私生活
  妻と喧嘩したり仲直りしながらも、なんとかうまくやってこれています。
  転職を機に前職より少し忙しくなったので、家庭の時間が少なくなっているのがネックです…。
  母子家庭の一人っ子、かつ大学以来一人暮らしだった自分が人と暮らすのはなかなか容易ではなく、
  今でも妻に迷惑をかけることしきりです。改善していきたいですね…。
  あとは相も変わらず金欠です。奨学金ェ…

といった感じです。

振り返りとか

思えば20代後半は決断の時期でした。
今まで人に流されて生きてきた自分が、結婚・転職と人生を変える決断を二度もしています。
どちらもいい選択だったと思っているし、決断できてよかったなと思っています。
これからの一年が30代前半を決める事になっていくと思うので、
この気持ちを一年後も持っていられるように努力を続けていきたいですね。

何はともあれ、この記事を見て頂いてる方々と結ばせていただいたご縁と共に、
また一年頑張っていこうと思っています。
引き続きいろいろご迷惑をおかけすると思いますが、仲良くしてくださいね。

ぷれぜんとこ〜な〜

以下お約束で置いているだけですがプレゼントコーナーです。

• ほしいものリスト
  https://www.amazon.jp/hz/wishlist/ls/Y51M0G89KP09