目的

Object.definePropertyの getter/setter を使って簡易的な Vue のリアクティブシステムを実装していくことがこの記事の目的です。実装は、Vue Mastery の「Build a Reactivity System」を参考にしています。

https://www.vuemastery.com/courses/advanced-components/build-a-reactivity-system

公式ドキュメントによると...

Vue2 のリアクティブシステムは、Object.definePropertyの getter/setter を使って実装されています。これについては Vue 公式ドキュメントの「リアクティブの探求」のセクションで触れられています。

プレーンな JavaScript オブジェクトを data オプションとして Vue インスタンスに渡すとき、Vue はその全てのプロパティを渡り歩いて、それらを Object.defineProperty を使用して getter/setter に変換します。
https://jp.vuejs.org/v2/guide/reactivity.html

Object.defineProperty のド基礎

Object.definePropertyの公式ドキュメントです。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

ディスクリプターとは

Javascript のオブジェクトは、値（value）以外に詳細設定を持っています。詳細設定は、ディスクリプターと呼ばれており、例えば、書き換え可能なオブジェクトなのかどうか、などがあります。

// ふつうのオブジェクト。値以外に詳細設定を持つ。
const obj = { name: 0 };

ディスクリプターは、getOwnPropertyDescriptorで確認することができ、ふつうにオブジェクトを定義した場合のデフォルト値はtrueになります。例えば、書き換え可能なオブジェクトかどうかを表すディスクリプターはwritableであり、以下の例は、trueなので書き換え可能である、ということになります。

const obj = { name: 0 };
const descriptor = Object.getOwnPropertyDescriptor(obj, 'name')
console.log(descriptor)
// {value: 0, writable: true, enumerable: true, configurable: true}

definePropertyで定義した場合は、ふつうにオブジェクトを定義した場合の挙動と異なり、デフォルト値はfalseになります。

const obj = {};
Object.defineProperty(obj, 'name', {
    value: 43
})
console.log(obj)
Object.getOwnPropertyDescriptor(obj, 'name')
// {value: 43, writable: false, enumerable: false, configurable: false}

getter/setter もディスクリプター

getter/setter は、オプショナルなディスクリプターで、デフォルト値はundefinedなので、使いたい場合は追加で定義する必要があります。

const obj = { _name: 'qiita' };
Object.defineProperty(obj, 'name', {
    get: function() {
        return this._name;
    },
    set: function (val) {
        this._name = val
    }
})
obj.name
// "qiita"

obj.name = 'twitter'
// "twitter"

obj.name
// "twitter"

obj.nameでは、getter経由でqiitaという戻り値があり、obj.name = 'twitter'では、setter経由でtwitterを書き換えています。

ここらへんから、けっこう Vue のリアクティブなコードの記法と一緒なので、これが Vue のリアクティブシステムのコアであると言われてるとわりとすんなり理解できる気がしています。

変更が追跡できないパターン

Object.definePropertyの getter/setter によってリアクティブシステムは実装されているため、 getter/setter のリアクティブの限界が Vue のリアクティブの限界でもあります（一部は Vue が補っている部分もあるため、完全なイコールではないです）。

例えば、配列への要素の追加の変更は追跡できないため、リアクティブになりません。

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // is NOT reactive
vm.items.length = 2 // is NOT reactive

リアクティブシステムを Javascript で実装する

目的地

すごくシンプルなpriceとquantityの乗算によって、totalPriceを算出する Vue のコードをObject.definePropertyの getter/setter を使って実装していきます。

以下は、すごくシンプルな Vue のコードです。これと同じことを Javasciript で実装します。

<div id="app">
    <div>Price: ${{ price }}</div>
    <div>Total: ${{ totalPrice }}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      price: 5.00,
      quantity: 2
    },
    computed: {
      totalPrice() {
        return this.price * this.quantity
      }
    }
  })
</script>

実装する ~その1~

まずは、オブジェクトの定義から書いていきます。

let data = { price: 5, quantity: 2 }

次は、priceあるいはquantityの値が変更されたときの再計算の関数を定義します.
targetが呼ばれ、data.totalの再計算が行われます。

let target = null
target = function () {
    data.total = data.price * data.quantity
}

次にdataに対して、getter/setter を設定します。

let internalValue = data.price
Object.defineProperty(data, 'price', {
    get() {
        return internalValue
    },
    set(newVal) {
        internalValue = newVal
        target()
    }
})

現時点の動作を確認すると、data.price = 10の実行により、setter が呼ばれ、その中でtarget()が実行されることで、data.totalが更新されています。

data.total
// undefined
data.price = 10
// 10
data.total
// 20

ここまで実装すれば、リアクティブの実装の仕組みは理解できたはずです。

実装する ~その2~

このコーディングには以下の2点の問題があります。
- quantity のリアクティブの実装はまだしていない
- コードに柔軟性が足りない

quantityの getter/setter を定義したいですが、もう一つdefinePropertyを書くのはナンセンスです。また、今はpriceの値が変更されればtarget()を実行することを決め打ちで書いているので、set()に直接、target()を書いていますが、他の関数にしたいなどの要望があると追加しづらいです。

そのため、次は、依存関係を管理するクラスを定義します。
ようは、data.priceの値が書き換えられたら、target()を実行する必要がある、という依存関係を管理します。

Depクラスを定義し、値が変更されたときに実行する関数（依存関係）をdepend()によってsubscribersリストに格納しています。これはあくまでも依存関係を取得しているのみであり、実際に値が変更されたときは、notify()によって、実行する関数を呼びます。

class Dep {
  constructor () {
    this.subscribers = [] 
  }
  depend() {
    if (target && !this.subscribers.includes(target)) {
      this.subscribers.push(target)
    } 
  }
  notify() {
    this.subscribers.forEach(sub => sub())
  }
}

dataのキーが複数でも問題ないようにObject.keysでの実装に書き換えています。また、get()でdep.depend()を実行することで、依存関係を取得し、値が書き換えられるset()でdep.notify()を実行することで、実行する関数を読んでいます。

Object.keys(data).forEach(key => {
    let internalValue = data[key]
    const dep = new Dep()

    Object.defineProperty(data, key, {
        get() {
            dep.depend()
            return internalValue
        },
        set(newVal) {
            internalValue = newVal
            dep.notify()

        }
    })
})

最後にwatcher()を定義し、ここでやっとtarget()は実行されます。watcher()でラップしているのは、target()以外の関数でもいいようにです。

function watcher(myFunc) {
    target = myFunc
    target()
    target = null
}

watcher(target)

最終成果物

実行結果。

data.price = 50
// 50
data.total
// 100
data.quantity = 100
// 100
data.total
// 5000

コード。

let data = { price: 5, quantity: 2 }

let target = null
target = function () {
    data.total = data.price * data.quantity
}

class Dep {
    constructor () {
    this.subscribers = [] 
    }
    depend() {
    if (target && !this.subscribers.includes(target)) {
        // Only if there is a target & it's not already subscribed
        this.subscribers.push(target)
    } 
    }
    notify() {
    this.subscribers.forEach(sub => sub())
    }
}

Object.keys(data).forEach(key => {
    let internalValue = data[key]
    const dep = new Dep()

    Object.defineProperty(data, key, {
        get() {
            dep.depend()
            // console.log('i was assessed', internalValue)
            return internalValue
        },
        set(newVal) {
            // console.log('i was changed', internalValue, newVal)
            internalValue = newVal
            dep.notify()

        }
    })
})

function watcher(myFunc) {
    target = myFunc
    target()
    target = null
}
watcher(target)

まとめ

definePropertyの基礎から、簡単な Vue のリアクティブの実装をしました。
かなりシンプルですが、Vue のリアクティブシステムの実装ができたかと思います。

Vue3 からは、リアクティブの実装はProxyオブジェクトを使用されているため、少し挙動は変わるようなので、次はそっちも見ていきたいです。

フロント側：レンダリング以前に必要なデータの読み込み方法

　- HTMLヘッダ内にデータ読み込みのJavascriptを指定する。
　- Javascriptはサーバサイドで動的に作成する。
　- javascriptの読み込みはpreload属性をつける。

MDN web docs：rel="preload" によるコンテンツの先読み
　

head

<head>
<link rel="preload" href="htts://www.example.com/app/preset" as="script">
</head>

• headの内容を読み込まないとbody移行の処理は実行されないが、事前データはすべて揃ってから後段の処理をするため、この読み込みの仕様に即するほうが合目的である。
• Ajaxなどで同期で読み込むとレンダリングの遅延が発生する。
• 非同期であっても、読み込み完了のチェックを検査するため、やはりレンダリング遅延が発生する。
• 上記のようにヘッダ内で、動的に作成するJavascripをpreloadで読み込めば、読み込みが完了してから後段の処理が実行されるため、部分的なレンダリング遅延などは起らない。
• そもそも事前に送信するデータ量を押さえれば画面が真っ白になることはほぼない。（おそらく認証データや初回表示データぐらいなら問題ない。経験的にも）

サーバ側：動的にJavascriptファイルを作成

• 認証データなど事前に必要となるデータをJavascriptファイルとして動的に送信するAPIを作成する。
• 以下、PHPでの例。
• windowオブジェクトに値を設定するコードを返却
• windowオブジェクトは事前データとして必ずアクセスでき、グローバル参照可能。

preset.php

//-------------------------------------------------------------------------
// http://www.example.com/app/prestでアクセスした場合に以下を返却
//-------------------------------------------------------------------------
//スクリプトを返すヘッダを送信
$data = ['auth' => 1];
$json = json_encode($data);
header('Content-Type: application/x-javascript; charset=utf-8');
echo "(function(){window[\"preset\"} = ${json};)();";

フロント側：データの取得

windowオブジェクトに設定されたデータを読み込む。

init.js

document.addEventListener("DOMContentLoaded", () => {

  //presetキーのチェック（なければ終了）
  if(false === 'preset' in window)return;

  //authキーのチェック（なければ終了）
  if(false === 'auth' in window.preset)return;

  //認証チェック(フラグが1でなければ終了）
  if(1 !== Number(window.preset.auth)) return;

  //認証成功
  alert('valid user!');
});

備考

• 実際に、上記の方法で、初回表示でコンテンツが真っ白になったりすることはほぼなくなった。
• サーバサイドレンダリングをしなくてもこの方法でレンダリングの遅延はある程度防げる。

フロント側：レンダリング以前に必要なデータの読み込み方法

　- HTMLのhead内にデータ読み込みのJavascriptを指定する。
　- Javascriptはサーバサイドで動的に作成する。
　- Javascriptの読み込みはpreload属性をつける。

MDN web docs：rel="preload" によるコンテンツの先読み
　

head

<head>
<link rel="preload" href="htts://www.example.com/app/preset" as="script">
</head>

• headの内容を読み込まないとbody移行の処理は実行されないが、事前データはすべて揃ってから後段の処理したい為、この読み込みの仕様に即するほうが合目的である。
• Ajaxなどで同期で読み込むとレンダリングの遅延が発生する。
• 非同期であっても、読み込み完了のチェックを検査するため、やはりレンダリング遅延が発生する。
• 上記のようにヘッダ内で、動的に作成するJavascripをpreloadで読み込めば、読み込みが完了してから後段の処理が実行されるため、部分的なレンダリング遅延などは起らない。
• そもそも事前に送信するデータ量を抑えれば画面が真っ白になることはほぼない。（おそらく認証データや初回表示データぐらいなら問題ない。経験的にも。）

サーバ側：動的にJavascriptファイルを作成

• 認証データなど事前に必要となるデータをJavascriptファイルとして動的に送信するAPIを作成する。
• 以下、PHPでの例。
• windowオブジェクトに値を設定するコードを返却
• windowオブジェクトは事前データとして必ずアクセスでき、グローバル参照可能。
• 以下は、簡易的にしているが、windowsの直下はアプリケーションを識別するプロジェクトキーをつけるといいかもしれない。

preset.php

//-------------------------------------------------------------------------
// http://www.example.com/app/prestでアクセスした場合に以下を返却
//-------------------------------------------------------------------------

//スクリプトを返すヘッダを送信
header('Content-Type: application/x-javascript; charset=utf-8');

//送信するデータのJSONを作成
$data = ['auth' => 1];
$json = json_encode($data);

//事前設定データをJavascriptのwindowオブジェクトに設定するコードを送信
echo "(function(){window[\"preset\"} = ${json};)();";

フロント側：データの取得

• windowオブジェクトに設定されたデータを読み込む。

init.js

