はじめに

Vue3のリリースが迫ってきました。
順調に行けば、公式リリースは8月上旬のようです。楽しみですね。

Our current target dates are mid July for the RC (release candidate) and early August for the official release of 3.0.
https://github.com/vuejs/rfcs/issues/183

Vue3の目玉の機能として、「Composition API」があります。

この記事では、「”なぜ” Composition APIを使うのか」について、まとめています。

「Composition APIの使い方」についての説明は、この記事では割愛します。

Composition APIを使う理由、なんもわからん

これまで、私自身、Composition APIを使う理由が、よくわかっていませんでした。

なんとなく、「setup関数でまとめて処理を登録しておく」くらいのことを雰囲気で理解していました。

「Composition APIで書くほうがイケてるし、カッコいい(重要)」くらいのノリで

メリットもよく分からない状態でした。

Composition APIについて調べていると、↑の図、よく見ませんか？

既存APIとComposition APIのコードを比較して、メリットを提示しているようですけど

私は

「そんなに違わないように見える」

「違いがよくわからん」

っといった感想を持ちました。

私と同じように

「Vueに新しく、Composition APIってのが出るらしいけど、なんとなく使おうかな〜」

「でも、なんのために使うんだっけ」

と思っている方が多いのではないかなと考え、この記事を執筆しています。

この記事が、誰かのお役に立てれば幸いです。

Composition API RFC を読んだら、「なぜ、使うのか」を理解した

先日 @shwld が主催した

「Vue Composition APIを知る会」

で、Composition APIのRFCを読む機会があり、そこで改めて「”なぜ” Composition APIを使うのか」理解することができました。

Composition APIの公式の説明資料として、以下のページにRFCがあります。
Composition API (https://vue-composition-api-rfc.netlify.com)

↑を読むと、「”なぜ” Composition APIを使うのか」答えが書いてありました。

以下にRFCに書いてある内容をまとめます。

Composition APIとは

Composition APIは、
ロジックを合成関数(composition function)にカプセル化することで、コンポーネント間でのロジックを再利用を可能にするAPIです。
(React HooksのVue版みたいなもの)

サンプルコード

<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

<script>
import { reactive, computed } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    })

    function increment() {
      state.count++
    }

    return {
      state,
      increment
    }
  }
}
</script>

Vueの作成者であるEvan You氏いわく、Composition APIを提案する背景となった動機について、次のように説明しています。

論理合成(logic composition)は、プロジェクトをスケールアップする場合には、おそらく最も深刻な問題のひとつです。さまざまなタイプのプロジェクトを扱うユーザは、さまざまなニーズに直面します。その中には、オブジェクトベースのAPIを使用して簡単に処理できるものと、できないものがあります。主な例としては、
1. 複数の論理タスクをカプセル化した、大規模な(数百行の)コンポーネント
2. 複数のコンポーネント間においてタスクにロジックを共有するニーズ

https://www.infoq.com/jp/news/2019/10/vue3-function-based-api-rfc/ より引用

”なぜ” Composition APIを使うのか

結論から言いますと、

「”なぜ” Composition APIを使うのか」

その理由は、

「ロジックの抽出と再利用」をするためです。

(他にも「TypeScript 型強化」などが理由として挙げられますが、この記事では割愛します)

ロジックの抽出と再利用

「ロジックの抽出と再利用」は、なぜするのか。

「ロジックの抽出と再利用」が必要な理由は、
複雑に肥大化したコンポーネントを、小分けにして関心事で分別し、クリーンな状態に整理するためです。

近年、Vue を使用して大規模なプロジェクトを構築することが増えました。

肥大化してメンテしにくいコンポーネントを目の当たりにして、我々エンジニアが苦しむことも増えました。

肥大化したコンポーネントのコードは、依存関係が複雑で量も多く、コードを読むこと自体難しくなります。

これまでのVue2.xでは、「複数のコンポーネント間でロジックを抽出して再利用するためのクリーンでコストのかからないメカニズム」が欠如していました。

これを解決するのが、Composition APIです。

Composition APIによって、コンポーネントのコードを整理する際に、開発者により高い柔軟性を提供します。
コンポーネント間で、ロジックを抽出して再利用することが、簡単になります。

つまり、Composition APIは、肥大化したコンポーネントを小さく切り刻むための聖剣なのです。

Composition APIを使って「ロジックを抽出して再利用する」具体的なやり方について、以下の記事が参考になります。

vue-composition-apiを使って機能単位のコード分割と合成を試してみた
https://qiita.com/s_nagasawa/items/ef70032f996face318e5

逆に言えば、100行にも満たないような小さなコンポーネントをComposition APIで書き直しても、あまりメリットを享受できないです。
もし小規模〜中規模なVueプロジェクトにおいて、現状のVue2.xのクラスベースのコードでコンポーネントの肥大化に苦しんでいないのであれば、Composition APIで書き直してもコスパが悪いのでやめておいたほうがよいのではないかなと思います。
(新規プロダクトで、最初から全部Composition APIで書くのはありだと思います)

mixinは、使えない?

Vue2.xのロジックの再利用の仕組みとして、「mixin」があります。
しかし、「mixin」には、罠が多くあり、今では「mixin」を使うことはアンチパターンという認識です。
極力「mixin」は使わないようにしましょう。

なぜmixinがアンチパターンなのかについては、下記の記事に詳しく書かれてあります。

俺がやらかしたVue mixinのアンチパターンから学ぶmixinの使い方と代替案
https://aloerina01.github.io/blog/2018-12-25-1

Composition APIを使う際のデメリット

Composition APIを使うメリットは、理解できたかと思います。

じゃあ、デメリットはないのか?

あります。

デメリットを一言でいうと、「自由すぎ」です。

Composition APIによって、自由にロジックを切り出せるようになりますが、一方で、いままでVueが暗黙的に行ってくれていたレールから外れることを意味します。

どういう単位でロジックを切り出したり、共通化したり、といった疑問に対して、明確な正解がないのです。

つまり、Vueが管理している壁の中の世界から、壁の外の無秩序な荒野へと放り出されるのです。

無秩序な荒野で、テキトーに開発していると、隠れていた猛獣に襲われたり、食料が尽きたりといった致命的なアクシデントに見舞われます。計画的に外の世界を開拓しないと危険がいっぱいなのです。

「設計」や「アーキテクチャ」が重要になる

その荒野に秩序を与えるのは、我々、調査兵団(エンジニア)の「設計」です。

今後は、「アーキテクチャ」が重要になります。

つまり、デメリットは、ちゃんと「設計」や「アーキテクチャ」を考えなければならないことです。

例えば、「クリーンアーキテクチャ」を理解して、実装していくことが求められます。

実装クリーンアーキテクチャ
https://qiita.com/nrslib/items/a5f902c4defc83bd46b8

「Vueの中の世界」と「外の世界」を意識して、自由への翼を獲得しましょう。

まとめ

・https://vue-composition-api-rfc.netlify.com を読もう。

・Composition APIを使う理由は、「ロジックの抽出と再利用」のため。(TypeScriptの型強化の側面もあり)

・肥大化したコンポーネントを、小さく切り刻むための聖剣だと理解した。(mixin、お前はダメだ)

・もともと小さいコンポーネントをCompositon APIで書き直しても、あまりメリットはない。

・今後はちゃんと「設計」や「アーキテクチャ」を考えなければならない。

参考リンク

Composition API RFC
https://vue-composition-api-rfc.netlify.com

vue-composition-apiを使って機能単位のコード分割と合成を試してみた
https://qiita.com/s_nagasawa/items/ef70032f996face318e5

俺がやらかしたVue mixinのアンチパターンから学ぶmixinの使い方と代替案
https://aloerina01.github.io/blog/2018-12-25-1

実装クリーンアーキテクチャ
https://qiita.com/nrslib/items/a5f902c4defc83bd46b8

【Vue3に備える】実務で使うComposition APIについて考える
https://medium.com/finatext/composition-api-for-vue3-63631dbadcef

先取りVue 3.x !! Composition API を試してみる
https://qiita.com/ryo2132/items/f055679e9974dbc3f977

Composition API Demo
https://github.com/LinusBorg/composition-api-demos

API Reference
https://composition-api.vuejs.org/api.html

Vue Composition API v1-beta で使えるリアクティブ関連のAPI一覧
https://qiita.com/ryo2132/items/6dc51ede8082dea75812

Vue Composition API を使ったストアパターンと TypeScript の組み合わせはどのくらいスケールするか？
https://qiita.com/tmy/items/a545e44100247c364a71

Composition API 勘所など
https://webneko.dev/posts/notices-of-composition-api-in-vue3-eve

こんにちは、Mottyです。
今回はJavascriptを使ってみました。

概要

今回はJavascriptの処女作で電卓アプリを作ってみました。
定番ですが、HTML・JavascriptによるWebアプリ作品です。

ソースコード

Calculator.html

<!DOCTYPE html>
<html lang = "en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content = "width = device-width, instial-sale = 1.0">
   <meta http-equiv= "X-UA-Compatible" content = "ie=edge">
   <title> Document</title>
   <link rel = "stylesheet" href="Design.css">

</head>
<body>
    <script src = "System.js"></script>
    <input id ="result" type = "text" size ="20" style = "width:208px"/>
<br/>
    <input type = "button" value = "7" onClick ="disp(7)"/> 
    <input type = "button" value = "8" onClick ="disp(8)"/> 
    <input type = "button" value = "9" onClick ="disp(9)"/> 
    <input type = "button" value = "/" onClick ="disp('/')"/>
<br/>
    <input type = "button" value = "4" onClick ="disp(4)"/>
    <input type = "button" value = "5" onClick ="disp(5)"/>
    <input type = "button" value = "6" onClick ="disp(6)"/>
    <input type = "button" value = "*" onClick ="disp('*')"/>
<br/>
    <input type = "button" value = "1" onClick ="disp(1)"/>
    <input type = "button" value = "2" onClick ="disp(2)"/>
    <input type = "button" value = "3" onClick ="disp(3)"/>
    <input type = "button" value = "-" onClick ="disp('-')"/>
