random.tagucch.dev

技術とかの雑なToday I Learnedメモ

プログラミングのためのBGM、宣言的UIってなに
bgm
JavaScript
UI

作業用 BGM

プログラマによるプログラミングのための BGM など、仕事や勉強の邪魔にならない無料で使えそうな BGM 集。2021 年版

なんかこの記事めちゃくちゃブクマついてたので見てみた。

最初のほうの lofi hip hop radio のチャンネルはちょくちょくサジェストされるのでたまに聞いていたりするけど、どんな感じかまったく記憶にない(作業用 BGM だからそういうものなのだろうか)

プログラマーがプログラミングしている映像つきの BGM というのは面白そう。今度作業用 BGM に困ったら流してみようかな。

頭文字 D のユーロビートが流れるやつも紹介されていて、ちょっと前にやけにユーロビートにハマった時期があってユーロビートを作業用 BGM にしていたことがあるので、意外とそういう人多いのかな？と思った。

記事の最後のほうに紹介されているいくつかも結構興味がある。

「Drive & Listen」は、世界中の都市の運転席からの風景と現地のラジオの音声が聞こえてくる Web サイトです。

めちゃくちゃよさそう。

朝の雑踏とかカフェの物音みたいな、環境音があったほうがより集中できるみたいな話もよく聞くので、カフェの環境音を流しつつ作業用 BGM を流したら「カフェで作業用 BGM を流しながら作業している」状態みたいな感じになるのかな？よさそう。

宣言的 UI is 何

宣言的 UI が何か分からなかったので調べてみた

よく言葉の意味を忘れるんだけど、そのうちのひとつの「宣言的」という言葉についてたまに調べて覚えて忘れてを繰り返している気がするのでここにメモっておく。

そもそも「命令的」という概念があって、以下のようなコードを指す(記事内から引用)

const input = document.querySelector('.input')
input.addEventListener('input', inputFunc)

const p = document.getElementsByTagName('p')
function inputFunc(event) {
  const message = event.target.value
  // 入力反映
  const p1 = p[0]
  p.innerText = '「' + message + '」という値が入力されました。'

  // 文字数カウント
  const p2 = p[1]
  p2.innerText = message.length
}

このコードは、「最初に ○○ をして」「次は ○○ をして」「これがあったら ○○ を作って」のような命令が続く書き方なので命令的、ということか。

ほしい UI を実現するために、あれしてこれしてといった命令を出さなければいけないので、「完成形の UI とそれを実現するためのコードが分離していて分かりにくい」というのが悩みのひとつ。たしかに分かりにくい。コードからどんな UI ができるのか想像がつかない。

そこで宣言的 UI。(コードは記事内から引用)

<template>
  <div>
    <input type="text" :value="message" @input="inputFunc" />

    <p>「{{ message }}」という値が入力されました。</p>
    <p>{{ message.length }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '',
    }
  },
  methods: {
    inputFunc(event) {
      this.message = event.target.value
    },
  },
}
</script>

あらかじめ「完成形の UI はだいたいこんな感じで、必要に応じて変化する部分は適宜埋めてね」みたいな感じでコードを書けるので、直感的で分かりやすい。

つまり、宣言的 UI とは「完成形の UI」を宣言的に記述することという感じ(そのまますぎる)

そのまますぎるけど、分かりやすかったし理解できた。忘れたらまたここを見に来よう。そのためのメモなので。

← Back To Home