document.addEventListener("DOMContentLoaded", () => {

  //presetキーのチェック（なければ終了）
  if(false === 'preset' in window)return;

  //authキーのチェック（なければ終了）
  if(false === 'auth' in window.preset)return;

  //認証チェック(フラグが1でなければ終了）
  if(1 !== Number(window.preset.auth)) return;

  //認証成功
  alert('valid user!');
});

備考

• 実際に、上記の方法で、初回表示でコンテンツが真っ白になったりすることはほぼなくなった。
• サーバサイドレンダリングをしなくてもこの方法でレンダリングの遅延はある程度防げる。
• 事前に読み込むデータは1つのソース、つまり、HTMLのheadには１つのタグのみ指定し、その中で必要なデータすべてを受け取るようにする方が、アクセス回数を減らせるので良い。
• 事前データを１つのアクセスで取得する場合、RESTful設計のリソースの考え方を広げて考える必要がある。DBテーブルなど一つのリソースを統合した、「commonSet」、「sharedSet」など統合リソースを作るほうがよいと思う。

shared_set.php

$data = [
  'auth' => [ 'name' => 'test user'],
  'products' => $products
];
$json = json_encode($data);

0. 目的

• ユーザーの操作が関係しない、事前にサーバサイドで設定できるデータ（例えば認証結果）をフロントのJSに送信する。
• 上記のデータをレンダリングの遅延なく読み込む。つまり、画面が白くなったり、コンポーネントに一時的にデータがない状態を防ぐ。

1. フロント側：レンダリング以前に必要なデータの読み込み方法

　- HTMLのhead内にデータ読み込みのJavascriptを指定する。
　- Javascriptはサーバサイドで動的に作成する。
　- Javascriptの読み込みはpreload属性をつける。

MDN web docs：rel="preload" によるコンテンツの先読み
　

head

<head>
<link rel="preload" href="htts://www.example.com/app/preset" as="script">
</head>

• headの内容を読み込まないとbody移行の処理は実行されないが、事前データはすべて揃ってから後段の処理を実行したい為、この読み込みの仕様に即するほうが合目的である。
• Ajaxなどで同期で読み込むとレンダリングの遅延が発生する。
• 非同期であっても、読み込み完了のチェックを検査するため、やはりレンダリング遅延が発生する。
• 上記のようにヘッダ内で、動的に作成するJavascripをpreloadで読み込めば、読み込みが完了してから後段の処理が実行されるため、部分的なレンダリング遅延などは起らない。
• そもそも事前に送信するデータ量を抑えれば画面が真っ白になることはほぼない。（おそらく認証データや初回表示データぐらいなら問題ない。経験的にも。）

2. サーバ側：動的にJavascriptファイルを作成

• 認証データなど事前に必要となるデータをJavascriptファイルとして動的に送信するAPIを作成する。
• 以下、PHPでの例。
• windowオブジェクトに値を設定するコードを返却。
• windowオブジェクトは事前データとして必ずアクセスでき、グローバル参照可能。
• 以下は、簡易的にしているが、windowsの直下はアプリケーションを識別するプロジェクトキーをつけるといいかもしれない。

preset.php

//-------------------------------------------------------------------------
// http://www.example.com/app/prestでアクセスした場合に以下を返却
//-------------------------------------------------------------------------

//スクリプトを返すヘッダを送信
header('Content-Type: application/x-javascript; charset=utf-8');

//送信するデータのJSONを作成
$data = ['auth' => 1];
$json = json_encode($data);

//事前設定データをJavascriptのwindowオブジェクトに設定するコードを送信
echo "(function(){window[\"preset\"] = ${json};)();";

3. フロント側：データの取得

• windowオブジェクトに設定されたデータを読み込む。

init.js

document.addEventListener("DOMContentLoaded", () => {

  //presetキーのチェック（なければ終了）
  if(false === 'preset' in window)return;

  //authキーのチェック（なければ終了）
  if(false === 'auth' in window.preset)return;

  //認証チェック(フラグが1でなければ終了）
  if(1 !== Number(window.preset.auth)) return;

  //認証成功
  alert('valid user!');
});

4. 備考

• 実際に、上記の方法で、初回表示でコンテンツが真っ白になったりすることはほぼなくなった。
• サーバサイドレンダリングをしなくてもこの方法でレンダリングの遅延はある程度防げる。
• データがない場合は、空文字（何も文字がない、Empty）を返し、無駄なJsの処理を発生させない。
• 事前に読み込むデータは1つのソース、つまり、HTMLのheadには１つのタグのみ指定し、その中で必要なデータすべてを受け取るようにする方が、アクセス回数を減らせるので良い。
• 事前データを１つのアクセスで取得する場合、RESTful設計のリソースの考え方を広げて考える必要がある。複数のDBテーブルのデータを統合した、「commonSet」、「sharedSet」など統合リソースを作るほうがよいと思う。
• RESTful設計でなく、GraphQLなら柔軟に設計できると思う。

shared_set.php

$data = [
  'auth' => [ 'name' => 'test user'],
  'products' => $products
];
$json = json_encode($data);

実務未経験者です。
ポートフォリオに組み込んだGoogleMapsAPI関連について、作っておきながら面談で全く説明できなかったので、
頭を整理するために流れをまとめたものを書いてみます。

アプリ: ラーメン屋の写真や情報を友達と共有できるSNS
Ruby: 2.6.5
Rails: 5.2.0
前提: GoogleCloudPlatformでAPIキーを取得すること

投稿内容から緯度経度情報を保存

postモデルでbefore_save時 (投稿保存する時)にgeocodeメソッドを呼ぶ。
geocodeメソッドでは、バリデーションの後にGeocoding APIを使って
店名と最寄駅情報から緯度経度を取得、緯度経度カラムに保存させている。

shop_nameカラム: 店名情報
nearestカラム: 最寄駅情報 (とてもわかりにくい)
latitudeカラム: 緯度情報
longitudeカラム: 経度情報

app/models/post.rb

class Post < ApplicationRecord
  ~
  ~
  before_save :geocode
  ~
  ~

  private
    def geocode
      uri = URI.escape(
        "https://maps.googleapis.com/maps/api/geocode/json?address="
        + self.shop_name 
        + " "
        + self.nearest
        + "&key=" + Rails.application.credentials.GCP[:API_KEY] # APIキーを入れてください
      )
      res = HTTP.get(uri).to_s
      response = JSON.parse(res)
      if response["status"] == "OK"
        self.latitude = response["results"][0]["geometry"]["location"]["lat"]
        self.longitude = response["results"][0]["geometry"]["location"]["lng"]
      else
        self.latitude = 1
        self.longitude = 1
      end
    end
end

geocordingAPIを使って緯度経度情報を取得するには、下記のURIを用います。

https://maps.googleapis.com/maps/api/geocode/json?address=緯度経度情報を調べたい住所など&key=APIキー

投稿詳細画面

app/views/posts/show.html.erb

・
・
<div class="post_map">
　<div id="map"></div> <!-- cssでwidth, heightを指定しないと地図が表示されません -->
</div>
・
・
<script>
var latLng;
var marker;
var infoWindow;
function initMap() {
  latLng = {lat: <%= @post.latitude %>, lng: <%= @post.longitude %>};
  map = new google.maps.Map(document.getElementById('map'), {
    center: latLng,
    zoom: 15,
    mapTypeControl: false,
    streetViewControl: false
  });
  marker = new google.maps.Marker({
    position: latLng,
    map: map
  });
  infoWindow = new google.maps.InfoWindow({
    content: "<a href='http://www.google.com/search?q=<%= @post.shop_name %> <%= @post.nearest %>' target='_blank' style='color: #00f;'><%= @post.shop_name %> を検索</a><br><br><a href='http://www.google.com/search?q=<%= @post.shop_name %> ラーメン&tbm=isch' target='_blank'>画像検索 by google</a>"
  });
  marker.addListener('click', function() {
    infoWindow.open(map, marker);
  });
}
initMap();
</script>

app/views/layouts/application.html.erb(レイアウトファイル)

<!DOCTYPE html>
<html>
  <head>
    <title>・・・・・・</title>
    <!-- APIキーを読み込んでいます -->
    <script src="https://maps.googleapis.com/maps/api/js?key=<%= Rails.application.credentials.GCP[:API_KEY] %>&callback=initMap" defer></script>
    ・
    ・
    ・
  </head>
  <body>
    ・
    ・
    <%= yield %>
    ・
  </body>
</html>

地図から投稿を検索できるようにする

form_with と radio_button で、どのユーザーの投稿を地図に表示させるか選択する
↓
mapsコントローラのmapアクションで、投稿内容を含む変数@postsを定義
(投稿内容は.to_jsonでjson形式に変換、respond_to doで返す)
↓
アクション名と同じmap.js.erbがRailsによって自動的に開かれ、@postsを受け取り、
地図とマーカー (投稿内容)をセット

app/views/maps/index.html.erb

<%= form_with url: map_request_path, method: :get do |f| %>
  <%= f.radio_button :posts, "all_user", checked: true %>全てのユーザーの投稿
  <%= f.radio_button :posts, "following", disabled: current_user.nil? %>自分とフォロー中のユーザーの投稿
  <%= f.radio_button :posts, "current_user", disabled: current_user.nil? %>自分の投稿
  <%= f.submit '投稿されたお店を表示', class: "btn btn-primary" %>
  <button type="button" class="btn btn-success current_position" onclick="getLocation()">
    地図を現在地周辺に切り替える
  </button>
<% end %>

<div id="map_index"></div> <!-- cssでwidth, heightを指定しないと表示されません -->
<script>
  var map
  function initMap(){
    map = new google.maps.Map(document.getElementById('map_index'), {
    center: {lat: 37.67229496806523, lng: 137.88838989062504}, // 地図の中心を指定
    zoom: 6, // 地図のズームを指定
    mapTypeControl: false,
    streetViewControl: false
    });
  }
  function getLocation(){ // 現在地周辺に地図を移動させる
    navigator.geolocation.getCurrentPosition(
      function(position) {
        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;
        var latlng = new google.maps.LatLng(latitude, longitude);
        map.setCenter(latlng);
        map.setZoom(12);
      }
    );
  }
  initMap();
</script>

config/routes.rb

Rails.application.routes.draw do
  ~
  ~
  resources :maps, only: [:index]
  get '/map_request', to: 'maps#map', as: 'map_request'
end

app/controllers/maps_controller.rb

class MapsController < ApplicationController
  def index
  end

  def map
    if params[:posts] == "all_user"
      @posts = Post.all.to_json.html_safe
    elsif params[:posts] == "current_user"
      @posts = current_user.posts.to_json.html_safe
    elsif params[:posts] == "following"
      @posts = current_user.feed.to_json.html_safe
    end
    respond_to do |format|
      format.js { @posts }
    end
  end
end

app/views/maps/map.js.erb

var posts = <%= @posts %>;
var marker = [];
var infoWindow = [];
function initMap(){
  for (let i = 0; i < posts.length; i++) {
    marker[i] = new google.maps.Marker({
      position: {lat: parseFloat(posts[i].latitude), lng: parseFloat(posts[i].longitude)},
      map: map,
      animation: google.maps.Animation.DROP
    });
    infoWindow[i] = new google.maps.InfoWindow({
      content: posts[i].shop_name + "<br>" + "<a href='/posts/" + posts[i].id + "' target='_blank' style='color: #00f;'>このお店に関する投稿を表示</a>"
    });
    markerEvent(i);
  }
};
initMap();

function markerEvent(i) {
  marker[i].addListener('click', function() { // マーカーをクリックしたとき
    infoWindow[i].open(map, marker[i]); // 吹き出しの表示
  });
}

こんな感じ

参考にさせていただきました

Rails5でGoogleMapを表示してみるまで
【Google MAP】名称から場所を検索・特定する

JavaScriptの基本

JavaScript(EC6)の基本的な構文をまとめました。
JavaScriptでの書き方を見返すためのチートシートとして作成しました。

出力

//コンソールへの出力
console.log("hogehoge");

テンプレートリテラル

let name = "佐藤";
//変数や定数を文字列に埋め込んで出力する場合には以下が必要
//①バッククォート(`)で囲む
//②${}で囲む
console.log(`名前は${name}です`);
//名前は佐藤ですが出力される

変数・定数の定義

var(変数)

再定義：可能
再代入：可能

var name = "佐藤";
console.log(name); //佐藤が出力される

var name = "田中";
console.log(name); //田中が出力される(再定義可能)

name = "鈴木";
console.log(name); //鈴木が出力される(再代入可能)

let(変数)

再定義：不可能
再代入：可能

