jQueryを使ってモーダルな画像を作成する 「HTML」 <div class="course-item"> <img src="./img/web_second.png" alt="画像１"> </div> <div class="course-item"> <img src="./img/web_second.png" alt="画像２"> </div> <div class="course-item"> <img src="./img/web_second.png" alt="画像３"> </div> <div id="popup"> 　<div class="bigImg"><img src="" alt="#"></div> </div> div要素で表示させる画像をリスト化しておく。（cssでcursor: pointerを適用するのを忘れずに。） 「popup」をつけたdiv要素の子要素に拡大表示するdiv要素の「bigImg」を指定する。 「CSS」 #popup { background-color: rgba(0, 0, 0, 0.5); top: 0px; left: 0px; right: 0px; bottom: 0px; width: 100%; height: 100%; position: fixed; z-index: 10000; display: none; } .bigImg { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; max-width: 90%; max-height: 90%; height: 90%; } 「popup」はdisplay: none;で通常時は隠しておく。 「jQuery」 $(function(){ $('.course-item').click(function () { var imgSrc = $(this).children().attr('src'); $('.bigImg').children().attr('src', imgSrc); $('#popup').fadeIn(); $('body,html').css('overflow-y', 'hidden'); }); $('#popup').click(function () { $('#popup').fadeOut(); $('body,html').css('overflow-y', 'hidden'); }); }); 以下、順に説明。 var imgSrc = $(this).children().attr('src'); 「'.course-item'」の直属の子要素の値（src）を取り出し「imgSrc」に代入する。 $('.bigImg').children().attr('src', imgSrc); 「'.bigImg'」の直属の子要素の値（src）をimgSrcに変化する。（元々srcは空なので代入が正しい。） $('#popup').fadeIn(); $('#popup').fadeOut(); 画像がクリックされた時のフェードイン、フェードアウト。 $('body,html').css('overflow-y', 'hidden'); 画像が表示されている間、スクロールされないようにする機能。 以上

