node.jsを使ってみた話。

 そもそもnode.jsって何？

今回自分が知りたかった要点ですが「node.js」とは
・node.js＝javascriptのローカル実行環境
・実行環境＝インストールが必要
・javascriptの記述でローカル処理できる
・WSH(Jscriptやvbs)より百倍以上速い！！

まぁ他にもあるんですが、今回押さえたい要点はこの4つです。

「node.js」名前だけ聞いたことあったんですが「jQuery」のようなjavascriptライブラリだと思ってたんですよ。
・・・ですが、全然そうではなくて実行環境だったんですよ。

「javascript」と「Jscript」と「node.js」の関係

■javascript
web上で動的に処理する時に使うスクリプト言語です
ファイルの拡張子は「.js」です

■Jscript
Windows上で(ローカル環境で)処理を自動化する時に使うjavascriptベースのスクリプト言語です。限りなくjavascriptに近い言語ですがjavascriptとは別物です。
ファイル拡張子は「.js」つまり拡張子までもjavascriptと同じです。

古いjavascriptがベースで、例えば変数定義はvarしかなくlet等は使えません。
また、今後新規にサポートされる予定もありません。むしろ消えかかっている泥船言語です。Microsoftは今後Windowsの自動化はパワーシェルを推奨してる感じです。

根本的な話をするとWSH(Windows Script Host)というWindows上で動かすスクリプト言語二つの内の一つがJscriptです(もう一つはvbs)。
バッチファイル(.bat)などより柔軟な自動化が出来る言語で、当然ながらWindows上でしか動作しません。
ただ逆に言えばWindowsであれば何かをインストールなど不要で直ぐにスクリプトが使えWindowsのこまごました自動化が出来ます。普通に便利です。

■node.js
「node.js」なんて名前だからてっきりファイルかと思うじゃないですか？
そうじゃないんです。
javascriptをローカルで使えるようにする「環境」なんです。

そうです、記述する言語は「javascript」です。
当然ファイルの拡張子も「.js」です。
しかも、ローカルファイルにアクセスなども出来るようになるんです。
「じゃあ、Jscript完全上位互換になるって事？」と思うでしょうがJscriptで使えるものが使えません。

例えば：
・WScript.Echo: Windows Scripting Host（WSH）特有のメソッドで、Node.jsには存在しません。
・WScript.CreateObject("WScript.Shell"): WSHでシステムオブジェクトにアクセスするための機能。Node.jsでは代替手段が必要。
・new ActiveXObject("Scripting.FileSystemObject"): WindowsのCOMオブジェクトで、Node.jsではサポートされていません。

あと上には書きませんでしたがnode.jsはマルチプラットフォームです。
Windows以外の環境でもjavascriptが使えるって事になります。

node.jsはjavascriptで記述するのに何でそんなに早いの？

そもそもなんでscriptは遅いのかって話に直結します。
一般的にプログラムとスクリプトには壁があり、その大きな違いはコンパイル(やビルド)をするかしないかが大きな境界になります。
インタプリタとコンパイラという区分です。

・インタプリタではソースコードを一行ずつ変換し命令を処理・実行
・コンパイラは全ての命令をまとめて変換後に一括で処理・実行

処理速度だけで言えば機械が処理しやすいプログラム(コンパイラ)の方が圧倒的に早いです。
じゃあなんでスクリプトなんてものがあるかというと、確かにプログラムよりはかなり遅いですが、直ぐに実行できて直ぐに修正出来るという利点があります

小中規模であればスクリプトの方が対処する内容に対して即効性があるのです。
逆にプログラムはコンパイルを通さないと処理が実行出来ませんが大規模な処理は圧倒的に処理速度が重要になります。

node.jsはjavascriptをコンパイルしている

前段の通りコンパイルすると処理速度が爆発的に早くなります。
実はnode.jsはjavascriptをコンパイルする事で高速化しています。

更に詳しく言えば「Just-In-Time (JIT) コンパイル」をしています。
インタプリタで初期実行した後、ホットコードをマシンコードに変換という形です。
手動でコンパイルする必要がないがないが重たい処理だけ知らないうちにコンパイルしてくれるって事ですね。
また、イベント駆動型の非同期I/Oモデル故に大量処理に向いています。

凄い雑にまとめると「javascript」を超高速化出来るのがnode.jsです。
さて、ここから下は駄文です。

そもそもなんでのnode.js使ってみたの？

LOMのレベルアップのステータスを手動で調整してたけど面倒になったから総当たりで他にパターンが無いかの確認と上限を確定させるため。
まぁ一旦雑に総当たりで試してみたが当然遅い。そこで高速化する手立てを考えている時にnode.jsに行きついたわけです。

どれくらい早くなった？