let name = "佐藤";
console.log(name); //佐藤が出力される

let name = "田中";
console.log(name); //エラーになる(再定義不可能)

name = "鈴木";
console.log(name); //鈴木が出力される(再代入可能)

const(定数)

再定義：不可能
再代入：不可能
これで定義された定数は必ず同じ値が入っていることを保証できる

const name = "佐藤";
console.log(name); //佐藤が出力される

const name = "田中";
console.log(name); //エラーになる(再定義不可能)

const name = "鈴木";
console.log(name); //エラーになる(再代入不可能)

if文(条件分岐)

与えた条件によって処理を分岐させたい場合

if(条件式1){
  条件式1がtrueなら実行する処理
} else if(条件式2) {
  条件式2がtrueなら実行する処理
} else {
  条件式が全てfalseなら実行する処理
}

switch文(条件分岐)

switch(num){
  case 2:
    console.log("2です");
    break;
  case 3:
    console.log("3です");
    break;
  default:
    console.log("当てはまる数字はない")
    break;
}

breakはswitch文を抜け出すために記述するもの。case2だった場合にbreakを書かないとcase3の処理もdefaultの処理も実行してしまう。

defaultは当てはまるケースがない場合に実行する処理を記述する

繰り返し処理

while

基本の形
いずれ条件式がfalseになる処理を記述しないと無限ループしてしまう

while (条件式) {
  条件式がtrueなら実行する処理
}

記述の例
numberが100以下ならばその数字を出力をする

let number = 1;         //変数numberに1を定義
while (number <= 100) { //①numberに入っている数字が100以下ならtrueを返す。falseなら処理終了
  console.log(number);  //②numberに入っている数字を出力する
  number += 1;          //③numberに入っている数字に1を足す
}                       //再び①の処理に戻る

for

while文よりも記述が少なくかける繰り返し処理
forの(　)内に記述する処理は;で区切る

for(変数の定義; 条件式; 変数の更新){
  処理
}

記述の例
numberが100以下ならばその数字を出力する

//下記は以下を行なっている
//変数numberに1を入れて定義
//numberが100以下ならばtrueを返す。falseならば処理狩猟
//numberに1を足す
for(let number = 1; number <= 100; number += 1){
  console.log(number); //numberが出力される
}

配列

配列は[ ]で囲むことで定義できる。
配列の中の値にはインデックス番号(順番)がついている。この番号は0から始まるので注意。
例として下の配列の中の1のインデックス番号は0である。

const number = [1, 2, 3, 4];

インデックス番号を指定すると値を指定できる

console.log(number[0]); //1が出力される

オブジェクト

オブジェクトはプロパティと値をセットで持つことができる。
オブジェクトは{}で囲む
プロパティと値の間には:をいれる

const food = {name: "おにぎり", price: 150};

オブジェクトのプロパティを指定して値を取り出すことができる

console.log(food.name); //おにぎりが出力される

undefind

オブジェクトにないプロパティを指定するとundefindとなる

console.log(food.size); //存在しないsizeを指定すると
                        //undefindが出力される

関数

関数とはいくつかの処理をまとめたものである。

関数の定義

基本の定義

const 定数名 = function() {
  //処理
}

上記の形で処理を定数名をつけてまとめることができる。

アロー関数

functionを書くよりも() =>を使ってシンプルに書くことができる。

const 定数名 = () => {
  //処理
}

引数が必要な場合には以下のように記述する

const 定数名 = (引数) => {
  //処理
}

戻り値

関数から返ってくる値を戻り値という
戻り値を返すにはreturnを使用する

//引数に受け取った値を2倍にして戻り値として返す関数であるdoubleNumberを定義
const doubleNumber = (num) => {
  return num * 2; //returnが無いと戻り値を返せない
}

//変数resultに関数doubleNumberの戻り値を代入。引数は1
let result = doubleNumber(1);

//引数で渡した1を2倍にした数である2が出力される
console.log(result);

コールバック関数

基本の定義
関数の中でさらに関数を呼び出すことができる。

//関数oneを定義
const one = () => {
  console.log("関数1"); //関数1が出力される 
}

//コールバック関数であるcallを定義
const call = (callback) => {
  console.log("コールバック関数を呼び出す");
  callback();
}

//コールバック関数の呼び出し
call(one);
//コンソールは以下が出力される
//コールバック関数を呼び出す
//関数1

クラス

クラスはオブジェクトの設計図である。
クラス名は大文字から始まることに注意
クラスの定義

//クラスFoodを定義
class Food {

}

インスタンス

設計図であるクラスから作られた子どもがインスタンスである。
インスタンスの生成

const food = new Food();

コンストラクタ

コンストラクタはインスタンスの生成時に実行する処理や設定を追加するためもの。
このコンストラクタに書いた処理はインスタンスを生成した直後に実行される。
オブジェクトのようにプロパティと値を持つことができる。

class Food {                 //クラスFoodの定義
  constructor(name, pprice){ //コンストラクタの処理。引数nameとpriceを受け取る
    this.name = name;        //このクラスのプロパティnameに引数のnameを代入
    this.name = price;       //このクラスのプロパティpriceに引数のpriceを代入
  }
}

//foodという定数名でnameがおにぎり、priceが150のインスタンスを生成する
const food = new Food("おにぎり", 150);  

メソッド

クラスに関数としてメソッドを持たせることができる。

class Food {
  constructor(){
  }
  smell(){
    console.log("美味しい匂いがする");
  }
}

const food = new Food(); //インスタンスを生成
food.smell();            //インスタンスが持つメソッドを実行
                         //美味しい匂いがするが出力される

メソッドと関数は何が違うのか

メソッドはクラスの持つ動作を指す。
クラスに関数を持たせたものがメソッドである。
オブジェクト指向において現実世界にそのオブジェクトを置き換えた際に持つ概念や動作をメソッドとして定義している。
例として現実世界の動物である犬を表現したいclass Dogがあったとして、犬は吠えるという動作を持っているのでメソッドとしてhoeruを持つという考え方ができる。

継承

クラスを別のクラスに継承することができる。
extendsを記述してその後に継承元のクラス名を記述する。
継承すると継承元が持っていたプロパティやメソッドを継承先でも呼び出すことができる。
親のクラスが子クラスが持つプロパティやメソッドなどを呼び出すことはできない。

class Menu extends Food {

}

オーバーライド

継承すると親クラスのメソッドを子クラスでも呼び出せる。
その継承したメソッド名と同じメソッドを子クラスでも定義した場合には子クラスのメソッドが優先される。
上から上書きしていることからオーバーライドという。

最後に

簡単ではありますがいつでも見返せるようにまとめさせていただきました。

見出しタグを .querySelectorAll() で取得する場合，いちいち .querySelectorAll( 'h1, h2, h3, h4, h5, h6' ) などと書かなければならず面倒くさい．SCSS なら，

.post--content {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        &.heading--background-black {
            // なんらかのスタイル指定．
        }
    }
}

みたいにネストさせて書けるセレクタも，いちいち，

document.querySelectorAll(
    '.post__content h1.heading--background-black' +
    '.post__content h2.heading--background-black' +
    '.post__content h3.heading--background-black' +
    '.post__content h4.heading--background-black' +
    '.post__content h5.heading--background-black' +
    '.post__content h6.heading--background-black',
);

といった具合に書かなければならず面倒くさい．こういう面倒くさいのをいちいち手作業でやってると，エラーの原因にもなりがちなので，関数化しました．

なお，本記事における “hx” は、“h1”，“h2”, “h3”, “h4”, “h5”, “h6” の総称です．

コード

TypeScript

headings.ts

/**
 * @author JuthaDDA
 * @param elderSelector - ex. '.post', 'section >', 'hr +', '.meta ~'.
 *     White space should be added after this selector.
 * @param classSelector - ex. '.heading--red', ':hover', ':not(:first-child)'.
 *     White space before this selector should be trimmed
 *     to avoid being interpreted as a nested selector.
 * @param topLevel - should be corrected to an integer in the range 1-6
 *     (ex. 0 to 1, 42 to 6, 1.9 to 1).
 * @param bottomLevel - should be corrected to an integer
 *     in the range from `topLevel` to 6.
 */
interface HxSelectorOptions {
    elderSelector?:string,
    classSelector?:string,
    topLevel?:number,
    bottomLevel?:number
}

/**
 * @author JuthaDDA
 */
interface HxOptions extends HxSelectorOptions {
    root?:Element|Document,
}

/**
 * @author JuthaDDA
 */
const getHxSelector = ( options:HxSelectorOptions ):string => {
    const { min, max, floor } = Math;
    const elderSelector = options.elderSelector ?
        `${ options.elderSelector } ` : '';
    const classSelector = options.classSelector ?
        options.classSelector.trim() : '';
    const topLevel = floor( min( max( options.topLevel || 1, 1 ), 6 ) );
    const bottomLevel =
        floor( min( max( options.bottomLevel || 6, topLevel ), 6 ) );

    return Array.from( Array( bottomLevel - topLevel + 1 ), ( v, k ) => {
        const hxTagName = `h${ k + topLevel }`;
        return elderSelector + hxTagName + classSelector;
    } ).join( ',' );
};

/**
 * @author JuthaDDA
 */
const getHxs = ( options:HxOptions ):NodeListOf<HTMLHeadingElement> => {
    const root = options.root || document;
    return root.querySelectorAll( getHxSelector( options ) );
};

JavaScript

headings.js

/**
 * @author JuthaDDA
 * @param {Object} [options]
 * @param {string} [options.elderSelector]
 *     - ex. '.post', 'section >', 'hr +', '.meta ~'.
 *         White space will be added after this selector.
 * @param  {string} [options.classSelector]
 *     - ex. '.heading--red', ':hover', ':not(:first-child)'.
 *         White space before this selector will be trimmed
 *         to avoid being interpreted as a nested selector.
 * @param {number} [options.topLevel]
 *     - will be corrected to an integer in the range 1-6
 *         (ex. 0 to 1, 42 to 6, 1.9 to 1).
 * @param {number} [options.bottomLevel]
 *     - will be corrected to an integer in the range from `topLevel` to 6.
 * @return {string}
 */
const getHxSelector = ( options = {} ) => {
    const { min, max, floor } = Math;
    const elderSelector = options.elderSelector ?
        `${ options.elderSelector } ` : '';
    const classSelector = options.classSelector ?
        options.classSelector.trim() : '';
    const topLevel = floor( min( max( options.topLevel || 1, 1 ), 6 ) );
    const bottomLevel =
        floor( min( max( options.bottomLevel || 6, topLevel ), 6 ) );

    return Array.from( Array( bottomLevel - topLevel + 1 ), ( v, k ) => {
        const hxTagName = `h${ k + topLevel }`;
        return elderSelector + hxTagName + classSelector;
    } ).join( ',' );
};

/**
 * @author JuthaDDA
 * @see getHxSelector for further about `options`.
 * @param {Object} [options]
 * @param {Element|Document} [options.root]
 * @param {string} [options.elderSelector]
 * @param {string} [options.classSelector]
 * @param {number} [options.topLevel]
 * @param {number} [options.bottomLevel]
 * @return {NodeList}
 */
const getHxs = ( options = {} ) => {
    const root = options.root || document;
    return root.querySelectorAll( getHxSelector( options ) );
};

説明

getHxSelector()

第 1 引数 options のプロパティは，すべてオプショナルです．

options.elderSelector は，各 hx の前に附くセレクターです．子孫結合子のほか，子結合子，一般兄弟結合子，隣接兄弟接合子も使えます．後ろに半角スペースが挿入されるので，子孫結合子の半角スペースは省略可能です．

options.classSelector は，各 hx の後に附くセレクターです．クラス・セレクター，擬似クラス・セレクターが使えます．半角スペースが頭に含まれると子孫結合子として解釈されるので，.trim() されます．

options.topLevel と options.bottomLevel で取得する見出しレベルの範囲を指定できます．たとえば，{ topLevel: 2, bottomLevel: 4 } と指定した場合は，h2, h3, h4 が対象となり，h1, h5, h6 は対象外となります．

Array.from( Array( n ), ( v, k ) => k ) ^MDN は，JavaScript でライブラリを使用せず 0 から n-1 の配列を作る方法の 1 つです¹．第 2 引数のコールバック関数を書き換えることで，lodash.range( n ).map( ( n ) => someFunc( n ) ) ^Lodash 的なことをライブラリなしのメソッド 1 つで書けるので，覚えておいて損はないかと思います．

戻り値は string です．

getHxs()