<br>
    <input type = "button" value = "0" onClick ="disp(0)"/>
    <input type = "button" value = "C" onClick ="clear()"/>
    <input type = "button" value = "=" onClick ="enter()"/>
    <input type = "button" value = "+" onClick ="disp('+')"/>
</body>
</html>

Design.css

input{
    width:50px;
    height:50px;
}
textbox{
    width:200px;
    height:50px;
}

System.js

var EnterFlag = false;

function disp(n){
    var obj = document.getElementById("result");
    obj.value += n;
}

function enter(){
    var obj = document.getElementById("result");
    obj.value = eval(obj.value);
    EnterFlag = true;
}

function clear(){
    var obj = document.getElementById("result");
    obj.value == "0";
}

結果

しっかり表示してくれました。

パーツとメソッドの繋ぎ方がポイントということを分かっていれば
プログラミング言語が変わっても物自体はちゃんと作れそう。
（しかし配列とかクラスを使えばもっと綺麗なコードをかけたのでは・・・。）

フォームが送信されたら、イベントが発火するようにしよう

この記述の解説をします。
$(**)には、formのクラス名を記述します。
.on(**,にはイベント名を記述します。
e.preventDefaulでは、非同期通信を行う為にデフォルトのイベントを止めています。

イベントが発火したときにAjaxを使用して、messages#createが動くようしましょう

この記述の中のthisは、イベントの発火元であるFormの情報が入っています。
$(this).attr('action');は、Form情報のパスを取得しています。

messagesコントローラーの#createアクションでメッセージを保存し、respond_toを使用してJSON形式のリクエストに対してのレスポンスを返せるようにしましょう

if @message.save
リクエストで送られてきた情報を保存している
respond_to do |format|
format.json
json方式で返している

その他アウトプット

クラス名MessageFieldにappend(html)でHTMLを追加している

$(".submit-btn").prop('disabled', false);

送信ボタンを一度押すとリロードしないと押せなくなるが
prop('disabled', false);を送信ボタンクラスに記述する事によりロードせずに投稿ができる様になる

非同期に失敗した場合の処理

失敗した場合エラーをアラートで知らせてくれます。
Doneの後に使います

Kinx ライブラリ - パーサ・コンビネータ（その1）

はじめに

「見た目は JavaScript、頭脳(中身)は Ruby、（安定感は AC/DC）」 でお届けしているスクリプト言語 Kinx。今回はパーサ・コンビネータです。

• 参考
  • 最初の動機 ... スクリプト言語 KINX（ご紹介）
    • 個別記事へのリンクは全てここに集約してあります。
  • リポジトリ ... https://github.com/Kray-G/kinx
    • Pull Request 等お待ちしております。
      

前回 JIT ライブラリ を紹介しましたが、最後以下の言葉で締めくくりましたね。

これでパーサ・コンビネータとか実装して組み合わせたらたら、ちょっとした JIT 付き言語処理系が作れますね。

ええ、そこで急遽作りましたよ。パーサ・コンビネータ・ライブラリ。その名も Parsek。Parsec ならぬ Parsek。

インタフェースは Parsimmon を参考にしましたが、実装は全くの独自です。API はこんなに充実してませんが、それなりに使えます。インタフェースを追加するのは簡単なので、追々必要に応じて追加しよう。

長くなりそうなので記事を 2 回に分けようかと思います。

今回はこれを使って、四則演算文法をパースして AST（Abstract Syntax Tree = 抽象構文木）を作るところまでいきましょう。次回、最後には JIT コンパイルして実行するところまでいきます。

パーサ・コンビネータとは

小さい（単純な）パーサーを組み合わせて大きなパーサーを作るためのライブラリ。詳しくは他の記事に譲るとして、以下、サンプルを見ながらわかるようにしてみましょう。

サンプル

今回は趣向を変えて、サンプルを使いながら説明してみます。サンプルは正の整数（自然数）による四則演算です。簡単のために負の数は扱いません（結果が負になることはあり得ます）。

普通はここで BNF とか PEG とかの説明に入るのでしょうが、無視します。サンプルを通してまず動かすところからスタートです。

using Parsek

パーサ・コンビネータ・ライブラリは標準組み込みではないので、using しましょう。また、ライブラリはクラスとして提供されているのでインスタンス化しておきましょう。

using Parsek;

var $ = new Parsek();

何気に $ は変数名として使えます。

小さな（単純な）パーサーとは？

一つずつ例を挙げてみます。

数値をパースするパーサー

まず、正の整数を定義してみましょう。これが一つ目の小さな（単純な）パーサーです。一つ目ですが、いきなり正規表現です。まぁ、それほど難しくないのでわかりやすいでしょう。

ひとつだけ落とし穴なのは、使っているエンジン（＝鬼車）が POSIX NFA ではない ので、長くマッチするほうを先に書かないといけません。簡単に言うと、以下の例では "123" はきちんと "123" でマッチしますが、逆（/[0-9]|[1-9][0-9]*/）に書くと最初に書いた [0-9] にマッチして検索をやめてしまうので "1" となって "23" にマッチしません。注意しましょう。

var number = $.regex(/[1-9][0-9]*|[0-9]/);

これでこの number というパーサーは数値（が書かれた文字列）をパースできるようになります。やってみましょう。

実際にパースを行うのは parseAll() メソッドです。parse() というのもありますが、これは途中で終了しても成功するメソッドで、通常は内部で使われます。parseAll() の場合は全て解析し終わって後処理まで実施して結果を返します。

using Parsek;

var $ = new Parsek();
var number = $.regex(/[1-9][0-9]*|[0-9]/);

System.println(number.parseAll("0"));       // => {"position":1,"status":1,"value":"0"}
System.println(number.parseAll("10"));      // => {"position":2,"status":1,"value":"10"}
System.println(number.parseAll("129"));     // => {"position":3,"status":1,"value":"129"}
System.println(number.parseAll("abc"));     // => {"position":0,"status":0,"value":null}
System.println(number.parseAll("0129"));    // => {"position":1,"status":0,"value":null}

復帰値の position はパースした文字列の完了位置で、status が成功・失敗（1 が成功）、value が実際にパースが成功した文字列です。見て分かる通り、失敗すると value は null です。

しかしよく見ると value は文字列ですね。文字列を解釈しているだけなので当たり前です。ここで、value に対して変換を行うメソッドが .map() です。以下のように変換用の関数を与えます。

using Parsek;

var $ = new Parsek();
var number = $.regex(/[1-9][0-9]*|[0-9]/).map(&(value) => Integer.parseInt(value));

System.println(number.parseAll("129"));     // => {"position":3,"status":1,"value":129}

数値になりましたね。上記の場合、単に値をパススルーしているだけなので、Integer.parseInt を直接渡しても同じです。

var number = $.regex(/[1-9][0-9]*|[0-9]/).map(Integer.parseInt);

このほうが簡潔ですね。

四則演算の演算子をパースするパーサー

演算子によって優先度が違うので 2 つに分けます。

• + または -
• * または / または %

一文字の or を解釈するのに便利なのが $.oneOf() です。以下のように使います。

var addsub = $.oneOf("+-");
var muldiv = $.oneOf("*/%");

簡単ですねー。早速試してみましょう。

using Parsek;

var $ = new Parsek();
var addsub = $.oneOf("+-");
var muldiv = $.oneOf("*/%");

System.println(addsub.parseAll("+"));       // => {"position":1,"status":1,"value":"+"}
System.println(addsub.parseAll("-"));       // => {"position":1,"status":1,"value":"-"}
System.println(addsub.parseAll("*"));       // => {"position":0,"status":0,"value":null}
System.println(muldiv.parseAll("*"));       // => {"position":1,"status":1,"value":"*"}
System.println(muldiv.parseAll("/"));       // => {"position":1,"status":1,"value":"/"}
System.println(muldiv.parseAll("%"));       // => {"position":1,"status":1,"value":"%"}
System.println(muldiv.parseAll("a"));       // => {"position":0,"status":0,"value":null}

期待通りです。

カッコをパースするパーサー

もう一つ、数値演算には必要なカッコを解釈させましょう。特定の文字列にマッチするパーサーは $.string() を使います。ここでは 1 文字ですが、何文字の文字列でも OK です。

var lbr = $.string("(");
var rbr = $.string(")");

これも試してみるとうまく動きます。$.string() の効果を見るために別の文字列でも試してみましょう。

using Parsek;

var $ = new Parsek();
var lbr = $.string("(");
var rbr = $.string(")");
var hoge = $.string("hoge");

System.println(lbr.parseAll("("));          // => {"position":1,"status":1,"value":"("}
System.println(lbr.parseAll(")"));          // => {"position":0,"status":0,"value":null}
System.println(rbr.parseAll("("));          // => {"position":0,"status":0,"value":null}
System.println(rbr.parseAll(")"));          // => {"position":1,"status":1,"value":")"}
System.println(hoge.parseAll("hoge"));      // => {"position":4,"status":1,"value":"hoge"}
System.println(hoge.parseAll("fuga"));      // => {"position":0,"status":0,"value":null}

正しくマッチしているのが分かります。

組み合わせるとは？（コンビネーター）

これで小さな（単純な）パーサーという道具が揃いました。

var number = $.regex(/[1-9][0-9]*|[0-9]/).map(Integer.parseInt);
var addsub = $.oneOf("+-");
var muldiv = $.oneOf("*/%");
var lbr = $.string("(");
var rbr = $.string(")");

これらを組み合わせてみましょう。ここで PEG を出しておきます。BNF でもいいですが、PEG のほうがコンビネーターには合ってますね。文法はこうですよ、というのを示しておかないと何やってるかわからなくなりそうですので。意味は追々触れていきます。

number <- regex(/[1-9][0-9]*|[0-9]/)
addsub <- '+' / '-'
muldiv <- '*' / '/' / '%'
lbr <- '('
rbr <- ')'

expression <- term (addsub term)*
term <- factor (muldiv factor)*
factor <- number / (lbr expression rbr)

PEG の優先度付選択の記号 / と除算の指定 '/' が紛らわしいですが、よく見ると分かります。

トップダウン、ボトムアップどちらもありですが、ここではボトムアップでパーサーを構築していきます。

factor

まずは factor です。

factor <- number / (lbr expression rbr)

factor は number か lbr expression rbr か、になります。プログラムにそのまま落とせます。ここで使うのは以下のメソッドです。

• ここではまだ expression が定義されていないので、遅延評価させるために $.lazy() を使います。$.lazy() を使うと実際に評価されるときにパーサーが作られます。
• どちらかを選ぶ、というメソッドは $.alt() です。複数のものから最初に成功したパーサーの結果を返します。
• lbr expression rbr というように複数のものが連続している、ということを表すのが $.seq() です。

さて書いてみましょう。expression は事前に宣言だけしておきます。

var expression;
var factor = $.lazy(&() => $.alt(number, $.seq(lbr, expression, rbr)));

term

次は term です。

term <- factor (muldiv factor)*

これは、factor の後に (muldiv factor) が 0 回以上続く、という意味です。0 回も許されるので、何も続かない、というのも OK です。muldiv factor といった感じに並べるのはさっきの lbr expression rbr と同じで連続していることを意味します。ここで使うメソッドは以下です。

• 0 回以上の繰り返し、はパーサーに対して .many() を指定します。

では定義してみましょう。

var term = $.seq(factor, $.seq(muldiv, factor).many());

これで term が定義できました。

expression

最後に expression です。形は term と一緒ですね。

expression <- term (addsub term)*

そのまま書いてみましょう。

expression = $.seq(term, $.seq(addsub, term).many());

これでパーサーが揃いました。試しにパースしてみましょう！

パース

一旦、ソースコードを全部載せてみます。とはいってもそんなにないですね。

using Parsek;

var $ = new Parsek();
var number = $.regex(/[1-9][0-9]*|[0-9]/).map(Integer.parseInt);
var addsub = $.oneOf("+-");
var muldiv = $.oneOf("*/%");
var lbr = $.string("(");
var rbr = $.string(")");

var expression;
var factor = $.lazy(&() => $.alt(number, $.seq(lbr, expression, rbr)));
var term = $.seq(factor, $.seq(muldiv, factor).many());
expression = $.seq(term, $.seq(addsub, term).many());

// parse expression!
System.println(expression.parseAll("1+2*3+2*(14-2)"));
// => {"position":14,"status":1,"value":[[1,{}],[["+",[2,[["*",3]]]],["+",[2,[["*",["(",[[14,{}],[["-",[2,{}]]]],")"]]]]]]]}
System.println(expression.parseAll("1+2*3+2*(14-2-)"));
// => {"position":7,"status":0,"value":null}

最初のは（長いですが）成功したことが分かります。結果を読むのは大変ですが、これは後で整形しましょう。そして、2 つ目は失敗していることが分かります。最後の (14-2-) がどの規則にもマッチしてないからですね。

ではこの結果を整形していきましょう。活躍するのは number で使った .map() です。

カッコの式

まず、$.seq(lbr, expression, rbr) の部分です。$.seq() は値として結果の配列を返します。カッコの式というのは、値としてはカッコは不要で中にある式の結果だけあればいいですね。ということで、以下のように変えます。

var factor = $.lazy(&() => $.alt(number, $.seq(lbr, expression, rbr).map(&(value) => value[1])));

修正すると結果は次のようになります。

System.println(expression.parseAll("1+2*3+2*(14-2)"));
// => {"position":14,"status":1,"value":[[1,{}],[["+",[2,[["*",3]]]],["+",[2,[["*",[[14,{}],[["-",[2,{}]]]]]]]]]]}

ちょっと短くなりましたね。

term、expression

次に、term と expression です。ここでは、後で解析するために AST（Abstract Syntax Tree = 抽象構文木）の形に整形するようにしましょう。基本的には二項演算子なので、LHS（Left Hand Side = 左辺値）と RHS（Right Hand Side = 右辺値）と演算子（Operator）の組み合わせのオブジェクトを作ります。

ここで、$.seq() をやめて、$.seqMap() を使うように変更します。これは $.seq() と .map() を一緒にしたようなもので、結果リストを引数として最後の引数に指定した関数にコールバックしてくれる便利なメソッドです。こんな風に使います。

var term = $.seqMap(factor, $.seq(muldiv, factor).many(), &(first, rest) => {
    var expr = first;
    for (var i = 0, l = rest.length(); i < l; ++i) {
        expr = { lhs: expr, op: rest[i][0], rhs: rest[i][1] };
    }
    return expr;
});

first は factor の結果で、rest は $.seq(muldiv, factor).many() の結果です。なので、rest は各要素が [演算子, 右辺値] の形の配列です（空配列の場合もある）。それを AST の形に整形しています。結果、例えば "2 * 3 * 4" みたいなものは以下のように整形されます。

• コールバック時
  • まず、first は 2
  • rest は [['*', 3], ['*', 4]]
• expr に 2 が入る
• ループに入り、expr が { lhs: 2, op: '*', rhs: 3 } になる。
• もう一つ要素があるので、expr が { lhs: { lhs: 2, op: '*', rhs: 3 }, op: '*', rhs: 4 } になる。

左側の枝が伸びていく形の AST になります（これを左結合という）。今回の演算子は全て左結合です。

expression も一緒なので、同じように書きましょう。中身は全く同じですなので関数化して使いまわしましょう。

function makeAST(first, rest) {
    var expr = first;
    for (var i = 0, l = rest.length(); i < l; ++i) {
        expr = { lhs: expr, op: rest[i][0], rhs: rest[i][1] };
    }
    return expr;
}
var term = $.seqMap(factor, $.seq(muldiv, factor).many(), makeAST);
expression = $.seqMap(term, $.seq(addsub, term).many(), makeAST);

すっきりしました。

では、プログラム一式です。たったこれだけの定義で四則演算を（演算子の優先順位も考慮された形で）パースできてしまいます。素晴らしいですね！

using Parsek;

function makeAST(first, rest) {
    var expr = first;
    for (var i = 0, l = rest.length(); i < l; ++i) {
        expr = { lhs: expr, op: rest[i][0], rhs: rest[i][1] };
    }
    return expr;
}

var $ = new Parsek();
var number = $.regex(/[1-9][0-9]*|[0-9]/).map(Integer.parseInt);
var addsub = $.oneOf("+-");
var muldiv = $.oneOf("*/%");
var lbr = $.string("(");
var rbr = $.string(")");

var expression;
var factor = $.lazy(&() => $.alt(number, $.seq(lbr, expression, rbr).map(&(value) => value[1])));
var term = $.seqMap(factor, $.seq(muldiv, factor).many(), makeAST);
expression = $.seqMap(term, $.seq(addsub, term).many(), makeAST);

// test
System.println(expression.parseAll("1+2*3+2*(14-2)").value.toJsonString(true));

結果はこうなります。うまくいってますね！

"lhs": {
    "lhs": 1,
    "op": "+",
    "rhs": {
        "lhs": 2,
        "op": "*",
        "rhs": 3
    }
},
"op": "+",
"rhs": {
    "lhs": 2,
    "op": "*",
    "rhs": {
        "lhs": 14,
        "op": "-",
        "rhs": 2
    }
}

おわりに

さて、目的の AST ができました。次回、これを解釈して実行させます。せっかく作った JIT ライブラリも使いますよ！

ではまた次回！

スクロールすると画像がふわって出てくる感じのを実装する

簡単にパララックス効果を実装できる便利ライブラリをcdnで以下のようにheadタグに記述
<script src="https://unpkg.com/scrollreveal"></script>

次にhtmlを編集。marginはスクロールするスペースを与えるため

index.html

    <div class="animation" style="margin-top: 1000px;">
        <img src="./images/image1.jpg">
    </div>

次にjs

app.js

$(function () {
    ScrollReveal().reveal('.animation', {
        delay: 500,
        duration: 2000,
    });
});

おしまい。

JavaScriptを使ったモーダルウィンドウについての解説です。
実装例として、ボタンをクリックすることでモーダルウィンドウを呼び出す処理のサンプルを記載します。

HTML

ボタンをひとつ用意します。
要素を取得する為、id="modal-btn"とします。

<button id="modal-btn">ボタン</button>

CSS

生成するモーダルに付与するCSSを設定します。
中央配置にする為にleft: 50%、top: 50%、transform: translate(-50%, -50%)を設定しています。

.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.inner {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.9);
  border: solid 3px #dfe4ea;
  border-radius: 10px;
}