総当たりをぶつけた訳ですが途中探査にJscriptで3時間かかった部分がnode.jsで実行したら1分で探査されました。
Jscript特有部分を少し直した以外は処理方法などは手を加えずに180倍速で処理できました(はっや・・・)。

ただあくまでも今回のしかも一部分を切り取った時間比較なのであれですが基本的には重い処理を作ったなら100倍くらいは早くなると見積もっていいと思います。

追記：

一日node.jsで回して片手剣56回までの探査で行ったので強制終了

「そういえばWindowsってデフォルト環境でC#のコンパイル出来るようになったんだよなぁ」って事を思い出してC＃用にコードを変更

さらにC＃なら並列で処理できるからもっと早くなるんじゃないか？

フルでぶん投げるけど元より全探査しようとは思ってない。
24時間回してみてどれくらい結果取れるかなぁって感じ←今ここ

---

余談：早いスクリプト言語って何？

「javascriptをnode.jsで実行(以下node)、javascript、Jscript、VBS、Python」の処理速度を比較した場合単純処理なら

node＞＞超えられない壁＞＞Jscript・VBS＞javascript＞Python

コンパイルがされる関係上百倍くらいは差がでるのでnodeを越える事は出来ません。
重たい処理をしたい場合、悪い事は言いませんのでjavascriptが出来るならnode.jsをインストールした方が良いです。
Pythonインストールするぐらいならnode.jsインストールしたほうがたぶん平和。

もうプログラムで良くない？

まぁ、そもそもWindowsデフォルト環境だけで何もインストールしたくない、もしくは環境的に新たに何かをインストールできない場合、基本的には「Jscript・VBS・javascript」しか選択肢がありません。

ただし、裏技的解決方法としてはC＃で書き直す方法があります。
なんとWindowsはデフォルト環境でC#がコンパイルできます！

もう少し丁寧に言うとWindowsはデフォルトで「.NET Framework 」が入っておりC＃のコンパイル環境が整っています。
つまり普通にプログラム組んじゃおうって事ですね。当然ながらめちゃ早いです。しかもC＃の場合は「Parallel.For」でマルチプロセスで平行処理できる為、今回のような物量探査問題だけならばnodeより確実に早いです。

※一応注意点としてはC＃のデフォルトコンパイル環境は「.NET Framework」のバージョンが古いので最新のC#コードが使えない事は留意してください。
例えば「$とか=>」が使えません。

■ラムダ式形式: =>を使った簡潔なメソッド定義はC# 6.0以降の機能。

■文字列補間（$"..."）がC# 6.0以降の機能

奇数か(偶数か)を判定する

前置き：

今回のお話は 𝕏のおすすめ欄にたまたま流れてきたポスト「1～100までの整数が奇数かどうかを判定するプログラムを書きました！」に起因します。

一般の人には面白さが伝わるか分からないけど『「もし奇数なtrueそうでなければfalse」つまり1なら奇数2なら偶数3なら偶ｓ...って100個書けば良いんだ！』

ＨＡＨＡＨＡそうだけどそうじゃないだろっていう面白さ…やっぱり伝わらないかも。

確かに定義が「1～100固定で奇数ならtrueを返し偶数ならfalse」なら間違いないくこれで答えが得られるけど汎用性が無さすぎる事が１つ、もう一つはそもそも処理本質はそこじゃない。っていう所。

「1なら奇数」...は既に答えを知っている場合の条件分岐で本来定義を考えるべきなのは奇数はどの条件で奇数になるのかって話。

このポストにはさらに元ネタがあって「コーディングのヒント」っていうこのベタif文をエクセル等のオートフィル(処理を繰り返す)によって脳筋コードを生成するってネタポストの再ネタポストって事ですね。

そして「【ゆる募】１～100までの整数が奇数かどうかを判定するプログラム大喜利を開催します☺　言語不問✨」更にネタにした二番煎じ、三番煎じのネタポスト『無駄に洗練された無駄の無い無駄な動き』を考える会みたいな話です

「プログラムをする」＝「ロジカルな思考になる事」

自身はプログラマーではないく精々スクリプターなので思考が雑だけれど基本的には同じで「コーディング」する事よりも「その本質はなんなのか」を考える思考ロジックがたぶん一般人とプログラマーの境界な気がします。

この記事を書くきっかけになったのはネタポストもあるけれど実は大喜利のリプにあった「入力が数値じゃないかもしれない」みたいなポストがあってそうじゃないんよなぁと思ってなんとなく(今はそういう話をしてるんではなくロジック部分のみの話なんよ)。

さておき、そもそも通常はどのようにコードを書くか

n=99;print(bool(n%2))

最初に考えたのはこんな感じです。ポスト元が1をtrueにしてるのでそれに合わせます。

奇数なら余りは1になり、偶数なら余りが0になります。

