scale()

www.youtube.com

これをやってみました。モーダルの作り方はなんとなく知っていたが、モーダルのコンテンツが一瞬大きくなる方法が知れたのがよかった。

scale()

プロパティの名前からして挙動が推測できるが、これを使用すると拡張と縮小を制御できる。

transform: scale(1.2);

のように使うと、要素が1.2倍になるということのよう。

fold()を使って連続した時間をひとつの時間量オブジェクトにまとめる

問題

例えばこう言ったクラスがある場合に、

data class Duration(
    val start: LocalTime,
    val end: LocalTime
) {
    override fun toString(): String {
        return "$start - $end"
    }

    fun isContinuousFrom(from: Duration): Boolean {
        return from.end.plusMinutes(1) == start
    }
}

List<Duration>を作成して時間が隣り合った要素の時間が連続している場合にひとつのDurationオブジェクトとして再定義する、という要件を考える。
つまり、12:00 - 13:00, 13:01 - 14:00というリストの場合は12:00 - 14:00としたい。

解法

    val durations = listOf(
        Duration(
            LocalTime.of(15, 0),
            LocalTime.of(16, 0),
        ),
        Duration(
            LocalTime.of(16, 30),
            LocalTime.of(17, 0),
        ),
        Duration(
            LocalTime.of(17, 1),
            LocalTime.of(17, 20),
        ),
        Duration(
            LocalTime.of(18, 0),
            LocalTime.of(19, 40),
        ),
        Duration(
            LocalTime.of(19, 41),
            LocalTime.of(20, 0),
        ),
    )

    //1つ目の要素を初期値、2つ目以降の要素を連続しているかの判定用とする
    val compare = durations.drop(1)
    val result = compare.fold(durations.take(1)) { acc, duration ->
     
        if (duration.isContinuousFrom(acc.last())) {
            // このブロック内で、連続した時間の場合にオブジェクトを再生成してリストを構築している
            acc.dropLast(1) + Duration(acc.last().start, duration.end)
        } else {
            acc + duration
        }
    }

From React to Next.js

Getting Started with Next.js - From React to Next.js | Learn Next.js

これをやってみました。

  • Next.js は自動で<html><body>タグを生成してくれるようなので、明示的に書かなくてもOK
  • 表示するページはpagesフォルダに置くことでNext.jsが検知できるようにする。また、メインとなるReact Componentをexport defaultする。
  • 修正したコードは即座に反映される。これをFase Refreshという。
import { useState } from 'react';

function Header({ title }) {
  return <h1>{title ? title : 'Default title'}</h1>;
}

export default function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
  const [likes, setLikes] = useState(0);

  function handleClick() {
    setLikes(likes + 1);
  }

  return (
    <div>
      <Header title="Develop. Preview. Ship. 🚀" />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>

      <button onClick={handleClick}>Like ({likes})</button>
    </div>
  );
}

ドキュメントを書こう・・

現在携わっているサービスのドキュメントがあまりに少ないということで、チーム内でドキュメントをもっとちゃんと書きましょうとなった。 取り急ぎ、過去に参考になったページを貼り付けておく。

ドキュメント書くのって難しいですよね。

gfngfn.github.io

Webサービス作るなら

これ、やる

こちらも参考っと

zenn.dev