非同期通信

リクエスト後にブラウザが再読み込みされず一部分のみが更新される通信方法。
待ち時間や画面の切り替わりがなくストレスが少なく操作できます。
SNSの既読機能だったり、いいね機能だったり多用されています。

Ajax

JavaScriptを使用して非同期通信を行う処理のこと
("Asynchronous JavaScript + XML"の略)

メモアプリを実装しながら投稿機能を非同期通信で、また既読機能をつけてみましょう。

新規アプリケーションを作成

console

% rails _6.0.0_ new memo_app -d mysql

% rails db:create

ルーティングを設定

config/routes.rb

Rails.application.routes.draw do
 root to: 'posts#index'
post 'posts', to: 'posts#create'
end

postモデルを作成

% rails g model post

マイグレーションファイル作成

db/migrate/....

class CreatePosts < ActiveRecord::Migration[6.0]
  def change
    create_table :posts do |t|
      t.text :content
      t.boolean :checked
      t.timestamps
    end
  end
end

boolean型

trueまたはfalseの真理値を判断する型です。

既読機能実装時に「既読か未読か」をboolean型で管理します。

% rails db:migrate

postsコントローラーを作成

% rails g controller posts index

アクションを記述

class PostsController < ApplicationController

  def index
    @posts = Post.all.order(id: "DESC")
  end

 def create
   Post.create(content: params[:content])
   redirect_to action: :index

end

ビューを編集

views/posts/index.html.erb

<h1>MemoApp</h1>
<%= form_with url:  "/posts", method: :post,id: "form" do |form| %>
  <%= form.text_field :content %>
  <%= form.submit '投稿する' , id: "submit" %>
<% end %>

<% @posts.each do |post| %>
<div class="post">
  <div class="post-date">
    投稿日時：<%= post.created_at %>
  </div>
  <div class="post-content">
    <%= post.content %>
  </div>
</div>
<% end %>

memo_appのappディレクトリにあるjavascriptディレクトリに
memo.jsとchecked.jsというファイルを作成

app/javascript/packs/application.js

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("../checked")
require("../memo")

非同期通信の実装方法

非同期通信時のレスポンス内容はHTMLではなくデータを返却します。
それをJavaScriptで受け取り、すでに表示されているHTMLを部分的にレンダリングするような仕組みです。

動きの図

エンドポイント

Ajaxでやり取りする際の、データ返却のアクションを実行するためのURLのことです。

Ajaxを実現するためには、コントローラーでのレスポンスを、HTMLではなくjsonなどのデータ形式で返却する必要がありデータを取得する時にアクセスするためのURLを、エンドポイントといいます。

既読機能の実装の際に、エンドポイントには「どのメモを既読にしたか」を判別するため「メモのid」というパラメーターを渡す必要があります。

URLパラメーター

サーバーに情報を送るために記載するURL末尾の文字列のことで、送信した情報は、今までparams[:id]などで取得し、使用してきました。
非同期通信では、このURLパラメーターを活用し、サーバーへデータを送ります。

queryパラメーター

queryパラメーターとは、

http://sample.jp/?fruit=orange

のように、「？」以降に情報をかくURLパラメーターです。
「？」以降の構造は、?<変数名>=<値>となっています。

このURLでparams[:fruit]とすると、orangeが戻り値となります。

エンドポイントを、queryパラメーターで記述

既読機能に必要なパラメーターは、「どのメモを既読したか」を判別するためのメモのidです。
メモのidを取得できるようにルーティングに設定します。
下記を追記しましょう。

config/routes.rb

Rails.application.routes.draw do
  root to: 'posts#index'
  post 'posts', to: 'posts#create'
  get 'posts', to: 'posts#checked'
end

queryパラメーターを使用した場合、/posts/?id=1とリクエストを行うと、params[:id]にてパラメーターを取得することができます。

pathパラメーター

http://tweets.jp/tweets/1

のように指定するURLパラメーターです。
queryパラメーターとの使い分けは、pathパラメーターで指定するのは「リソースを識別する場合」です。

既読機能のエンドポイントは、queryパラメーターで設定しました。しかし、今回のように渡す情報が一意の情報であればpathパラメーターの方が適しています。

routes.rb

Rails.application.routes.draw do
  root to: 'posts#index'
  post 'posts', to: 'posts#create'
  get 'posts/:id', to: 'posts#checked'
end

今回のように、postのidであれば'posts/:id'のように記載するpathパラメーターの方が認識もしやすく、記述も単純です。

データ形式

コンピューター上でデータをやり取りする際の形式のことです。プログラミングではJSONが多く使用されます。

XML

JSONと同じくデータをやり取りする際に使用する形式の1つです。

JSONはRubyのハッシュに似ていますが、XMLはHTMLに似ています。
JSONはJavaScriptObjectNotationの略であり、JavaScriptにおけるオブジェクトの表記です。そのため、データをJavaScriptのオブジェクト指向で取り扱う場合に相性が良いです。

text.json

{
  "name": "json表記",
  "format": {
    "json": "JavaScriptにおけるオブジェクトの表記",
    "xml": "HTMLに似ています"
  }
}

text.xml

<name>xml表記</name>
<format>
    <json>JavaScriptにおけるオブジェクトの表記</json>
    <xml>HTMLに似ています</xml>
</format>

Ruby on Railsは、デフォルトではHTMLをレスポンスとして返却する仕組みになっているので
JSONでデータを返却するにはコントローラーの記述を工夫する必要があります。

その際にrenderメソッドを使用します。

既読機能のcheckedというアクションを定義

app/controllers/posts_controller.rb

class PostsController < ApplicationController
  def index
    @posts = Post.all.order(id: "DESC")
  end

  def create
    Post.create(content: params[:content])
    redirect_to action: :index
  end

  def checked
    post = Post.find(params[:id])
    if post.checked 
      post.update(checked: false)
    else
      post.update(checked: true)
    end

    item = Post.find(params[:id])
    render json: { post: item }
  end
end

①先ほど設定したURLパラメーターから、既読したメモのidが渡されるように設定するので、そのidを使用して該当するレコードを取得しています。

②if文で、post.checkedという既読であるか否かを判定するプロパティを指定し、既読であれば「既読を解除するためにfalseへ変更」し、既読でなければ「既読にするためtrueへ変更」します。
ActiveRecordのupdateというメソッドを使用して更新しています。

最後に、更新したレコードをitem = Post.find(params[:id])で取得し直し
render json:{ post: item }でJSON形式（データ）としてchecked.jsに返却しています。

バックエンド側の処理はいったんここまで次はフロントにいきます。

最近、HTML/scssとJavaScriptを習ってきたので、ちょっとずつアウトプットしていきたいと思い、iPhoneの計算機をパクろうとしてみました。

今回実装したところ

HTML/scss部分を実装しました。

(スクショなので、デベロッパーツールの部分が少し含まれています)

実装内容

calculator.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>電卓</title>
    <link rel="stylesheet" href="breakpoints/base.css">
</head>

<body>
    <div class="calc">

        <div class="display">
            <input type="text" class='calcArea'>
        </div>
        <div class="buttons">
            <div class="row">
                <button class='btn'>AC</button>
                <button class='btn'>+/-</button>
                <button class='btn'>%</button>
                <button class='btn symbol'>÷</button>
            </div>
            <div class="row">
                <button class='btn number'>7</button>
                <button class='btn number'>8</button>
                <button class='btn number'>9</button>
                <button class='btn symbol'>×</button>
            </div>
            <div class="row">
                <button class='btn number'>4</button>
                <button class='btn number'>5</button>
                <button class='btn number'>6</button>
                <button class='btn symbol'>-</button>
            </div>
            <div class="row">
                <button class='btn number'>1</button>
                <button class='btn number'>2</button>
                <button class='btn number'>3</button>
                <button class='btn symbol'>+</button>
            </div>
            <div class="row">
                <button class='btn-0 number'>0</button>
                <button class='btn number'>.</button>
                <button class='btn symbol'>=</button>
            </div>
        </div>
    </div>
</body>

</html>

base.scss

$bRadius: 70px;
$bMargin: 3px;
$calcWidth: ($bRadius + $bMargin * 2) * 4;
$displayHeight: 120px;
$calcAreaColor: black;
$calcTextColor: white;

body {
    margin: 0;
    position: relative;
    background-color: $calcAreaColor;
        width: 100vw;
    height: 100vh;
}

.calc {
    position: absolute;
    bottom: 0;

}

.display {
  height: $displayHeight;
  position: relative;

  & .calcArea {
    position: absolute;
    bottom: 5px;
    background-color: $calcAreaColor;
    color: $calcTextColor;
    text-align: right;
    font-size: 20px;
    padding: 0;
    border-width: 0;
    width: $calcWidth;
    height: $displayHeight / 2;

    &:focus {
      outline: none;
      caret-color: $calcAreaColor;
    }
  }
}

.buttons {
  font-size: 0;
    margin: 0 auto;

  & .row {
    display: block;

    & .btn {
      margin: $bMargin;
      font-size: 20px;
      width: $bRadius;
      height: $bRadius;
      border-radius: $bRadius / 2;
      border: none;

      &:focus {
        outline: none;
      }

      &.symbol {
        background-color: rgb(255, 145, 0);
        color: white;
      }

      &.number {
        background-color: gray;
        color: white;
      }
    }

    & .btn-0 {
      @extend .btn;
      width: ($bRadius + $bMargin) * 2;
    }
  }
}