これをbool値「真（True）偽（False）」に変換します。

まぁでもよくよく考えたら「n%2==1」で直接bool値になりますね。

元のコードの通り関数にするなら

num=99
def is_odd(num:int)->bool:return num%2==1
print(is_odd(n))

こんな感じでしょうか。

この通り本来は奇数をだすならたったこれだけなのです。

大喜利の話

特に記載はないですがこの手の大喜利の要点は

結果が正しい事は前提で、より壮大に無駄にリソースを使い条件を満たそうという話です。

かつ限定条件が1~100なのでこの範囲じゃないと上手く動かないとかの方が面白い。

更に言えば単に意味のない処理を入れる訳ではなく必要な処理で構成されており、処理が抜けると動かない形であった方が良いですね。

まぁなのである意味一番元のベタif文100個並べるが完成されてるかもしれません

(判定を100回行い、なおかつ1行でも抜けると正しく動作しない)

もう一つの要点

それは定義を考えるという事です。

通常の奇数の定義は「数値に対して2で割って余りが1なら奇数」これが普通です。

このような大喜利はこの定義を別の条件に言い換え処理を考える遊びです。

例えば入力は1~100の整数という条件ですので「奇数は偶数と必ず交互に存在する」見たいな事を考えた場合「奇数から始まり、対象の数値まで真と偽を交互に代入」すれば奇数か偶数かを判定できる。

𝕏では花占いと表現してポストしたやつで

n=100;b=false;for(i=0;i<n;i++){if(b){b=false}else{b=true}}

こんな感じです。

Jscriptですがまぁjavascriptでも同じです。

更に別の奇数の定義を考えてみます。

交互に存在するなら「真偽交互に100個分回答を用意して、入力数値番目」にアクセスすれば直接真偽を得られる

n=99;WScript.StdOut.WriteLine(Boolean("01010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010".split("")[n]*1))

定義を元に少し変更します。

画像でポストするのが面倒だしコピペ出来ないし面倒。という事でコードを「全角140文字＝半角280字で考える」

なので真偽配列を10二進数配列を作ります。

さらに配列は0から始まるけど入力値は1~100なので要素-1のアクセスが面倒なので配列の0番目の要素を追加し101個の配列を用意してやれば入力値で直接0か1が返ります。これをbool変換すれば奇数か判定できる。 コードはJscriptのCscriptです。

他にも大喜利の例題は「1,3,5,....99なら奇数」という50個分の判定ですがそもそも偶数奇数判定は「入力値の末尾1桁が1,3,5,7,9なら奇数」でいいじゃんと考える事も出来ます。

であれば

n=100;print([False,True,False,True,False,True,False,True,False,True][int(list(str(n))[-1])])

こんな感じで真偽100個配列を作るより奇数5つの配列でいい 今度はPythonで組んでみましたが先ほどやってる事は同じです。

あと他には「2で割って余りが1なら奇数」という表現を別の表現で考える方法もあります

「2で割った結果が小数になるならば奇数」みたいな感じです

n=100:msgbox cbool(ubound(split(n/2,".")))

例えば2で割ってそれを小数点で配列化、割り切れてれば配列数は0、割り切れてなければ1。

0・1をbool化すれば真偽判定できます

言語特有の考え方ですが先ほどの100個全ての真偽を配列にする方法を

n=100;print(bool(int(list("01010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010101010")[n])))

Python版で考えて、Pythonは進数変換が容易なのでこの二進数を16進数に圧縮しようかと思ったんですがそもそも

n=100;print(bool(int(list("01"*50+"0")[n])))

の圧縮率が高すぎてもうこれで良くない？みたいな事もあります。

「01」というパターンを50回繰り返すというPython記述便利。

さて、交互に繰り返される真偽・二進数・末尾一桁と来ましたが入力値が0かnot0になれば良いわけです。だとするとそもそも「十進数を二進数に変換して末尾一桁を真偽変換」すれば良いのではとも気づきます。

n=100;print(bin(n)[-1]=="1")

おっと、また短くなってしまった。Python久々に書いたけど便利だなぁ。

もっと無駄な形にしないとダメですね

割り算と余りの概念を脳筋で解決する方法も考えてみます

2個をワンセットとして対消滅させていき、数字君が生き残れれば奇数

分かりやすく言うと「数値を2ずつ引いていき、余れば奇数」

n=99:do while n>1:n=n-2:loop:msgbox n=1

vba・vbsならこんな感じです。これもやっぱり短いですね。
やはりベタifが無駄であり無駄という意味では酷いコードの完成度が高い。
でも𝕏の文字数制限内でそれ書くのは面倒臭い。
じゃあ、いっそ実行可能な形式でそれを生成すればいいよね