Javascript

はじめに作成したHTMLのボタンをクリックした時の処理を記述します。
クリックを起点としたイベントを設定し、showModalメソッドを発火させます。

document.getElementById('modal-btn').addEventListener('click', showModal);

showModalメソッドの詳細を記述します。

function showModal() {
    // モーダルウィンドウと中身の要素を生成・クラスを付与
    const modalElement = document.createElement('div');
    modalElement.classList.add('modal');
    const innerElement = document.createElement('div');
    innerElement.classList.add('inner');

　　 // モーダルウィンドウに表示する要素を記述
    innerElement.innerHTML = `
        <p>モーダルウィンドウ</p>
    `;

    // モーダルウィンドウに中身を配置
    modalElement.appendChild(innerElement);
    document.body.appendChild(modalElement);

    // 中身をクリックしたらモーダルウィンドウを閉じる
    innerElement.addEventListener('click', () => {
        closeModal(modalElement);
    });
}

モーダルを閉じる処理を用意します。

function closeModal(modalElement) {
    document.body.removeChild(modalElement);
}

これでシンプルなモーダルウィンドウが完成しました。

モーダルウィンドウの使いどころ

モーダルウィンドウは、Webサイトの様々な箇所で使われています。
画面を覆うように表示されるため、ユーザーへの警告や確認の為に使われることが多い機能です。

• ポップアップ広告
• 警告メッセージ
• エラーメッセージ
• ロード中

モーダルウィンドウを使ったポップアップ広告などはユーザーから嫌われる傾向にある為、使用には注意が必要です。

はじめに

Node.jsとはサーバーサイドのjavascriptのプラットフォーム（実行環境）である。
javascriptは本来クライアントサイドで動作するプログラミング言語だが、Node.jsを使用することでサーバーサイドでもjavascriptが利用できるようになる。

