JavaScript関連のことを調べてみた2021年04月01日

もらったレビューを振り返る〜基本的なコーディングからGit、Vue3まで〜

初めまして。れいかです。
フロントエンドエンジニア歴３年、まだまだ修行の身です。

今回、経験豊富なエンジニアにコードレビューをしていただく機会があり
めちゃくちゃ勉強になったので備忘録としてここに残します。

## 仕様、技術選定

今回開発したのはこんな感じのテーブルです。

### 機能
– ユーザーが指定したAPIでfetchしたデータをテーブルに表示
– 全文検索
– カラムごとの検索（文字はテキスト検索、数値は範囲選択）
– カテゴリカルなカラムの場合、カテゴリでフィルター
– ソート
– 表示エントリ数の選択
– スライダー付きページネーション
– JSON、CSVダウンロード

よくあるテーブル機能の全部盛りな感じですね。

上記のように機能が多く実装が複雑になる場合、UIと実装の整合性を常に担保するのは考慮しなければいけないこと

GoogleAppsScript 配列をreturn

“`
function copyFile() {

let copy_file_id = [];
copy_file_id = [new_sheet.getId(), old_sheet.getId()];

return copy_file_id;
}
“`

return 受ける方

“`
let [new_sheet_id, old_sheet_id] = copyFile();
“`

(週次更新中) 2021年JSフロントエンドの選び方

> この文章はまた作成中でございます。(最終更新2021年4月1日、毎週更新予定）
> また未完成ではございますが、新しいプロジェクトの立ち上げに伴い、わたくしみたいにフロントエンドのフレームワークの選択で悩んでいるかたもいるかと思い、自分の分析や情報収集の過程を共有することにより少しでも参考になればと思い、共有致します。
> 今後も引き続き内容を追加して行くと思いますので、もし関心ありましたら一定時間を置いて読んで見たらと思います。

# この分析をした理由

今現在一番人気を集めているJSフレームワークはAngular、React、VueJsと言っても共感してくれる方が多いと思います。

プロジェクトを立ち上げる時、どちらを選んだ方がいいかと言うとそれはそれぞれのニーズや目標、確保している人材の才能などにもよりますね。

その判断をもっとしやすくする為に、この文章が作られました。

どっちが一番いいかではなく、自分にとってどっちが一番相応しいかを判断する時に参考にしていただけたらと思います。

# 判断基準

プロジェクトの視点から下記のいくつかの基準で比較しようかと思います。

GeoGebraで画像をコマ送りで動かす

## はじめに
ある点からある点への画像の移動について考えた時、ただ画像の位置が変わっているだけなのでその動きは瞬間移動に見えてしまいます。ここではその動きが滑らかに見えるような工夫を紹介します。
完成したものは[こちら](https://www.geogebra.org/m/rvfptwty)

## 手順1 画像の位置を決めるための点を作成する
配置した画像を動かすには端っこの2点が必要です。点Aから定まる2点B,Cを配置し、BCを画像の端っこの点としましょう。

“`js
B = (x(A)-1,y(A)+1)
C = (x(A)-1,y(A)-1)
“`


## 手順2 画像を配置する
手順1で配置した2点を利用し、画像を配置します。
![スクリーンショット 2021-03-31 2

【ネタ】サクラエディタ用の diff.exe を JScript で自作してみる

実際にコンパイル、実行可能ですが、動作はとっても遅いです……。
あくまでも 4/1 用のネタとしてご利用ください。

# サクラエディタ用の diff.exe を JScript で自作してみる

サクラエディタでは、diff.exeを呼び出すことで、２つのファイルの差分を表示する機能があります。
しかし、Windows用の出回っている diff.exe は古いし、新しめの diff.exe は依存ファイルをいろいろ要求されて動きません。
そこで、[以前作った JavaScript のソース](https://qiita.com/stonee/items/e2d88f07d08171b2816f)を流用して、自前の diff.exe を作成してみました。
内部のアルゴリズムについては、過去の記事で解説しています。

# コンパイル手順

まず、.NET Framework に含まれる JScript のコンパイラを探します。
エクスプローラで jsc.exe を検索してみてください。Windows7、Windows10 であれば、C:\Windows\ 以下のどこかにあると思います。

Stimulusでbuttonを再現する

これまでの記事で入門と、よりよい実装方法について説明しました。
* [Stimulusをはじめよう](https://qiita.com/nazomikan/items/4dabc63b883aa71ce83c)
* [Stimulusの実装の勘所 – primitive controller -](https://qiita.com/nazomikan/items/a5f0813ddc63bc5a2708)

今回からはより実践的なControllerを作っていきたいと思います。

今回はButtonを再現するコントローラを作ります。

## ButtonとButtonの振る舞い

“`JavaScript
button
“`

なんてことはありません。　普通のbutton要素です。

通常はこのbutton要素を使って、ユーザーアクションを受けつければよいのですが、ごく稀にやむにやまない事情でbutton要素以外をButtonとして使わざるをいけないケースがあったりします。

そんな時、求められる要件は以下の通りにな

Stimulusでdisclosureを作る

これまでの記事で入門と、よりよい実装方法について説明しました。
* [Stimulusをはじめよう](https://qiita.com/nazomikan/items/4dabc63b883aa71ce83c)
* [Stimulusの実装の勘所 – primitive controller -](https://qiita.com/nazomikan/items/a5f0813ddc63bc5a2708)

今回からはより実践的なControllerを作っていきたいと思います。

手始めにDisclosureを作りましょう。

## Disclosureとは

details-summary要素のように折りたたみ可能なUIのことです。

[ソシオメディア](https://www.sociomedia.co.jp/1682)さんで詳細に説明がされています

## Disclosureに求められる要件

* トリガー要素をクリックするとディスクロージャーが開き、再度クリックすると閉じる
* 開いてるかどうかをaria-expandedでスクリーンリーダー等に知らせる

## HTML

Nuxt.js + TypeScript で injectを利用した関数の呼び出しを定義する

Nuxt.jsでは [inject](https://ja.nuxtjs.org/docs/2.x/directory-structure/plugins/#root-%E3%81%A8%E3%82%B3%E3%83%B3%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%81%AE%E6%8C%BF%E5%85%A5) を利用することで、コンポーネント間などで共通で使用できる関数を定義することができます。
参考： [Nuxt.jsで異なるコンポーネントから共通で利用できる関数を定義する（inject編）](https://qiita.com/itouuuuuuuuu/items/bcad408842c7723e7ca3)

Javascriptでは、下記のように定義した関数（ 例：`$hoge()` ）を呼び出すことが可能です。

“`vue:pages/index.vue