a=split("false/true","/"):c="n=数値"&vbcrlf:for i=1 to 100:c=c&"if n="&i&" then b="&a(i mod 2)& vbcrlf:next:c=c&"msgbox b"&vbcrlf
createobject("scripting.filesystemobject").createtextfile("n.vbs", 1).write c

𝕏の文字数制限内に収まりました
「数値」の所を1~100に置き換えればそのまま実行可能です。

if n=1 then b=true
if n=2 then b=false
...

をベタ入力したvbsファイルを生成するvbsです。
コードを生成するコードの時点で二度手間で、コード生成時にi mod 2で既に処理内で余りを出してる所にも二度手間感があります。
「でも何かを抜くと動かなくなる」というコードです。
まぁ一旦こんなところで終わりにしましょう。

意味はないけど意味がある事

今回の「奇数の真偽を出す」は別に意味のある事ではありません
ただ、こう言った処理定義の考え方変換や柔軟な発想、手段の引き出しを増やす事はあるほど良いです。

また、0と1で百個用意して配列要素で値をえる方法などは既に結果が変わらない場合などであれば配列をメモリに突っ込んで引き出した方がforなどを回すより高速に処理できるし、呼び出しが外にあればメインは要素1つ与えるだけで取り出せるメイン処理の簡素化が出来たりもします。

こういったものは別に大喜利である必要はありませんんが内容が簡単で初心者でも上級者でも一緒に頭の体操が出来るのが面白い。
簡単な問題なので「処理すべき事」と「結果がこうなる」が分かっているうえで他の人のコードを見れるから初心者からでも上級者がどんな工程を踏むのかが見れるのも良いです。

他にも「与えられた数値が素数かどうか判定する」「うるう年の判定」など条件を知っているが考え方が試されるものは色々あります。