公式サイト、またはOSのパッケージ管理ツールを使用してインストールすることでNode.jsが使用できる。
・公式サイト
・色々なパッケージ管理ツールでのインストール

クライアントサイドとサーバーサイド

?　WEBページをブラウザで閲覧する場合の仕組み

1. ブラウザ（クライアント）でURLを指定、サーバーにリクエスト
2. リクエストを受けたサーバーはページを表示するために
   必要なhtmlやそれに関連するCSSやjavascriptをブラウザ（クライアント）に返す
3. クライアント側でそれらを受け取ることでWEBページが閲覧できるようになる

クライアントサイド
クライアントサイドの言語とは、クライアント（WEB上であればブラウザのこと）からサーバーにリクエストして得られた結果をブラウザで処理（表示）する際に使われる言語のこと。
javascriptがクライアントサイドの言語として挙げられる。

サーバーサイド
サーバーサイドの言語とは、クライアントに結果を渡すためにサーバー内で処理を行う言語のこと。
PHP、Ruby、Pythonなどの言語がサーバーサイドで使用される。

npm

npmとはNode.jsのパッケージを管理するツールで、Node.jsをインストールすることで自動的に使えるようになる。
ここでいうパッケージとは、あらかじめ用意されているNode.jsの便利な機能をまとめたもののこと。
npmで様々なパッケージのインストールやアップデートをコマンドラインから行うことができる。
npmでインストールされたパッケージはnode_modulesディレクトリにインストールされ、package.jsonファイルで管理ができる。

npmのインストールの種類

npmでパッケージをインストールするにはグローバルインストールとローカルインストールの2種類の方法がある。

グローバルインストール
npmをインストールした場所にパッケージがインストールされる。全てのプロジェクト（フォルダ）でインストールしたパッケージが使用できるようになる。

↓下記コマンドを打ち込むことでグローバルにインストール

npm install -g パッケージ名

ローカルインストール
任意のプロジェクト（フォルダ）内にだけパーケージをインストールする。インストールしたプロジェクト内でしかパッケージが使用できない。

↓下記コマンドを打ち込むことでローカルにインストール

npm install パッケージ名

npm コマンド色々

npm install　は　npm i　と省略して記述することもできる

＊ 作成したものを動かすために必要なパッケージをインストール
（package.json の dependenciesに追加される）
npm i -S

＊ 開発に必要なパッケージをインストール
（package.json の devDependenciesに追加される）
npm i -D

＊ パッケージのインストールリスト
npm list

＊ パッケージをアンインストール
npm rm

＊ node_modulesフォルダを削除
rm -rf node_modules

目的

• 関数の実装を繰り返し実施し、実装までの思考法を身につける。
• 関数の概念を頭で理解するだけでなく、感覚的に操作できるまで昇華する。
• 英語でテクニカルな内容を理解する。

今回やること

lodashのライブラリを実装しながら学んだことをアウトプットしていきます。
if文は三項演算子で対応するように意図する。

_.lastIndexOf(array, value, [fromIndex=array.length-1])

第3引数のインデックスから逆方向に検索し、値と一致したインデックス番号を返す。なければ-1。

_.lastIndexOf([1, 2, 1, 2], 2);
// => 3

// Search from the `fromIndex`.
_.lastIndexOf([1, 2, 1, 2], 2, 2);
// => 1

実装

特に問題なし。

lastIndexOf = (array, value, fromIndex = array.length - 1) => {
    for (let i = fromIndex; 0 <= i; i--) {
        if (array[i] === value) {
            return i
        }
    }
    return -1
}

_.last(array)

配列の最後の値を取り出して返す。

_.last([1, 2, 3]);
// => 3

実装

特に問題なし

last=(array=[])=>{
    return array[array.length-1];
}

_.flatten(array)

渡した配列を一つずつなくしてくれる。

_.flatten([1, [2, [3, [4]], 5]]);
// => [1, 2, [3, [4]], 5]

学び