■イテレータ →コードが長くなってしまうので、ジェネレーターを理解するために、このコードも理解しておくこと function genIterator(max){ // valueとなる値を初期化しておく let i = 0; return { // next関数を初期化する next: function(){ return { // done をfalseにしておく // もしも回数を宣言したい場合はifとdone: trueを組み合わせること done: false, // 呼び出されるたびにインクリメントしていく value: i++ } } } } ■ジェネレーター →イテレータを生成する特別な関数 // functionの後ろに「*」を書くことによりジェネレーターとする function* gen(){ // 値を生成していく yield 1; yield 2; // returnが最後の値となる return 3; } const it = gen(); console.log(it.next()) console.log(it.next()) // ここまでは値があるので、nextが使える console.log(it.next()) // 4以上は宣言されていないので、valueがundefinedとなり、doneがtrueとなる console.log(it.next()) ■スプレッド演算子 →反復、列挙が可能なオブジェクトを展開するもの const arry1 = [1,2,3,4,5]; // スプレッド演算子でarry1と同じarry2を宣言する // 可変長の物の時に使用する const arry2 = [...arry1]; // 中身は同じだが別のメモリを参照しているので、結果はfalseとなる console.log(arry1 === arry2)

Twitterのつぶやきなんて、9割以上が残しておく必要がない。 SNSじゃないですしね。 概要 Twitterにはツイートのメンテナンス系の機能が無い (クソ雑魚弱い)。 なので頑張って、デジタル タトゥーにならない様古いつぶやきやらtwitpic、togetter垢などを消してたら。RT群が割と残ったので、javascriptを使って一気に取り消した。 そんな備忘録。 実行環境 Google Chrome 手順 Step① 「RT取り消し用ボタン」を生成する関数の作成 なんてことはなく、「RTボタンを押下」「確認ダイアログをOK」の2ステップを1ボタンにまとめて、一応1clickで出来る様にしただけ。 unretweet button let createRtButton = function() { document.querySelectorAll('div[data-testid=unretweet]:not([unrtable])').forEach(function(unrtBtn) { let div = document.createElement('div'); let span = document.createElement('span'); div.addEventListener('click', function() { unrtBtn.click(); setTimeout(function() { document.querySelectorAll('div[data-testid=unretweetConfirm]').forEach(function(cnftmBtn) { cnftmBtn.click(); }); }, 10); }); span.innerText = '[unrt]' span.setAttribute('style', 'color: #000000;'); div.classList.add('unrt'); div.setAttribute('style', 'background-color: #FFFFFF;'); div.setAttribute('role', 'button'); div.setAttribute('data-focusable', 'true'); div.appendChild(span); unrtBtn.parentElement.parentElement.appendChild(div); unrtBtn.setAttribute('unrtable', 'true'); }); }; 元々は総ツイート数MAX100件に抑えるために、定期メンテ用に選択的に取り消しやすい様に作ったボタン作成スクリプト。bookmerkletにして定期的に使ってた。関数を実行すると、クソダサな [unrt] がRTに現れる。 ちなみにループ起点となっているタグには識別子を付け、queryでは識別子無しを取る様にすることで、多重処理を回避しているのもミソ。 Step② 「RT取り消し用ボタンを生成」と「[unrt]を押下」を1秒おきに実行 setInterval(function() { createRtButton(); document.querySelectorAll('div.unrt').forEach(function(e) { e.click() }); }, 1000); 気分爽快 Step⑨ 結果 RTが一層されてスッキリ 備考 Q. アカウント消しぁ良いんじゃないの？ A. お前これまで登録してきたOpenIDのこと覚えてるの？ 私は出来る限り使わない様にはしてきていたけど、でも 覚えてない 。 Q. ツイート数1万件て書いてない？ A. なんか変わらないなぞ。 Q. RTってつぶやきじゃなの？ A.一応つぶやきに勘定されてる様で。検索とかでも自身のツイートとRTって振り分けられないんだよね。。。 Q. アロー関数なんで使わないの？ A. ラムダ式は二十歳になってから。 Q. 忘れられる権利？ A. バカッターにそんな権利はない。自衛するしか無い。

前書き 前回は電卓のフロントエンド的な部分を作成したので、 今回は実際に処理をする部分をJavascriptで書いていきます。 といっても、今回で全部作るわけではなく（まだコードを途中までしか考えてない） 数字ボタンだけです。 なるべく早く他の機能も実装できるように、授業中に頑張って考えてきますｗ コード書く 今回実装するのは数字入力だけなのでめちゃくちゃ簡単です。 var dispnum function num(x) { dispNum=document.getElementById("disp").value; dispNum=dispNum*10+x; document.getElementById("disp").value=dispNum; } htmlにも変更を加えます <input type="text" id="disp"> テキストボックスにdispというidを追加します。 説明 語彙力ない俺に説明できるかわかりませんが動作を解説します。 最初の行の dispNum=document.getElementById("disp").value; でjavascriptのdispNum変数をテキストボックスにある数値と同じにします。 次に dispNum=dispNum*10+x; でもとから入力されていた数値を十倍（繰り上がり）してから、 引数として渡された数値を加算する処理をしています。 最後に document.getElementById("disp").value=dispNum; でテキストボックスに表示されている内容を更新します。 次回に続きます。 まだ数字を入力できるようにしかなっていないので、 次回、計算処理をする部分のスクリプトを書きます。 明後日（金曜日）くらいには書けるかと思います。 今回のコードをcodepenというサイトに書いておいたので、 良かったら見てってください。 https://codepen.io/xtzi9859/pen/PoWROQv

はじめに Node.jsのバージョン管理ツールNodistの実装までの流れをまとめています。 すごくシンプルな内容ですが、初心者の私は悩んだのでここに残します。 Nodistとは Node.jsのバージョン管理ツールになります。 他にもnvm, nvmw, nodebrewなどがありますが、主にMac用だったりするのでWindowsの方はNodistをインストールしてください。 Nodistのインストール方法 1. 下記サイトより、赤囲い部分をクリックし、インストーラーをダウンロードする。 ※貼付ではv0.9.1となっていますが、その時の最新のモノで問題ないです。 ダウンロード 2. インストーラーを実行すると、セットアップ画面が開くので、Nextから進める。 3. インストール先はデフォルトから変更しなくてよい 恐らくC:\Program Files\Nodistとかになってると思います。 4. インストールが終わったら一度PCを再起動 何かをインストールしたら一度PCを再起動しましょう。 有効になっていないことがしばしばあります。 5. Nodistのバージョンを確認 コマンドプロンプト C:\Users\ユーザー名> $ nodist -v 0.9.1 インストールしたバージョンが出てくれば成功です！ Node.jsのバージョンを変えてみる 1. 現状のNode.jsのバージョンを確認する コマンドプロンプト C:\Users\ユーザー名>$ nodist ls (x64) 11.13.0 (global: 11.13.0) ※これが現在の自分が持っているNode.jsのバージョンです。 2. インストール可能なバージョンを表示 コマンドプロンプト C:\Users\ユーザー名>$ nodist dist``` バージョンがズラーと並ぶ⇓ 3. 必要なバージョンをインストールする コマンドプロンプト C:\Users\ユーザー名>nodist + v15.14.0 15.14.0 [===============] 56981/56981 KiB 100% 0.0s 15.14.0 ※nodist + バージョンを実行しています ※この時点ではインストールしているだけなのでバージョンは変わりません 4. バージョンを切り替える コマンドプロンプト C:\Users\ユーザー名>nodist v15.14.0 v15.14.0 v15.14.0 (global) ※nodist バージョン名で切り替えます 5. 切り替わったか確認する コマンドプロンプト C:\Users\ユーザー名>node -v 14.15.4 ・・・あれ！？ 変なバージョンになっている！？ 6. 原因 私が今行っているプロジェクトで使用しているバージョンでした・・・ 恐らくnpm(パッケージ管理ツール)なども関係しているようなので調べて追記したいと思います。。。 ※初めてNode.jsを入れた人はこれでいけるハズです！ おわりに ご覧いただきあり難うございました。 初心者の方のお力になれれば幸いです。 私自身が初心者ですのでこれからもより初心者に近い目線から記事を書いていきたいと思います！！！！！

はじめに 最近Javascriptの勉強を始めて、練習で電卓的なものを作ろうと思ったのでついでに記事を書いてみました。 初投稿ですので読みづらいところとか多いと思います。 最初のこの記事ではHTMLを書いていきます。 JS使うのは次の記事あたりだと思います。 コード書いてく まずはHTMLで数値を入力するボタンや計算結果を表示するテキストボックスなどを作成します。 bodyタグの内側だけ書きます。 tableを使って整形していますが、DIVタグとかとCSSを組み合わせたりする方法もあると思います。 id属性などの設定をまだしていないので（こういうところ手際悪い）次回以降細かい所の修正が入ると思います。 数字入力ボタンのonclickだけ指定しておきました。 関数numってやつです。 足し算しかボタンがないですがそこも後で追加します <input type="text"> <table> <tr> <td><input type="button" value="7" onclick="num(7)"></td> <td><input type="button" value="8" onclick="num(8)"></td> <td><input type="button" value="9" onclick="num(9)"></td> </tr> <tr> <td><input type="button" value="4" onclick="num(4)"></td> <td><input type="button" value="5" onclick="num(5)"></td> <td><input type="button" value="6" onclick="num(6)"></td> </tr> <tr> <td><input type="button" value="1" onclick="num(1)"></td> <td><input type="button" value="2" onclick="num(2)"></td> <td><input type="button" value="3" onclick="num(3)"></td> </tr> <tr> <td><input type="button" value="0" onclick="num(0)"></td> <td><input type="button" value="="></td> <td><input type="button" value="+"></td> </tr> </table> 今回はとりあえず終わり こんな感じで書くと下のスクショみたいになります。 まだ見た目だけなので次回以降Javascriptを書いて実際に動くものにしていきます。 （＾ω＾）ノシ 次回:https://qiita.com/xtzi/items/39ead5a6ca83f39d3a86

元ネタ jQueryを使わずJavascriptの標準機能だけでシンプルにこじ開けてみた。 Let's こじ開ける こじ開ける.js document.querySelectorAll('div.box-game-pc div.box-game-item a.box-game-item-link').forEach((a) => { a.classList.remove('disabled'); a.click(); }); 普段はあまり使わない、これ見よがしなラムダ式。 ぱんぱかぱーん 全部当たりアニメーション アニメーションは box を操作したいので、queryを分ける。 全部当たり.js document.querySelectorAll('div.box-game-pc div.box-game-item').forEach((box) => { box.querySelectorAll('a.box-game-item-link').forEach((a) => { a.classList.remove('disabled'); a.click(); }); box.style.zIndex = 10000; box.classList.add('box-anime-03'); }); 以上

Proプランの比較 Cloudflare Netlify Vercel 価格 $20 (チームの人数は関係なし) $19 / member $20 / member 並列ビルド数 5 3 (追加は$40) 1 (追加は$50) ビルド制限 5000 builds 1000 minutes Up to 400 Hrs サーバーサイド機能 なし(Cloudflare Workerがあるが統合されていない。2021/4/14時点) あり(Netlify Functions) あり(Serverless Functions) 帯域 制限なし 400GB/month(then $20 per 100) 1TB/month パスワードプロテクション 含まれる(※1)無料プランでも使える 含まれる 追加で$150必要 SSO 含まれる(※1)無料プランでも使える なしEnterpriseプランでSAMLが使える 要問い合わせ プロダクションのアクセス制限 できる(※1)(※2) できない できない ※1 Cloudflare Accessとの連携によって実現される。 ※2 独自調査によるものでドキュメントから確認できたものではありません。Cloudflare Accessの設定からプロダクションのドメインに対して追加で制限をかけることで実現できました。 所感 Cloudflare Pagesのコストパフォーマンスが圧倒的です。他のサービスはチーム人数に比例した金額になりますが、Cloudflare Pagesではチーム人数の影響を受けない上に、競合サービスではオプションとして追加費用が必要な機能も追加費用なしで導入できます。 Serverless Functionがないので静的サイトにしか対応できませんが、静的サイトであれば迷わずCloudflare Pagesを選びたくなる安さです。 参考 Cloudflare Pages・Vercel ・Netlify の違いや使い分けをまとめる

Turf.jsとは？ 　高機能なJavaScriptのWeb地図用GIS演算ライブラリです。 　シンプルで早くて、小さくモジュール化しているから、必要な物だけを取得して使えるよ、ということのようです。 　とにかく山のように命令があってなんかすごそう！　とは思いつつ、ご説明は全部英語だし、グーグル翻訳さんに訳してもらったところで、ワタシなどには何するもんだかサッパリな命令も多々あるわけなんですが、とりあえず欲しい機能だけをちょこっと使わせてもらう分には、さして難しいことでも無い様子。 まずは準備です スクリプトを取り込む 　なでしこ３も、PC版はNode.jsで動いているというのに何ですが、ワタクシいまだによく分からない人なので、とにかく直でHTMLへscriptタグで読み込みたい。 　コレです！ <script src='https://unpkg.com/@turf/turf@6.3.0/turf.min.js'></script> 　簡単ですね♪ 　しかし、とりあえずお試しするには良いのですが、フルビルドしたものはサイズがべらぼうなので、カスタムビルドで必要なビットのみを取得せよと書いてある・・・ラシイ。 　結局それかよ、えぬぴーえむかよ、というところですが、とりあえずここで、ポチポチと超簡単に作ることが出来ました。神だね！ helpersの罠 　Turf.jsではなんでもGeoJSONってデータ形式にしなきゃなようで、なんかこんなの。 { "type": "Feature", "properties": {}, "geometry": { "type": "Point", "coordinates": [ 140.75497578224517, 41.7946708822908 ] } } 　むむむ・・・（＠＿＠） 　それをやってくれるのが、helpersの中の一連の命令なんですよね。 　緯度経度やその配列を与えただけで、pointやらlineStringやらpolygonやらの形式のGeoJSONにしてくれるって寸法です。だから、大体使います。 　ご本家のExampleでは、こんな風になっております。 var point = turf.point([-75.343, 39.984]); 　これで、ちゃんと動いたんですよ。当初、 <script src='https://unpkg.com/@turf/turf@6.3.0/turf.min.js'></script> 　を取り込んでた段階では。 　ところが、その後、ご入り用のmoduleだけでアレしようとしたら、途端にエラーになっちゃう。 　だから、てっきり、びるど？　がうまくいっておらぬのじゃろう・・・と思ってしまったせいで、大分ハマりました(´Д⊂ヽ 　こうでした。 var point = turf.helpers.point([-75.343, 39.984]); 距離を測りたい！ 　さて、気を取り直して・・・まず第一にやりたいことは、距離を測ることなんですよね～。 　例えば、時代小説中の人物が歩いた道程を辿ってみるとかね☆ 　それが、実際のところ何ｋｍくらいなんですかね？　的な。 　うーむと切絵図を眺めて、それからおもむろにぐーぐるまっぷと首っ引きで距離を測定してみたりする。それが、Maplat + Turf.jsでなら、同一画面上で出来ちゃいそうじゃないですか？　楽しげ♪ 　距離の測れそうな命令には、turf.distanceとturf.lengthがありました。 　コロナのせいですっかり馴染み深い単語になっちゃいましたね、distance。 　これは、二つのpointを与えて、その間の距離を得る物。 　一方lengthは、lineStringを与えてその長さを得る物。 　一応両方試しました。 　なでしこ３は、なでしこのプログラム中に、直でJavascriptを書いて実行することも出来ますよ！ 　こんなふうに文字列としてJavascriptの関数を書き、それに引数を与えてJS関数実行できます。 　関数の中身は、ご本家のExampleのとうり。 turf.distance distance 『(function(from,to){ var from = turf.helpers.point(from); var to = turf.helpers.point(to); var options = {units: 'meters'}; return turf.distance(from, to, options);})』をdistanceに代入。 distanceを[[140.76033681119014,41.79635583006893],[140.75360256611546,41.79599719142311]]でJS関数実行して言う。# 559.6794099196878 turf.length length 『(function(line){ var line = turf.lineString(line); return turf.length(line, {units: 'meters'});})』をlengthに代入。 lengthを[[[140.76033681119014,41.79635583006893],[140.75360256611546,41.79599719142311]]]でJS関数実行して言う。# 559.6794099196878 　結果は、バッチリ一緒でした～☆（そりゃそうか） 　そして試しに、ぐーぐるまっぷの「距離を測定」で、ざっくり測ってみたら、ちゃんと大体一致しました～♪ 　いや、べべべつにTurf.jsを信じてなかった訳じゃ無いんですがっ！ 　それはさておき、distanceもlengthも結果が合うなら・・・圧倒的にlengthの方が便利ですよね～。 　lengthは、lnglatsの配列をlineStringにして与えれば、二点間はもとより、どんなにぐねぐね曲がりくねろうと、一発で距離を出してくれますが、distanceは、ぐねぐねしていた場合には、lnglatsの配列を反復して、順々足していかなきゃいけませんからね。 　こんな感じ？ turf.distance distance 道程＝[[140.76033681119014,41.79635583006893],[140.758478619304,41.79556157762579],[140.75721413722778,41.79432302386439],[140.75619270341997,41.79496643842464],[140.75497595771563,41.79462275418183],[140.75484194014732,41.79560505340086],[140.75360256611546,41.79599719142311]] A=0。 ((道程の要素数)-1)回 　A＝A＋(distanceを[道程[回数-1],道程[回数]]でJS関数実行）。 ここまで。 Aを言う。# 790.762102688524 　やっと、なでしこで書いてる甲斐が出てきたｗ turf.length length lengthを[道程]でJS関数実行して言う。# 790.762102688524 　一発☆ 　当然ですけど、こちらもピッタリ一致。 　Turf.js的には、与える引数が点か線かとゆう違いがあるんでしょうが、ワタシなどがなでしこのプラグインにして、ラクに使ってやろうというにあたっては、どっちみち引数は緯度経度にしちゃいますから、一緒ですｗ ついでに面積 　面積も、turf.areaでlnglatsの配列をpolygonにして与えたら、複雑な形でもしゅっと出してくれます。 area 『(function(lnglats){ var polygon = turf.helpers.polygon(lnglats); return turf.area(polygon);})』をareaに代入。 道程に道程[0]を配列追加。 areaを[[道程]]でJS関数実行して言う。 　でも、四角になるように経緯度を調整して、distanceで二辺の距離を出して計算してみたのとは、ビミョーに合わなかった。 　地球は平面じゃないから、おそらく深遠な計算式があるのであろう。小学校でやるような面積の出し方ではないのだ。 　いや・・・平面ってコトでいいじゃん！　って言うような、狭い範囲内なんだけどなあ・・・ｗ 　いずれにせよ、古地図上のことなので、ベツにざっくりとで良いんですが。 　注意点としては、polygonの時はパス（？）が閉じてないとダメです。（lnglatsの最初と最後を同じにする） 　lineStringの配列なので、同じ範囲でも、lengthで外周の長さを測ってやろうという場合より、一段階層が深くなります。 　距離の時には、単位を指定出来るオプションがあったけど、これは平方メートル限定らしい。 中心とか重心とか 　turf.centerとかturf.centroidとか、一応やってみたけど、意味はだいたいわかるけども、私にとって使い途があるかどうかは不明ｗ 　しかも、turf.centroidとturf.centerOfMassの違いが分からんorz。何か、異なる計算式によって算出されているのであろう。 動作確認 　プラグインにして、とりあえずここまでをMaplat上に反映してみました～。 https://snowdrops89.github.io/Maplat_test/test/nako3_test_Turf_1.html 　これで、なでしこらしくp1からp2までの距離取得とか、lineの道程取得とかで、距離を得られるようになりました♪ 　・・・結局distanceも残したので、lengthは長さって言うのもアレだし「道程取得」にしてみたんだけど、どうだろう？　英語力だけじゃなく、日本語力も問われるのか・・・ 　なでしこ開発者様のご苦労が忍ばれるね！ 　プラグインはココ。 https://github.com/snowdrops89/nako3_plugin_Maplat 　Maplatで使いたいことだけを、ちょこちょこと入れるだけのつもりなので、Maplatと同居。 　しかし、やはり、Maplatのプラグインとはファイルを分けました。 　それぞれのscriptの取り込みが必要ですからね。 　 つづきます 　なんか、肝心のトコまで行き着きませんでしたけど；；； 　もう、使う物は既にプラグインにはしてあるし、別に引っ張るようなアレでも無いんですが、例によって出来たの出来ないのと騒いでいるうち結構な文字数になったので、続きとします。（まだちゃんとしたサンプル作ってお試ししてないし、もう文章書くの疲れたし＞＜；） 　次こそは地図上にバス？を走らせたり、進行方向に従って地図の向きを変えたりしてみます！ Maplat Coreで古地図の上にバスを走らせてみる Maplat Coreで古地図の上に明滅するバスを走らせてみる Maplat Coreで古地図上を進行方向に視点を変えながら走り回ってみる

JavaScriptの勉強のため、カウントダウンプログラムを作りました。 私は、新年までのカウントダウンや、オリンピック・パラリンピックまでのカウントダウンを試しました。 本記事の環境 ※PCに環境構築を行う必要はありません。 WEBブラウザ(Google Chome) テキストエディタ 要件・仕様 言語の勉強が主目的なので、見た目はこだわらない。 言語の勉強が主目的なので、処理は小分けにするし、コメントも残す。 フレームワークは使わない。 秒単位でカウントダウンする。 起点となる年月日は画面から変えられるようにする。 成果物(画面) 所感 JavaScriptが非同期で動く様子を学習するのに丁度よかった。 ネット上に参考になるものが多数あるので、JavaScriptの言語学習に集中できた。 成果物(ソースコード) 参考程度にしてください。軽くは動作確認済みです。 CountDown.html <!DOCTYPE html> <html> <head> <title>カウントダウン</title> <style> body { background-color : #eee; } #countDown { position : relative; top : 50px; left : 50px; width : 400px; height : 100px; background-color : #fff; text-align: center; } #target { width : 300px; height : 14px; font-size : 14px; text-align: center; } #date { font-size : 30px; text-align: center; } #inputForm { font-size : 12px; } #input { position : relative; top : 100px; left : 50px; width : 400px; height : 60px; background-color : #fff; text-align: center; font-size : 12px; } #year { width : 60px; height : 12px; background-color : #fff; text-align: center; } #month,#day,#hour,#minute,#sec { width : 40px; height : 12px; background-color : #fff; text-align: center; } </style> <script language="JavaScript"> // 現在日時取得処理 function getToday(today) { work = new Date(); // ミリ秒から秒に変換する。 today["time"] = work.getTime() / 1000; return; } // 目標日時取得処理 function getXDay(Xday) { work = new Date(document.inputForm.year.value, (document.inputForm.month.value - 1), document.inputForm.day.value, document.inputForm.hour.value, document.inputForm.minute.value, document.inputForm.sec.value); // ミリ秒から秒に変換する。 Xday["time"] = work.getTime() / 1000; return; } // カウントダウンタイマ作成処理 function makeCountDownTimer(countDownTimer) { // カウントダウンするターゲットの日時を取得する。 Xday = []; getXDay(Xday); // 現在日時を取得する。 today = []; getToday(today); // 差を算出する。 countDownTimer["time"] = Xday["time"] - today["time"]; return; } // カウントダウンタイマ変換処理 function convertCountDownTimer(countDownTimer, result) { // 計算用の変数を用意する。 forDay = 60 * 60 * 24; forHour = 60 * 60; forMinute = 60; // 残り日数を算出する。(整数部だけ取り出す。) tmp = countDownTimer["time"] / forDay; work["day"] = Math.floor(tmp); // 残り時間を算出する。(整数部だけ取り出す。) tmp = (countDownTimer["time"] - work["day"] * forDay) / forHour; work["hour"] = Math.floor(tmp); // 残り時間を算出する。(整数部だけ取り出す。) tmp = (countDownTimer["time"] - work["day"] * forDay - work["hour"] * forHour) / forMinute; work["minute"] = Math.floor(tmp); // 残り時間を算出する。(整数部だけ取り出す。) tmp = countDownTimer["time"] - work["day"] * forDay - work["hour"] * forHour - work["minute"] * forMinute; work["sec"] = Math.floor(tmp); // 画面表示用フォーマットに変換する。 result["date"] = work["day"] + "日" + work["hour"] + "時" + work["minute"] + "分" + work["sec"] + "秒"; return; } // カウントダウンタイマ表示処理 function outputTimer() { // カウントダウンタイマを作成する。 countDownTimer = []; makeCountDownTimer(countDownTimer); // カウントダウンタイマを画面表示用フォーマットに変換する。 result = []; convertCountDownTimer(countDownTimer, result); // 画面に表示する。 work = document.inputForm.year.value + "年" + document.inputForm.month.value + "月" + document.inputForm.day.value + "日" + document.inputForm.hour.value + "時" + document.inputForm.minute.value + "分" + document.inputForm.sec.value + "秒まで"; document.dateForm.target.value = work; document.dateForm.date.value = result["date"]; return; } // カウントダウンタイマを表示する。 // (0.5秒ごとに再表示する。) setInterval("outputTimer()", 500); </script> </head> <body> <div id="countDown"> <form name="dateForm"> <input type="text" name="target" id="target"></p> <input type="text" name="date" id="date"></input> </form> </div> <div id="input"> <form name="inputForm"> <p id="inputForm">入力フォーム</p> <span> <input type="text" name="year" id="year" value="2022">年</input> <input type="text" name="month" id="month" value="01">月</input> <input type="text" name="day" id="day" value="01">日</input> <input type="text" name="hour" id="hour" value="00">時</input> <input type="text" name="minute" id="minute" value="00">分</input> <input type="text" name="sec" id="sec" value="00">秒</input> </span> </form> </div> </body> </html> 関連

input/select/textarea各要素の状態を一時的にsessionStorageに保持し、ブラウザをリロードしたり別ページから戻って再表示した時に保持しておいた状態を各要素へ反映させ状態回復するものです。 スクリプト input_retention.js 'use strict'; { const // 保持対象要素CSSセレクター cssSelectors = { // checked系 checked : [ 'input[type=checkbox]', 'input[type=radio]', ].join(), // value系 value : [ 'input[type=text]', 'input[type=password]', 'input[type=datetime-local]', 'input[type=date]', 'input[type=time]', 'input[type=month]', 'input[type=week]', 'input[type=number]', 'input[type=email]', 'input[type=range]', 'input[type=search]', 'input[type=tel]', 'input[type=url]', 'textarea', // type属性を持たないinput要素(text扱い) 'input:not([type])', ].join(), // selected系 selected: 'select', }, elements = {}, storage = { key : location.pathname + ':inputElementRetention', }; window.addEventListener('DOMContentLoaded', function() { if(checkStorage(storage.key + '_c') !== true) return; storage.data = sessionStorage.getItem(storage.key); storage.data = storage.data !== null ? JSON.parse(storage.data) : {}; // 対象要素取得・イベントリスナー追加・storageデータを各要素へ反映 // checked系 elements.checked = document.querySelectorAll(cssSelectors.checked); for(let i = 0; i < elements.checked.length; i++) { const e = elements.checked[i]; e.addEventListener('change', storageSet); if(storage.data.checked !== undefined) e.checked = storage.data.checked[i]; } // value系 elements.value = document.querySelectorAll(cssSelectors.value); for(let i = 0; i < elements.value.length; i++) { const e = elements.value[i]; e.addEventListener('input', storageSet); if(storage.data.value !== undefined) e.value = storage.data.value[i]; } // selected系 elements.selected = document.querySelectorAll(cssSelectors.selected); for(let i = 0; i < elements.selected.length; i++) { const e = elements.selected[i]; e.addEventListener('change', storageSet); if(storage.data.selected !== undefined) { for(let l = 0; l < storage.data.selected[i].length; l++) { e.options[l].selected = storage.data.selected[i][l]; } } } }); // 各要素の状態取得・storageに保持 function storageSet() { // checked系 storage.data.checked = []; for(let i = 0; i < elements.checked.length; i++) { const e = elements.checked[i]; storage.data.checked[i] = e.checked ? 1 : 0; } // value系 storage.data.value = []; for(let i = 0; i < elements.value.length; i++) { const e = elements.value[i]; storage.data.value[i] = e.value; } // selected系 storage.data.selected = []; for(let i = 0; i < elements.selected.length; i++) { const e = elements.selected[i]; const selectedArray = []; for(let l = 0; l < e.options.length; l++) { selectedArray.push(e.options[l].selected ? 1 : 0); } storage.data.selected[i] = selectedArray; } sessionStorage.setItem(storage.key, JSON.stringify(storage.data)); } function checkStorage(str) { try{ sessionStorage.setItem(str, str); sessionStorage.removeItem(str); return true; } catch(e) { return false; } } } 使用法 保存したい要素のあるHTMLに <script src='input_retention.js'></script> を追記します。 ページロード時に対象要素をすべて拾って動作を適用しますので、それ以外の設定はありません。 簡易的な処理なので、対象外にしたい要素の個別指定などはありませんが、例えばtype=passwordは保持したくない、というような場合は value : [ 'input[type=text]', 'input[type=password]', 'input[type=datetime-local]', から'input[type=password]',を削除、という形で対応できるかと思います。 また、別スクリプトで動的に要素が増減するようなページでは、動的に増えた要素にはイベントリスナーがかかっていなかったり、保持しているデータと要素の配置が変化したりするので想定通りの動作は期待できないかと思います。 使用例 設定デモ <!DOCTYPE html> <html lang='ja'> <head> <meta name='viewport' content='width=device-width,initial-scale=1'> <meta charset='utf-8'> <title>input系要素 sessionStorage保持サンプル</title> <script src='input_retention.js'></script> <style> textarea { width: 300px; height: 100px; } </style> </head> <body> checkbox<br> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <input type='checkbox'> <br> radio(nameなし)<br> <input type='radio'> <input type='radio'> <input type='radio'> <br> radio(nameあり)<br> <input type='radio' name='a'> <input type='radio' name='a'> <input type='radio' name='a'> <br> text<br> <input type='text'> <input type='text'> <br> password<br> <input type='password'> <br> 日時系<br> <input type='datetime-local'> <input type='date'> <input type='time'> <br> <input type='month'> <input type='week'> <br> number<br> <input type='number'><br> email<br> <input type='email'><br> range<br> <input type='range'><br> search<br> <input type='search'><br> tel<br> <input type='tel'><br> url<br> <input type='url'><br> type無し(text扱い)<br> <input><br> select(single)<br> <select> <option value='0'>------</option> <option value='1'>aaaaaa</option> <option value='2'>bbbbbb</option> <option value='3'>cccccc</option> </select> <br> select(multiple)<br> <select multiple> <option value='0'>AAAAAA</option> <option value='1'>BBBBBB</option> <option value='2'>CCCCCC</option> <option value='3'>DDDDDD</option> </select> <br> textarea<br> <textarea></textarea><br> <textarea></textarea> </body> </html> sessionStorageですので、保持されたデータはブラウザを閉じた時点で消えます。 同一ページを別タブで開いた場合は別データ扱いになります。 どんな形式で保持しているかは、Chromeの場合であればデベロッパーツール(F12キー等で開きます)のApplication > Storage > Session Storage > 該当オリジン から確認してみてください。 location.pathname + ':inputElementRetention' のキーのものが該当データです。 location.pathnameをキー名に含めているのは、複数ページで使用した場合にページ単位でストレージデータを使い分けられるようにするためです。

Redux・TypeScript作成方法 $ npx create-react-app アプリ名 --template redux-typescript Git Hubはこちらから VScodeにESLint+Prettier追加します。 設定が反映されている方はしなくて大丈夫です。 この記事を参考に作成していきます。 eslint $ yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier $ yarn add -D prettier eslint-config-prettier アプリの直下に.eslintrc.json作成 .eslintrc.json { "extends": [ "eslint:recommended", "plugin:@typescript-eslint/recommended", "prettier", "prettier/@typescript-eslint" ], "plugins": ["@typescript-eslint"], "parser": "@typescript-eslint/parser", "parserOptions": { "sourceType": "module" }, "env": { "browser": true, "node": true, "es6": true }, "rules": { "適当なルール なければ書かなくてもいいです。" } } settings.jsonに追記する (command + ,)で設定が開いて右上のファイルマークを押すと settings.json変更できます。記述がなければ変更してください。 settings.json { "editor.formatOnSave": true, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, } 作成アプリに必要なものインストール $ yarn add node-sass $ yarn add react-hook-form $ yarn add @material-ui/core $ yarn add @material-ui/icons これで環境構築は完成です。

はじめに Dateオブジェクト。。。 使用頻度も少ないし、なんとなくは理解してるしけど応用して使いこなすまではいってないのでコピペ率高めになってた。。。 危機感を覚えて再度学び直してみたのでDateオブジェクトについてと提供されているメソッドのトラップ、実用例を解説していきます。 解説しないこと JavaScriptオブジェクト new 演算子 (インスタンス化) 静的メソッド、 インスタンスメソッド Dateオブジェクトとは Dateオブジェクトとは、呼び出された瞬間の時刻を様々な形式で返す静的メソッドとインスタンスメソッドを持つオブジェクトです。 もう少し詳しく Dateオブジェクトの時刻は、世界協定時(UTC)からの経過ミリ秒(UNIXエポック)をNumber型ので返されます。 提供されているメソッドにはUTC基準で1618028348725のようなミリ秒やSat, 10 Apr 2021 04:23:27 GMT表示、自身が使用している環境に設定されているタイムゾーン（これを読んで頂いてるのはおそらく日本）を基準にしたUTC + 時差の地方時をミリ秒やFri Dec 17 2021 00:00:00 GMT+0900 (日本標準時)のような形式で時刻を返すものが用意されています。 世界協定時（UTC）とUNIXエポック 世界協定時とは,ものすご〜〜く簡単に言うと、賢いおじさん達が1970年1月1日午前0時0分0秒を世界の標準時刻にしよう！と決めた規定です。 UNIXエポックとは、その世界協定時を基準に１づつ足されたものを経過ミリ秒として扱ったものの名称で、UNIX時間またはUNIX時刻も同一の意味でコンピューターシステム上での時刻表現の一種です。 UNIXエポック 基本的な使い方 基本的にはインスタンス化してコンストラクターの返り値を使用するか用意されているメソッドを呼び出します。 提供されているメソッドはMDNを見ればある程度正しく記載されているので各メソッドとその挙動についてはMDNで確認してください。 MDN 使用例 date.js //コンストラクター関数 const date = new Date() /*地方時を返す*/ console.log(date) // Sun Apr 11 2021 00:54:42 GMT+0900 (日本標準時) //静的メソッド /*UTCのミリ秒がそのまま返ってきてる*/ console.log(Date.now()) //1618071154714 //メソッド /* 呼び出された瞬間の時間だけを返す */ console.log(date.getHours()) // 1 Dateオブジェクトに潜むトラップ Dateオブジェクト、大変便利ですが、仕様に少しだけ癖のあるものもあるので注意が必要です。 コンストラクター 月の取得 曜日の取得 コンストラクター ハイフン( - )区切りは+0900されている date.js // コンストラクター const date1 = new Date('2020-07-01'); const date2 = new Date('2020/07/01'); console.log(date1) // Wed Jul 01 2020 09:00:00 GMT+0900 (日本標準時) console.log(date2) // Wed Jul 01 2020 00:00:00 GMT+0900 (日本標準時) console.log(date1.toGMTString()) // "Wed, 01 Jul 2020 00:00:00 GMT" console.log(date2.toGMTString()) // "Tue, 30 Jun 2020 15:00:00 GMT" 月の取得 getMonthの結果は 0 起点 date.js // 月の取得 const today1 = new Date() console.log(today1.getMonth()+ 1) // 4 const today2 = new Date("2021-04-11 00:00:00") // Sun Apr 11 2021 00:00:00 GMT+0900 (日本標準時) console.log(today2.getMonth()) // 3 const today3 = new Date("2021","04", "11", "00") // Mon Mar 11 2021 00:00:00 GMT+0900 (日本標準時) console.log(today3.getMonth()) // 4 曜日の取得 getDayのような曜日を返すメソッドも曜日自体を返すのではなく ０ 起点 で始まる数値が返ってくるのでそれに配列などに当ててあげるような仕様になります。 date.js // 曜日取得 let arrDay = ['日曜日', '月曜日', '火曜日', '水曜日', '木曜日', '金曜日', '土曜日'] const today2 = new Date("2021-04-11 00:00:00") console.log(arrDay[today2.getDay()]) // 日曜日 console.log(today2.getDay()) 0 実用例 Dateオブジェクト単体だと日時を取得するだけですが、応用していくと独自フォーマットを作成したり日時の差分を取得、より正確なタイマーを作成することができます。 日付フォーマット カウントダウン タイマー 日付フォーマット 指定された日時をDateオブジェクトのフォーマットにしたり、取得した瞬間時刻を独自フォーマットに変換する date.js let year = '2021' let month = '1' let day = '20' let time = '00:00' /* 変数に入った値を初期値として扱う */ const format1 = `${year} / ${month} / ${day} / ${time}` const date1 = new Date(format) console.log(d) // Wed Jan 20 2021 00:00:00 GMT+0900 (日本標準時) const date2 = new Date() year = date.getFullYear() // 2021 month = date.getMonth() + 1 // 4 day = date.getDate() // 12 time = date.getHours() // 15 /* 独自のフォーマットを作成できる (フォーマットが不恰好なのは許し欲しい... */ const format2 = `Y${year}:M${month}:D${day}:T${time}` // "Y2021:M4:D12:T15" カウントダウン date.js function nanNichi(){ //今の日時 const d1 = new Date(); //ターゲット日時 const d2 = new Date('2019/05/01 00:00'); //令和元年 //時差（ミリ秒） const d3 = d2 - d1; // ミリ秒から秒に const d3_Sec = Math.floor(d3 / 1000); //分、時、日の秒数 const Minute_Sec = 60; const Hour_Sec = 60 * 60; const Day_Sec = 60 * 60 * 24; //あと何日 const d4_Day = Math.floor(d3_Sec / Day_Sec); //あと何時間 const d5_Hour = Math.floor(d3_Sec / Hour_Sec % 24); //あと何分 const d6_Minute = Math.floor(d3_Sec / Minute_Sec % 60); //あと何秒 const d7_Sec = Math.floor(d3_Sec % 60); //カウントダウン counter.innerHTML = d4_Day + "日" + d5_Hour + "時間" + d6_Minute + "分" + d7_Sec + "秒！！"; //1秒ごとに実行 setTimeout(nanNichi, 1000); } //関数実行 nanNichi(); タイマー setTimeout、setIntervalは引数に渡された遅延時間を正確には実行しません。 １秒２秒なら問題なく見えますが、１時間単位で見ると誤差が出てきます。 正確なタイマーを作成するなら開始時刻と遅延された後の時刻を取得してその差分で計算する方がより正確に計算されます。 date.js // タイマースタート時の時刻を取得 const startTime = new Date() // 再帰的に呼び出すことでスタート時刻とtimer呼び出し時刻の差分を出す function timer(start){ const nowTime = new Date() let time = nowTime - startTime /* ミリ秒を秒に形成して端数を切り落とす */ ms = Math.floor(time/1000) /* 割り切れないものを秒として算出することで60秒以上の結果を出力しない */ s = ms % 60 setTimeout(timer, 1000, startTime) console.log(s) } timer(startTime) まとめ Dateオブジェクトが基本的に何を返すか？ 各メソッドはどのような形式で返すのか？ メソッドの一部の癖をちゃんと理解しているか？ を意識した上で使用しましょう。 最後まで見ていただきありがとうございました。 間違い等あればご指導、ご指摘お待ちしております。 以上、Dateオブジェクトについての解説でした。 参考サイト MDN 【JS】DateとsetTimeout()で作るカウントダウンタイマー（令和まであと何日？） JavascriptのDate.getDate()でハマった UNIX時間