余談：
上記コードは自分で考えたもので、記述出来るのがwscript、VBA、Pythonなどスクリプト系なのでコードがごった煮でごめんね:;(∩´﹏`∩);:

addEventListener()の使い方

まず、一言説明
Q.「addEventListener」って何？
A.「クリック等のマウス操作や、キーボード操作、ブラウザリサイズ等操作で処理を発火できるようになる」

例えば、何かをクリックしたときに関数を呼ぶ場合
「<div onclick="setaf()">」とすれば対象の関数を発火できます。
１つ２つ程度なら全然これで良いと思います。

ですが…、数が多くなった場合はどうでしょうか100個200個divがあった時に全てonclickを入れたり操作するのは大変。
またはクリック以外でもブラウザ上で何か「こういう操作」が発生したらチェックするために関数を発火したい時に関数を発火できます。

経緯

とあるwebシミュレーターを作る時に、gridマップから何処をクリックしたか知りたいなぁという事がありました。
24x24マスのgrid＝項目行列も含め625マスのdiv操作
その盤面から何処がクリックされたのか知りたい

操作領域は24x24。の領域を選択範囲19x19をセットで操作＝361ヵ所
実際に操作処理するのが165ヵ所。

・・・面倒臭い。

使い方

対象要素.addEventListener( 種類, 関数, false )

一旦形だけ理解しましょう。
これをグローバルエリアに置きます。

第1引数：
固有の種類があります別途調べてください
(つまり、任意の名称設定できません決まったコマンド的なものです)

第2引数：
関数は自分で作った関数名を指定します

第3引数：
イベント伝搬方式のfalseは一旦そのままでいいです。

記述1

対象要素.addEventListener('click', abcdef, false);
function abcdef(){処理内容}

addEventListenerで指定する関数名には「()」は付けないで下さい
付けるとただの関数呼び出しになります
具体的にはリロードされただけで実行されます。

記述2：アロー関数

対象要素.addEventListener('click', () => {処理内容})

関数を呼ばずにすぐ処理したい場合この様に書きます
更に、記述1では括弧をつけないので引数が渡せませんが渡したい時は単にこの処理内容部分から普通に関数を呼べば良いです。

対象要素.addEventListener('click', () => {abcdef(引数)})
function abcdef(aaa){処理内容}

アロー関数の様な方法として無名関数というのもあって
対象要素.addEventListener('click', function() {処理内容}, false)

こんな感じでも記述できます
閑話休題

何処がクリックされたのか

話しを戻して、今回のやりたい事って何かというとつまるところ
「クリックしたgridにあるdivのどれが押されたか？」

ググってみたら「grid　div　要素数える」とか色々検索したけどgrid.jsがとかライブラリjsでindexでとかArray.fromで要素を配列に変換したあとにArray.prototype.indexOf.call("集合の要素", "目的の要素")で数えるとか

･･･いやそんな面倒臭いはずは…だってまずforで要素探して数えてるiさえ関数に渡せればいいだけなのになぁとちょっと迷走

今回の実装方法

const target = document.getElementsByClassName('mybox'); 
for(let i = 0; i < target.length; i++) {
    target[i].addEventListener('click', ()=>{boxclick(i)});
}

クリックイベントを検知してそのカウンタiをただの関数に投げるだけ。
自分が求めていたのはこれだけなのに全然すっきりした答えが出て来なくて無駄な遠回りをした。
今回対象にしたのはClassNameです。
同じClass名を対象に丸ごと持ってそれを対象にクリックされたかを調べ発火
アロー関数先の関数に引数を渡してただ呼び出すだけ

記述位置

記述は操作する対象が存在してなければ実行できません
例えば、ヘッダーにいれたjsに書くと対象がロード前で実行失敗になります

つまりhtmlの一番下に書けばOKって事です
･･･ですが面倒臭いですよね

その場合はロードが完了後発火する所に記述すればいいわけです
一番手っ取り早いのは

window.onload=function(){ページロード後に実行したい関数()}

飛ばした関数の中に記述すればOK

javascript配列の値渡しと参照渡し

 今回は簡単な備忘録

超簡単に説明するとデータが複数の情報を内包するもの「オブジェクト型」のもの、更に言えば「配列」「連想配列」等も含むものは参照渡し。

逆に単一データを保持する変数は値渡し。

厳密な言い回しは他に行ってもらうとして、ここにたどり着く人は配列の挙動がおかしいって人の為の対応について。

ーーーーーーーーーーーーーー変数代入

var a=[1,2,3,4]
var b=a.slice()

ーーーーーーーーーーーーーー
以上、終わり。

ーーーーーーーーーーーーーー関数引数

var a=[1,2,3,4]
var b=aaa(a.slice())
function aaa(a){}

ーーーーーーーーーーーーーー
以上、終わり。

■簡単な説明説明
今回、知りたいだろうことは配列を参照渡しではなくて値渡ししたい。
もっと言えば、参照先じゃなくて

・配列を別の変数にコピーをしたい
・関数に配列のコピーを渡したい

この二つだと思うので、処理後に新規配列で生成されるメソッド系を使えばOK
sliceは文字や配列を切り出す処理なので、引数に何も渡さない場合は配列を変更せずにコピーを渡すだけの処理になります。

変換の仕方がスマートかと言われるとまぁ微妙な所ですが、まあ一番手っ取り早い方法は確実にこれ。

■すっごい雑な補足

javascriptの場合はもうちょっと具体的に言うと「参照の参照渡し」を行っている
とはえ、おそらく他でも参照渡しで「概ねあってます」という形だと思う。

結局の所、代入先で値を変更すると代入元も値がかわるので・・・

---

もっと楽な方法

ーーーーーーーーーーーーーー変数代入

var a=[1,2,3,4]
var b=[...a]

ーーーーーーーーーーーーーー
以上、終わり。

ーーーーーーーーーーーーーー関数引数

var a=[1,2,3,4]
var b=aaa([...a])
function aaa(a){}

ーーーーーーーーーーーーーー

■すっごい雑な補足
この「...」って何？これはスプレッド構文といいます。
配列やオブジェクトの一番外側の括りを展開します。
データとしては上記aなら「...a」と記述した場合「1,2,3,4」ベタ要素が展開されます。
この展開されたベタ要素を受け取ることが出来るのは今言った通り配列かオブジェクト、あとは関数の引数です(ジェネレーター関数周りで使う事もありますが覚えなくていいです)。

■つまり？
「[...a]」と記述すると「[1,2,3,4]」この様に配列内で要素が展開されて名前のない配列が新しく作成されることで結果的に新しい配列を変数に代入したり関数の引数に渡す事が出来ます。

■あと注意点として、どちらも「浅いコピー」です。ネストされた配列やオブジェクトは結局参照が渡されます。ですので1次配列やオブジェクトの階層が1つしかない場合のみという事は留意してください。

Grid Layout(display: grid)でのグリッドデザイン

 さて、前回「タグの意味とデザインタグ」という記事を書きました。
webデザインを行う時にdivとspanこの二つが何のためのタグなのかと、ちゃんとしたデザインタグというものは存在せずタグとして使用用途として無色であるdivとspanが結果的にデザインのタグに使われている。

・・・という感じの内容でした。
今回は、divに新しく追加された・・・いや2011年ごろからの実装なので全然はるか前なのですがこれまでよりデザインに特化した方法について説明します。

実は家にあるDWはCS4なので対応してなかったからずっと放置していたんですが、ついに手を付け始めました。

概念としてはdivをtableの様に格子状に管理してデザインするというものです。
まぁ実際問題として、いにしえのtableデザインは扱いやすかったという事ですね。

floatで浮かして並べて、clear:both; で浮かすのをやめるみたいな構造は確かに分かりにくい。少なからずDWでtableの格子を繋げたり切ったりする方がデザイン的に直感的に見えてしまう。

display: gridはこの格子デザイン概念の良い所だけを得られます。
しかも、子要素のdivはグリッドの好きな位置へ移動でき、逆順にするなども容易。
レスポンシブなデザインとも親和性が高い。

gridの格子概念を理解する

基本構造は簡単です。親要素のdivを指定すると、中のdivを全てグリッドに並べてくれます。
親のdivはgridの列を指定すれば良いだけです。
行(row)の概念もありますが、まずは列がどのように処理されるか分かれば理解できると思います。

「display:grid;grid-template-columns: 20px 20px 20px;」

<div style="display:grid;grid-template-columns: 20px 20px 20px;background-color:#eee">
<div style="background-color:#FAA">1</div>
<div style="background-color:#AFA">2</div>
<div style="background-color:#AAF">3</div>
<div style="background-color:#AAA">4</div>
</div>

1

2

3

4

この様になります。
親divの幅指定が内部全てに反映されます。
また、幅指定を3つだけしたので4つめからは次の行となります。

今回はpxで指定しましたが今回は新たな単位を覚えましょう。
「fr」です。

今まで固定幅は「px」、割合を指定する時は「%」を使っていました。
今回新たに「%」に変わる割合指定方法です。
frはfraction(分数)の略で、等分したときの割合です。

水溶液とかと一緒です。一般的な例でいればカルピスと水の割合は「1:5」みたいな。
上記の例をpxからfrに置き換えてみます。

「display:grid;grid-template-columns: 1fr 1fr 1fr」

<div style="display:grid;grid-template-columns: 1fr 1fr 1fr;background-color:#eee">
<div style="background-color:#FAA">1</div>
<div style="background-color:#AFA">2</div>
<div style="background-color:#AAF">3</div>
<div style="background-color:#AAA">4</div>
</div>

1

2

3

4

さてするとどうでしょうか幅指定は「１：１：１」等幅なのでこのようになります。
じゃあ今度は末端の幅を2frにしてみます。

<div style="display:grid;grid-template-columns: 1fr 1fr 2fr;background-color:#eee">
<div style="background-color:#FAA">①</div>
<div style="background-color:#AFA">②</div>
<div style="background-color:#AAF">③</div>
<div style="background-color:#AAA">④</div>
</div>

①

②

③

④

この様になります。
「１：１：２」の割合となるので①と②は同じ幅、③は2倍となります。
今までは3分割するなら「33%」で、「1:1:2」の比率にするなら「25%・25%・50%」みたいな割合を自分で計算してパーセントにしていましたがfr指定の登場で分割割合だけ指定すれば良くなったという事です。

また、1frは使用可能な領域の余りを等分します。
ですので、左を30pxで固定して残りを可変としたい場合は「30px 1fr」と指定します。
<div style="background-color: #eeeeee; display: grid; grid-template-columns:30px 1fr;">
<div style="background-color:#FAA">①</div>
<div style="background-color:#AFA">②</div>
<div style="background-color:#AAF">③</div>
<div style="background-color:#AAA">④</div>
</div>

①

②

③

④

このように一部分を固定して残りを可変にする事も可能。

乾電池とニッケル乾電池(充電式乾電池)

 ちょっと気になって調べた

電池は電極に使用する金属の組み合わせによって電圧が決まります。

アルカリ乾電池は、基準電圧に対して正極の二酸化マンガンが約0.3ボルト、負極の亜鉛が約マイナス1.2ボルトです。その差の1.5ボルトがアルカリ乾電池の電圧です。

これに対してニッケル水素電池は正極の水酸化ニッケルが約0.5ボルト、負極の水素吸蔵合金が約マイナス0.7ボルトです。その差の1.2ボルトがニッケル水素電池の電圧です。

したがって1.5ボルトのニッケル水素電池は、作ることが出来ないということです。

パナソニックのより引用元：(ニッケル水素電池はなぜ1.2ボルトなのですか？ PZ18121)

0.3x1.2=1.5v　アルカリ乾電池
0.5x0.7=1.2v　ニッケル乾電池(充電式)

つまりこういう事で、なおかつこの電圧は仕組み上変更できない。
「じゃあ、電圧の足りない充電式の電池はどの機器に使えないじゃん」と思うかもしれないがそういう事でもない。

普通の乾電池も1.5vから使用中どんどん下がっていく、これについてもパナソニック(なぜニッケル水素電池は1.2ボルトで機器に使用できるのですか？PZ18089)に詳しく記載がある。
普通の乾電池の方が実は充電式よりも早く電圧が1.2vを切ってしまう。

通常の乾電池の方が電圧の下降速度が速く、ニッケル乾電池は1.2vで安定して長く充電の終わり際で大きく下降する。

つまり、ミニ四駆とか瞬間的に速度(回転率)が欲しいなら新品電池が(電圧前半)良いが、機器の持続動作でいえば実はニッケル電池の方が良い。

特に瞬間的な電圧よりも持続性を優先する機器(電圧による性能差がでない機器)、例えばリモコンや時計、ゲーム機などはむしろ充電式の方が良い。

逆に、運動エネルギー等に変換するならアルカリ乾電池(新品限定)に分がある。
上の例でいえばミニ四駆大会とかなら新品アルカリ乾電池を使うと良くて、テスト走行などを何度もさせる場合はニッケル電池を使うのがベストみたいになる。

なんでこんな事を調べてたかと言うと、単三電池で動く時計が止まってしまったので、電池カバーを開けたら1.5vの記載があって、充電池でいいかなぁとエボルタ(ニッケル電池)を見たら1.2vって記載があるので使って大丈夫かを調べてみた。

というそれだけの話でした。

会社都合退職する事になった話

今から書く内容は半分くらいはメモみたいな記事です。
会社都合退職は初めてなので調べながらのメモ。

会社が行っている仕事と自分が行っている仕事は異なっていて
会社が外部委託の会社を通して私は仕事をしていたんですが
少し前に契機が終了して約一か月程自宅待機で受けれる仕事を探して見つからず

とある月に月末3日前に今月末で退職して欲しいとメールが・・・
会社側でとれる仕事が無いとの事で、しかも月末までに回答して欲しいって
回答期限が連絡がきた当日含めて3日しかないんですがそれは・・・。

■退職勧奨
一応前提として、「会社から退職して欲しい」というのは退職勧奨と言うもので、あくまでも会社からのお願いに過ぎず、必ず辞める必要はありません。
この記事を読んでる人が同じ状態になった場合、退職して欲しいと言われても断れるという事を覚えておいて下さい。
ちなみに、普通は退職勧奨する時は一か月前に言うのが普通です。
ーーーーーーーーーー

と言うわけで、退職勧奨の回答期限が今回3日しか無いというのは異常です。
会社都合退職で良いというのと退職金の話と条件を貰ったのですが妥当か分からず、しょうがないので一旦弁護士を検索、相談内容をメールで送ったものの1つは連絡が返ってこなくて、困ったので更に別のサイトで(自動応答の)チャット形式で入力。
二つ目の所は連絡の備考に「今すぐ・出来るだけ早く」にしたら１時間かからずオペレーターから電話が来て弁護士につないで貰えました。

退職金ですが結構働いたけどかなり少なくて妥当か確認したら、弁護士からは「まぁ妥当」的な回答が来たので自分がいかに低い給料で働いていたのかが分かりました(悲しい)。

■有給について
・有給は退職日前に使わなければ消滅します。
・そして有給は必ず取れます。
・退職時の有給の買い取りは合意があれば違法性はありませんが同時に会社側に買い取る義務もありません(あくまで退職時の例外)。
・逆に退職時以外(働いてる時)に有給を買い取るのは違法です。
ーーーーーーーーーー

簡単にまとめると普通は有給を消化後の最後に退職日を設定するのが普通でありベストです。
今回は今月辞めて欲しいだったので有給を取りますと言えば取れたのですが有給の確認をしたら、買取ではないが退職金に色を付けるという事で手を打ちました。

とは言え弁護士が妥当と言ってた割に検索すると退職金相場より絶望的に下なんだけど本当に妥当だったのか不安になってきた閑話休題。

まぁいいでしょう次。
具体的に後は何すればいいんだって話。

【１】合意書
会社都合の場合は退職届は不要です。
会社都合なので会社側から退職合意書が送られてくるのでそれを記載返送します。

(退職勧奨は通常対面だと思うのでその場で記載する事が多いとは思います)
私の場合はメールのやり取りで全部残っている為良いですが、対面とかの場合条件等を録音とかしていた方が良いらしい。

【２】返却
・保険証は返却の必要があります(基本手渡し、輸送の場合書留等)
・その他会社から貸出されたもの(貸出されたPCや携帯等)

【3】切替
・住民税の支払い：放置すると翌月にはコンビニ払いの用紙が送られてくる
・失業保険の申請：離職票もってとりまハロワで申請。分からなくてもとりま行け
・年金の手続き：とりま市役所で聞いてみる
・健康保険の切り替え：「健康保険の資格喪失証明書」とか会社から発行されてなくても離職票があれば代用できるっぽい、取り合えず市役所行ってみれば良い

離職票はハロワで回収される
なので離職票は会社をやめたの分かりやすいから先に市役所・区役所が良いっぽい。

■失業保険は市役所じゃなくてハローワーク。
持ってくものは「離職票１・離職票２・マイナンバーカード※・写真2枚」
※マイナンバーカードが無い場合は通知カードと運転免許証
※運転免許がない場合は証明書2種類・・・「公的医療保険の被保険者証」等2種類とかなくない？まぁハロワで聞いてみるしか。
今更だけど住基カードの運用やめたの意味が分からないな。
マイナンバー使うにしても住基カードに番号載せればよかっただろっていう気持ち。

■社会保険→国民健康保険
仕事をする場合は社会保険に入ります(会社処理)。
その中に健康保険が含まれています(労災とか雇用保険等も含まれる)。
つまり仕事してる時は気にする必要がない。
仕事を辞めた場合は当然労災とかはないので、ざっくり言うと仕事してない一般人が入る健康保険だけ切り出したのが国民健康保険。

切替忘れると医療費が3割から10割になる。あと2年までさかのぼり遅延金が取られる。
未加入状態はスーパーデメリット状態なのでさっさとやる。

■厚生年金→国民年金
保険と同じ感じで、仕事してる場合「厚生年金」
仕事してない一般人が「国民年金」
未加入期間があると年金の満額受給が出来ない。

令和4年(2022年4月)から年金手帳は廃止されたが捨ててはいけない。
「基礎年金番号通知書」になり、年金手帳を廃止したがが年金手帳を持ってる人たちには基礎年金番号通知書が発行されていない。
既に発行された年金手帳は引き続き基礎年金番号を明らかにする書類として扱われる。


健康保険も年金も徴収額は働いている場合会社が半分負担となるので基本的に働いていた方が良い。
なので結論としては仕事辞めたらさっさと就職した方が良いし、仕事は無理にやめない方が良い。
会社辞めてって言われても一旦保留した方がよいくらいには面倒臭い。
休職扱いでもうちょっと粘ればよかったな。

ーーーーーーーーーー

■申請関係の追記

健康保険と年金切り替えは5分～10分くらいですぐ終わります。
健康保険の本人確認はキャッシュカード二枚だけで行けました(今回は郵貯と銀行)。
年金切り替えは作った保険証とマイナンバー通知カードがあればOK
ハロワの失業保険は通帳とマイナンバー通知カードと保健所あればよかったです。
失業保険は審査があって後日くるので写真が必要でしたがその時で良いとの事。

要約すると離職票とマイナンバー通知カードがあれば一旦OK
「会社辞めたら市役所とハロワひとまず行け」これに尽きます

ハロワと市役所間の距離に寄りますが2時間程度で全て手続きが終わります。
思っていた通り市役所が先が良いです。
離職票があるとスムーズに日付の確認が終わります。

それと追加で後日行く必要がある事
１．後日ハロワで説明会(顔写真2枚：申請時持っていなかった場合)
２．ハロワでの退職の番号が確定するのでそれを確認して健康保険窓口へ(会社都合時)
３．確定申告

ーーーーーーーーーー

■3ヵ月・4ヵ月くらい大幅に遅れて申請した場合
・健康保健：単純に遅れた分遡って支払う

・国民年金：単純に遅れた分遡って支払う
・失業保険：支払いは退職日から受給末尾固定の為申請が遅れた分だけ損
・確定申告：基本還付なので特に怒られないですがやる必要はある

遅れてもなんで遅くなったのかとか別になんも聞かれないです
(年単位で遅くなるとなんか聞かれるかもだけど)

ーーーーーーーーーー

■確定申告
会社を辞めると年末調整が出来ません
＝ほぼ100%確定申告が必要です！

さらに会社から「源泉徴収票(げんせんちょうしゅうしょう)」を貰う必要があります
これは会社しか発行出来ませんので会社に連絡が必要です
(もし貰えなかった場合は税務署に行ってください。税務署が会社をつついて発行されます)

初めてで良く分からなかったので取り合えず行って見たところ、1月から別に確定申告出来るらしい。

一般的な2/15～3/15に合わせなくても良いとの事。

あとほぼ還付だろうから遅れても大丈夫的な事言われました。
まぁあと特に言われなかったけど、超絶遅れると還付上限10万円とかになるっぽいので早めがいいと思う(まぁ還付10万もないだろうけど)

「源泉徴収票」がないまま取り合えず行ってみたところウェブでの申請登録と申請方法を合わせて教えて貰えます。
今回の結果としては源泉徴収票もらったら自分で入力してと言われたのでその予定。
ーーーーーーーーーー

■健康保険の金額
会社都合の場合ハロワで失業保険申請→説明会の後に再度健康保険の窓口に行くと健康保険の支払いを下げる事が出来ますので絶対行ってください。
今回支払額を確認したらだいたい9万円が2万円程度まで下がりました。