options.root は，document が既定で，Element を指定することで適用範囲を限定できます．その他の options のプロパティは，そのまま getHxSelector() に渡され，getHxSelector() から戻ってきたセレクターに一致する見出し要素の NodeList が getHxs() の戻り値になります²．

あとがき

前回の記事で予告した “ タグのレベルを一括して変更する関数” で今回の関数を使っていることに気付いたので，べつの記事にしたほうがいいかなと思い，こちらを先に投稿しました．

以上です．

---

1. Cf: jsでrange関数をつくる - Qiita ↩

2. TypeScript での戻り値の型指定が NodeListOf<Element> じゃなくて NodeListOf<HTMLHeadingElement> でエラーが出ないのが，ちょっと不思議です． ↩

目的

• 原因の特定に時間がかかったためシェアする
• このエラーメッセージで検索しても日本語では情報が出なかったため、今後同じ問題が発生した人の調査に役立てたい

事象

• エラーメッセージは以下

console.error: There was a problem sending log messages to your development environment Error: value.hasOwnProperty is not a function. (In 'value.hasOwnProperty('tag')','value.hasOwnProperty' is udefined)

環境

• react-native
• expo 3.21.13

原因と対処

• この問題は、Expoの内部のバグ
• console.log() の引数内にjsonを直接入れた時に発生する場合がある
• なので、サーバリクエストなどの結果をconsole.logに出そうとした時にエラーが発生する
• 例えば、以下の時に発生した

//ReactNativeの画面で入力した結果をstateに入れている。
// それをUploadを行う非同期処理メソッドに直接入れている
uploadTokoAsync(state)


// 投稿を実施する
uploadTokoAsync =  (state) => {

// 入ってきた引数の中身をログにだす　→　ここでエラーが発生する
console.log(state)

//以下はstateの中身ををアップロードする処理

}

• チケット6496上の議論での対処としては、出したい値を以下のようにJSON.stringfyで展開してタグ付けして解決をしているらしい

console.log('Test', JSON.stringify(state));

https://github.com/expo/expo/issues/6496

サーバーサイドエンジニアでも簡単なJSやjqueryくらいは使えないといけないので、自分が実装したことのある管理画面の仕様とかでよく使うであろうものをメモしておく。

チェックボックス・ラジオボタンのクリックで表示・非表示

form_withの中身

.form-group
  %label= model_t('reward.only_subscription_purchase')
    %div
      %label.checkbox-inline.pl0.radio-label
         = f.radio_button :only_subscription_purchase, true
         = t('stripe.subscription_plan.select_active.enabled')
.form-group.text
  %label
　　 = model_t('reward.price')
    = f.text_field :price, class: 'form-control'

$(function(){
  let nowChecked = $('input[name="reward[only_subscription_purchase]"]:checked').val();
  $('input[name="reward[only_subscription_purchase]"]').click(function(){
    if($(this).val() == nowChecked) {
      $(this).prop('checked', false);
      nowChecked = false;
      $('.text').show();
    } else {
      nowChecked = $(this).val();
      $('.text').hide();
    }
  });
});

• let nowCheckedでイベントが発生する前のDOMを読み込んだ直後の状態を取得して代入している
• クリックイベントをセット
• thisは$('input[name="reward[only_subscription_purchase]"]')で作ったjqueryオブジェクト
• $(this).val() == nowCheckedでクリックした時の値と元々取得していた値を比較。一致していると言うことは元々チェックが入っていた状態のラジオボタンをクリックしたと言うことなので、選択状態を解除したい時だと判断できる。if分岐がtrueであれば、$(this).prop('checked', false);でチェックと外し、nowChecked = false;で現在のチェックボックスの状態をfalseにする。変数に現在の状態を入れておかないと、ブラウザのリロードをしない状態でとチェックを入れたり外したりと言うことが出来ない。最後に、$('.text').show();で表示したい部分を表示させる。
• elseなら、nowChecked = $(this).val();で、イベントでチェックした状態をnowChecked変数の中身に代入し、$('.text').hide();でフォーム表示。

※補足：
$('input[name="reward[only_subscription_purchase]"] :checked').val();の部分は以下のようにもかける

$('input[name="reward[only_subscription_purchase]"]').prop('checked');

$('input[name="reward[only_subscription_purchase]"]').is('checked');

セレクトボックスの選択した値によって表示・非表示

= f.number_field :duration_in_months, min: 1, max: 100, class: 'form-control',
                  placeholder: t('placeholder.stripe.subscription_plan.duration_in_months'), style: 'display: none;'

$(function(){
  $("#subscription_plan_duration").change(function() {
    const extractionVal = $(this).val();
    if(extractionVal == "repeating") {
      $('#subscription_plan_duration_in_months').css('display', 'block');
    }else {
      $('#subscription_plan_duration_in_months').css('display', 'none');
    }
  });
});

• changeイベントのセット
• const extractionVal = $(this).val();changeイベントで発生したjqueryオブジェクトのvalue値を取得して代入
• それが条件にある値かどうか判断
• jqueryオブジェクトのcssメソッドでcss追加で隠したり、表示したりする

チェックボックスの全選択・全解除

<table>
  <thead><tr>
    <th><label>全選択<br><input type="checkbox" id="all"></label>
    <th>Hoge
  </thead>
  <tbody id="boxes">
    <tr><td ><input type="checkbox" name="chk[]" value="A"><td>Hoge1
    <tr><td><input type="checkbox" name="chk[]" value="B"><td>Hoge2
    <tr><td><input type="checkbox" name="chk[]" value="C"><td>Hoge3
  </tbody>
</table>

$(function() {
    // 「全選択」する
    $('#all').on('click', function() {
      $("input[name='chk[]']").prop('checked', this.checked);
    });

    // 「全選択」以外のチェックボックスがクリックされたら、
    $("input[name='chk[]']").on('click', function() {
      if ($('#boxes :checked').length == $('#boxes :input').length) {
        // 全てのチェックボックスにチェックが入っていたら、「全選択」のチェックボックスをtrueに
        $('#all').prop('checked', true);
      } else {
        // 1つでもチェックが入っていない状態になったら、「全選択」のチェックボックスをfalseに
        $('#all').prop('checked', false);
      }
    });
});

• 「全選択」をクリックした時の動きの解説
  • 該当のセレクタに対してclickイベントでの発火をセット
  • $("input[name='chk[]']").prop('checked', this.checked);は、$("input[name='chk[]']").prop('checked', $(this).is('checked'));や、$("input[name='chk[]']").prop('checked', $(this).prop('checked'));と同義。（isは戻り値がBoolean、propは戻り値がプロパティーの値である違いがある。今回のように値がブール値しかない場合は２つは同じ文脈で代用できる。）ここで言うthisは、$('#all')で作ったjqueryオブジェクトを指すので、ここではオブジェクトの状態を取得している。取得した状態をpropメソッドの第二引数に活用している。
  • 'checked'はjqueryオブジェクトのプロパティーを指している。
• 「全選択」以外のチェックボックスがクリックされた時の動きの解説
  • 「全選択」以外のチェックボックスがクリックされた時のイベントをセット
  • 該当のセレクタの状態を確認。具体的には、チェックされているボックスの数とセットされているinput要素の数を比較する。チェック数とセットされているinput要素の数がイコールであれば、全ての選択肢チェックが入っている状態だと判断できる。
  • 条件が成立していれば、該当のセレクタ（全選択部分）をtrue　or false　にする。

クリックしたら全部選択

textareaのオプションにjqueryを直接記述する方法

• textareaをクリックすると全部の文字が選択状態になる記述

.template
  %textarea.form-control.mt24#project-default-textarea{ onclick: "this.focus();this.select()", readonly: "readonly", rows: '20' }
    :preserve
      hogehogehoge # コピペする内容

• textareaのオプションで、onclickイベントをそのまま書いてしまう方法。thisはtextareaオブジェクトを表している。
• readonly: "readonly"は読み取り専用のオプション

scriptにjsの記述を切り出す方法

パターン１

%textarea.form-control#project-default-textarea{ readonly: "readonly", rows: '20' }
  :preserve
    hogehoge # コピペする内容

$(function() {
  $('#project-default-textarea').click(function() {
  $(this).focus();
  $(this).select();
  });
});

• クリックイベントをセット
• focus()メソッドで要素にフォーカスを当て、select()メソッドで全部選択状態にする

パターン２（あまりおすすめしない方法）

.template
  %textarea.form-control#project-default-textarea{ onclick: "hoge()", readonly: "readonly", rows: '20' }
    :preserve
      hogehoge # コピペする内容

function hoge() {
  $('#project-default-textarea').focus();
  $('#project-default-textarea').select();
  }

• $(function() {})や$(document).ready(function(){})で囲んで、DOMの読み込み完了後にjsを実行できるようにするが一般的ではあるが、textareaのオプションのonclickを使った場合は、そちらでDOMの読み込み完了を検知しているようなので、jsのメソッドには書かなくても良い。読み込みの記述を書くと、DOMの読み込みの時にしかイベントが発火しなくなるようだ。

ボタンを押すとテキストエリア内の内容を全選択してクリップボードへコピー

%a.btn.btn-primary.btn-template__copy-button.mt14.mb28{ href: "javascript:void(0)", onclick: "$('#project-default-textarea').focus(); $('#project-default-textarea').select();document.execCommand('copy') ? alert('クリップボードにコピーしました。') : alert('こちらの環境ではコピーできませんでした。お手数ですが直接選択してコピーをしてください。');" }
      = t('word.template_copy')

• href: "javascript:void(0)"について、aタグをクリックしたときにonclickに記述したJavaScriptのコードを動作させるためには、hrefを無効にしなければならないこと、hrefを空白にするだけだとリンクとして認識されないことから、JavaScriptの「void(0)」と言う、常にUndefinedを返してくれる演算子を使っている

• focusして、selectで選択するところまで既出の理屈と同じで、document.execCommand('copy')を使って、js側から選択した文字列をクリップボードにコピーしている。

• もちろん、js部分の記述を切り出して書くこともできる。（前述の方法と同じ）

Railsでajax通信を行う

Railsでajax通信を行う方法は大きく二つあります。(vue.jsなどを使わない場合)
1. remote: trueをlink_toやform_withに設定
2. JSファイルにイベント(clickイベントなど)を設置しajax通信を発火させる

お気に入りボタンを非同期で切り替える

コントローラー側の実装が必要になるが、一旦、通常のcreateアクションや、destroyアクションと変わらない。違うところは、redirect_toを削除し、レスポンスをcreate.js.erbなどのjs用のテンプレートファイルを作成し、ページ全体を更新するのではなく、該当部分だけ非同期で切り替えるイメージ。

class BookmarksController < ApplicationController
  def create
    @board = Board.find(params[:board_id])
    current_user.bookmark(@board)
  end

  def destroy
    @board = Board.find(params[:id])
    current_user.unbookmark(@board)
  end
end

# bookmark,unbookmarkなどのメソッドはモデルに定義している。
# redirect_toがない

あとは、リクエストを送る部分に、remote: trueを指定し、JS形式でリクエストを送信する。

_bookmark.html.erb

<%= link_to icon('far', 'star'), board_bookmarks_path(board.id), method: :post, remote: true, id: :"js-bookmark-button-for-board-#{board.id}" %>

_unbookmark.html.erb

# remote: ture を追記
<%= link_to icon('fas', 'star'), board_bookmarks_path(board.id), method: :delete, remote: true, id: :"js-bookmark-button-for-board-#{board.id}" %>

あとは、viewの該当箇所にid属性を付与しておき、以下の記述で、id属性で指定した要素のjqueryオブジェクトを取ってきて、それに対してreplaceWithメソッドを使い、置き換える。テンプレートはcontroller側の実装により、createアクションの時とはcreate.js.erbを返し、destroyアクションの時は、destroy.js.erbを返すようになっている。

create.js.erb

$('#bookmark_btn_<%= @board.id %>').replaceWith('<%= j(render 'boards/unbookmark', board: @board)%>');

destroy.js.erb

$('#bookmark_btn_<%= @board.id %>').replaceWith('<%= j(render 'boards/bookmark', board: @board)%>');

コメント投稿・削除・編集を非同期で行う

remote: trueを使って投稿・削除

• 投稿のform_with

<%= form_with(model: [@board, @comment], remote: true) do |f| %>
   <%= f.label :body, t('.comment')%>
   <%= f.text_area :body, class: "form-control mb-3", placeholder: "コメント" , rows: "4" %>
   <%= f.submit t('.post'), class: "btn btn-primary" %>
<% end %>

• 削除のlink_to