階層になっている時は、頭の中ではJSONを見るような気分になる。
(=階層を意識すること）

const num = [1, [2, [3, [4]], 5]];
　　num[0]// =>1
   num[1] // =>[2, [3, [4]], 5]

　　[2, 
　　[3, [4]], 5]

実装

配列の中を取り出して配列があるかが重要。
再帰と似ていて、まずは、親子みて兄弟は親子見終わって見る。

function flatten(array) {
    const flattendedArray = [];
    for (let i = 0; i < array.length; i++) {
        const value = array[i]
        if (Array.isArray(value)) {
            flattendedArray.push(...value);
        } else {
            flattendedArray.push(value);
        }
    }
    return flattendedArray;
} 

前提・実現したいこと

プログラミングスクールのチーム開発でフリマアプリを製作中です。
カテゴリー機能実装でエラーが出たので、それをどのように解決したかを記録することにしました。

発生している問題・エラー(YouTube動画)

エラー画面をYouTubeにアップしました。

QiitaにはYouTubeの埋め込みはできないみたいなので、画像をクリックして動画に飛んで見てください。

親カテゴリーを選択すると子カテゴリーが出てきて、子カテゴリーを選択すると孫カテゴリーが出てくる設定になっています。

問題なのは、上記の画像の状態からもう一度親カテゴリーを選び直すと、また下に子カテゴリーが出てきてしまうことです。

親カテゴリーを選び直したら、下の画面のようになって欲しいのです。

エラー画面のソースコード

category.js

(省略)
$(window).on('load',function(){
  if(document.URL.match('new')) {
    $('#parent_category').on('change', function(){
      var parentCategory = $(this).val();  
        if (parentCategory != "---"){
          $.ajax({ 
            url: 'get_category_children', 
            type: 'GET',              
            data: { parent_id: parentCategory },  
            dataType: 'json' 
            }) 
            .done(function(children){ 
              $('#children_wrapper').remove();  
              $('#grandchildren_wrapper').remove(); 
              var insertHTML = ''; 
              children.forEach(function(child){ 
                insertHTML += appendOption(child); 
              }); 
              appendChidrenBox(insertHTML); 
             }) 
             .fail(function(){ 
               alert('カテゴリー取得に失敗しました'); 
             }) 
         } else { 
           $('#children_wrapper').remove();  
           $('#grandchildren_wrapper').remove(); 
         } 
       }); 
       $('.category-section__pulldown').on('change', '#child_category', function(){ 
         var childId = $('#child_category option:selected').data('category');  
         if (childId != "---"){  
           $.ajax({ 
             url: 'get_category_grandchildren', 
             type: 'GET', 
             data: { child_id: childId },  
             dataType: 'json' 
           }) 
           .done(function(grandchildren){ 
             if (grandchildren.length != 0) { 
               $('#grandchildren_wrapper').remove();  
               var insertHTML = ''; 
               grandchildren.forEach(function(grandchild){ 
                 insertHTML += appendOption(grandchild); 
               }); 
               appendGrandchidrenBox(insertHTML); 
              } 
            }) 
            .fail(function(){ 
              alert('カテゴリー取得に失敗しました'); 
            }) 
          } else { 
            $('#grandchildren_wrapper').remove();  
          } 
        }); 
(省略)

解決後のソースコード

category.js

$(window).on('load',function(){
    if(document.URL.match('new')) {
      $('#parent_category').on('change', function(){
        var parentCategory = $(this).val(); 
        if ($('div').hasClass('category-select-child')){ 
          $('.category-select-child').remove();
          $('.category-select-grandchild').remove();
          $.ajax({
            url: 'get_category_children',
            type: 'GET',
            data: { parent_id: parentCategory }, 
            dataType: 'json'
          })
          .done(function(children){
            var insertHTML = '';
            children.forEach(function(child){
              insertHTML += appendOption(child);
            });
            appendChidrenBox(insertHTML);
          })
          .fail(function(){
            alert('カテゴリー取得に失敗しました');
          })
        } else {
          $.ajax({
            url: 'get_category_children',
            type: 'GET',
            data: { parent_id: parentCategory }, 
            dataType: 'json'
          })
          .done(function(children){
            var insertHTML = '';
            children.forEach(function(child){
              insertHTML += appendOption(child);
            });
            appendChidrenBox(insertHTML);
          })
          .fail(function(){
            alert('カテゴリー取得に失敗しました');
          })
        }
      });

解決方法

以下のように条件分岐の設定を変えました。

エラーの場合

var parentCategory = $(this).val();  
  //親カテゴリーのidが入っている場合＝親カテゴリーの情報が入った場合
  if (parentCategory != "---"){
　  //ajaxで子カテゴリーの情報を受け取りjson形式で返す
　  //子カテゴリーを追加
  } else {
    //(省略)ここの記述間違えてて何の意味もなかった
  }

親カテゴリーが選択されて情報が入っているかいないかで条件分岐されていたところを、
子カテゴリーがあるかないかで条件分岐することにしました。

解決後の場合

//子カテゴリーのクラスがある場合
if ($('div').hasClass('category-select-child')){
  //子カテゴリーを消す
  $('.category-select-child').remove();
  //ajaxの処理
  //新たに子カテゴリーを追加
} else {
//子カテゴリーのクラスがない場合
  //単純に子カテゴリーを追加
}

.hasClassメソッドは、そのクラスがあるかないかを判定して、trueかfalseで返してくれます。

子カテゴリーがあれば、まず既存の子カテゴリーをremoveメソッドで消してから新たに子カテゴリーを追加し、
子カテゴリーがなければ、単純に今まで通り子カテゴリーを追加するだけにしました。

解決後の挙動(YouTube動画)

解決後の挙動の動画をYouTubeにアップしました。

※QiitaにはYouTubeの埋め込みはできないみたいなので、画像をクリックして動画に飛んで見てください。

補足情報

ruby 2.5.1
Rails 5.2.4.3

参考記事

【jQuery入門】hasClass()でクラスの存在有無を調べる方法！

だから僕はVanilla JSを辞めた

Vanilla JSとは、普通の何のフレームワークも使わない純粋なJavaScriptのことです。
Pure JSと呼んだりもしますが、あえてこの表記としています。
私が、フレームワークに手を出して、Vanilla JSを辞めた理由を、私の場合の例として述べます。
私の場合がTypeScirptとVue.jsの導入だったのでその話をしますが、これらの推奨が目的ではなく、新たなものへ挑戦する勇気を持ちなさいという記事です。

TL;DR

• 純粋なJavaScriptでなんでもできるからと、なんでもしていた私がフレームワークを導入するまで
• フレームワークや、その他新しいことの食わず嫌いはなるべくやめたい

JavaScriptだけで記述する

WEB開発はコンパイラ不要、環境も選ばない、JavaScriptはなんだか緩いと、手を出しやすい分野だと思います。
私はなんでも純粋な状態で書くことに、何と無くこだわりを持っていました。
JavaScriptだけで書いて、jQueryなどには見向きもしない、そんな日々が続いていました。
その理由としては、新たなものを覚えるほどまだJavaScriptに精通していない、学習コストが高そう、無くてもかける、無駄な通信や変数汚染を避けたい、などでした。

TypeScriptとの出会い

しかしそんなある日、何気なく書いた次の一文が動かないことに頭を悩ませることになります。

document.getElementsByTagName("a").forEach((e) => {
  e.onclick = () => location.href = e.href
  e.removeAttribute("href")
})

内容は、ページ中のaタグのリンクを消去し、代わりにonclickでページ遷移を行うものです。
これは、PWAでaタグによるリンクを行うと、PWAを抜けてブラウザが起動してしまうというものを回避するために書いたものでしたが、うまく動作しません。
この理由は、document.getElementsByTagNameの戻り値はHTMLCollectionであってArrayでないことです。

今まで考えてもいませんでしたが、JavaScriptにも型が存在したのでした。
上記ではHTMLCollectionというのはObject型であり、そこにforEachメソッドが定義されていないため、動作しないのです。
どうにもJavaScriptばかり書いてると、型の考えをしなくなってきます。今でこそlet/constによる記法が標準となってまいりましたが、古い本などではvarを用いるものも見ます。なんだって再代入できちゃうものだから、動的型付けなんて型がないみたいなものだろうと考えてしまいます。

そして思い出したキーワード、それがTypeScriptです。
型を意識しないでめちゃめちゃなことできるからJSは便利なのに、なんでそこに型付けるのか、非常に疑問でしたが、これ使ってたらこんなエラーに数時間溶かすことはなくなるのではないかと、思ったわけです。

簡単な例

次のようなコードを書いたことがあるでしょうか

console.log(`${num} is ${(num % 2) ? "odd" : "even"}`)

上記は、数字の入った変数numによって、それが偶数か奇数かをコンソールに表示するという動作をします。
なぜでしょう。それは0がfalthyで、それ以外の数字はtruthyだからですね。

JavaScriptでは暗黙の型変換が結構活躍します。条件式の中では勝手Booleanに変換される上記の例もそうですが、ほかにも

const num = document.getElementById("age").value - 0

などとすれば、入力された数値をString型ではなくNumber型として利用できます。
これは、文字列に算術演算子を適用するとき、文字列を数値へ暗黙的に変換を行うためで、実際には数値へ変換できないような文字列だとしたらNaNが代入されることになります。

一見便利な暗黙の型変換ですが、変数に入っている方がわからなければ、先ほど挙げたHTMLCollectionのような、無いメソッドを呼び出してしまうようなミスをしてしまうことが多くなってきます。

TypeScriptでは、変数に代入できる型や、メソッドの戻り値の型などはあらかじめ決めておかなければなりません。このため、上記のコードはコンパイルが通りません。算術演算子の左オペランドには文字列は使えないからです。（文字列の結合の演算子としての+は使用できますが、これは算術演算子ではありません）

これは逆に、変数の型は常にわかっているということです。
なんらかのコードエディタを用いている場合、変数の型がわかっているために、メソッドなども書いている途中でその有無や戻り値の型まで把握できます。

最近はNull安全などといったことも目にしますし、ECMAScript2020ではOptional Chaning演算子?.や、Null合体演算子??も追加されます。nullの扱いは面倒ですからね。
一方でTypeScriptではそもそも、その変数がundefinedやnullとなり得るかどうか知ることができます。
なり得る場合は、先述のような演算子や、条件分岐などを必要としますが、それを教えてくれるというわけです。便利ですね。

簡単な例２

次のコードの動作はどうなるでしょう。

const num = 5
window.localStorage.setItem("isEven", !(num % 2))

const isEven = window.localStorage.getItem("isEven")
console.log(`${isEven ? "even" : "odd"}`)

当然5は奇数ですからsetItemされるのは!(5 % 2) = !(1) = falseです。
それがisEvenにローカルストレージ経由で代入され、三項演算子で"odd"と評価されるはず、と思いますよね。

残念ながら、numが5であろうとなんであろうと、コンソールの表示は必ず"even"になります。
ローカルストレージには文字列しか保存できないんですね。
このため、setItemの時点でfalseは"false"に変換され、truthyとなります。
今回の場合、setItemされるのは"true" | "false"と表せます。これはどちらもtruthyですから、常に"even"が表示されます。
型変換されるとわかっていても、必ずJSON.stringifyしてからセットし、読みだした後にJSON.parseするようにしないといけませんね。
一方、TypeScriptでは、Boolean型はString型じゃないよって教えてくれます。また、読み出し後もそれがString型であることを教えてくれるので、このようなミスは防げるかと思います。

シチュエーションとしては、チェックボックスやスイッチの状態を保存したいときなんかあると思います。
自分もやらかしてしまいそうだと思いませんか？

なぜかundefinedって画面に出ちゃうことがある人は検討してみると良いでしょう。そもそも画面に表示するところにundefinedとなり得る変数を置かなければ良いんですから。

型変換を自前で行う必要がある場合や、変数の型を明記する必要がある場合など、コードの記述量は増えてしまうことはあるかもしれませんが、その分バグが減ります。

今まで環境構築や学習コストなどを恐れて導入しなかった昔の自分を諭したいです。

Vue.jsとの出会い

そしてある日、Vue.jsというものを見かけます。
どうやらアプリ開発に便利なフレームワークだそうです。
フレームワークはとはなんや、と思いましたが、流行ってたので乗ることにしました。（コロナも流行ってますが乗らないでください）

とりあえず適当にアプリを開発して、Vuetifyというマテリアルデザインのアプリ開発が簡単にできるものも見つけ、使用しているうちにこう感じましたわけです。
「なるほど。今までは車輪の再発明をしていたわけか。」

あるいはjQueryなんかも使っていればもっと早くアプリの開発ができたのではないかとも、今になっては思います。もう今となっては使いませんが。

先人が自分より高度な知識で作ったものなんですから、そりゃ私がそれに勝るアプリを作れないでしょう。
それはもう、ArrayにはArray.prototype.reverseがあるのに、自前でfor文で逆に詰めなおすようなことをしているようなものだったわけです。時間の無駄だし、なんなら性能も劣る場合があります（ソートなんかそうですね）。

だから僕は

今までの私は間違っていました。
使用できるものは使った方が良いです。なんかnullになったり、予期しない文字列きたり、対応するのめんどくさいですね。デザインなんかコーディングと同時にするには難しいですし、CSSはいつも思ったのと違う動作するんですもん。

そして私は今になって、昔の開発環境を、あるジョーク記事からとってこう呼んでいます。

Vanilla JSと。

それは、純粋なJavaScriptを用いるというフレームワークです。
初学者なんかは構いませんが、ある程度の規模になってくると注意深い開発が必要になり、他人と開発するときなんかにもそのメソッドが何を返す可能性があるのかを明確にしたいときが出てきたりすると思います。
私の場合、TypeScript+Vue.js+Vuetifyというのを採用して、開発の効率と品質が上がり、食わず嫌いで導入を渋っていたことを後悔しました。

だから僕はVanilla JSを辞めた。

? この記事はWP専用です
https://wp.me/pc9NHC-nh

前置き

Nuxt.js Vue.js を使う上で必須の知識です！
これができるとコンポーネントを活かして
表現の幅を広げることができます?

例えば！
親によってクラスの有無を切り替えて
色分けをする、といったことができます?

基本的な使い方

v-bind:{ 属性名 }="{ 変数 }"

タグの属性を変数にしたい時に使います。
aタグのhref属性をv-bindしてみます。

飛びたいリンク先
http://localhost:3000/

index.vue

<template>
 <div class="page">
   <a v-bind:href="url">リンク</a>
 </div>
</template>

<script>
export default {
 data () {
   return {
     url: '/',
   }
 },
}
</script>

? この記事はWP専用です
　 続きはWPでご覧ください?
https://wp.me/pc9NHC-nh

書籍のアウトプットとして

以下のコードはロックとキーのシステムを構築している。

function lock(secret){
  const key = Symbol('key')
  return {
    key,unlock(keyUserd){
      if(keyUserd==key){
        return secret;
      }else {
        return '*'.repeat(secret.length || secret.toString().length)
      }
    }
  }
}

const {key,unlock}=lock(42)

console.log(unlock())//**
console.log(unlock(Symbol('key')))//**
console.log(unlock('key'))//**
console.log(unlock(key))//42

正しいキーならsecretを取得でき、正しくないならキーをマスクしている。

コードの解説

このコードを読む上でわからないことがいくつかあった。

1. return{key,unlock(...)}とはどういうことか
2. unlock()で実行できるのはなぜか

return {key,unlock(...)}とはどういうことか

return {}はオブジェクトを返しているということ。そしてオブジェクトには簡易表記という書き方ができる。

const obj = {
  name: name,
  method: function() {}
}

//簡易表記
const obj = {
  name,
  method() {}
}

プロパティ名(name)と変数名が同じ場合、一度指定すればいいだけになる。
{name:name}と書いていたのが{name}で済む。
またメソッドに関しては無名関数に限り{method:function(){}}が{method()}と書ける。

つまりlock関数を書き換えるとこういうこと

function lock(secret){
  const key = Symbol('key')
  return {
    key:key,
    unlock:function(keyUserd){
      if(keyUserd==key){
        return secret;
      }else {
        return '*'.repeat(secret.length || secret.toString().length)
      }
    }
  }
}

そしてconst {key,unlock}=lock(42)で変数keyにSymbol('key')が代入され、変数unlockには無名関数が代入されている。

unlock()で実行できるのはなぜか

これは勘違いであった。

その原因となったコードがこちら

const ffaa={
  at(n){
    if(n<=2)return 1;
    return this.at(n-1)+this.at(n-2);
  }
}

const {at}=ffaa;
const ff={at}
const aa={ff:at}

ffaa.at(7)//13
at(7)//エラー
ff.at(7)//13
aa.ff(7)//エラー

これだけを見ると、無名関数を分割した際、単純に変数名()では実行でいなものと思ってしまった。
確かに関数を名前で参照出来ないこともあるが、それは関数内のメンバーを参照するときである。

前提

以降の説明では下記の非同期関数を使用して説明を実施します。
※使用したソースは全て GitHub に上げてあります

file.js

function readFile(fileName, success) {
  setTimeout(() => {
    if (typeof(success) === 'function') {
      success(fileName)
    }
  }, 500)
}
function readFileAsync(fileName) {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(fileName), 500)
  })
}

---

プログラムの常識

コードは上から順に実行される

---

sync.js

const hoge = readFile('hoge.txt')
const fuga = readFile('fuga.txt')
const foo = readFile('foo.txt')
const bar = readFile('bar.txt')
console.log(hoge + fuga + foo + bar)

---

動かない

---

なんで？

• 非同期処理だから
• ファイルの読み込みが終わる前に console.log() が走っちゃう

---

なんで非同期なの？

• 同期的な処理だと、IOアクセスの待ち時間中に何もできなくなる
• DOMを操作するときはなにかと非同期で動かしたいことが多い(Ajaxのレスポンスを待っている間にプログレスバーを表示させるとか)

---

ES6以前の非同期処理

• コールバック地獄
  

---

コールバック地獄

async.js

readFile('hoge.txt', function (hoge) {
  readFile('fuga.txt', function (fuga) {
    readFile('foo.txt', function (foo) {
      readFile('bar.txt', function (bar) {
        console.log(hoge + fuga + foo + bar)
      })
    })
  })
})

---

• 深いネスト
• エラーをまとめて受け取れない
• function ,function , function ...

---

ES6 (ECMAScript 2015)以後の世界

---

Promise

---

Promiseとは

Promiseは非同期処理を抽象化したオブジェクトとそれを操作する仕組みです。
使いこなすことで、以下のような効果が見込めます。

• コールバック地獄から解放される
  
• エラー処理をうまく記述できる
• 一連の非同期処理を関数化して再利用しやすくできる

---

書き方

howto.js

const promise = function(str) {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(str), 500)
  })
}

promise('foo')
  .then(
    (val) => {
      console.log(val)
      return promise('bar')
    })
  .then((val) => console.log(val))
  .catch((err) => console.log(err))

---

解説

Promiseオブジェクト

• Promiseオブジェクトを返す関数を書く
• Promiseオブジェクトの中に非同期に行いたい処理を書く
• 非同期処理が終わったらresolve()を呼び出す
• 非同期処理が失敗したらreject()を呼び出す

---

解説

Promiseオブジェクトを使う

• 非同期処理を実行したあとに実行したい処理をthen節の中に書く
• 実行結果は引数(val)で受け取る
• 非同期処理が失敗したらcatch節で受け取れる

---

いいところ

• ネストが深くならない
• 各処理で起こったエラー(例外)をcatch節でまとめて補足できる

---

これでコールバックともおさらばだぜ！！

---

promise.js

let hoge, fuga, foo, bar
readFileAsync('hoge.txt')
  .then((result) => {
    hoge = result
    return readFileAsync('fuga.txt')
  })
  .then((result) => {
    fuga = result 
    return readFileAsync('foo.txt')
  })
  .then((result) => {
    foo = result
    return readFileAsync('bar.txt')
  })
  .then((result) => { 
    bar = result
    console.log(hoge + fuga + foo + bar)
  })

---

うーん・・・

このままでもできるけど・・・

---

• 確かにネストは浅くなったが長い
• 外の変数に退避しないと一個前の結果を参照できない
• then,then,then...

---

もっと同期的に書きたい

理想のコード.js

const hoge = readFileAsync('hoge.txt')
const fuga = readFileAsync('fuga.txt')
const foo = readFileAsync('foo.txt')
const bar = readFileAsync('bar.txt')
console.log(hoge + fuga + foo + bar)

---

そして ES8(ECMAScript 2017)へ・・・

---

async/awaitの登場

---

await.js

async function readFiles(){
  const hoge = await readFileAsync('hoge.txt')
  const fuga = await readFileAsync('fuga.txt') 
  const foo = await readFileAsync('foo.txt') 
  const bar = await readFileAsync('bar.txt')
  console.log(hoge + fuga + foo + foo)
}

readFiles()

---

解説

• 同期的に処理したい部分を async function で囲む
• 同期的に処理したい非同期処理関数の手前に await をつける
• Promiseの処理が終わるまで待ってくれるようになる

---

ちなみに・・・

• async functionもPromiseを返すので、以下のようなコードは非同期に実行されます

await1.js

async function readFiles(){
  const hoge = await readFileAsync('hoge.txt')
  const fuga = await readFileAsync('fuga.txt') 
  const foo = await readFileAsync('foo.txt') 
  const bar = await readFileAsync('bar.txt')
  console.log(hoge + fuga + foo + foo)
}

readFiles()

console.log('readFiles()はまだ終わらない・・・')

• ちゃんとやるなら以下のような感じ

await2.js

async function readFiles() {
  const hoge = await readFileAsync('hoge.txt')
  const fuga = await readFileAsync('fuga.txt') 
  const foo = await readFileAsync('foo.txt') 
  const bar = await readFileAsync('bar.txt')
  console.log(hoge + fuga + foo + foo)
}

readFiles().then(() => console.log('readFiles()は終わった！！'))

---

めでたしめでたし

---

ちょっとまって

---

直列処理はいいけど並列処理は？

---

Promise.all()

---

Promise.all()

• 複数の非同期処理が完了した後にthen節を呼び出せる

---

promise_all.js

const hoge = readFileAsync('hoge.txt')
const fuga = readFileAsync('fuga.txt')
const foo = readFileAsync('foo.txt')
const bar = readFileAsync('bar.txt')

Promise.all([hoge, fuga, foo, bar])
  .then((values) => console.log(values[0] + values[1] + values[2] + values[3]))

---

awaitとの合わせ技も可能

promise_all1.js

async function readFiles() {
  const values = await Promise.all([
    readFileAsync('hoge.txt'),
    readFileAsync('fuga.txt'),
    readFileAsync('foo.txt'),
    readFileAsync('bar.txt'),
  ])
  console.log(values[0] + values[1] + values[2] + values[3])
}

readFiles()

---

まとめ

• async/awaitは神
• Promise.allとかも使って、非同期にすべきところは非同期にしよう
• ちなみに新しい規格なのでIE非対応。使いたいときはトランスコンパイルしましょう

---

補足資料

ES6,ES8

ES6〜ES10(es2015〜es2019)まとめ

トランスパイルとは

トランスコンパイラ（他にトランスパイラ、ソース・トゥ・ソースコンパイラ、などとも）は、あるプログラミング言語で書かれたプログラムのソースコードを入力として受け取り、別のプログラミング言語の同等のコードを目的コードとして生成する、ある種のコンパイラである
-- Wikipediaより

よく見かける URL の正規表現に比べて、もう少し厳密にパースする正規表現の紹介になります。

正規表現なので他の言語等でも使用できると思いますが、ここでは JavaScript で動くコードを載せます。

1. RFC 3986 に書かれている URL の正規表現

WEB 上で調べると様々なひとたちが URL の正規表現を書いていると思いますが、URL の定義が書かれている RFC 3986 に既に (おそらく) 厳密な正規表現が書かれています。

自身でヘタに正規表現を書くよりもこちらを流用したほうが安全です。

以下、引用・意訳。

^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?
 12            3  4          5       6  7        8 9

2 行目は、マッチ文字列のインデックスを分かりやすくするための数です。
例えば、以下のようにマッチします。

http://www.ics.uci.edu/pub/ietf/uri/#Related

$1 = http:
$2 = http
$3 = //www.ics.uci.edu
$4 = www.ics.uci.edu
$5 = /pub/ietf/uri/
$6 = <undefined>
$7 = <undefined>
$8 = #Related
$9 = Related

参考「RFC 3986 - Uniform Resource Identifier (URI): Generic Syntax
Appendix B. Parsing a URI Reference with a Regular Expression」

2. 例: ディレクトリとファイル名とクエリ文字列を取得

2.1. 一般的によく使われる JavaScript のコードの問題点

lastIndexOf() でファイル名やクエリ文字列を分離したり、split() でディレクトリやファイル名を分離するものが多いですが、厳密にはクエリ文字列そのものに / や ? を含めることができるため、理論上、正しく動作しない可能性があります。

const url = /* 'URL 文字列' */;
const query = url.slice(url.lastIndexOf('?') + 1);
const fileName = url.slice(0, url.lastIndexOf('?')).slice(url.lastIndexOf('/') + 1);

例：https://example.com/dir1/dir2/index.php?callback=https://example.com/dir3/dir4/index2.php?param

query === 'params'
fileName === `index2.php`

2.2. (おそらく) 厳密な正規表現

不要な括弧 ( ... ) を取り除いたりキャプチャしないように (?: ... ) に変更して、必要な部分だけをキャプチャします。

また、ファイル名にマッチする部分 5 ([^?#]*) を (?:([^?#]*/)([^/?#]*))? に書き換え、(クエリ文字列が取り除かれた) パス文字列の最後のスラッシュから後ろをキャプチャします。

ファイル名を含めるには必ずスラッシュ / が 1 つ以上あるはずで、スラッシュがない場合にはファイル名が空になるはずなので、正しく動作するはずです….。

^(([^:/?#]+):)?(//([^/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?
 12            3  4          5       6  7        8 9

^(?:[^:/?#]+:)?(?://[^/?#]*)?([^?#]*)(\?[^#]*)?(?:#.*)?
                             1       2

^(?:[^:/?#]+:)?(?://[^/?#]*)?(?:([^?#]*/)([^/?#]*))?(\?[^#]*)?(?:#.*)?
                                1        2          3

※ここではクエリ文字列を区切り文字の ? ごとキャプチャしています。パスを再び組み立てる必要がある場合などは ? を残した方が便利です。逆に、POST 送信する目的などでは ? を除去した方が使いやすいため、状況によって使い分けてください (両方キャプチャすることもできます) 。

2.3. JavaScript でのコード

const url = /* 'URL 文字列' */;  
const matchedFileName = url.match(/^(?:[^:\/?#]+:)?(?:\/\/[^\/?#]*)?(?:([^?#]*\/)([^\/?#]*))?(\?[^#]*)?(?:#.*)?$/) ?? [];
const [, dir, fileName, query] = matchedFileName.map(match => match ?? '');

例：https://example.com/dir1/dir2/index.html?params#section1

dir === '/dir1/dir2/'
fileName === `index.html`
query === '?params'

例：https://example.com/dir1/dir2/index.php?callback=https://example.com/dir3/dir4/index2.php?param

dir === '/dir1/dir2/'
fileName === `index.php`
query === '?callback=https://example.com/dir3/dir4/index2.php?param'

3. おまけ: 拡張子も分離する

拡張子は拡張子で厳密に取り出そうとすると罠が多いため、以下のページを参考にさせていただきました。

^(.+?)(\.[^.]+)?$
 1    2

参考「ファイル名から拡張子とそうでない部分を分ける - Qiita」(※ Ruby の正規表現のため、少し記述が異なります)
参考「Railsの正規表現でよく使われる \A \z って何？？ - Qiita」

const url = /* 'URL 文字列' */;  

const matchedFileName = url.match(/^(?:[^:\/?#]+:)?(?:\/\/[^\/?#]*)?(?:([^?#]*\/)([^\/?#]*))?(\?[^#]*)?(?:#.*)?$/) ?? [];
const [, dir, fileName, query] = matchedFileName.map(match => match ?? '');

const matchedExt = fileName.match(/^(.+?)(\.[^.]+)?$/) ?? [];
const [, name, ext] = matchedExt .map(match => match ?? '');

例：https://example.com/dir1/dir2/index.html?params#section1

name === 'index'
ext === `.html`

あと何コマ？
コマ数で漫画の進捗管理するツールを作りました。
コマ数を入力するとコマが出てきて、
終わったコマをクリックすると塗りつぶされて完了状態になります。
1コマ辺りの作業時間を入力すると、残りの作業時間がわかります。
1コマの作業時間×残りコマ数で残りの作業時間が算出される訳ですね。

何故作ろうと思ったのか

ページ単位で管理するツールは既にあるが、
コマ単位で管理するものはなかったため。
漫画制作のモチベーションを維持するためにこういうツールがほしかった。
（コマ単位で管理しないとモチベが保たない）
Vue初心者が悶絶しながら作ったものですが、この記事が他の勉強中の方の参考になればと思います。

ソース全文

panels.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>あと何コマ？</title>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <!-- fontawesome -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css"
    integrity="sha256-UzFD2WYH2U1dQpKDjjZK72VtPeWP50NoJjd26rnAdUI=" crossorigin="anonymous" />
  <link rel="stylesheet" href="panels.css">
</head>
<body>
  <header class="d-flex flex-column flex-md-row align-items-center p-3 px-md-4">
    <nav class="mt-2 my-md-0 mr-md-3">
      <a class="px-2 text-white" href="#paneldiv">あと何コマ？</a>
      <a class="px-2 text-white" href="#timediv">あと何分？</a>
    </nav>
  </header>
  <div class="jumbotron jumbotron-fluid">
    <div class="container captionText">
      <p>コマ数で進捗管理するツールです。残りコマ数を入力して、入力完了ボタンを押してください。<br>
        1コマ辺りの作業時間を入力すると、残りの作業時間がわかります。
      </p>
    </div>
  </div>
  <div id="app" class="mb-5">
    <div class="container main py-4 mt-sm-3">
      <article class="text-center pt-3 pb-4" id="paneldiv">
        <div class="alertArea text-center mb-3">
          <strong v-show="alertShow">
            コマ数を入力してください
          </strong>
        </div>
        <h3 v-if="!resultShow">
          あと<input type="number" v-model.number="remainedPanelsInput" min="0" class="panelInput">コマ？
          <button type="button" class="ml-2 btn page-link text-light d-inline-block btn-purple" @click="resultShowFunc"
            v-if="!resultShow">入力完了</button>
        </h3>
        <h3 v-else>
          全<input type="number" v-model.number="remainedPanelsInput" min="0" class="panelInput">コマ
          <button type="button" class="ml-2 btn page-link text-light d-inline-block btn-purple" @click="resultReset"
            v-if="resultShow">リセット</button>
        </h3>
        <div v-show="resultShow">
          全{{ remainedPanelsInput }}コマ－
          済み<input type="number" v-model.number="filledPanels" v-bind:max="remainedPanelsInput" min="0">コマ
          ＝
          あと<span class="resultText">{{ remainedPanelsNumber }}</span>コマ
          <p class="text-muted pt-3">終わったコマをクリックすると、塗りつぶされて完了状態になります。完了状態のコマをクリックすると未完の状態に戻ります。</p>
        </div>
        <section class="row pricing-header px-3 py-3 pt-md-3 pb-md-1 mx-auto text-center" v-show="resultShow">
          <div class="panel" v-for="n in remainedPanelsNumber" @click="panelFinished">
            <div class="panelInner">{{ n }}</div>
          </div>
          <div class="panel filled" v-for="n in filledPanels" @click="panelReturn"></div>
        </section>
      </article>

      <article class="text-center" id="timediv" v-show="resultShow">
        <h3>あと何分？</h3>
        <div>
          1コマ辺りの作業時間<input class="inputPerPanel" type="number" v-model.number="
          perPanel" min="0">分×残り{{ remainedPanelsNumber }}コマ＝
          あと<span class="resultText">{{ remainingTime }}</span>分
          （{{ remainingHour }}時間）
        </div>
      </article>
    </div>
    <!-- ツイートボタン -->
    <div class="contact text-center">
      <a href="https://twitter.com/share" class="twitter-share-button" data-url="https://mitaru.github.io/panels/"
        data-text="進捗どうですか？あと何コマ？" data-size="large" data-hashtags="あと何コマ">
        Tweet
      </a>
    </div>
  </div>
  <footer class="my-1 pt-5 text-muted text-center text-small">
    <ul class="list-inline">
      <li class="list-inline-item">
        <a href="https://twitter.com/SakaiMitaru">
          <i class="fab fa-twitter-square mr-1"></i>SakaiMitaru
        </a>
      </li>
      <li class="list-inline-item"><a href="https://github.com/mitaru/panels.git">
          <i class="fab fa-github"></i>
        </a>
      </li>
    </ul>
  </footer>
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"
    integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd"
    crossorigin="anonymous"></script>
  <!-- vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
  <script src="panels.js"></script>
</body>
</html>

panels.css

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  color: rgb(31, 45, 65);
  background: #F7F7FC;
}

header {
  background: #37384E;
  color: #fff;
}

.jumbotron {
  margin: 0;
  background: #37384E;
  color: #fff;
  border-radius: 0 0 40% 40%;
}

.captionText p {
  margin-bottom: 50px;
}

.text-muted {
  color: #9e9fb4 !important;
  font-size: 14px;
  margin: 0;
}

.main {
  max-width: 2000px;
  background: #F7F7FC;
}

.alertArea {
  height: 20px;
}

.alertArea strong {
  background: rgba(255, 255, 255, 0.6) !important;
  padding: 2px 5px;
  border-radius: 4px;
  color: #37384E;
}

.panelInput {
  min-width: 10vw;
}

.btn-purple {
  color: #fff;
  background: #16C995;
  border: 0;
}

.btn-purple:hover {
  background: #0f926d;
}

.pricing-header {
  max-width: 1000px;
}

section {
  justify-content: center;
  align-items: center;
}

input {
  width: 50px;
  border: 0;
  background: #fff;
  border-radius: 4px;
  padding: 3px;
  margin: 2px;
  color: #766DF4;
  font-weight: bold;
  text-align: center;
}

.resultText {
  background: rgba(118, 109, 244, 0.08) !important;
  color: #766df4 !important;
  font-size: 20px;
  padding: 0 10px;
  border-radius: 4px;
  font-weight: bold;
}

.panel {
  width: 150px;
  height: 100px;
  background: #fff;
  border: 5px solid #333;
  margin: 4px;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
  user-select: none
}

.filled {
  background-color: #fff;
  background-image: radial-gradient(#16C995 14%, transparent 17%), radial-gradient(#16C995 14%, transparent 17%);
  background-position: 0 0, 4px 4px;
  background-size: 8px 8px;
}

footer {
  background: #F7F7FC;
  clear: both;
}

a .fa-github {
  font-size: 30px;
  color: #333;
}

a .fa-github:hover {
  opacity: 0.8;
}

@media screen and (max-width: 480px) {
  .panel {
    width: 100px;
    height: 70px;
    line-height: 70px;
  }
}

panels.js

(function () {
  'use strict';

  new Vue({
    el: '#app',
    data: {
      remainedPanelsInput: 0,
      filledPanels: 0,
      perPanel: 0,
      resultShow: false,
      alertShow: false,
    },
    watch: {
      remainedPanelsInput: {
        handler: function () {
          localStorage.setItem('remainedPanelsInput', JSON.stringify(this.remainedPanelsInput));
        },
        deep: true
      },
      filledPanels: {
        handler: function () {
          localStorage.setItem('filledPanels', JSON.stringify(this.filledPanels));
        },
        deep: true
      },
      perPanel: {
        handler: function () {
          localStorage.setItem('perPanel', JSON.stringify(this.perPanel));
        },
        deep: true
      },
    },
    methods: {
      resultShowFunc: function () {
        if (this.remainedPanelsInput === 0) {
          this.alertShow = true;
        } else {
          this.resultShow = true;
          this.alertShow = false;
        }
      },
      panelFinished: function () {
        this.filledPanels++;
      },
      panelReturn: function () {
        this.filledPanels--;
      },
      resultReset: function () {
        this.remainedPanelsInput = 0;
        this.filledPanels = 0;
        this.perPanel = 0;
        this.resultShow = false;
      },
    },
    computed: {
      remainedPanelsNumber: function () {
        return this.remainedPanelsInput - this.filledPanels;
      },
      remainingTime: function () {
        return this.remainedPanelsNumber * this.perPanel;
      },
      remainingHour: function () {
        return Math.round((this.remainingTime / 60) * 10) / 10;
      },
    },
    mounted: function () {
      this.remainedPanelsInput = JSON.parse(localStorage.getItem('remainedPanelsInput')) || 0;
      this.filledPanels = JSON.parse(localStorage.getItem('filledPanels')) || 0;
      this.perPanel = JSON.parse(localStorage.getItem('perPanel')) || 0;
      if (this.remainedPanelsInput > 0) {
        this.resultShow = true
      }
    },
  })
  // twitter投稿
  !function (d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs');
})();

Bootstrap4のこちらの実例をもとに作りました。ほぼ原型残ってないです。
何故わざわざテンプレートをもとに作るかと言うと、レスポンシブ対応が楽だからですね。

全力で先人に頼っていくスタイル。

Vue部分

panels.js

  new Vue({
    el: '#app',
    data: {
      remainedPanelsInput: 0,
      filledPanels: 0,
      perPanel: 0,
      resultShow: false,
      alertShow: false,
    },
// 中略
    computed: {
      remainedPanelsNumber: function () {
        return this.remainedPanelsInput - this.filledPanels;
      },
      remainingTime: function () {
        return this.remainedPanelsNumber * this.perPanel;
      },
      remainingHour: function () {
        return Math.round((this.remainingTime / 60) * 10) / 10;
      },
    },

remainedPanelsInput（全○コマの数）から filledPanels（完了したコマ数）を引いて
remainedPanelsNumber（残りコマ数）を出しています。
あと何分？の部分はperPanel（1コマ辺りの作業時間）と
remainedPanelsNumber（残りコマ数）を掛けて算出しています。
また分単位だけでなく時間単位の表記もあった方が親切だと思ったので
remainingHourで計算しました。
Math.round((this.remainingTime / 60) * 10) / 10;と書くことで、
小数点第二位で切り捨てて表示することができます。

panels.html

<h3 v-if="!resultShow">
  あと<input type="number" v-model.number="remainedPanelsInput" min="0" class="panelInput">コマ？
  <button type="button" class="ml-2 btn page-link text-light d-inline-block btn-purple" @click="resultShowFunc"
    v-if="!resultShow">入力完了</button>
</h3>
<h3 v-else>
  全<input type="number" v-model.number="remainedPanelsInput" min="0" class="panelInput">コマ
  <button type="button" class="ml-2 btn page-link text-light d-inline-block btn-purple" @click="resultReset"
    v-if="resultShow">リセット</button>
</h3>

panels.js

methods: {
  resultShowFunc: function () {
    if (this.remainedPanelsInput === 0) {
      this.alertShow = true;
    } else {
      this.resultShow = true;
      this.alertShow = false;
    }
  },

こちらはあと何コマ？部分のコードです。


if (this.remainedPanelsInput === 0)で
あと何コマ？の入力欄が0の場合、入力完了ボタンを押下コマ数を入力してください」とアラートが表示されます。

1以上の数字が入力されている場合は結果が表示されます。
このような表示の分岐にv-showやv-ifは大変便利です。

panels.html

<div class="panel" v-for="n in remainedPanelsNumber" @click="panelFinished">
  <div class="panelInner">{{ n }}</div>
</div>
<div class="panel filled" v-for="n in filledPanels" @click="panelReturn"></div>

panels.js

methods: {
  // 中略
  panelFinished: function () {
    this.filledPanels++;
  },
  panelReturn: function () {
    this.filledPanels--;
  },

こちらはコマ部分です。
白いコマはremainedPanelsNumber（残りコマ数）分、
ドットのコマはfilledPanels（完了したコマ数）分表示されます。
v-for="n in remainedPanelsNumber"と書けば
remainedPanelsNumberの数だけコマを複製してくれます。楽ちんです。
jsで作ろうとしたらコマの中にコマ数を表示するのも大変そうですが、
Vueなら{{ n }}と書くだけですみます。おお助かる助かる。
またpanelFinishedとpanelReturnのクリックイベントで
パネルの完了状態を変更しています。

panels.js

watch: {
  remainedPanelsInput: {
    handler: function () {
      localStorage.setItem('remainedPanelsInput', JSON.stringify(this.remainedPanelsInput));
    },
    deep: true
  },
  filledPanels: {
    handler: function () {
      localStorage.setItem('filledPanels', JSON.stringify(this.filledPanels));
    },
    deep: true
  },
  perPanel: {
    handler: function () {
      localStorage.setItem('perPanel', JSON.stringify(this.perPanel));
    },
    deep: true
  },
},
// 中略
mounted: function () {
  this.remainedPanelsInput = JSON.parse(localStorage.getItem('remainedPanelsInput')) || 0;
  this.filledPanels = JSON.parse(localStorage.getItem('filledPanels')) || 0;
  this.perPanel = JSON.parse(localStorage.getItem('perPanel')) || 0;
  if (this.remainedPanelsInput > 0) {
    this.resultShow = true
  }
},

ローカルストレージでremainedPanelsInput、filledPanels、
perPanelの数を保存しています。
監視している変数の変更をトリガーにして勝手に働いてくれる
監視プロパティくんは便利やでホンマ。
途中保存がうまく行かなかったんですが、
mounted部分をnew Vue内で一番最後に配置したら
ちゃんと保存されるようになりました。どうして？（無知）

デザイン部分

Bootstrap5のとあるテーマを大いに参考にさせていただきました。
見た目もできるだけ可愛くしたかったんです。

panels.css

.jumbotron {
  margin: 0;
  background: #37384E;
  color: #fff;
  border-radius: 0 0 40% 40%;
}

border-radiusだけでdivの下部分を丸くできるものなんですね。
今回調べて初めて知りました。他にも色んな表現ができるみたいです。
歪んだ円まで作れるなんてすごい！
参考：今さら聞けない!? CSSのborder-radiusで様々な角丸に挑戦！

panels.css

.filled {
  background-color: #fff;
  background-image: radial-gradient(#16C995 14%, transparent 17%), radial-gradient(#16C995 14%, transparent 17%);
  background-position: 0 0, 4px 4px;
  background-size: 8px 8px;
}

なんとradial-gradientを使えば、CSSだけで漫画のトーンみたいなドットの背景が作れます。
CSSでドット柄（水玉模様）を作成 - ホームページのパーツ作成で好きなドットを作ろう！
他にもradial-gradientでストライプやチェック柄まで作れるみたいです。実際スゴイ！
参考：CSSグラデーションで作った背景パターンのサンプル

感想

• 比較的思った通りに作れた
• 見た目もいい感じになったと思う

課題・問題点

• ページ単位の管理機能も作りたかったがややこしすぎてヤコになった
• 今までの知識の延長線上だなと思うのでもっとレベルアップしたい
• BootstrapVue使おうとして挫折した

ここでも全文載せてますが、GitHubでもコードを公開しております。
アドバイスいただけたら嬉しいです。
https://github.com/mitaru/panels

次は何を作ろうかなー。ちょっとネタ切れしてきました。

はじめに

Railsでタイマー機能を実装したくて、調べてもなかなか欲しい情報が見つからず

友人から「javascriptで実装できるよ！」と教えてもらったら、あるわ♪あるわ♪情報が

無知過ぎる自分の戒め＆【Rails　タイマー】で検索した際、ヒットするよう記事に残します

どんな機能？

時間を指定し、時間になったらアラートがでるという機能になります。

例えば、３秒と入力し、3秒後にアラートがでる。

こんな感じです(Gyazoなのでタイミングによっては見れなくなります)
↓↓↓↓
https://gyazo.com/89773746aac0c2a1640d48e6a536190b

実装

view.html.haml

.timer__input
    %form{name: "timer"}
      %input{type: "text", value: ""}>/
      分
      %input{type: "text", value: ""}>/
      秒
      %br/
      %input{onclick: "cntStart()", type: "button", value: "スタート"}/
      %input{onclick: "cntStop()", type: "button", value: "ストップ"}/

javascript.js

//タイマー処理
var timer1;

//カウントダウン関数を1000ミリ秒ごとに呼び出す関数
function cntStart() {
  document.timer.elements[2].disabled=true;
  timer1 = setInterval("countDown()",1000);
}

// タイマー停止関数
function cntStop() {
  document.timer.elements[2].disabled=false;
  crearInterval(timer1);
}

// カウントダウン関数
function countDown() {
  var min=document.timer.elements[0].value;
  var sec=document.timer.elements[1].value;

  if((min=="")&&(sec=="")) {
    alert("時間を設定してください！");
    reSet();
  }
  else {
    if(min=="")min=0;
    min=parseInt(min);

    if(sec=="")sec=0;
    sec=parseInt(sec);

    tmWrite(min*60+sec-1);
  }
}

// 残り時間を書き出す関数
function tmWrite(int) {
  int=parseInt(int);

  if(int <= 0) {
    reSet();
    alert("時間です！");
  }
  else {
    //残り分すうはintを60で割って切り捨てる
    document.timer.elements[0].value=Math.floor(int/60);
    //残り秒数はintを60で割った余り
    document.timer.elements[1].value=int % 60;
  }
}

// フォームを初期状態に戻す(リセット)関数
function reSet() {
  document.timer.elements[0].value="0";
  document.timer.elements[1].value="0";
  document.timer.elements[2].disabled=false;
  clearInterval(timer1);
}

※上記はCSSはございません
（CSSを実装する前に記事にしてしまったためです）
皆様のデザイン力で素敵なビューを作成してください

感想

javascriptは偉大なり
というのが正直な感想です 笑
まだまだ勉強中の身ではありますが、少しずつ知識をつけていきたいですね

参考

JavaScript入門　カウントダウンタイマー