JavaScript関連のことを調べてみた2022年03月17日

javaについて

jsファイルを変更後、IEに反映されるまですごく時間かかる
「Ctrl ＋ F5」で強制的に最新の CSS と Javascript を読み込んでくれます。

https://kinacoro.com/super-reload/

Mermaid のフローチャートで同じ名前のオブジェクトを複数作成する方法

この記事では [Mermaid](https://mermaid-js.github.io/mermaid/#/) を使用しています。Mermaid の図が正しく表示されない場合は [Zenn の記事](https://zenn.dev/noraworld/articles/mermaid-duplicate-objects) でご覧ください。

# やりたいこと
[Mermaid](https://mermaid-js.github.io/mermaid/#/) で以下のようなフローチャートを作りたいとする。

“`
C — D
/ \
A — B E — F
\ /
C — D
“`

そして、以下のような Mermaid のフローチャートを書いたとする。

“`
flowchart LR
A — B — C — D — E — F
B — C
D — E
“`

しかし、これだと以下のように出力されてしまう

Jsでボタンを押して文字を入力する方法

# はじめに
こんにちは！web系エンジニアを目指いしているLionです。
最近Laravelを使ってwebアプリを作っているのですが、ユーザーに文字を打ち込んでもらうのは面倒だし検索にも引っ掛かりにくい感じたのでボタンを押して入力できるものを作成いたしました。

# insertAdjacentHTMlを使った方法
JsのinsertAdjacentHTMl(“位置”, ‘入れたい文字’);
を使うと文字を入力することができいます。

たとえば・・・
“`html
//テキストエリアを作りidを設定！
//今回はinputタグを使ってボタンを作成
“`

“`Javascript
function OnButtonClick() {
target = document.getE

[JavaScript] functionとアロー関数の違い

# function
“`javascript
function showNameFunction() {
this.name = ‘wadayamada’;
console.log(this);
}

showNameFunction();
“`
### Output
“`javascript
Object [global] {
global: [Circular *1],
clearInterval: [Function: clearInterval],
clearTimeout: [Function: clearTimeout],
setInterval: [Function: setInterval],
setTimeout: [Function: setTimeout] {
[Symbol(nodejs.util.promisify.custom)]: [Function (anonymous)]
},
queueMicrotask: [Function: queueMicrotask],
clearIm

【超基本】Dateオブジェクトについていろいろ確認してみた【JavaScript】

# 【超基本】Dateオブジェクトについていろいろ確認【JavaScript】

JavaScriptを基礎の基礎からやり直し
今回は`Dateオブジェクト`について仕様を確認しながらまとめてみました

参考ページ : [mdn web docs – Date](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date)

## そもそもDateとは

`Date` は、世界時間(UTC)の 1970/01/01 からの経過ミリ秒数 を表す`Number`の値を含んだ`オブジェクト`

## 確認用コード

`create-react-app –template typescript`で作成したTypeScript上に作る
Calendarというコンポーネントを作成して、index.tsxで読み込ませる

ボタンを押したらコンソールにいろいろ出す感じのオーソドックスな確認方法です

typescriptでは型を理解することが大事だと思うので、
確認したい変数や関数と同時に`ty

ajaxでsubmit時と同じ情報を送る方法

# はじめに
* ajaxを使用してファイルをpostで送るときに詰まったので備忘録として残しておきます。

# .serialize()が使えない
* .serialize() や.serializeArray()を使用すると性質上勝手にform内のinput type=file属性の要素が除外されてしまうようです。
なので上記2つの方法を使用した正攻法でのファイル転送は行えません。

※それでも無理やり送ろうとする場合は別でfile属性の要素を取得してbase64などの方式でエンコードを行い、上記のデータの後ろにJSONなどでくっつけてcontroller側でデコードを行えば、やってできないことはないかもしれないです（未確認）。

# ajaxで情報をpost送信する
“`index.html

メールアドレス：

IT業界1年目のコーダが使ってみて、作業効率爆上がったと感じたおすすめツール

IT業界に未経験から入って早1年程。。。
未だにマークアップくらいしかまともに出来ないぺーぺーぱーぱーが、おすすめするツールやサイトをまとめました。
使ってみると喉にささった魚の小骨が取れるくらい、スッキリしながら作業進められますよ！(??)

## 参考にしているサイト
+ エラーの英文読めない！ 公式ドキュメントオール英語読めない時はコピペ翻訳です笑 google翻訳より好き
[deepl](https://www.deepl.com/ja/translator)
+ flexboxのプロパティについて思い出せない時
[flexbox チートシート](https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet)
+ htmlの入れ子のルールが分からない時
[HTML5 入れ子チートシート](https://yoshikawaweb.com/element/)
+ css Grid Layoutの書き方が分からない時
[CSSグリッドジェネレーター](https://cssgrid-generator.netlif

【PHP】タグ機能①

プロフィールなどで、スキルや資格等を登録する際のタグ機能を実装しました。

# 予測変換のタグ作成
jQuery UIのautocompleteを用いて、予測変換機能を実装します。
こちらのサイトを参考にさせていただきました。

https://ueyama.blog/?p=89

今回はプログラミング言語を中心とした、IT用語をタグとして実装します。

“`php:autocomplete.php
:
$list = array(
‘AWS’,
‘Bootstrap’,
‘C’,
‘CakePHP’,
‘C#’,
‘C++’,
‘COBOL’,
‘CSS’,
‘Docker’,
‘Go’,
‘Git’,
‘HTTP’,
‘iOS’,

Qiitaは日本最大のプログラミング学習プラットフォーム


## はじめに
　Qiita初投稿になります！
　
## 背景
　[タグ一覧](https://qiita.com/tags “タグ一覧”)を見て、ここまで網羅されているとは！と驚きました。
　入門・解説記事も多く、無料の日本最大のプログラミング学習プラットフォームになっています。
　Qiita APIで分析してみました。

## 方法
1. ジャンルごとに記事(レッスン)がどれだけあるのかを調べる
2. 投稿者の数を調べる *閲覧数1000回以上(先生とみなしています)

　当初は、この方針で進めましたが、実装で取得できない項目がありました。※ソースコードの2.から3.へ変更しました。

## ソースコード

スマホでleaflet1.7.1のpopupが表示されない

# 対策
なし。

1.7.1の不具合のため、1.8のリリースを待つ。
暫定対応として1.6.0を使う。

# 参考
https://stackoverflow.com/questions/65385044/leaflet-1-7-1-popup-on-mobile-bug
https://github.com/Leaflet/Leaflet/issues/7331

?Webフロントエンドにおける関数型「風」プログラミングに関する個人的まとめ

# ここ数年の流れについて
## 技術的側面
– Webフロントエンド（ほぼTypeScript＆React界隈）において、オブジェクト指向（厳密に言うと**クラスの利用**）から脱却する流れがあります。原因は以下の2点。
– **クラスの継承の問題点が（IT業界全体に）広く定着したこと**
– JS/TSの進化、Reactの進化、関数型言語の考え方などの影響により、**クラスを用いてデータと関数群を紐づけるメリットが薄くなった**こと
– 現状、設計レベル（実務的にはどの関数を纏めてモジュール化するのか、モジュール同士をどう繋ぎ合わせるのか、フォルダ割りどうするのか等）のノウハウがまだ固まっておらず、既存の設計論はそれなりに有効です。

## コミュニティ的側面（政治）
– これらの流れは**Webフロントエンドの中でもTypeScript＆Reactの界隈が主導しており、そのノウハウは長年絶対視されてきたオブジェクト指向を解体するような内容であったため、それ以外の界隈、特にゴリゴリにオブジェクト指向やっている人々としばしば諍いになってきました。** フロントエンド以

Node-REDのテンプレートノードでスケープしたくないメモ

## 通常に書くとエスケープされてしまいます。

– テンプレートノード側

“`
https://www.switch-science.com{{path}}
“`

> 

– 出力

“`
https://www.switch-science.com/catalog/7889/
“`

> ![スクリーンショット 2022-03-16 10.59.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/35387/aef04524-b85b-a396-08ac-8fd2ed0a0bc9.png “スクリーンシ

YarnでGitHubプライベートリポジトリをyarn addする方法

この投稿では、YarnでGitHubプライベートリポジトリへの依存を追加する方法を説明します。

## 使用するYarn

本稿で説明する手順はYarn v1.22.17を前提とします。Yarn v2、v3ではやり方が異なるかもしれません。未検証です。

## YarnでGitHubプライベートリポジトリをyarn addする方法

### プライベートリポジトリのURLを取得する

依存に追加したいGitHubプライベートリポジトリを開き、「Code」→「SSH」タブからGitのURLをコピーします。


次の形式のURLが得られるはずなので控えておきます。

“`
git@github.com:ORG/REPO.git
“`

### どのGitブランチやコミットに依存したいか決める

YarnではGitリポジトリへの依存

なぜWeb標準のAPIがいいのか改めて考える

最近はDenoの普及により、Web APIの利用機会が増えました。Web APIが使えることはメリットの一つとされていますが、なぜWeb APIを使えることが良いことだとされているのか、改めて考えてみたいと思います。

## そもそもWeb APIとは何か

JavaScriptはランタイムによる拡張が許されている言語です。全てのランタイムで使える`Array`、`Map`などの[標準組み込みオブジェクト](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects)のほかに、固有のランタイムでしか使えない`fetch`や`process`などの拡張APIがあります。

この拡張API、ランタイムごとにいくつかの種類が存在します。例えば、

– Node.jsで使える[Node.js API](https://nodejs.org/api/)
– Denoで使える[Deno API](https://doc.deno.land/deno/stable/~/Deno)
– ブラウザなどで使える

Google reCAPTCHAの中央寄せ

Google reCAPTCHAを設置しようとすると、

“`html

“`

こんなようなソースを貼れと言われる。

これを貼ると、その中にdivが作られて、だーっといろいろなソースが生成されて表示されるが、divの中のdivなので中央寄せができない。

ということでcssを以下のようにすればよい。

“`css
.g-recaptcha div {
display: inline-block;
}
“`

WordPressのAdvancedCustomFieldsに「JavaScriptで」デフォルト値を設定する方法

# はじめに

以前、[PHPでWordPressのデフォルト値を設定する方法](https://qiita.com/qwe001/items/2c05a2be5434eb9a092d)を説明しました。
ですが、私の案件は、ページ読み込み時にデフォルト値を設定するのではなく、
特定のカスタムフィールドの値変更をトリガーにして、デフォルト値を設定するというものです。

$\tiny{…いる？}$

そのため、JavaScriptでinput changeイベントを取らなくてはなりません。
でも、ACFのデフォルト値を変更する方法は、PHPでのやり方ならネットにいくらでもありますが、
JavaScriptで書き換える方法が全然載ってないので、備忘録がてら書くことにしました。

# 仕様

* ページ読み込み時は何もしない
* 表示開始日付(open_date)の値が更新された時、表示終了日付(close_date)に一カ月後の値をセットする
* 表示終了日付(close_date)に既に値がある場合、何もしない

# 下準備

まずは、管理画面でだけ使うJavaScriptファイルを用意し

React + TypeScript: Apollo ClientのuseQueryフックでGraphQLのデータを読み込む

Apollo ClientはReactで使える状態管理ライブラリです。ローカルとリモートのデータをGraphQLで扱えます。本稿は、すでに公開した「[React + TypeScript: Apollo ClientのGraphQLクエリを使ってみる](https://qiita.com/FumioNonaka/items/0c6b711627e3443ff73b)」の続編です。公式サイトの「[Queries](https://www.apollographql.com/docs/react/data/queries/)」で紹介された作例に、TypeScriptを採り入れ、アプリケーションは簡単にモジュール分けしてつくります。

# `useQuery`でデータを読み込む
お題とする公式作例は、CodeSandboxに公開されている「[Mutations > Example app final](https://codesandbox.io/s/queries-example-app-final-nrlnl)」です。モジュールは`src/index.js`ひとつで、TypeScript

Next.jsで作る静的サイトに、use-shopping-cartを使ってStripe Checkoutを利用したECカート機能を実装する

以前「カート機能を簡単に実装できるフックライブラリ」としてuse-shopping-cartを紹介しました。

https://qiita.com/hideokamoto/items/e7ee06e5084d853b7d7d

今回は、このuse-shopping-cartをNext.jsで作成した静的サイトで利用する方法を紹介します。

# 事前準備

今回紹介する方法では、REST APIなどを使用せず、クライアント側の組み込みのみでCheckoutのセッションを開始します。

そのため、事前にStripeダッシュボードの設定ページで、「クライアント側のみの組み込み」を有効にしましょう。
直接飛ぶ場合: https://dashboard.stripe.com/settings/checkout

**無効化されている状態**

![スクリーンショット 0004-03-10 14.45.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2366300/367b6099-e605-c6b4-441

Node-REDで今日の日付を日本語の表示形式で出す

“2022年03月16日”という形式で日付を出力します。

> 

参考記事をもとに[node-red-contrib-moment](https://flows.nodered.org/node/node-red-contrib-moment)を使ってみます。

> 参考: [Node-REDで日時取得とデータ結合](https://ameblo.jp/gameprograming/entry-12657550138.html)

## Date/Time Formatterノード

こちらを使います。

> ![スクリーンショット 2022-03-16 1.36.13.png](https://qiita-image-store

【チェックボックス】trueとfalseのあいだ

チェックボックスの状態でON/OFF以外に第３の状態があるのをご存知ですか？
上記の画像の「トップス」の部分の`indeterminate`という状態がそれにあたります。

ARCHETYPではShopify ExpertとしてECサイトのテーマ開発やカスタマイズをやっているのですが、検索や絞り込みのUIに親子関係があるチェックボックスをよく実装します。
今回はそんな親子階層を利用したユーザーがわかりやすいチェックボックスUIを`indeterminate` を用いて実装する方法をご紹介します。

jQueryを利用した実装を紹介されていた[WebSpaceBlog](https://webspace.jp/)様の[記事](https://webspace.jp/blog/30/)を参考にさせていただきました。