<%= link_to comment_path(comment.id), method: :delete, remote: true do %>

※コントローラー側はredirect_toを書かない。

• js形式の通信で発火するテンプレート

create.js

<% if @comment.errors.any? %> # バリデーションエラーがあるかどうか
  $('#error_messages').remove(); # 元々エラーメッセージが表示されていれば取り除く
  $('.js-comment-body').after("<%= j(render 'shared/errors_messages', { model: @comment }) %>");　
<% else %>
  $('#error_messages').remove();　# 元々エラーメッセージが表示されていれば取り除く
  $('#js-table-comment').prepend('<%= j(render @comment)%>');　# コメントを入れる
  $(comment_body).val(''); # コメント入力欄を空にする
<% end %>

destroy.js

$('#<%= "comment-#{@comment.id}"%>').remove();

ajax関数を使ってコメントの編集を投稿

$(function () {
  $(document).on('click', '.js-edit-comment-button', function () {
    // 表示
    const id = $(this).data('id');
    $('#js-comment-' + id).hide();
    $('#js-textarea-comment-box-' + id).show();
  });

  $(document).on('click', '.js-button-edit-comment-cancel', function () {
    // 非表示
    const id = $(this).data('comment-id');
    $('#js-comment-' + id).show();
    $('#js-textarea-comment-box-' + id).hide();
  });

  $(document).on('click', '.js-button-comment-update', function () {
    const id = $(this).data('comment-id');
    const textField = $('#js-textarea-comment-' + id);
    const body = textField.val();
    $.ajax({
      type: 'PUT',
      url: '/comments/' + id,
      data: {
        comment: {
          body: body
        }
      }
    }).done(function () {
      // 成功処理
      $('#js-textarea-comment-box-' + id).hide();
      $('#js-comment-' + id).text(body);
      $('#js-comment-' + id).show();
    }).fail(function () {
      // 失敗処理
      $('#js-textarea-comment-' + id).before('<p>コメントを入力してください</p>');
    });
  });
})

• $(document)のjqueryオブジェクトの部分をid属性で絞ったオブジェクトにしていないのは、非同期で追加したコメントを画面をリロードする前に編集する場合でも非同期状態で編集できるようにするため。
• doneとfailについてajax関数でのリクエストが成功ならdoneを、失敗ならfailを実行する。この成功失敗はHTTPステータスコードで判断する。200番台ならdoneへ、400番台ならfailへ処理が流れる。
• コントローラー側では,成功と失敗をifで分岐させた先で、head :ok、head :bad_requestなどを記述してステータスコードを設定し、レスポンスの結果を操作する。

https://railsguides.jp/layouts_and_rendering.html#head%E3%81%A7%E3%83%98%E3%83%83%E3%83%80%E3%81%AE%E3%81%BF%E3%81%AE%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B9%E3%82%92%E7%94%9F%E6%88%90%E3%81%99%E3%82%8B

def update
  @comment = current_user.comments.find(params[:id])
  if @comment.update(comment_update_params)
    head :ok
  else
    head :bad_request
  end
end

もしくは

def update
  @comment = current_user.comments.find(params[:id])
  if @comment.update(comment_update_params)
    render json: @comment
  else
    head :bad_request # ①ステータスコードを400番で返す
  end
end

もしくは

def update
  @comment.update!(comment_update_params)
  render json: @comment
end

成功時にjson形式でオブジェクトを返す記述をしておくと、ajax関数内で、

.done(function (data) { 

  hogehoge.text(data.body);

})

とかで、引数にとることが出来るので、ajax関数内で使えたり、viewに渡せたりする。

何のための記事？

Node-REDをHerokuで運用する際に、Heroku環境では一部機能が動作しない場合があった。
その際、Node-REDの実装を調査する必要があったので関連するメモを整理して投稿します。
※本記事はHerokuと直接関係はありません

1. Node-REDを自作プログラムから動かす

• Node.jsなどは予めインストールしておく。

1.1 導入

$ mkdir node-red-sample
$ cd node-red-sample
$ npm -y init 
$ npm install node-red
$ node ./node_modules/node-red/red.js  --userDir ./data --settings ./node_modules/node-red/settings.js

ブラウザで http://127.0.0.1:1880/ を開く。

1.2. 解説

上記の手順では、下記のオプションを指定しています。

• --userDir : 追加するノードなどが保存される場所を指定する

• --settings : 使用する設定ファイルを指定する

  ※デフォルトで red.js と同じフォルダに存在するsettings.jsを参照するので--settings以降は省略可能

2. 設定をカスタマイズする

2.1 カスタマイズ方法(1) : settings.js を指定して起動

settings.js を自分用に書き換えてred.jsの起動パラメータに渡す事で、好みの設定で起動するように変更できます。

package.json と同じフォルダに settings.js をコピーする。

$ cp ./node_modules/node-red/settings.js ./

settings.js を書き換えたら下記のようにコマンドを入力して起動する。

$ node ./node_modules/node-red/red.js --userDir ./data --settings ./settings.js

2.2 カスタマイズ方法(2) : settings.js を userDir に入れておく

$ mkdir data
$ cp ./node_modules/node-red/settings.js ./data/

settings.js を書き換えたら下記のようにコマンドを入力して起動する。

$ node ./node_modules/node-red/red.js --userDir ./data

3. エントリーポイント(?)を変更する

エントリーポイントを ./node_modules/node-red/red.js ではなく、独自のファイルにする方法。

$ cp node_modules/node-red/red.js ./main.js

コピーして作成した main.js を一部修正する。

- var RED = require("./lib/red.js");
+ var RED = require("node-red");

書き換えたら起動する。

$ node main.js --userDir ./data

まとめ

これでローカルでのデバッグできる環境は整いました。

何のための記事？

Node-REDをHerokuで運用する際に、Heroku環境では一部機能が動作しない場合があった。
その際、Node-REDの実装を調査する必要があったので関連するメモを整理して投稿します。
※本記事はHerokuと直接関係はありません

1. Node-REDを自作プログラムから動かす

• Node.jsなどは予めインストールしておく。

1.1 導入

$ mkdir node-red-sample
$ cd node-red-sample
$ npm -y init 
$ npm install node-red
$ node ./node_modules/node-red/red.js  --userDir ./data --settings ./node_modules/node-red/settings.js

ブラウザで http://127.0.0.1:1880/ を開く。

1.2. 解説

上記の手順では、下記のオプションを指定しています。

• --userDir : 追加するノードなどが保存される場所を指定する

• --settings : 使用する設定ファイルを指定する

  ※デフォルトで red.js と同じフォルダに存在するsettings.jsを参照するので--settings以降は省略可能

2. 設定をカスタマイズする

2.1 カスタマイズ方法(1) : settings.js を指定して起動

settings.js を自分用に書き換えてred.jsの起動パラメータに渡す事で、好みの設定で起動するように変更できます。

package.json と同じフォルダに settings.js をコピーする。

$ cp ./node_modules/node-red/settings.js ./

settings.js を書き換えたら下記のようにコマンドを入力して起動する。

$ node ./node_modules/node-red/red.js --userDir ./data --settings ./settings.js

2.2 カスタマイズ方法(2) : settings.js を userDir に入れておく

$ mkdir data
$ cp ./node_modules/node-red/settings.js ./data/

settings.js を書き換えたら下記のようにコマンドを入力して起動する。

$ node ./node_modules/node-red/red.js --userDir ./data

3. エントリーポイント(?)を変更する

エントリーポイントを ./node_modules/node-red/red.js ではなく、独自のファイルにする方法。

$ cp node_modules/node-red/red.js ./main.js

コピーして作成した main.js を一部修正する。

- var RED = require("./lib/red.js");
+ var RED = require("node-red");

書き換えたら起動する。

$ node main.js --userDir ./data

まとめ

これでローカルでのデバッグできる環境は整いました。

次の記事 → npm から取得した Node-RED をカスタマイズして起動する(2)

元記事はこちらになります。

ワンライナーで行こう！（JavaScriptで配列操作いろいろ）
https://qiita.com/snst-lab/items/cf1fe64cfad70838ee93

こちらで気になったものを自分なりに。
1年以上前の記事に今更かもしれませんが…

重複の削除はfilter使うよりArray.form(new Set(arr))が良いという記事はあちこちで見るので割愛。

startからendまでの連続した数値配列を生成する

2行目だけ見て書いたら、1行目がほぼ同じだったので削除

配列の中身を結合した文字列を作る

const string = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9].join('');

console.log( string );      //'0123456789'

元記事では正規表現でreplaceしてたのがきになりました。

隣り合うN個の要素をまとめた配列の配列を作る（N=3）

const array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

const wrapInArray = (arr, n) => Array(Math.floor(arr.length/n)).fill().map( (_, i) => arr.slice(i*n, i*n+n) );

console.log ( wrapInArray(array, 3) );      //[[0, 1, 2], [3, 4, 5], [6, 7, 8]]
console.log ( wrapInArray(array, 2) );      //[[0, 1], [2, 3], [4, 5], [6, 7], [8, 9]]

N個未満になる配列も残したい時は、Math.floor()ではなくMath.ceil()に変更

const wrapInArray = (arr, n) => Array(Math.ceil(arr.length/n)).fill().map( (_, i) => arr.slice(i*n, i*n+n) );

まとめ

Array(n).fill().map((_, i)) => {...});を使いたいだけの記事でした。

現在プログラミング学習中で、これはメモしたいと思ったものを、自分用に分かりやすく残しておきます。

（前回投稿した内容の続きというか別ルートみたいな感じになります。）
【Rails】PAYJPでトークン生成時のエラー解決

PAYJPを導入してトークンを生成したが、決済が成功しない...

テスト用のカード情報を入力して、購入ボタンを押したら、

のように表示されました。

前回の内容に記述しておりますので割愛しますが、
トークン生成のJavaScriptの記述中にconsole.log()を書いてstatusを確認したところ、200と出ており、トークン生成に成功していることは確認が取れております。
（トークンがいない？？　そんなはずはない！！！）

現状把握

エラーの原因を探るために、binding.pryを使用して、paramsの中身を確認したところ、