大したことはやっていませんが、通常だとボタンとボタンに謎の隙間がありました。
そこで、インライン要素で謎の隙間が出てくる問題を参考にしました。

• bottonsクラス（親クラス）にfont-size: 0;を設定
• btnクラスに（子クラス）にfont-size: 20px;を設定

そうすることで、その謎の隙間をなくすことに成功し、自分でmarginを設定することができました。

課題

• Javascriptの追加
• 横幅と縦幅が謎にスクロールできてしまう問題の解消
• 画面を横にした時の見た目を整える

etc...

今後の展望

とりあえず、JavaScriptの部分を実装して、計算機能を持たせたいと思います！

Active Storage利用して複数の画像を投稿できる機能とJavaScriptを用いてプレビューできる機能を実装します。
今回も初心者向けにレシピ投稿アプリを例に作成していきます。

完成イメージ

※なお今回は前回の記事の発展的な内容になっております。
Active Storageの導入方法についてこちら

プレビュー機能についてはこちら

今回は上記の機能が実装されている前提で話を進めていきます。

Active Storage関連ファイルの修正

まずはActive Storage周りのファイルから修正していきます。

アソシエーションの修正

レコードとファイルを1対1の関係で紐づけるためにhas_one_attachedメソッドを使用していましたが、今回は1対多の関係に変更するのでhas_many_attachedメソッドに修正します。Railsガイド

また、imageを複数形のimagesに変更します。

app/models/recipe.rb

class Recipe < ApplicationRecord
  has_many_attached :images #ここを修正
end

投稿フォームの修正

file_fieldのimageをimagesに修正します。
また、name属性を追加し送信する際に必要な画像の配列を設定します。

app/views/recipes/new.html.erb

<%= form_with model: @recipe, local: true do |f| %>

#中略
    <div class="form-group">
      <label class="text-secondary">画像</label><br>
      <%= f.file_field :images, name: 'recipe[images][]' %> #ここを修正
    </div>

#以下略

<% end %>

コントローラーの修正

画像の配列を受け取れるようにストロングパラメーターを修正します。

app/controllers/recipes_controller.rb

class RecipesController < ApplicationController

#中略

  private
  def recipe_params
    params.require(:recipe).permit(:title, :text, :category_id, :time_required_id, images: []) #images: []に修正
  end
end

バリデーションの設定

今回、投稿できる画像を３枚までにしたいので、独自のバリデーションメソッドを作成していきます。Railsガイド

app/models/recipe.rb

class Recipe < ApplicationRecord
  has_many_attached :images 

#ここから追加
  validate :image_length #カスタムメソッドなので"validate"

  private

  def image_length
    if images.length >= 4
      errors.add(:images, "は3枚以内にしてください")
    end
  end
#ここまで追加
end

以上でActive Storage関連の修正は完了です。

preview.jsの修正

今回は以下のGIFのようにひとつ画像を選択すると新しく画像選択フォームが出現する仕様にします。

まずは、前回作成したpreview.jsを確認してみましょう。

app/javascript/packs/preview.js

if (document.URL.match(/new/)){
  document.addEventListener('DOMContentLoaded', () => {
    const createImageHTML = (blob) => {
      const imageElement = document.getElementById('new-image');
      const blobImage = document.createElement('img');
      blobImage.setAttribute('class', 'new-img')
      blobImage.setAttribute('src', blob);

      imageElement.appendChild(blobImage);
    };

    document.getElementById('recipe_image').addEventListener('change', (e) => {
      const imageContent = document.querySelector('img');
      if (imageContent){
        imageContent.remove();
      }

      const file = e.target.files[0];
      const blob = window.URL.createObjectURL(file);
      createImageHTML(blob);
    });
  });
}

こちらを修正していきます。

今回は、以下のようなHTMLを作成することを前提にpreview.jsを編集していきます。

/recipes/new

<div id="new-image">
<!-- ここから -->
  <div class="image-element">
    <img class="new-img" src="xxxxxxx...">
    <input id="recipe_image_n" class="recipe-images" name="recipe[images][]" type="file">
  </div>
<!-- ここまでを複製していくイメージ -->
</div>

前回まではid="new-image"のdiv要素に直接プレビュー画像を挿入していましたが、今回は新たなdiv要素を作成しその中に画像を挿入していきます。

そして、classにimage-elementを設定しquerySelectorAllメソッドとlengthメソッドで作成された要素の数を定数imageElementNumに格納します。

app/javascript/packs/preview.js

if (document.URL.match(/new/)){
  document.addEventListener('DOMContentLoaded', () => {

    const ImageList = document.getElementById('new-image'); //追記

    const createImageHTML = (blob) => {

      const imageElement = document.createElement('div'); //new-imageからdivに変更

//ここから
      imageElement.setAttribute('class', "image-element")
      let imageElementNum = document.querySelectorAll('.image-element').length
//ここまで追記

      const blobImage = document.createElement('img');
      blobImage.setAttribute('class', 'new-img')
      blobImage.setAttribute('src', blob);

      imageElement.appendChild(blobImage);
      ImageList.appendChild(imageElement); //追記
      });
    };

    document.getElementById('recipe-images').addEventListener('change', (e) => { //recipe-imagesに修正

//ここから
     //const imageContent = document.querySelector('img');
      //if (imageContent){
        //imageContent.remove();
      //}
//ここまで削除

      const file = e.target.files[0];
      const blob = window.URL.createObjectURL(file);
      createImageHTML(blob);
    });
  });
}

次に新しく画像選択フォームを作成する記述をしていきます。
inputのidに先ほど宣言したimageElementNumを使いinput要素が何番目の要素かを判別します。

app/javascript/packs/preview.js

//中略
document.addEventListener('DOMContentLoaded', () => {
    const ImageList = document.getElementById('new-image');
    const createImageHTML = (blob) => {
      const imageElement = document.createElement('div');
      imageElement.setAttribute('class', "image-element")
      let imageElementNum = document.querySelectorAll('.image-element').length

      const blobImage = document.createElement('img');
      blobImage.setAttribute('class', 'new-img')
      blobImage.setAttribute('src', blob);

//ここから
      const inputHTML = document.createElement('input');
      inputHTML.setAttribute('id', `recipe_image_${imageElementNum}`);
      inputHTML.setAttribute('class', 'recipe-images');
      inputHTML.setAttribute('name', 'recipe[images][]');
      inputHTML.setAttribute('type', 'file');
//ここまで追記

      imageElement.appendChild(blobImage);
      imageElement.appendChild(inputHTML); //追記
      ImageList.appendChild(imageElement);

//以下略

これで、画像を選択すると新しく画像選択フォームが出現するようになりました。
2枚目以降にもイベント発火するよう処理を記述していきます。
1度目に発火するイベントとほとんど同じ記述になります。

app/javascript/packs/preview.js

//中略

    const createImageHTML = (blob) => {
      const imageElement = document.createElement('div');
      imageElement.setAttribute('class', "image-element")
      let imageElementNum = document.querySelectorAll('.image-element').length

      const blobImage = document.createElement('img');
      blobImage.setAttribute('class', 'new-img')
      blobImage.setAttribute('src', blob);

      const inputHTML = document.createElement('input');
      inputHTML.setAttribute('id', `recipe_image_${imageElementNum}`);
      inputHTML.setAttribute('class', 'recipe-images');
      inputHTML.setAttribute('name', 'recipe[images][]');
      inputHTML.setAttribute('type', 'file');

      imageElement.appendChild(blobImage);
      imageElement.appendChild(inputHTML);
      ImageList.appendChild(imageElement);

//ここから
      inputHTML.addEventListener('change', (e) => {
        const file = e.target.files[0];
        const blob = window.URL.createObjectURL(file);
        createImageHTML(blob);
      });
//ここまで追記
    };

//以下略

ここまでで複数の画像投稿に対応したプレビュー機能の実装が完了しました。
しかし、これでは1枚画像を選択するたびに新しく画像選択フォームが出現してしまうので何枚でも画像選択が可能になってしまいます。

モデルにバリデーションをかけているので投稿は保存されません。

条件分岐で制限をかけよう

input要素の数える定数imageElementNumを使い、3枚選択すると新しく画像選択フォームが出現しないように条件分岐していきましょう。

app/javascript/packs/preview.js

//中略

      const inputHTML = document.createElement('input');
      inputHTML.setAttribute('id', `recipe_image_${imageElementNum}`);
      inputHTML.setAttribute('class', 'recipe-images');
      inputHTML.setAttribute('name', 'recipe[images][]');
      inputHTML.setAttribute('type', 'file');

      imageElement.appendChild(blobImage);
      if (imageElementNum < 2) {            //追記
        imageElement.appendChild(inputHTML);
      }                                     //追記
      ImageList.appendChild(imageElement);

      inputHTML.addEventListener('change', (e) => {
        const file = e.target.files[0];
        const blob = window.URL.createObjectURL(file);
        createImageHTML(blob);
      });
//以下略

以上で完成です。

以下、完成形のコードです。

app/javascript/packs/preview.js

if (document.URL.match(/new/)){
  document.addEventListener('DOMContentLoaded', () => {
    const ImageList = document.getElementById('new-image');
    const createImageHTML = (blob) => {
      const imageElement = document.createElement('div');
      imageElement.setAttribute('class', "image-element")
      let imageElementNum = document.querySelectorAll('.image-element').length

      const blobImage = document.createElement('img');
      blobImage.setAttribute('class', 'new-img')
      blobImage.setAttribute('src', blob);

      const inputHTML = document.createElement('input');
      inputHTML.setAttribute('id', `recipe_image_${imageElementNum}`);
      inputHTML.setAttribute('class', 'recipe-images');
      inputHTML.setAttribute('name', 'recipe[images][]');
      inputHTML.setAttribute('type', 'file');

      imageElement.appendChild(blobImage);
      if (imageElementNum < 2) {
        imageElement.appendChild(inputHTML);
      } 
      ImageList.appendChild(imageElement);

      inputHTML.addEventListener('change', (e) => {
        const file = e.target.files[0];
        const blob = window.URL.createObjectURL(file);
        createImageHTML(blob);
      });
    };

    document.getElementById('recipe-images').addEventListener('change', (e) => {

      const file = e.target.files[0];
      const blob = window.URL.createObjectURL(file);
      createImageHTML(blob);
    });
  });
}

次回は投稿された複数の画像をスライド形式で表示する実装を行っていきます。

Active Storage利用して複数の画像を投稿できる機能とJavaScriptを用いてプレビューできる機能を実装します。
今回も初心者向けにレシピ投稿アプリを例に作成していきます。

完成イメージ

※なお今回は前回の記事の発展的な内容になっております。
Active Storageの導入方法についてこちら

プレビュー機能についてはこちら

今回は上記の機能が実装されている前提で話を進めていきます。

Active Storage関連ファイルの修正

まずはActive Storage周りのファイルから修正していきます。

アソシエーションの修正

レコードとファイルを1対1の関係で紐づけるためにhas_one_attachedメソッドを使用していましたが、今回は1対多の関係に変更するのでhas_many_attachedメソッドに修正します。Railsガイド

また、imageを複数形のimagesに変更します。

app/models/recipe.rb

class Recipe < ApplicationRecord
  has_many_attached :images #ここを修正
end

投稿フォームの修正

file_fieldのimageをimagesに修正します。
また、name属性を追加し送信する際に必要な画像の配列を設定します。

app/views/recipes/new.html.erb

<%= form_with model: @recipe, local: true do |f| %>

#中略
    <div class="form-group">
      <label class="text-secondary">画像</label><br>
      <%= f.file_field :images, name: 'recipe[images][]' %> #ここを修正
    </div>

#以下略

<% end %>

コントローラーの修正

画像の配列を受け取れるようにストロングパラメーターを修正します。

app/controllers/recipes_controller.rb

class RecipesController < ApplicationController

#中略

  private
  def recipe_params
    params.require(:recipe).permit(:title, :text, :category_id, :time_required_id, images: []) #images: []に修正
  end
end

バリデーションの設定

今回、投稿できる画像を３枚までにしたいので、独自のバリデーションメソッドを作成していきます。Railsガイド

app/models/recipe.rb

class Recipe < ApplicationRecord
  has_many_attached :images 

#ここから追加
  validate :image_length #カスタムメソッドなので"validate"

  private

  def image_length
    if images.length >= 4
      errors.add(:images, "は3枚以内にしてください")
    end
  end
#ここまで追加
end

以上でActive Storage関連の修正は完了です。

preview.jsの修正

今回は以下のGIFのようにひとつ画像を選択すると新しく画像選択フォームが出現する仕様にします。

まずは、前回作成したpreview.jsを確認してみましょう。

app/javascript/packs/preview.js

if (document.URL.match(/new/)){
  document.addEventListener('DOMContentLoaded', () => {
    const createImageHTML = (blob) => {
      const imageElement = document.getElementById('new-image');
      const blobImage = document.createElement('img');
      blobImage.setAttribute('class', 'new-img')
      blobImage.setAttribute('src', blob);

      imageElement.appendChild(blobImage);
    };

    document.getElementById('recipe_image').addEventListener('change', (e) => {
      const imageContent = document.querySelector('img');
      if (imageContent){
        imageContent.remove();
      }

      const file = e.target.files[0];
      const blob = window.URL.createObjectURL(file);
      createImageHTML(blob);
    });
  });
}

こちらを修正していきます。

今回は、以下のようなHTMLを生成することを前提にpreview.jsを編集していきます。

/recipes/new

<div id="new-image">
<!-- ここから -->
  <div class="image-element">
    <img class="new-img" src="xxxxxxx...">
    <input id="recipe_image_n" class="recipe-images" name="recipe[images][]" type="file">
  </div>
<!-- ここまでを複製していくイメージ -->
</div>

前回まではid="new-image"のdiv要素に直接プレビュー画像を挿入していましたが、今回は新たなdiv要素を作成しその中に画像を挿入していきます。

そして、classにimage-elementを設定しquerySelectorAllメソッドとlengthメソッドで作成された要素の数を定数imageElementNumに格納します。

app/javascript/packs/preview.js

if (document.URL.match(/new/)){
  document.addEventListener('DOMContentLoaded', () => {

    const ImageList = document.getElementById('new-image'); //追記

    const createImageHTML = (blob) => {

      const imageElement = document.createElement('div'); //new-imageからdivに変更

//ここから
      imageElement.setAttribute('class', "image-element")
      let imageElementNum = document.querySelectorAll('.image-element').length
//ここまで追記

      const blobImage = document.createElement('img');
      blobImage.setAttribute('class', 'new-img')
      blobImage.setAttribute('src', blob);

      imageElement.appendChild(blobImage);
      ImageList.appendChild(imageElement); //追記
      });
    };

    document.getElementById('recipe-images').addEventListener('change', (e) => { //recipe-imagesに修正

//ここから
     //const imageContent = document.querySelector('img');
      //if (imageContent){
        //imageContent.remove();
      //}
//ここまで削除

      const file = e.target.files[0];
      const blob = window.URL.createObjectURL(file);
      createImageHTML(blob);
    });
  });
}

次に新しく画像選択フォームを作成する記述をしていきます。

createElementメソッドでinput要素を生成し、setAttributeで属性を追加していきます。
そして、inputのidに先ほど宣言したimageElementNumを使いinput要素が何番目の要素かを判別します。

app/javascript/packs/preview.js

//中略
document.addEventListener('DOMContentLoaded', () => {
    const ImageList = document.getElementById('new-image');
    const createImageHTML = (blob) => {
      const imageElement = document.createElement('div');
      imageElement.setAttribute('class', "image-element")
      let imageElementNum = document.querySelectorAll('.image-element').length

      const blobImage = document.createElement('img');
      blobImage.setAttribute('class', 'new-img')
      blobImage.setAttribute('src', blob);

//ここから
      const inputHTML = document.createElement('input');
      inputHTML.setAttribute('id', `recipe_image_${imageElementNum}`);
      inputHTML.setAttribute('class', 'recipe-images');
      inputHTML.setAttribute('name', 'recipe[images][]');
      inputHTML.setAttribute('type', 'file');
//ここまで追記

      imageElement.appendChild(blobImage);
      imageElement.appendChild(inputHTML); //追記
      ImageList.appendChild(imageElement);

//以下略

これで、画像を選択すると新しく画像選択フォームが出現するようになりました。
2枚目以降にもイベント発火するよう処理を記述していきます。
1度目に発火するイベントとほとんど同じ記述になります。

app/javascript/packs/preview.js

//中略

    const createImageHTML = (blob) => {
      const imageElement = document.createElement('div');
      imageElement.setAttribute('class', "image-element")
      let imageElementNum = document.querySelectorAll('.image-element').length

      const blobImage = document.createElement('img');
      blobImage.setAttribute('class', 'new-img')
      blobImage.setAttribute('src', blob);

      const inputHTML = document.createElement('input');
      inputHTML.setAttribute('id', `recipe_image_${imageElementNum}`);
      inputHTML.setAttribute('class', 'recipe-images');
      inputHTML.setAttribute('name', 'recipe[images][]');
      inputHTML.setAttribute('type', 'file');

      imageElement.appendChild(blobImage);
      imageElement.appendChild(inputHTML);
      ImageList.appendChild(imageElement);

//ここから
      inputHTML.addEventListener('change', (e) => {
        const file = e.target.files[0];
        const blob = window.URL.createObjectURL(file);
        createImageHTML(blob);
      });
//ここまで追記
    };

//以下略

ここまでで複数の画像投稿に対応したプレビュー機能の実装が完了しました。

しかし、これでは1枚画像を選択するたびに新しく画像選択フォームが出現してしまうので何枚でも画像選択が可能になってしまいます。

モデルにバリデーションをかけているので投稿は保存されません。

条件分岐で制限をかけよう

input要素の数える定数imageElementNumを使い、3枚選択すると新しく画像選択フォームが出現しないように条件分岐していきましょう。

app/javascript/packs/preview.js

//中略

      const inputHTML = document.createElement('input');
      inputHTML.setAttribute('id', `recipe_image_${imageElementNum}`);
      inputHTML.setAttribute('class', 'recipe-images');
      inputHTML.setAttribute('name', 'recipe[images][]');
      inputHTML.setAttribute('type', 'file');

      imageElement.appendChild(blobImage);
      if (imageElementNum < 2) {            //追記
        imageElement.appendChild(inputHTML);
      }                                     //追記
      ImageList.appendChild(imageElement);

      inputHTML.addEventListener('change', (e) => {
        const file = e.target.files[0];
        const blob = window.URL.createObjectURL(file);
        createImageHTML(blob);
      });
//以下略

以上で完成です。

以下、完成形のコードです。

app/javascript/packs/preview.js

if (document.URL.match(/new/)){
  document.addEventListener('DOMContentLoaded', () => {
    const ImageList = document.getElementById('new-image');
    const createImageHTML = (blob) => {
      const imageElement = document.createElement('div');
      imageElement.setAttribute('class', "image-element")
      let imageElementNum = document.querySelectorAll('.image-element').length

      const blobImage = document.createElement('img');
      blobImage.setAttribute('class', 'new-img')
      blobImage.setAttribute('src', blob);

      const inputHTML = document.createElement('input');
      inputHTML.setAttribute('id', `recipe_image_${imageElementNum}`);
      inputHTML.setAttribute('class', 'recipe-images');
      inputHTML.setAttribute('name', 'recipe[images][]');
      inputHTML.setAttribute('type', 'file');

      imageElement.appendChild(blobImage);
      if (imageElementNum < 2) {
        imageElement.appendChild(inputHTML);
      } 
      ImageList.appendChild(imageElement);

      inputHTML.addEventListener('change', (e) => {
        const file = e.target.files[0];
        const blob = window.URL.createObjectURL(file);
        createImageHTML(blob);
      });
    };

    document.getElementById('recipe-images').addEventListener('change', (e) => {

      const file = e.target.files[0];
      const blob = window.URL.createObjectURL(file);
      createImageHTML(blob);
    });
  });
}

次回は投稿された複数の画像をスライド形式で表示する実装を行っていきます。

結論

<script type="text/javascript"><!--
function getPlatform() {
    // IE か
    var isIe = (String.prototype.hasOwnProperty('startsWith') === false);
    // Winか否か
    var isWinPc = navigator.platform.startsWith('Win') || isIe;
    // Androidか否か
    var isAndroid = navigator.userAgent.indexOf('Android') > 0;
    // Macか否か
    var isApple = navigator.platform.startsWith('Mac') || navigator.platform.startsWith('iPhone') || navigator.platform.startsWith('iPad');
    // AppleMobileか否か
    var isAppleMoblile = isApple && (typeof navigator.standalone !== 'undefind' && navigator.standalone === false);
    // AppleDesctopか否か
    var isAppleDesctop = isApple && !isAppleMoblile;
    if (isWinPc) {
        return 'win';
    }
    if (isAndroid) {
        return 'android';
    }
    if (isAppleMoblile) {
        return 'apple_mobile';
    }
    if (isAppleDesctop) {
        return 'mac';
    }
    return false;
}
--></script>

参考: navigator
https://developer.mozilla.org/ja/docs/Web/API/Window/navigator

参考: navigator.standalone
https://developer.mozilla.org/ja/docs/Web/API/Navigator

論理コード

VAR IEである = 'String' に'startWith'がない。

VAR Windowsである = 'navigator.platform' が 'Win' で始まる

VAR Androidである ＝ 'navigator.userAgent' に 'Android' がある。

VAR Appleの端末である = 
    ('navigator.platform' が 'Mac' で始まる) または 
    ('navigator.platform' が 'iPhone' で始まる) または
    ('navigator.platform' が 'iPad' で始まる)

VAR Appleのモバイル端末である = 
    ('navigator.standalone' が 'undefind' ではない) かつ
    ('navigator.standalone' が 'false' である)
　
VAR Appleのデスクトップ端末である = 
    (Appleの端末である）かつ
    (Appleのモバイル端末である の否定）

解説１VAR IEである = 'String' に'startWith'がない。

IEのみ startWith をサポートしていないので利用する。
参考:
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith

解説２ VAR Windowsである = 'navigator.platform' が 'Win' で始まる

Windowの場合は簡単で、navigator.platform の返り値に Win が含まれている。
これを利用しない手はない。

解説３VAR Androidである ＝ 'navigator.userAgent' に 'Android' がある。

今回、Androidのみ、UserAgentを利用している。理由は２つ。

１: navigator.platform の返り値が カーネルになっているため。
２: 他にスマートな方法が思いつかなかった。

の２点。
...UserAgentが廃止になったらどうすべきか。

解説４ アップル端末について判定

Appleの端末だけ段階的に判定を行います。理由は２つ。

１: navigator.platform の返り値が端末の種類やブラウザ設定によって切り替わるため
２: navigator.userAgentが端末のバージョンごとに違うため（またはデスクトップとモバイルで同じになるため）

• ステップ１

  • navigator.platform で Mac iPhone iPad を網羅してApppleの端末であることを切り分ける
  • ※ iPhone、iPadでも 返り値が Macになることがあるためこれだけでは判定できない。

• ステップ２

  • navigator.standaloneでiOSサファリであることを確認する。
  • このプロパティはMDSによるとiOSサファリにしか実装されておらず、
  • 端末がスタンドアロンで起動している場合は TRUE を返すそう。
  • 画面分割は試してない。けどしらん！

• ステップ３

  • ステップ１とステップ２を基に Mac か iOS かを判定する。

以上。

概要

Reactを使ってよく耳にするのがメモ化。
正直今まで避けて通ってました、、。
しかし「今こそ！」しっかりと理解することでより良いアプリを作ることができると思うので、
学びつつ共有して行こうと思います〜！

この記事は、

• メモ化ってよく聞くけどざっくりとしかわからない
• メモ化ってどんな時に使うの？
• 実際どんな動きをするの？

っていう方に有益な記事かもです！

メモ化とは？

まず、メモ化って言われても何かよくわかってなかったりしますよね。

そんな方に説明しますと、
「計算結果を保持することで、もう一度計算を行うときに変更がなければ再利用する」
というものです。

簡単に言えば、キャッシュ的なことです。

計算結果を保持していることで、
もう一度同じ結果を返す場合に
その都度計算し直すことがなくなるので
パフォーマンスが向上するよってことです。

また具体的には、
React.memo、useCallback、useMemoという手段があります。

メモ化は再度同様の計算をする必要がない分パフォーマンスが上がる反面、
これらの手段を使うためのコストの方が高いという場合もあり、
むしろ使った方が余計にメモリを食ってしまう。
なんてこともあるのでここでしっかりと理解して上手く使えるようになりましょう！

React.memo

React.memoはどんなことができるのでしょうか。
主に、コンポーネントをメモ化し、余計な再レンダリングをスキップできるのです。

つまり、

• レンダリングにコストがかかるコンポーネントに対して余計なレンダリングをしないようにする
• カウントアップに関するコンポーネントのように、 何度も頻繁にレンダリングがされるコンポーネントに対して使う

このような場合に使用するとパフォーマンスをあげることができます。

では、どのように使うのかという話をしていきます。
⬇︎例

import React, { useState } from "react";

const Count2Component = React.memo(props => {
  return <p>count2: {props.count}</p>;
});

export const App = () => {
  console.log("render App");
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  const countUp1 = () => setCount1(c => c + 1);
  const countUp2 = () => setCount2(c => c + 1);


  return (
    <>
      <button onClick={countUp1}>count1</button>
      <button onClick={countUp2}>count2</button>
      <p>count1: {count1}</p>
      <Count2Component count={count2} />
    </>
  );
}

通常、count1ボタンを押すと、
Appコンポーネント自体が再レンダリングされるので、
stateの変化があった<p>count1: {count1}</p>に加え、<Count2Component count={count2} />も再レンダリングされるはずです。

しかし、実際上記のコードを動かすと<p>count1: {count1}</p>しか再レンダリングされません。

これがどういったことを意味するのかというと、
React.memo(コンポーネント)の形で生成されたコンポーネントは、
「親の再レンダリングに関係なく、
そのコンポーネントに依存する値（ここではcount2）に変更があった時のみ再レンダリングが発生する」
ということになります。

この場合、
count1ボタンが押され、Appコンポーネントが再レンダリングされてもcount2自体に変更がないので<Count2Component count={count2} />は再レンダリングされないということになります。

useCallback

次に、useCallbackはどう使うのかという話をしていこうと思います。

まずuseCallbackができることは、
useCallbackはメモ化されたコールバックを返すことができるhookです。

つまりはどういうことかというと、
例えば親コンポーネントから渡されるpropsが変化する場合に、通常はこのコンポーネントは全部再レンダリングされます。

しかし、もしこのpropsが自身のコンポーネントにとって関係のないpropsである場合、メモ化されたコールバックを返すことでパフォーマンス向上が期待できるといったものです。

まあとりあえず例ですね。
⬇︎例

import React, { useState, useCallback } from "react";

const Count2Component = React.memo(props => {
  return <p>count2: {props.count}</p>;
});

export const App = () => {
  console.log("render App");
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);
  const countUp1 = () => setCount1(c => c + 1);
  const countUp2 = useCallback(() => setCount2(c => c + 1), [count2]);


  return (
    <>
      <button onClick={countUp1}>count1</button>
      <button onClick={countUp2}>count2</button>
      <p>count1: {count1}</p>
      <Count2Component count={count2} />
    </>
  );
}

上記のコードでは、
count1ボタンが押され、Appコンポーネントが再レンダリングされてもcount2自体に変更がないので<Count2Component count={count2} />は再レンダリングされません。

これは、useCallbackの
useCallback(コールバック関数, 依存配列)という構文における依存配列（ここではcount2）の値に変化がないからです。

そして上記の例にて一番重要なのは、
Count2Componentにて、React.memoが使用されている点です。

これがないとuseCallbackが上手く機能しないんですよね。

なぜかというと、useCallbackはcountUp2がメモリ内の、つまりメモ化された値と同じかどうかでCount2Componentを再レンダリングするか判断するものです。

何が言いたいかというと、React.memoを使わず、親のコンポーネントが再レンダリングされたらuseCallbackがあろうとなかろうと意味がないのです。

つまりはuseCallbackは親コンポーネントが再レンダリングされないからこそ初めて意味を持つんですよね。

ここは絶対注意が必要なので抑えておきましょう！

useMemo

最後に、useMemoについて話そうと思います！

useMemoとは、簡単にいうと値を計算するロジックなどで余計な計算をスキップしてパフォーマンスを向上させよう！といったものです。

⬇︎例

import React { useState, useMemo } from "react";

export const App = () => {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  const countUp = c => {
    let i = 0;
    while (i < 1000000000) i++;
    return c += 1;
  };

  const count = useMemo(() => countUp(count2), [count]);
  return (
    <>
      <p>Counter: {count1}</p>
      <button onClick={() => setCount1(count1 + 1)}>countUp</button>
      <p>
        Counter: {count2} | {countUp}
      </p>
      <button onClick={() => setCount2(count2 + 1)}>countUp</button>
    </>
  );
}

通常、count1はcount1に+1するだけの処理だが、useMemoがない状態で実行するとcountUpが実行されて再レンダリングに時間がかかってしまいます。

しかし上記のコードでは、countUpをメモ化することでcount1が再レンダリングされてもcountUpは実行されず、高速にコンポーネントを再レンダリングできます。

useMemoはレンダリング結果もメモ化できるらしいのでコンポーネントの再レンダリングをスキップすることができるらしいです。
詳しくはこの参考記事を参照ください！（てかほとんどここを参照してますw）
https://qiita.com/soarflat/items/b9d3d17b8ab1f5dbfed2

まとめ

これらははじめにいったようにどこで使うかが重要で、どこかしらにもポンポン使うべきではありません。

特に、関数宣言はコストの安い処理なのでuseCallbackを使うべきではないです。

これらはレンダリングの度に動きますし、最適化が必要なときは思った以上にないっぽいので見極めは大切だと思います。

終わりに

メモ化は、正直使わなくとも開発自体にはあまり影響がないかもです。

しかし、使うことでアプリの使いやすさ、パフォーマンスが向上するので適材適所、上手く分析して使うといいと思います。

まあ結局は使う必要性がでたらって感じで問題ないと思いますね！
なので日頃からパフォーマンスチューニングを心がけるといいのでは！

参考資料

はじめに

10件のアイテムを1ページあたり3件、計4ページに渡って表示するサンプルです。

実装

サンプルアイテム

const items = [
  {
    id: '1',
    name: 'abe',
    from: 'nagoya'
  },
  {
    id: '2',
    name: 'ito',
    from: 'iwate'
  },
  {
    id: '3',
    name: 'uno',
    from: 'fukuoka'
  },
  {
    id: '4',
    name: 'kato',
    from: 'tokyo'
  },
  {
    id: '5',
    name: 'kurata',
    from: 'tottori'
  },
  {
    id: '6',
    name: 'sato',
    from: 'kagoshima'
  },
  {
    id: '7',
    name: 'takahashi',
    from: 'saitama'
  },
  {
    id: '8',
    name: 'nishida',
    from: 'miyagi'
  },
  {
    id: '9',
    name: 'hasegawa',
    from: 'gifu'
  },
  {
    id: '10',
    name: 'yamada',
    from: 'aomori'
  }
]

本体

import React, { useState, useEffect } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import {
  List,
  ListItem,
  ListItemText,
  ListItemAvatar,
  Avatar,
  Typography
} from '@material-ui/core';
import Pagination from '@material-ui/lab/Pagination';


const useStyles = makeStyles((theme) => ({
  list: {
    width: '100%',
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper,
  },
  pagenation: {
    '& > *': {
      marginTop: theme.spacing(2),
      display: 'inline-block',
    }
  },
  }));

const ListView = () => {

  const classes = useStyles();

  const [page, setPage] = useState(1); //ページ番号
  const [pageCount, setPageCount] = useState(); //ページ数
  const [allItems, setAllItems] = useState([]); //全データ
  const [displayedItems, setDisplayedItems] = useState([]); //表示データ
  const displayNum = 3; //1ページあたりの項目数

  const items = [...]


  useEffect(() => {
    setAllItems(items);
    //ページカウントの計算（今回は3項目/ページなので4ページ）
    setPageCount(Math.ceil(items.length/displayNum));
    //表示データを抽出
    setDisplayedItems(items.slice(((page - 1) * displayNum), page * displayNum))
  }, [])

  const handleChange = (event, index) => {
    //ページ移動時にページ番号を更新
    setPage(index);
    //ページ移動時に表示データを書き換える
    setDisplayedItems(allItems.slice(((index - 1) * displayNum), index * displayNum))
  }

  return (
    <>
      <List dense className={classes.list}>
        {displayedItems.map((item, index) => {
          const labelId = `label-${item.id}`;
          return (
            <ListItem key={index} button>
              <ListItemAvatar>
                <Avatar alt={item.name} src="/static/images/avatar/xxx.jpg" />
              </ListItemAvatar>
              <ListItemText
                id={labelId}
                primary={item.name}
                secondary={
                  <>
                    <Typography
                      component="span"
                      variant="caption"
                      display="block"
                      color="textPrimary"
                    >
                      {item.from}
                    </Typography>
                  </>
                } />
            </ListItem>
          );
        })}
      </List>
      <div className={classes.pagenation} style={{textAlign:'center'}}>
        <Pagination count={pageCount} page={page} variant="outlined" color="primary" size="small" onChange={handleChange} />
      </div>
    </>
  )
}

export default ListView;

実行結果

この記はなに

TypeScriptを実際に触りながらTypeScriptを説く記の第3弾です。
TypeScriptが しょしんなる 方や、TypeScriptを いとをかし と思っているひとが対象です。

この記で、こころよしと思った方は、LGTM✨を何卒よしなに願い申し上げ候。

過去と未来?
1. 【TypeScriptハンズオン①】男もすなるTypeScriptといふものを、女もしてみむとてするなり
2. 【TypeScriptハンズオン②】 自分だけの型を作ろう！
3. 【TypeScriptハンズオン③】 webアプリとして動かそう！ この記事

@ TypeScriptをインストールしていないひとはこちら?
　 【画像で説明】シンプルにTypeScriptを導入して使う方法
@ TypeScriptをいとをかしと思ったひとはこちら?
　JavaScriptを知っている方がTypeScriptをなんとなく理解するための記事

ハンズオン

✅ これ以降、古語は出てきません。ご安心ください
✅ VSCodeを使います

TypeScriptは、変数や関数に型を明記することで、開発者がハッピー?になります。
今回は、このハッピー?になれるTypeScriptを使って、書いたコードを実際にブラウザ上で表示できるようにしてみましょう?

プロジェクトのセットアップ

まずは、プロジェクトをセットアップする必要があるので、以下の記事にてセットアップをお願いします。
【画像で説明】シンプルにTypeScriptを導入して使う方法

この記事では、以下のようなコマンドを使って環境を構築しています。

$ mkdir new-typescript               // プロジェクト用のディレクトリを作成する
$ cd new-typescript                  // プロジェクト用のディレクトリに移動する
$ npm init                           // package.json（プロジェクト管理用のファイル）を作成する
$ npm install typescript --save-dev  // typescriptをインストールする

この結果以下のようなディレクトリ構成になります。

ここで、ソースコードを入れるsrcディレクトリを用意しましょう。

$ pwd                // 現在のディレクトリが/new-typescriptであることを確認
/new-typescript
$ mkdir src          // "src"ディレクトリを作成する

次に、src内に.htmlと.tsファイルを作成します。

最後に、index.htmlファイルに以下の内容をコピペしましょう。

<!DOCTYPE html>
<html>
  <head>
    <title>土佐日記を読もう</title>
  </head>
  <body>
    <h1>土佐日記を読もう</h1>
    <p>次のフォームに、「紀貫之」と入力してね</p>
    <input type="text" id="text" />
    <button onclick="getBookInfo()">確定</button>
    <p id="details"></p>
    <script src="./book.js"></script>
  </body>
</html>

このhtmlは以下のような画面を表示します。

最終的には、inputフォームに紀貫之を入力して、確定ボタンを押したら、土佐日記の内容が表示されるようにしていきます。

.tsに記述してアプリを完成する

では、実際に.tsファイルにスクリプトを記述していきます。
何を記述すればいいのかを確認するために、一旦htmlを見てみましょう。

<!DOCTYPE html>
<html>
  <head>
    <title>土佐日記を読もう</title>
  </head>
  <body>
    <h1>土佐日記を読もう</h1>
    <p>次のフォームに、「紀貫之」と入力してね</p>
    <input type="text" id="text" />
    <button onclick="getBookInfo()">確定</button>
    <p id="details"></p>
    <script src="./book.js"></script>
  </body>
</html>

1. <input type="text" id="text" />は、紀貫之と入力するフォームです。ここから、入力した文字を取得します。
2. <button onclick="getBookInfo()">確定</button>はクリックすると、getBookInfo()関数を呼び出します。
3. getBookInfo()関数では、<input />で入力したテキストを取得し、「紀貫之」というテキストが入力されたら、<p id="details"></p>に土佐日記の内容を表示します。

それを実現したのが、以下のコードです。（ここでは、素のJavaScriptです）

const getBookInfo = () => {
    const inputText = document.getElementById("text").value;
    if (inputText === "紀貫之") {
        document.getElementById("details").innerText =
            "男もすなる日記といふものを、女もしてみむとてするなり。それの年（承平四年）のしはすの二十日あまり一日の、戌の時に門出す。そのよしいさゝかものにかきつく。ある人縣の四年五年はてゝ例のことゞも皆しをへて、解由など取りて住むたちより出でゝ船に乘るべき所へわたる。かれこれ知る知らぬおくりす。年ごろよく具しつる人々（共イ）なむわかれ難く思ひてその日頻にとかくしつゝのゝしるうちに夜更けぬ。廿二日（にイ有）、和泉の國までとたひらかにねがひたつ。藤原の言實船路なれど馬の餞す。上中下ながら醉ひ過ぎていと怪しくしほ海のほとりにてあざれあへり。廿三日、八木の康教といふ人あり。この人國に必ずしもいひつかふ者にもあらざる（二字ずイ）なり。これぞ正しきやうにて馬の餞したる。かみがらにやあらむ、國人の心の常として今はとて見えざなるを心あるものは恥ぢずき（ぞイ）なむきける。これは物によりて譽むるにしもあらず。";
    }
    else {
        document.getElementById("details").innerText = "？？？？？";
    }
};

「確定」ボタンを押した時にdocument.getElementById("text").valueにて、フォームで入力した値を取得し、inputTextに格納します。
その後、if文にてinputTextに紀貫之が入っていたら、document.getElementById("details").innerTextに、土佐日記の内容を代入します。

紀貫之でなかったら、"？？？？？"を入れます。

以上のJavaScriptのコードは問題ないように見えますが、.tsファイルに入れるとエラーが発生します。

これは、document.getElementById("text").valueのように記述するとき、.valueが使えるのは<input />要素を利用するときです。
そのため、document.getElementById("text")自体は<Input />要素であると教えてあげる必要があります。
つまり、 <Input />要素でないとdocument.getElementById("text").valueのように記述出来ないことを示しています。

そこで、型を設定してあげます。

- const inputText = document.getElementById("text").value;
+ const inputText = (document.getElementById("text") as HTMLInputElement).value;

ここでは、as HTMLInputElementというのを付け加えることで、document.getElementById("text")はInputの要素によるものだよーというのを明示的に表すことができます。

そのため、最終的には次のようなコードに書き換えます。

const getBookInfo = () => {
  const inputText = (document.getElementById("text") as HTMLInputElement).value;
  if (inputText === "紀貫之") {
    document.getElementById("details").innerText =
      "男もすなる日記といふものを、女もしてみむとてするなり。それの年（承平四年）のしはすの二十日あまり一日の、戌の時に門出す。そのよしいさゝかものにかきつく。ある人縣の四年五年はてゝ例のことゞも皆しをへて、解由など取りて住むたちより出でゝ船に乘るべき所へわたる。かれこれ知る知らぬおくりす。年ごろよく具しつる人々（共イ）なむわかれ難く思ひてその日頻にとかくしつゝのゝしるうちに夜更けぬ。廿二日（にイ有）、和泉の國までとたひらかにねがひたつ。藤原の言實船路なれど馬の餞す。上中下ながら醉ひ過ぎていと怪しくしほ海のほとりにてあざれあへり。廿三日、八木の康教といふ人あり。この人國に必ずしもいひつかふ者にもあらざる（二字ずイ）なり。これぞ正しきやうにて馬の餞したる。かみがらにやあらむ、國人の心の常として今はとて見えざなるを心あるものは恥ぢずき（ぞイ）なむきける。これは物によりて譽むるにしもあらず。";
  } else {
    document.getElementById("details").innerText = "？？？？？";
  }
};

このコードをbook.tsに書けたら、以下のコマンドを実行して、.tsファイルを.jsファイルに変換します（コンパイル）。

npx tsc book.ts

これは、htmlファイルではあくまで.jsファイルでないとを読み込めないので、TypeScriptのファイルはJavaScriptのファイルを変換する必要があるからです。そのため、このコマンドを実行すると、以下のようにファイルが生成されます。

これで、動かせるようになったので、ブラウザで表示してみましょう！

Pathをコピーして、ブラウザのURLに貼ります。

問題なく動きました！！！

おわりに

TypeScriptを使ったアプリの作成方法について紹介しました。
今回は、一部しか型定義を使っていないので、コードを大きくして様々な箇所で活用できるようにしておきましょう！

参考文献

• https://www.typescriptlang.org/docs/handbook/typescript-tooling-in-5-minutes.html#compiling-your-code
• https://qiita.com/atukan0930/items/e7b2f9dc70b579467de6

<div id="recommendations">
  <div><!-- ページ表示時のHTMLに静的に存在している要素 -->
    <a class="recommendation">...</a>
    <a class="recommendation">...</a>
    <a class="recommendation">...</a>
  </div>
  <div><!-- スクロール時に動的に追加された要素 -->
    <a class="recommendation">...</a>
    <a class="recommendation">...</a>
    <a class="recommendation">...</a>
  </div>
</div>

上記のようにスクロールに応じて、一定個数ずつ動的に読み込まれ表示されていくサイトの場合、ユーザスクリプトでページ表示時にHTMLの加工を実施すると、スクロールによって動的に追加される部分が処理されません。

不要なものを削除する系ならsetIntervalで定期実行しても十分ですが、DOMの追加に応じて丁寧に処理を挟みたい時には MutationObserverで要素の追加を監視します。

(function() {
    'use strict';
    const observer = new MutationObserver((mutations) => {
        //console.log(mutations)
        let m = mutations.filter(m => m.target.id == 'recommendations');
        if (m[0]) process(m[0].addedNodes[0]);
    });
    observer.observe(document.querySelector('#recommendations'), {
        childList: true,
        attributes: false,
        characterData: false,
        subtree: true,
    });
    function process(wrapEl) {
        Array.from(wrapEl.querySelectorAll('.recommendation')).forEach(function(el){
            let a = document.createElement('a');
            a.href = '#';
            a.innerHTML = '何か便利なリンク';
            el.querySelector('.title').appendChild(a);
        });
    }
    process(document.querySelector('#recommendations > div'));

})();

注意が必要な点として、ユーザスクリプト自身で行ったappendChild()の操作でも検知するため監視の条件によっては無限再起でハングアップします。
それを防ぐために変化の内容を確認してフィルタします。
監視の起点とする要素や監視の条件をうまく調整すれば省けるのですが、サイトによって作りが異なるのでそこまでは付き合わず、毎回フィルタするコードを書く方がやりやすいです。

応用例として、Qiitaでのタグから最新記事でのページネーションのようにJSで記事一覧を再構築している場合にも同じやり方が適用できます。

// ==UserScript==
// @name         nabeatsu
// @match        https://qiita.com/tags/*
// ==/UserScript==

(function() {
    'use strict';
    const observer = new MutationObserver((mutations) => {
        //console.log(mutations)
        let m = mutations
            .filter(m => m.addedNodes[0])
            .filter(m => m.addedNodes[0].tagName == 'DIV')
            .filter(m => !/Dummy/.test(m.addedNodes[0].className));
        if (m[0]) process(m[0].addedNodes[0]);
    });
    observer.observe(document.querySelector('[id^="TagNewestItemList-"]'), {
        childList: true,
        attributes: false,
        characterData: false,
        subtree: true,
    });
    function process(wrapEl) {
        Array.from(wrapEl.querySelectorAll('article')).forEach(function(el){
            let lgtm = el.querySelector('svg').nextSibling.textContent;
            if (/3/.test(lgtm) || (lgtm > 0 && lgtm % 3 == 0)) {
                let a = el.querySelector('h2 a');
                a.textContent = a.textContent.replace(/[a-zA-Z0-9]/g, m => String.fromCharCode(m[0].charCodeAt(0) + 0xFEE0));
            }
        });
    }
})();

LGTMの数字が3の倍数か3が含まれる時にタイトルの英数が全角になります。

Qiitaの場合、HTMLを読み込んだ初期状態で記事一覧は存在しないことと、
ローディング表示のダミー要素が一度出るためそれを無視するようなケアを行いましたが、
サイトが異なってもほぼ同じやり方が流用できそうでした。

ProxyはES6から使えるようになった新しい術式です。
この術式は非常に強力で、Proxyで包み込んだ人や呪霊の行う様々なアクション(術式の発動など)をトラップして、特定の処理を術式発動までの間に挟み込む事ができます。

一種の結界術のようなものだと思っていただければ良いかと思います。

この記事ではこの強力な術式を使って、現代最強の呪術師である五条悟の使う領域展開「無量空処」を再現してみたいと思います。

五条悟も最初から最強だったわけではない

まずはじめに、無下限呪術を覚えていない頃の五条悟に登場してもらいます。敵役はもちろん漏瑚です。

index.js

const 五條悟 = {
  name: "五條悟",
};

const 漏瑚 = {
  name: "漏瑚",
  "極ノ番「隕」"(target) {
    console.log("極ノ番「隕」発動！！");
    console.log(target.name + "は死ぬ");
    target.name = "死体";
  },
  蓋棺鉄囲山(target) {
    console.log("蓋棺鉄囲山発動！！");
    console.log(target.name + "は死ぬ");
  },
};

// 蓋棺鉄囲山で五条悟を攻撃する
漏瑚.蓋棺鉄囲山(五条悟);

これを実行してみると、当たり前ですが、五条悟は死にます。

$ node index.js 
蓋棺鉄囲山発動！！
五条悟は死ぬ

そして五条悟は最強と成った

無量空処は、無下限の内側を展開し、相手の知覚、伝達、生きるという行為に無限回の作業を強制する術式です。つまり無量空処の内側では、術式を発動するまでに無限回の作業が必要になってしまい、結果術式を発動できなくなるわけですね。

これをProxyを使って再現すると、以下のようになります。

inde.js

const 無量空処の術式2 = {
  apply(target, thisArg, argumentsList) {
    // 無下限呪術を適用した関数（術式の発動）に無限回の施行を要求する
    while (true) {
      console.log(target.name + "するぞ！");
    }
    return target(...argumentsList);
  },
};

const 無量空処の術式 = {
  get(target, prop) {
    if (typeof target[prop] === "function") {
      return new Proxy(target[prop], 無量空処の術式2);
    }
  },
};

const 五条悟 = {
  name: "五条悟",
  /**
   * 領域展開「無量空処」
   * 領域に引きずり込んだ相手は術式発動のために無限回の施行が要求されるようになる
   * @param {*} target 領域に引きずり込む相手
   */
  無量空処(target) {
    return new Proxy(target, 無量空処の術式);
  },
};

「無量空処」の術式は２段階の術式です。１段階目の術式(無量空処の術式)で、敵の術式発動に干渉し、敵の術式発動までの間に２段目の術式を挟み込みます

const 無量空処の術式 = {
  get(target, prop) {
    // 敵が術式を発動する場合（functionを実行する場合）はその術式をProxy術式でラップする
    if (typeof target[prop] === "function") {
      return new Proxy(target[prop], 無量空処の術式2);
    }
  },
};

2段階目の術式では、術式発動に無限回の作業を強制します。ある意味これが無下限呪術の本体ですね

const 無量空処の術式2 = {
  apply(target, thisArg, argumentsList) {
    // 無下限呪術を適用した関数（術式の発動）に無限回の作業を要求する
    while (true) {
      console.log(target.name + "するぞ！");
    }
    // オリジナルの術式の発動（ここにたどり着くことはない）
    return target(...argumentsList);
  },
};

無量空処を覚えた五条悟であれば、漏瑚など敵ではありません。以下を実行してみましょう

const 無量空処の術式2 = {
  apply(target, thisArg, argumentsList) {
    // 無下限呪術を適用した関数（術式の発動）に無限回の施行を要求する
    while (true) {
      console.log(target.name + "するぞ！");
    }
    return target(...argumentsList);
  },
};

const 無量空処の術式 = {
  get(target, prop) {
    if (typeof target[prop] === "function") {
      return new Proxy(target[prop], 無量空処の術式2);
    }
  },
};

const 五条悟 = {
  name: "五条悟",
  /**
   * 領域展開「無量空処」
   * 領域に引きずり込んだ相手は術式発動のために無限回の施行が要求されるようになる
   * @param {*} target 領域に引きずり込む相手
   */
  無量空処(target) {
    return new Proxy(target, 無量空処の術式);
  },
};

const 漏瑚 = {
  name: "漏瑚",
  "極ノ番「隕」"(target) {
    console.log("極ノ番「隕」発動！！");
    console.log(target.name + "は死ぬ");
    target.name = "死体";
  },
  蓋棺鉄囲山(target) {
    console.log("蓋棺鉄囲山発動！！");
    console.log(target.name + "は死ぬ");
  },
};

const 無量空処を食らった漏瑚 = 五条悟.無量空処(漏瑚);

無量空処を食らった漏瑚.蓋棺鉄囲山(五条悟);

実行すると以下のようになります。

蓋棺鉄囲山の発動に無限回の作業が必要になってしまっていますね。

この術式はとても強力なので、相手が誰だろうが、どんな術式を持っていようが関係なく発動します。例えば真人相手でも

const 真人 = {
  name: "真人",
  無為転変(target) {
    console.log("無為転変発動！！");
    console.log(target.name + "は死ぬ");
  },
  自閉円頓裹(target) {
    console.log("自閉円頓裹発動！！");
    console.log(target.name + "は死ぬ");
  },
};

const 無量空処を食らった真人 = 五条悟.無量空処(真人);

無量空処を食らった真人.無為転変(五条悟);

こうなります

もうあの人1人で良くないですか？

今回作った五条悟は、無量空処の領域内に取り込んだ相手からの術式を受けなくなりますが、領域外にいる相手からの攻撃は依然受けてしまいます。

以下を実行してみましょう

index.js

const 五条悟 = {
  name: "五条悟",
  /**
   * 領域展開「無量空処」
   * 領域に引きずり込んだ相手は術式発動のために無限回の施行が要求されるようになる
   * @param {*} target 領域に引きずり込む相手
   */
  無量空処(target) {
    return new Proxy(target, 無量空処の術式);
  },
};

const 漏瑚 = {
  name: "漏瑚",
  "極ノ番「隕」"(target) {
    console.log("極ノ番「隕」発動！！");
    console.log(target.name + "は死ぬ");
    target.name = "死体";
  },
  蓋棺鉄囲山(target) {
    console.log("蓋棺鉄囲山発動！！");
    console.log(target.name + "は死ぬ");
  },
};

// 無量空処を発動しない
漏瑚.蓋棺鉄囲山(五条悟);

しかし五条悟には無下限呪術があります。これを自身の周囲に展開することで、攻撃が自身に到達するまでに無限回の作業を強制することができます。

この無下限呪術もProxyを使って再現することができます。

const 無下限呪術 = {
  get(target, prop) {
    while (true) {
      console.log("五条悟に触れることはできない・・・");
    }
  },
  set(target, prop) {
    while (true) {
      console.log("五条悟に触れることはできない・・・");
    }
  },
};

const 五条悟 = new Proxy(
  {
    name: "五条悟",
    /**
     * 領域展開「無量空処」
     * 領域に引きずり込んだ相手は術式発動のために無限回の施行が要求されるようになる
     * @param {*} target 領域に引きずり込む相手
     */
    無量空処(target) {
      return new Proxy(target, 無量空処の術式);
    },
  },
  // 無下限呪術を自身の周囲に展開する
  無下限呪術
);

先程までは相手に無下限呪術を展開していたわけですが、今回は自身の周囲に展開します。

この状態でもう一度、蓋棺鉄囲山で五条悟を攻撃してみましょう

const 無下限呪術 = {
  get(target, prop) {
    while (true) {
      console.log("五条悟に触れることはできない・・・");
    }
  },
  set(target, prop) {
    while (true) {
      console.log("五条悟に触れることはできない・・・");
    }
  },
};

const 五条悟 = new Proxy(
  {
    name: "五条悟",
    /**
     * 領域展開「無量空処」
     * 領域に引きずり込んだ相手は術式発動のために無限回の施行が要求されるようになる
     * @param {*} target 領域に引きずり込む相手
     */
    無量空処(target) {
      return new Proxy(target, 無量空処の術式);
    },
  },
  // 無下限呪術を自身の周囲に展開する
  無下限呪術
);

const 漏瑚 = {
  name: "漏瑚",
  "極ノ番「隕」"(target) {
    console.log("極ノ番「隕」発動！！");
    console.log(target.name + "は死ぬ");
    target.name = "死体";
  },
  蓋棺鉄囲山(target) {
    console.log("蓋棺鉄囲山発動！！");
    console.log(target.name + "は死ぬ");
  },
};

// 無量空処されていない漏瑚で攻撃
漏瑚.蓋棺鉄囲山(五条悟);

すると以下のようになります。漏瑚の攻撃は五条悟に無事届かなくなりました。無量空処なんて使わなくても五条悟は最強ってことですね

ちなみにこの無下限呪術は非常に強力で、極ノ番「隕」のような代入処理にも干渉できます。すごい

  "極ノ番「隕」"(target) {
    console.log("極ノ番「隕」発動！！");
    // 相手は死体になる
    target.name = "死体"; // targetが無下限呪術を発動している場合はこの処理が終わることはない
  },

まとめ

今回紹介したのは、Proxy呪術のごく一部です。今回は、変数の取得 / 代入 / 関数の実行に対してトラップを仕掛けましたが、他にも new演算子へのトラップ / in演算子へのトラップ / ownKeysへのトラップなどオブジェクトに対する様々な操作をトラップできます。詳しくは以下を見てみてください。
Proxy - JavaScript - MDN Web Docs -

現実世界で今回作ったような無下限呪術を使ってしまうと、動作しているシステムが五条悟という情報を処理しきれず止まってしまいますし、Proxy呪術自体もメタプロチックでわかりにくいコードを生む原因になりがちなので、採用には慎重になったほうが良いと思いますが、とてもおもしろい技術なので、もしよければみなさんもオリジナルの術式を作ってみてください

最後に、芥見下々先生、本当にすいませんでした

大量のmdファイルを修正していたのですが1ファイルだけvscodeのprettierが効きませんでした。

そのためvscodeの設定なども見直したのですが解決しませんでした。

最終手段として各ファイルで修正してからコピペしようとし、mdファイルからjsファイルにコピペしたときに気づきました。

{}の数がズレてエラーが起きている！？

これに気づいてmdファイルを修正すると無事にprettierが効くようになりました！

状況

Vue.jsでテーブルを作成し、テーブルのデータごとに動的にモーダルを表示させようとするも、何かおかしい。

前提

$ vue --version
@vue/cli 4.5.11

なお、本記事では Vue Materialのテーブルコンポーネント を使用しています。

百聞は一見にしかずということで

状況をアニメーションで貼っておきます。

見ての通り、どのモーダルボタンをクリックしても3番目の要素しか表示されない。
しかも背景がかなり暗い。

出来れば親でモーダルを発火させるボタンを押せて、モーダルの状態を親で管理できるようにしたい。

該当コード

Parent.vue

<template>
  <div>
    <md-table v-model="products">
      <md-table-row slot="md-table-row" slot-scope="{ item }">
        <md-table-cell md-label="ID">{{ item.id }}</md-table-cell>
        <md-table-cell md-label="ユーザー名">{{ item.user }}</md-table-cell>
        <md-table-cell md-label="アクション">
          <button @click="modalState = true">モーダル表示</button>
          <md-dialog :md-active.sync="modalState">
            <Child :user="item.user" :item-id="item.id" />
          </md-dialog>
        </md-table-cell>
      </md-table-row>
    </md-table>
  </div>
</template>

<script lang="ts">
import Child from './Child.vue'
import Vue from 'vue'

export default Vue.extend({
  name: 'TableContent',
  components: {
    Child,
  },
  data() {
    return {
      products: [
        { id: 1, user: '伊藤' },
        { id: 2, user: '田中' },
        { id: 3, user: '佐久間' },
      ],
      modalState: false,
    }
  },
})
</script>

Child.vue

<template>
  <div style="text-align: center">{{ itemId }} : {{ user }}</div>
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'Vue:Child',
  props: {
    itemId: {
      type: Number,
      required: true,
    },
    user: {
      type: String,
      default: '',
    },
  },
})
</script>

問題の原因

初歩的なミスをしていました。
modalStateにテーブルごとのユニークな値を与えていなかった為、ボタンを押すと全てのモーダルがtrueとなり、全て重なって表示されており、背景も暗くなっているということでした。

コード修正

Parent.vue

<template>
  <div>
    <md-table v-model="products">
      <md-table-row slot="md-table-row" slot-scope="{ item }">
        <md-table-cell md-label="ID">{{ item.id }}</md-table-cell>
        <md-table-cell md-label="ユーザー名">{{ item.user }}</md-table-cell>
        <md-table-cell md-label="アクション">
          <button @click="$set(modalState, item.id, true)">モーダル表示</button> <!-- テーブルごとのmodalStateを制御 -->
          <md-dialog :md-active.sync="modalState[item.id]"> <!-- ユニークな値を追加 -->
            <Child :user="item.user" :item-id="item.id" />
          </md-dialog>
        </md-table-cell>
      </md-table-row>
    </md-table>
  </div>
</template>

<script lang="ts">
import Child from './Child.vue'
import Vue from 'vue'

export default Vue.extend({
  name: 'TableContent',
  components: {
    Child,
  },
  data() {
    return {
      products: [
        { id: 1, user: '伊藤' },
        { id: 2, user: '田中' },
        { id: 3, user: '佐久間' },
      ],
      modalState: {}, // 定義をオブジェクト形式に変更
    }
  },
})
</script>

無事動的にモーダルを表示することができました！

参考

https://stackoverflow.com/questions/49580396/vuetify-how-to-open-and-close-dialogs-within-a-data-table
https://vuematerial.io/components/table

今日からpythonの勉強を始める
目標としてはこの1年で自分で案件を獲得し収益を生み出すこと

多くのサイトを閲覧しこの1年の大まかな計画を立てる
その中でこのサイトの手順が最も有効だと考えた

【初心者必見】プログラミング未経験から3年間のpython学習ロードマップ

基本的にこの手順に乗っ取って頑張ってみようと思う

今日からpythonの勉強を始める
目標としてはこの1年で自分で案件を獲得し収益を生み出すこと

多くのサイトを閲覧しこの1年の大まかな計画を立てる
その中でこのサイトの手順が最も有効だと考えた

【初心者必見】プログラミング未経験から3年間のpython学習ロードマップ

基本的にこの手順に乗っ取って頑張ってみようと思う

Chrome拡張で通知を表示させる方法を調べたら、日本語の情報が少なかったので書いときます。

環境

OS:Windows10 Home 64bit 20H2
Chrome:88.0.4324.190

下準備

フォルダ構造

フォルダ
┣ manifest.json
┗ script.js

manifest.json

{
    "name": "notification",
    "version": "1.0",
    "manifest_version": 2,
    "icons": {
        "48": "icon.png"
    },
    "background": {
        "scripts": [
            "script.js"
        ],
        "persistent": false
    },
    "permissions": [
        "notifications"
    ]
}

chrome://extensions/を開いて「デベロッパー モード」をオン
「パッケージ化されていない拡張機能を読み込む」でフォルダを選択。これで準備はできました。

通知を表示させる

通知を表示させるには、chrome.notifications.createを使います。とりあえず簡単な通知を表示させてみます。

script.js

chrome.runtime.onInstalled.addListener(() => {
    // 通知を表示
    chrome.notifications.create("1", {
        iconUrl: "./icon.png",
        message: "メッセージ",
        title: "タイトル",
        type: "basic"
    }, noticeid);
});

function noticeid(id) {
    console.log(id);
}

chrome://extensionsで再読み込みすると、通知が表示されます。(アイコン手抜きでごめんなさい)

"1"は通知id(notificationId)です。数字じゃなくてもいいです。
これを使うと通知内容を後から変更できたり、通知を削除したりできます。指定しない場合は勝手に生成されます。
(Chrome42以前は指定が必要みたいです)

関数名を指定しておくと、その関数に通知idが返されます。Chrome42以前はこれを指定しないとダメみたいです

NotificationOptions

通知の内容をカスタマイズできます。非推奨になっているappIconMaskUrl,imageUrl,isClickableは書いてません。

buttons

iconUrl
現在非推奨(OSXでは表示されない)。通知に表示されるボタンのアイコンURL
title
ボタンのテキスト

buttons: [{iconUrl:"./btnIcon.png", title: "ボタンです"}]

両方設定するとこうなります。ボタンをクリックすると通知は消えます。

(アイコンが小さい...)
ボタンは2つまで追加できます。

contextMessage

messageよりも小さく表示されます。

contextMessage: "コンテキスト"

eventTime

赤で囲んだところをいじれます。

eventTime: Date.parse('February 28, 2021 00:00:00')

iconUrl

通知のアイコンを設定します。

iconUrl: "./icon.png",

items

複数のアイテムを指定できます。typeに"list"を指定しないとエラーが出ます。

type: "list",
items: [{title:"タイトル", message: "メッセージ"},{title:"title", message:"message"}]

message

message: "メッセージ"

通知のメッセージを指定します。

priority

通知の優先度。-2,-1,0,1,2で指定できますが、Windows,Mac,Linuxだと0,1,2しか使えないようです。

priority: 2

progress

0~100の間で指定します。typeには"progress"を指定してください。

type: "progress",
progress: 64

requireInteraction

Chrome50以降
trueにすると、ユーザーが通知をクリックするまで画面に表示され続けます。
デフォルトはfalseです

requireInteraction: true

silent

Chrome70以降
trueにすると、通知音がなりません。デフォルトはfalseです

silent: true

title

通知のタイトルを指定します。

title: "タイトル"

type

通知のタイプを"basic","image","list","progress"から指定します。

type: "basic"

参考

公式リファレンス