pry(#<OrdersController>)> params
=> <ActionController::Parameters {"authenticity_token"=>"uRxJ+Ho4c2vi4Pc8MrK/s7UhNbujnVBDt7qjJ11pFpeHWDMltGl3eu/ls94DaALSPNfIpoMtUd4aeOcs4Z8Y4w==", "item_order"=>{"postal_code"=>"555-0000", "prefecture_id"=>"9", "city"=>"市区町村", "block_number"=>"番地", "building_name"=>"建物名", "phone_number"=>"09012345678"}, "token"=>"tok_3b5890d13fb07a96a6cf2fa832e0", "controller"=>"orders", "action"=>"create", "id"=>"3"} permitted: false>

後半部分を見ると分かりますが、
"token"=>"tok_3b5890d13fb07a96a6cf2fa832e0"
tokenはしっかりparamsの中に入っていました！！！

トークンはしっかり生成されているのです！

では次に、コントローラーの現状を見てみましょう。

****_controller.rb（一部抜粋）

  def order_params
    params.require(:item_order).permit(:token, :postal_code, :prefecture_id, :city, :block_number, :building_name, :phone_number).merge(item_id: @item[:id], user_id: current_user.id)
  end

  def set_item
    @item = Item.find(params[:id])
  end

  def pay_item
    Payjp.api_key = ENV["PAYJP_SECRET_KEY"]
    Payjp::Charge.create(
      amount: @item.selling_price,
      card: order_params[:token],
      currency:'jpy'
    )
  end

現状の記述としては、
paramsに入っている:item_orderの中の:tokenをorder_params[:token]として受け取っている。
ということになります。

では、もう一度binding.pryで今度はorder_paramsと入力して確認してみましょう。

pry(#<OrdersController>)> order_params
=> <ActionController::Parameters {"postal_code"=>"555-0000", "prefecture_id"=>"9", "city"=>"市区町村", "block_number"=>"番地", "building_name"=>"建物名", "phone_number"=>"09012345678", "item_id"=>3, "user_id"=>3} permitted: true>"building_name"=>"建物名", "phone_number"=>"09012345678"} permitted: false>

tokenがいない！！！！！！！

params.require(:item_order).permit(:token, ~~~~)

このように、requireとpermitで書いているのになんで？？？

解決

bindng.pryで確認したところ、tokenが生成されているのは確認できたので、生成されたトークンの移動の仕方に問題がありました。
現在tokenが生成されている場所は、item_orderの外であり、paramsの直下なので、
そもそものtokenの場所が違ったということです。

binding.pryで、試しにparams[:token]と入力してみますと、

pry(#<OrdersController>)> params[:token]
=> "tok_14078502197e031107d18bb7e428"

と出ます。

なので、このように記述する必要があったということです。

****_controller.rb

  def order_params
    params.require(:item_order).permit(:postal_code, :prefecture_id, :city, :block_number, :building_name, :phone_number).merge(item_id: @item[:id], user_id: current_user.id, token: params[:token])
  end

少し長いですが、mergeメソッドの中にtokenを記述しています。
item_orderの中にではなく、order_paramsに引っ付けるための記述です。

こうすることで、order_paramsに引っ付けることができたので、記述を変更した後にbinding.pryで確認してみますと、

pry(#<OrdersController>)> order_params
=> <ActionController::Parameters {"postal_code"=>"333-0000", "prefecture_id"=>"13", "city"=>"市区町村", "block_number"=>"番地", "building_name"=>"建物名", "phone_number"=>"09012345678", "item_id"=>3, "user_id"=>3, "token"=>"tok_14078502197e031107d18bb7e428"} permitted: true>

これでバッチリです☆
order_params[:token]で受け取れるようになり、決済も無事成功しました！！！

まとめ

tokenの居場所をしっかり理解する！
mergeメソッドを使用して、引っ付ける！

現在プログラミング学習中で、これはメモしたいと思ったものを、自分用に分かりやすく残しておきます。

（前回投稿した内容の続きというか別ルートみたいな感じになります。）
【Rails】PAYJPでトークン生成時のエラー解決

PAYJPを導入してトークンを生成したが、決済が成功しない...

テスト用のカード情報を入力して、購入ボタンを押したら、

のように表示されました。

前回の内容に記述しておりますので割愛しますが、
トークン生成のJavaScriptの記述中にconsole.log()を書いてstatusを確認したところ、200と出ており、トークン生成に成功していることは確認が取れております。
（トークンがいない？？　そんなはずはない！！！）

現状把握

エラーの原因を探るために、binding.pryを使用して、paramsの中身を確認したところ、

pry(#<OrdersController>)> params
=> <ActionController::Parameters {"authenticity_token"=>"uRxJ+Ho4c2vi4Pc8MrK/s7UhNbujnVBDt7qjJ11pFpeHWDMltGl3eu/ls94DaALSPNfIpoMtUd4aeOcs4Z8Y4w==", "item_order"=>{"postal_code"=>"555-0000", "prefecture_id"=>"9", "city"=>"市区町村", "block_number"=>"番地", "building_name"=>"建物名", "phone_number"=>"09012345678"}, "token"=>"tok_3b5890d13fb07a96a6cf2fa832e0", "controller"=>"orders", "action"=>"create", "id"=>"3"} permitted: false>

後半部分を見ると分かりますが、
"token"=>"tok_3b5890d13fb07a96a6cf2fa832e0"
tokenはしっかりparamsの中に入っていました！！！

トークンはしっかり生成されているのです！

では次に、コントローラーの現状を見てみましょう。

****_controller.rb（一部抜粋）

  def order_params
    params.require(:item_order).permit(:token, :postal_code, :prefecture_id, :city, :block_number, :building_name, :phone_number).merge(item_id: @item[:id], user_id: current_user.id)
  end

  def set_item
    @item = Item.find(params[:id])
  end

  def pay_item
    Payjp.api_key = ENV["PAYJP_SECRET_KEY"]
    Payjp::Charge.create(
      amount: @item.selling_price,
      card: order_params[:token],
      currency:'jpy'
    )
  end

現状の記述としては、
paramsに入っている:item_orderの中の:tokenをorder_params[:token]として受け取っている。
ということになります。

では、もう一度binding.pryで今度はorder_paramsと入力して確認してみましょう。

pry(#<OrdersController>)> order_params
=> <ActionController::Parameters {"postal_code"=>"555-0000", "prefecture_id"=>"9", "city"=>"市区町村", "block_number"=>"番地", "building_name"=>"建物名", "phone_number"=>"09012345678", "item_id"=>3, "user_id"=>3} permitted: true>"building_name"=>"建物名", "phone_number"=>"09012345678"} permitted: false>

tokenがいない！！！！！！！

params.require(:item_order).permit(:token, ~~~~)

このように、requireとpermitで書いているのになんで？？？

解決

bindng.pryで確認したところ、tokenが生成されているのは確認できたので、生成されたトークンの移動の仕方に問題がありました。
現在tokenが生成されている場所は、item_orderの外であり、paramsの直下なので、
そもそものtokenの場所が違ったということです。

binding.pryで、試しにparams[:token]と入力してみますと、

pry(#<OrdersController>)> params[:token]
=> "tok_14078502197e031107d18bb7e428"

と出ます。

なので、このように記述する必要があったということです。

****_controller.rb

  def order_params
    params.require(:item_order).permit(:postal_code, :prefecture_id, :city, :block_number, :building_name, :phone_number).merge(item_id: @item[:id], user_id: current_user.id, token: params[:token])
  end

少し長いですが、mergeメソッドの中にtokenを記述しています。
item_orderの中にではなく、order_paramsに引っ付けるための記述です。

こうすることで、order_paramsに引っ付けることができたので、記述を変更した後にbinding.pryで確認してみますと、

pry(#<OrdersController>)> order_params
=> <ActionController::Parameters {"postal_code"=>"333-0000", "prefecture_id"=>"13", "city"=>"市区町村", "block_number"=>"番地", "building_name"=>"建物名", "phone_number"=>"09012345678", "item_id"=>3, "user_id"=>3, "token"=>"tok_14078502197e031107d18bb7e428"} permitted: true>

これでバッチリです☆
order_params[:token]で受け取れるようになり、決済も無事成功しました！！！

まとめ

tokenの居場所をしっかり理解する！
mergeメソッドを使用して、引っ付ける！

プログラミング学習中で、これはメモしたいと思ったものを、自分ように分かりやすく残しておきます。

PAYJPを導入して、決済システムを実装したい！

今回もっていきたいゴールはこちらです。

テスト用のカード情報を入力して、決済が完了している状態です。

決済が成功しない...

まずは、payjpのgemを導入し、学習した通りにJavaScriptのファイルを作ったり、コントローラーやビューへ記述しました。

そして、テスト用のカード情報を打ち込んで、

購入ボタンを押しますが、

元の画面に戻ってしまう...
（んん？？　トークンが空っぽだと？？？）

これはコントローラーで、決済が成功しなかったら画面が変わらないように設定しており、エラーも表示させるようにしているからですが、最初は原因が分かりませんでした...

現在のコントローラーのコードはこちらです。（読みづらいかと思いますが、長くなるのでcreateアクションの部分のみ抜粋しております。）

****_controller.rb

  def create
    @order = ItemOrder.new(order_params)
    if @order.valid?
      pay_item
      @order.save
      return redirect_to root_path
    else
      render 'new'
    end
  end

カードの情報を受け取って、トークンを生成するためのJavaScriptの記述はこちらです。

****.js

const pay = () => {
  Payjp.setPublicKey(process.env.PAYJP_PUBLIC_KEY);
  const form = document.getElementById("charge-form");
  form.addEventListener("submit", (e) => {
    e.preventDefault();

    const formResult = document.getElementById("charge-form");
    const formData = new FormData(formResult);

    const card = {
      card_number: formData.get("card-number"),
      card_cvc: formData.get("card-cvc"),
      card_exp_month: formData.get("card-exp-month"),
      card_exp_year: `20${formData.get("card-exp-year")}`,
    };
    Payjp.createToken(card, (status, response) => {
      if (status == 200) {
        const token = response.id;
        const renderDom = document.getElementById("charge-form");
        const tokenObj = `<input value=${token} type="hidden" name='token'>`;
        renderDom.insertAdjacentHTML("beforeend", tokenObj);
      }
      document.getElementById("card-number").removeAttribute("name");
      document.getElementById("card-cvc").removeAttribute("name");
      document.getElementById("card-exp-month").removeAttribute("name");
      document.getElementById("card-exp-year").removeAttribute("name");

      document.getElementById("charge-form").submit();
      document.getElementById("charge-form").reset();
    });
  });
 };
 window.addEventListener("load", pay);

現状把握

どこが間違っているのかを見るために、pry-railsのgemを導入し、createアクションにbinding.pryを記述して、paramsの中身を確認しました。

pry(#<OrdersController>)> params
=> <ActionController::Parameters {"authenticity_token"=>"pvPlrZPKlxtcYotX8kK4N/OjbTuWNkiq5bOCJxqNI+OYt59wXZuTClFnz7XDmAVWelWQJraGSTdIccYspnstlw==", "item_order"=>{"postal_code"=>"555-0000", "prefecture_id"=>"3", "city"=>"市区町村", "block_number"=>"番地", "building_name"=>"建物名", "phone_number"=>"09012345678"}, "controller"=>"orders", "action"=>"create", "id"=>"1"} permitted: false>

たしかに、tokenがいない....
（authenticity_tokenは全く別のものだそうです。）

ということは、うまくtokenが生成されていない可能性があります。

次に、JavaScriptへの記述を調べるために,console.log()を使用して調べました。

const pay = () => {
  Payjp.setPublicKey(process.env.PAYJP_PUBLIC_KEY);
  console.log(process.env.PAYJP_PUBLIC_KEY)
  // 環境変数が定義できているか確認
  const form = document.getElementById("charge-form");
  form.addEventListener("submit", (e) => {
    e.preventDefault();

    const formResult = document.getElementById("charge-form");
    const formData = new FormData(formResult);

    const card = {
      card_number: formData.get("card-number"),
      card_cvc: formData.get("card-cvc"),
      card_exp_month: formData.get("card-exp-month"),
      card_exp_year: `20${formData.get("card-exp-year")}`,
    };
    console.log(card)
    // カード情報が受け取れているかの確認
    Payjp.createToken(card, (status, response) => {
      console.log(status)
      // ステータスの数字を確認
      if (status == 200) {
        const token = response.id;
        const renderDom = document.getElementById("charge-form");
        const tokenObj = `<input value=${token} type="hidden" name='token'>`;
        renderDom.insertAdjacentHTML("beforeend", tokenObj);
      }
      document.getElementById("card-number").removeAttribute("name");
      document.getElementById("card-cvc").removeAttribute("name");
      document.getElementById("card-exp-month").removeAttribute("name");
      document.getElementById("card-exp-year").removeAttribute("name");

      document.getElementById("charge-form").submit();
      document.getElementById("charge-form").reset();
    });
  });
 };
 window.addEventListener("load", pay);

そして、binding_pryで停止しているので、そこでコンソールを確認すると、

カード情報はしっかり受け取れているみたいです！
しかし、ステータスが400なのでトークンが生成できない...

カード情報が受け取れているのに、なんで？？？

解決

そこで、知識のある方に相談させて頂き、ようやく解決しました！
取得するcard情報を格納する記述に誤りがあったみたいです。

この部分の記述の、

****.js

const card = {
      card_number: formData.get("card-number"),
      card_cvc: formData.get("card-cvc"),
      card_exp_month: formData.get("card-exp-month"),
      card_exp_year: `20${formData.get("card-exp-year")}`,
    };

card_number:、card_cvc:、card_exp_month:、card_exp_year:の記述をすると、正しくPayjpと通信しないみたいです。

この形は決まっていると教わりまして、
number:、cvc:、exp_month:、exp_year:というように記述を直しました。

const card = {
      number: formData.get("card-number"),
      cvc: formData.get("card-cvc"),
      exp_month: formData.get("card-exp-month"),
      exp_year: `20${formData.get("card-exp-year")}`,
    };

と記述することで、

無事ステータスも、

200になり、

決済も成功させることができました！

まとめ

PAYJPを導入する時は、取得したcard情報を格納する記述を、決まっている形式の記述にする必要がある。
binding_pryとconsole.log()を使うことで、どこで不具合が起きているのかを探すことができる。

0. 記事作成の動機：コンポーネントを作る煩わしさ

　ReacやVueなどのJsでコンポーネントをつくるのがめんどくさいと感じるときが多々あった。
　なので、コンポーネントを作る意味を再考してみる。

　以前、似たような記事を作ったけど、それをもう少し整理してみた。

SPA(Single Page Application) を採用するメリット再考(2020年）

1. コンポーネントを作ることの目的

knockoutjsを皮切りに10年以上SPAでのアプリを作ってきた。
最近感じるのは、VueやReactでのコンポーネント分割はすごく手間がかかるということ。
そこで改めて、コンポーネントを作ることを考えてみる。

コンポーネントを作る目的は大きく分けて２つあると思う。

• 再利用
• コード分割（独立性）

以下、上記について補足。

(1) 再利用

コンポーネントを作ることの醍醐味であり、便利さを実感できるのがこの再利用性。

一度作ったコンポーネントをプロパティを替えていろいろな箇所で使える。
最近では、bit.devみたいなコンポーネントのリポジトリがあってそこで広く使えるようになると凄く便利。

とはいえ、そこまで汎用性をもったコンポーネントというのはそうたくさんはできない。
どうしても汎用的に再利用しようとするとすごくシンプルなものになってくる。
そうすると、「わざわざつくらなくても、jQueryベースでもよくない？」となりかねない。

プロジェクトでも、１度しか使わないようなコンポーネントがあったりしないだろうか？

では、１度しか使わないコンポーネントは要らないのか？
いや、そうではない。それが次の項目。

(2) コード分割

　コンポーネントのもう一つの側面は、ある目的や関心を小さく区切ってそれだけに焦点をあててコーディングすること。
　そうすることで、コードの可読性があがったり、修正時の影響が極限化される。
　これを踏まえた上で、いろいろなところで使われるようになると再利用性が実現される。

　とはいえ、１度しか使わないようなコンポーネントですら、上記のようなコーディング上のメリットがある。

2. JavascriptとHTML/CSSとの関係性：ライブラリの2つのグループ

　コンポーネントライブラリを大きく分けると２つに分類できると思う。

• Javascript内にHTMLやCSSを内包する。（Javascriptベース型）
• Javascript、HTML、CSSを独立させるが一つのファイルで管理する。(分離パッケージ型）

以下、補足。

(1) Javascriptベース型

ReactやMithrillをベースにしたコンポーネントライブラリは、JSXによりJavascript（以下、Js）内にHTMLやCSSを内包する。そして、Jsベースでコンポーネントを作る。

(2) 分離パッケージ型

　Angular、Vue、Svelte、Riotなどは、JsとHTML/CSSを分けて操作する。その代わり、HTMLに独自の属性(v-if）などを付与する。

3. ライブラリグループの評価

前節のグループのそれぞれの利点と問題点を指摘する。

(1) Javascriptベース型

a. 利点

　
　Reactの場合、JsのクラスとHTML構造がマッピングされる。要は、HTMLのデータモデルをJsのクラスで表現する。
　HTMLを扱う場合に、Js視点でコーディングでき、思考が1元化して分かりやすい。
　また、HTMLとクラスをマッピングするという考え方により、コーディングルールが明確化し、コードの可読性が向上する。

b. 問題点

　ReactのようにJSをベースにすると、HTMLやCSSを別でコーダーさんがつくった場合、分割して、さらにJs内に取り込むという作業が発生する。
　単なる分割は、分離パッケージ型でも発生するのだが、さらにJs内に取り込むという２段階の分割過程があり、意図通りに表示されないことがある。

(2) 分離パッケージ型

a. 利点

　
　Js、HTML、CSSをそれぞれ分離しながらも一つのコンポーネントファイル（たとえば、.vue）にまとめるので、関心が絞られて分かりやすい。

　また、js、HTML、CSSのコンテキスト（文脈）が別れているので読みやすく、コーダーさんが作ったものを分割するときも比較的手間が少ない。

　タグ内に、独自属性を埋め込むことで、HTMLベースで構造ををプログラム化できるので、見た目を意識したい人には分かりやすい。ここは、Jsベースが良い人と好みが分かれるところかもしれない。

b. 問題点

　HTMLやCSSをコーダーさんが作った場合分割する手間が発生する。
　また、HTMLに独自属性を埋めていく手間が発生する。

4. JavascriptとHTMLの関係：コンポーネントライブラリとjQuery

(1) 有名ライブラリはJsとHTMLが密接に依存する

　上記にあげたライブラリを使うと、JsとHTMLは完全に独立しているわけでなく、HTMLを分割し、Jsに内包したり、HTMLに独自属性を付与するという依存性、手間が発生する。

　そもそも、そうしないとコンポーネントはつくれないだろうか？
　そんなことはない。

(2) HTMLを壊さずに操作するjQueryの視点

jQueryはコンポーネントを作るためのライブラリではない。あくまでもHTML（DOM）を手軽に操作するシンタックスシュガー、ユーティリティライブラリである。
　
　ただ、このライブラリの観点は、HTMLをReactのようなJsベース型のように内側から操作するのではなく、外側から操作する。
　また、Vueのような分離パッケージ型のように独自属性も挿入しない。
　
　つまり、jQueryは、HTMLと完全に独立した存在で、HTMLを変更せず、完全に外側から操作する。
　コーダーさんがつくったコードを分割することも、変更することもなく操作することができる。

(3) jQueryの欠点：Js内の値（モデル）とHTML（DOM)の関係性が曖昧、不定

jQueryは前述したとおり、コンポーネントをつくることを目的にはしていない。
なので、書き手によっていろいろな操作コードが書かれることになり、可読性が必ずしも保たれない。

ReactのようにJsとHTMLの関係性が明確であれば、コードリーディングは用意であるが、jQueryの場合そのルールがないので、コードリーディンが必ずしも容易とはならない。
　
　特に、データモデルというJs内でのデータとDOMとの関係性をどうつくるかは明示されないので、書き手任せになってしまう。
　
　ここは、ReactのようなJsベース型ライブラリの方が優位である。

　

5. JsとHTMLを独立化させる利点

jQueryにはJsとの関係性が曖昧、不定になるという欠点はあったが、JsがHTMLと独立化するというのは利点もある。

(1) 構造と振る舞いを独立し、異なるデザインに対応

自社サービスなどでは、デザインやHTMLの構造がそう大きく変わることはないが、受託開発の場合、デザインもHTML、CSSも案件ごとに変わることがある。
　
　それを自社開発したコンポーネントに合わせて変換させていくこともできるが、やはり分割や調整の手間が発生する。

　JsとHTMLが依存関係になければこのようなことはあまり発生しない。適宜、HTMLにidやclassなどセレクターを打ち直すか、Js側で指定するセレクターを変えるだけでよい。

(2) JsとHTML/CSSの技術的な変化速度の違い

　Jsの技術変化の速度は速い。一方、HTMLやCSSの仕様が変化される速度はとても遅い。つまり、JsとHTMLが依存化している場合、Jsの変更にあわせてHTMLやCSSも変更させる可能性がある。
　JsとHTMLを独立しておけば、Jsが変わろうともHTMLとCSSの構造やスタイルは変更することは少ない。

6. JsとHTMLを独立させつつ対応付け

(1) ReactとjQueryの視点を合わせると良いのでは？

　ここまでにみてきたとおり、有名なコンポーネントライブラリはHTMLとの依存性が高い。けれど、それは表裏一体で、HTMLとJsとの関係性が分かりやすくもある。
　ただ、ソースコードとして、それらを混ぜ合わせておく必要があるだろうか？
　
　コードのルールとしてそれがあればよいのではないだろうか？
　
　そうすることで、JsとHTMLの依存による問題も起きないが、コードリーディングもしやすくなる。
　
　つまり、ReactのようなDOMをJsのクラスで表現しつつ、jQueryのようにHTMLに変更を加えず、操作する方法であれば、可読性と独立性が保たれる。

　　ただし、VueのようにHTMLに属性をうって、HTMLをみながら構造を操作するのが好きな人は直感性が失われるかもしれない。

　ただ、コーダーさんが作ったものを分割する手間は減るので、かなり効率性はあがると思う。

　ちなみに、外側からDOMを対応させるクラスを作るのであればAngularのComponentクラスがよいと思う。クラスのプロパティにDOMを指示するselectorを持ったせて、対応づけをするのは良いと思う。

Angular公式:Introduction to components and templates

component

export class HeroListComponent implements OnInit {
  heroes: Hero[];
  selectedHero: Hero;

  constructor(private service: HeroService) { }

  ngOnInit() {
    this.heroes = this.service.getHeroes();
  }

  selectHero(hero: Hero) { this.selectedHero = hero; }
}

(2) Simulacra.js：JsとHTMLを独立化させたデータバインディングライブラリ

　このような考えができるライブラリとしては、以下のライブラリがある。要は、SPAでいうところのデータバインディングの問題で、HTMLを変更しないデータバインディングライブリである。

　ただし、双方向バインディングではなく一方向だけである。そもそも、双方向である必要はいつもあるとは限らない。

　Simulacra.js

JsでHTMLのセレクターをキーとするオブジェクトリテラルをつくり、ライブラリに渡すと、データバインディングしてくれる。

template

<template id="product">
  <h1 class="name"></h1>
  <div class="details">
    <div><span class="size"></span></div>
    <h4 class="vendor"></h4>
  </div>
</template>

上記のタグに対応するモデルとなるオブジェクトリテラルを作る。

model

var state = {
  name: 'Pumpkin Spice Latte',
  details: {
    size: [ 'Tall', 'Grande', 'Venti' ],
    vendor: 'Coffee Co.'
  }
}

　
バインディング。

bind

var bindObject = require('simulacra') // or `window.simulacra`
var template = document.getElementById('product')

var node = bindObject(state, [ template, {
  name: '.name',
  details: [ '.details', {
    size: '.size',
    vendor: '.vendor'
  } ]
} ])

document.body.appendChild(node)

　個人的に、全体的な視点や発想はいいと思うが、モデルとセレクタのバインディングコードが無駄な気がしている。
　この部分もなくすことができる。（自作したことがある）

(3) eleventy.js（静的サイトジェネレーター）：HTMLの再利用

JsとHTMLを分けると、HTMLを再利用するときどうするのかというと、シンプルに静的サイトジェネレーターのinclude機能を使えばいいと思います。

　オススメの静的サイトジェネレーターはJsで動く「11ty：イレブンティ」。

　デプロイ前に動的に作りたいなら、11tyでJsのフィルター関数を作ってしまえばいいと思います。
　コーディングが楽です。

11ty

わざわざGatsbyみたいにJsでコンポーネント作らなくても、pug、nanjucks、markdown、htmlなどでHTMLを作れます。
もちろん、フィルター関数とかも作れるので、繰り返し作業とか動的な処理も対応できます。

7. まとめ：コンポーネントという「発想・視点」は大切

(1) コンポーネントライブラリを使う煩わしさ

　この記事を書いた動機は、受託をしていると毎回デザインがかわり、HTMLやCSSも変わる事が多く、その都度、コンポーネントを別途つくる手間が凄くめんどくさかった。

　また、わざわざコーディングしてあるHTMLをバラすという手間も無駄に感じた。

　その他、VuexやReduxなどの状態管理が煩わしく、そもそも双方向バインディングなどをせず、ワントランザクションでSPAをつくれば、状態も複雑化しないので、使う必要をあまり感じなかった。

　というように、コンポーネントという「考え方・設計」はいいのだけど、その実現方法について無駄や手間を感じたので、こうした記事を書いてみた。

　

(2) コンポーネントライブラリを使う場所（自社サービス・大規模開発）

　利用シーンによっては煩わしいのだけど、自社サービスの大規模開発の場合は、ReactやVueなどの有名なコンポーネントライブラリを使うのがよいと思う。
　
　その方がドキュメントの整備も公式に任せればいいし、ネット上に情報が沢山ある。

　またコーディングを規制することができるので、書き方をプログラマー間で統一させやすい。
　
　自社サービスの場合、デザインやHTMLの構造などもコンポーネント側に合わせた開発できる。

　裏返せば、受託で毎回デザインが変わる場合、必ずしもコンポーネントライブラリを使うべきかは考えようだと思う。

　以下に分かりやすいコーディング設計ができるかに依存する。でも、それができないと考えるなら、有名なライブラリを使うのが無難だと思う。

(3) コンポーネントは「発想・視点」が大切

　コードを独立化、局所化するという発想がコンポーネントはよいと思う。
　これは疑義なく支持したい。
　けれど、その実現方法については、ケースバイケースかなという気もする。
　
　自社サービスか受託開発、大規模か小規模か、などプロジェクトの前提条件によっても異なると思う。

　とにかくコンポーネントを作る手間はどんなものでも発生するのだけど、できるだけその手間が最小化するものがよいと思う。

0. 記事作成の動機：コンポーネントを作る煩わしさ

　ReacやVueなどのJsでコンポーネントをつくるのがめんどくさいと感じるときが多々あった。
　なので、コンポーネントを作る意味を再考してみる。

　以前、似たような記事を作ったけど、それをもう少し整理してみた。

SPA(Single Page Application) を採用するメリット再考(2020年）

1. コンポーネントを作ることの目的

knockoutjsを皮切りに10年以上SPAでのアプリを作ってきた。
最近感じるのは、VueやReactでのコンポーネント分割はすごく手間がかかるということ。
そこで改めて、コンポーネントを作ることを考えてみる。

コンポーネントを作る目的は大きく分けて２つあると思う。

• 再利用
• コード分割（独立性）

以下、上記について補足。

(1) 再利用

コンポーネントを作ることの醍醐味であり、便利さを実感できるのがこの再利用性。

一度作ったコンポーネントをプロパティを替えていろいろな箇所で使える。
最近では、bit.devみたいなコンポーネントのリポジトリがあってそこで広く使えるようになると凄く便利。

とはいえ、そこまで汎用性をもったコンポーネントというのはそうたくさんはできない。
どうしても汎用的に再利用しようとするとすごくシンプルなものになってくる。
そうすると、「わざわざつくらなくても、jQueryベースでもよくない？」となりかねない。

プロジェクトでも、１度しか使わないようなコンポーネントがあったりしないだろうか？

では、１度しか使わないコンポーネントは要らないのか？
いや、そうではない。それが次の項目。

(2) コード分割

　コンポーネントのもう一つの側面は、ある目的や関心を小さく区切ってそれだけに焦点をあててコーディングすること。
　そうすることで、コードの可読性があがったり、修正時の影響が極限化される。
　これを踏まえた上で、いろいろなところで使われるようになると再利用性が実現される。

　とはいえ、１度しか使わないようなコンポーネントですら、上記のようなコーディング上のメリットがある。

2. JavascriptとHTML/CSSとの関係性：ライブラリの2つのグループ

　コンポーネントライブラリを大きく分けると２つに分類できると思う。

• Javascript内にHTMLやCSSを内包する。（Javascriptベース型）
• Javascript、HTML、CSSを独立させるが一つのファイルで管理する。(分離パッケージ型）

以下、補足。

(1) Javascriptベース型

ReactやMithrillをベースにしたコンポーネントライブラリは、JSXによりJavascript（以下、Js）内にHTMLやCSSを内包する。そして、Jsベースでコンポーネントを作る。

(2) 分離パッケージ型

　Angular、Vue、Svelte、Riotなどは、JsとHTML/CSSを分けて操作する。その代わり、HTMLに独自の属性(v-if）などを付与する。

3. ライブラリグループの評価

前節のグループのそれぞれの利点と問題点を指摘する。

(1) Javascriptベース型

a. 利点

　
　Reactの場合、JsのクラスとHTML構造がマッピングされる。要は、HTMLのデータモデルをJsのクラスで表現する。
　HTMLを扱う場合に、Js視点でコーディングでき、思考が1元化して分かりやすい。
　また、HTMLとクラスをマッピングするという考え方により、コーディングルールが明確化し、コードの可読性が向上する。

b. 問題点

　ReactのようにJsをベースにすると、HTMLやCSSを別でコーダーさんがつくった場合、分割して、さらにJs内に取り込むという作業が発生する。
　単なる分割は、分離パッケージ型でも発生するのだが、さらにJs内に取り込むという２段階の分割過程があり、意図通りに表示されないことがある。

(2) 分離パッケージ型

a. 利点

　
　Js、HTML、CSSをそれぞれ分離しながらも一つのコンポーネントファイル（たとえば、.vue）にまとめるので、関心が絞られて分かりやすい。

　また、Js、HTML、CSSのコンテキスト（文脈）が別れているので読みやすく、コーダーさんが作ったものを分割するときも比較的手間が少ない。

　タグ内に、独自属性を埋め込むことで、HTMLベースで構造ををプログラム化できるので、見た目を意識したい人には分かりやすい。ここは、Jsベースが良い人と好みが分かれるところかもしれない。

b. 問題点

　HTMLやCSSをコーダーさんが作った場合分割する手間が発生する。
　また、HTMLに独自属性を埋めていく手間が発生する。

4. JavascriptとHTMLの関係：コンポーネントライブラリとjQuery

(1) 有名ライブラリはJsとHTMLが密接に依存する

　上記にあげたライブラリを使うと、JsとHTMLは完全に独立しているわけでなく、HTMLを分割し、Jsに内包したり、HTMLに独自属性を付与するという依存性、手間が発生する。

　そもそも、そうしないとコンポーネントはつくれないだろうか？
　そんなことはない。

(2) HTMLを壊さずに操作するjQueryの視点

jQueryはコンポーネントを作るためのライブラリではない。あくまでもHTML（DOM）を手軽に操作するシンタックスシュガー、ユーティリティライブラリである。
　
　ただ、このライブラリの観点は、HTMLをReactのようなJsベース型のように内側から操作するのではなく、外側から操作する。
　また、Vueのような分離パッケージ型のように独自属性も挿入しない。
　
　つまり、jQueryは、HTMLと完全に独立した存在で、HTMLを変更せず、完全に外側から操作する。
　コーダーさんがつくったコードを分割することも、変更することもなく操作することができる。

(3) jQueryの欠点：Js内の値（モデル）とHTML（DOM)の関係性が曖昧、不定

jQueryは前述したとおり、コンポーネントをつくることを目的にはしていない。
なので、書き手によっていろいろな操作コードが書かれることになり、可読性が必ずしも保たれない。

ReactのようにJsとHTMLの関係性が明確であれば、コードリーディングは容易であるが、jQueryの場合そのルールがないので、コードリーディンが必ずしも容易とはならない。
　
　特に、データモデルというJs内でのデータとDOMとの関係性をどうつくるかは明示されないので、書き手任せになってしまう。
　
　ここは、ReactのようなJsベース型ライブラリの方が優位である。

　

5. JsとHTMLを独立化させる利点

jQueryにはJsとの関係性が曖昧、不定になるという欠点はあったが、JsがHTMLと独立化するというのは利点もある。

(1) 構造と振る舞いを独立し、異なるデザインに対応

自社サービスなどでは、デザインやHTMLの構造がそう大きく変わることはないが、受託開発の場合、デザインもHTML、CSSも案件ごとに変わることがある。
　
　それを自社開発したコンポーネントに合わせて変換させていくこともできるが、やはり分割や調整の手間が発生する。

　JsとHTMLが依存関係になければこのようなことはあまり発生しない。適宜、HTMLにidやclassなどセレクターを打ち直すか、Js側で指定するセレクターを変えるだけでよい。

(2) JsとHTML/CSSの技術的な変化速度の違い

　Jsの技術変化の速度は速い。一方、HTMLやCSSの仕様が変化される速度はとても遅い。つまり、JsとHTMLが依存化している場合、Jsの変更にあわせてHTMLやCSSも変更させる可能性がある。
　JsとHTMLを独立しておけば、Jsが変わろうともHTMLとCSSの構造やスタイルは変更することは少ない。

6. JsとHTMLを独立させつつ対応付け

(1) ReactとjQueryの視点を合わせると良いのでは？

　ここまでにみてきたとおり、有名なコンポーネントライブラリはHTMLとの依存性が高い。けれど、それは表裏一体で、HTMLとJsとの関係性が分かりやすくもある。
　ただ、ソースコードとして、それらを混ぜ合わせておく必要があるだろうか？
　
　コードのルールとしてそれがあればよいのではないだろうか？
　
　そうすることで、JsとHTMLの依存による問題も起きないが、コードリーディングもしやすくなる。
　
　つまり、ReactのようなDOMをJsのクラスで表現しつつ、jQueryのようにHTMLに変更を加えず、操作する方法であれば、可読性と独立性が保たれる。

　　ただし、VueのようにHTMLに属性をうって、HTMLをみながら構造を操作するのが好きな人は直感性が失われるかもしれない。

　ただ、コーダーさんが作ったものを分割する手間は減るので、かなり効率性はあがると思う。

　ちなみに、外側からDOMを対応させるクラスを作るのであればAngularのComponentクラスがよいと思う。クラスのプロパティにDOMを指示するselectorを持ったせて、対応づけをするのは良いと思う。

Angular公式:Introduction to components and templates

component

export class HeroListComponent implements OnInit {
  heroes: Hero[];
  selectedHero: Hero;

  constructor(private service: HeroService) { }

  ngOnInit() {
    this.heroes = this.service.getHeroes();
  }

  selectHero(hero: Hero) { this.selectedHero = hero; }
}

(2) Simulacra.js：JsとHTMLを独立化させたデータバインディングライブラリ

　このような考えができるライブラリとしては、以下のライブラリがある。要は、SPAでいうところのデータバインディングの問題で、HTMLを変更しないデータバインディングライブリである。

　ただし、双方向バインディングではなく一方向だけである。そもそも、双方向はいつも必要だろうか？

　Simulacra.js

JsでHTMLのセレクターをキーとするオブジェクトリテラルをつくり、ライブラリに渡すと、データバインディングしてくれる。

template

<template id="product">
  <h1 class="name"></h1>
  <div class="details">
    <div><span class="size"></span></div>
    <h4 class="vendor"></h4>
  </div>
</template>

上記のタグに対応するモデルとなるオブジェクトリテラルを作る。

model

var state = {
  name: 'Pumpkin Spice Latte',
  details: {
    size: [ 'Tall', 'Grande', 'Venti' ],
    vendor: 'Coffee Co.'
  }
}

　
バインディング。

bind

var bindObject = require('simulacra') // or `window.simulacra`
var template = document.getElementById('product')

var node = bindObject(state, [ template, {
  name: '.name',
  details: [ '.details', {
    size: '.size',
    vendor: '.vendor'
  } ]
} ])

document.body.appendChild(node)

　個人的に、全体的な視点や発想はいいと思うが、モデルとセレクタのバインディングコードが無駄な気がしている。
　この部分もなくすことができる。（自作したことがある）

(3) eleventy.js（静的サイトジェネレーター）：HTMLの再利用

JsとHTMLを分けると、HTMLを再利用するときどうするのかというと、シンプルに静的サイトジェネレーターのinclude機能を使えばいいと思います。

　オススメの静的サイトジェネレーターはJsで動く「11ty：イレブンティ」。

　デプロイ前に動的に作りたいなら、11tyでJsのフィルター関数を作ってしまえばいいと思います。
　コーディングが楽です。

11ty

わざわざGatsbyみたいにJsでコンポーネント作らなくても、pug、nanjucks、markdown、htmlなどでHTMLを作れます。
もちろん、フィルター関数とかも作れるので、繰り返し作業とか動的な処理も対応できます。

7. まとめ：コンポーネントという「発想・視点」は大切

(1) コンポーネントライブラリを使う煩わしさ

　この記事を書いた動機は、受託をしていると毎回デザインがかわり、HTMLやCSSも変わる事が多く、その都度、コンポーネントを別途つくる手間が凄くめんどくさかった。

　また、わざわざコーディングしてあるHTMLをバラすという手間も無駄に感じた。

　その他、VuexやReduxなどの状態管理が煩わしく、そもそも双方向バインディングなどをせず、ワントランザクションでSPAをつくれば、状態も複雑化しないので、使う必要をあまり感じなかった。

　というように、コンポーネントという「考え方・設計」はいいのだけど、その実現方法について無駄や手間を感じたので、こうした記事を書いてみた。

　

(2) コンポーネントライブラリを使う場所（自社サービス・大規模開発）

　利用シーンによっては煩わしいのだけど、自社サービスの大規模開発の場合は、ReactやVueなどの有名なコンポーネントライブラリを使うのがよいと思う。
　
　その方がドキュメントの整備も公式に任せればいいし、ネット上に情報が沢山ある。

　またコーディングを規制することができるので、書き方をプログラマー間で統一させやすい。
　
　自社サービスの場合、デザインやHTMLの構造などもコンポーネント側に合わせた開発できる。

　裏返せば、受託で毎回デザインが変わる場合、必ずしもコンポーネントライブラリを使うべきかは考えようだと思う。

　以下に分かりやすいコーディング設計ができるかに依存する。でも、それができないと考えるなら、有名なライブラリを使うのが無難だと思う。

(3) コンポーネントは「発想・視点」が大切

　コードを独立化、局所化するという発想がコンポーネントはよいと思う。
　これは疑義なく支持したい。
　けれど、その実現方法については、ケースバイケースかなという気もする。
　
　自社サービスか受託開発、大規模か小規模か、などプロジェクトの前提条件によっても異なると思う。

　とにかくコンポーネントを作る手間はどんなものでも発生するのだけど、できるだけその手間が最小化するものがよいと思う。