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

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/)を参考にさせていただきました。

プログラミング初学者や個人開発未経験者にこそお勧めしたいchrome拡張機能開発

## dアニメストアでウォッチパーティーをする拡張機能を公開しました

唐突に宣伝から入ってしまい申し訳ないのですが、[dアニメストア](https://anime.dmkt-sp.jp/animestore/)でもオンラインで友人と同時に視聴（ウォッチパーティー）を実現するChrome 拡張機能『[**d-party**](https://chrome.google.com/webstore/detail/d-party/ibmlcfpijglpfbfgaleaeooebgdgcbpc)』を公開しました。

– chrome ウェブストア

https://chrome.google.com/webstore/detail/d-party/ibmlcfpijglpfbfgaleaeooebgdgcbpc

– 開発リポジトリ

https://github.com/d-party

【拡散希望】
dアニメストアでもオンラインの友人と同時に視聴（ウォッチパーティー）を実現するChrome 拡張機能『d-party』を公開しました。

サイドバーからルームを作れて、シェア機能によってdiscordなどで気軽に参加者を招待することができます。（要全員インストール）https://t.co/rzTn9SVXUb pic.twitter.com/UOG8cz2DI0

— U-Not (@U_Not_401) March 15, 2022

私含めアニメオタクの多くが

SVGのアニメーションをSMILとReactでつくる

# 概要

SVGにアニメーションを実装する方法は、CSSやSMIL、JavaScriptのライブラリなどが候補となると思います。この中でSMILは、 **SVGファイルの中にアニメーションを記述できる** というメリットがありますが、反対にコード量が多くなり管理しにくいという悩ましい点がありました。
またアニメーションを開発中には

* SVGの各パーツを別のファイルで管理したい
* ファイルを編集したらすぐに反映させたい
* アニメーションのパラメータを変えたい

なんてことを考えていたら、SMILによるアニメーションはReactと相性がいいんじゃないかと思いつきました。
アニメーション開発はずぶの素人なので、かなり自由気ままにですが、実際に実装して試してみました。

# 制作したもの

私の趣味はロードバイクなので、ペダリングの動作をアニメーションにしました。
[これ](https://tour-maker.vercel.app/cycleman)が完成したもので、ペダリングのアニメーションはSMILで記述し、ポーズを変えるパラメータはReactで制御しています。SAVE CYC

Ruby、PHP、Python、JavaScriptの特徴とコードを比較してみた(言語選定と言語チェンジのための参考資料)

# この記事の概要
代表的なプログラミング言語“`Ruby、PHP、Python“`といったWeb開発などで使われる
人気のバックエンドの言語をそれぞれ比較した記事です。

後フロントエンド言語の“`JavaScript“`も比較していきます。

初学者でどの言語をやればいいのかわからない時、
言語を変える時の参考になると幸いです。

# Webの仕組み
クライアントとサーバーの関係とリクエストとレスポンスの関係がわかれば
今回は大丈夫です。

https://qiita.com/Hashimoto-Noriaki/items/c5c9eb26565b01150556

***サーバー側で処理をするのがRuby、PHP、Python***で
***クライアントのようなブラウザを操作するのがJavaScript***です。

## Ruby
Rubyは初学者向きのプログラミング言語で、
プログラミングスクールでよく使われる言語です。
***Webアプリケーションの開発で使用されるサーバーサイド言語***です。

フレームワークの代表的なのが***Rubyon rails***で

javascriptで@アットマークなどの特殊文字を含む場合のデータ参照でエラーが出る時の備忘録

ニッチな事例ですいませんが、忘れててすごくハマってしまったので、同じように困った方のために残しておきます。入れ子としては良くあると思いつつ、何度か表現を忘れてしまう事がありましたので。

Javascriptで、例えばJSONデータを取得する際に、
「@」などの特殊な記号を含むデータ項目があった際に、
どういった表現（エスケープ的な方法）があるかを記載しておきます。

例えばjsonデータで、下記のようなネスト（階層化）されたものを
参照した際に、最下層のデータ項目にアクセスする際に
【親.子.孫】といった記載をする場合があると思います。（ドットでつなぐ）

## 【課題の例】
`・大カテゴリー`
`・子カテゴリー`
`・孫（値）`　★ここのデータにアクセスしたい
　　　　データ項目名に「@が含まれている」`@time`　など

### 【失敗例】

“`

//パターン1
json.oya.ko.@mago;

//パターン2
json.oya.ko.[@]mago;

json.oya.ko.[“@”]mago;

“`
上記では、「@」は文字列扱いしてくれず、エラーになります

for文について

## はじめに
JavaScriptの復習をしていました。
自分用のメモとして投稿します。
## for文とは
JSで繰り返し処理を行う際に使う構文です。
回数が決まった繰り返し処理に向いています。

書き方は以下のように
“`javascript
for( 初期化; 継続条件; 最終式; ){
// 繰り返す処理の内容
}
“`

for文のカッコには３つの式を;(セミコロン)で区切って書きます。
繰り返し処理が始まる前に「初期化」が１回だけ実行されます。
「継続条件」が真の間繰り返し処理が実行されます。
「最終式」は処理が終わった後に毎回実行されます。
## 例

“`javascript
for( let cnt = 1; cnt <= 10; cnt++) { console.log('ハロー'); } ``` まずletを用いて変数cntを定義しています。 そして変数cntを用いてループする条件を指定。 cnt++は変数cntを1増やすという意味です。 「++」は変数の値を１増やすという意味のインクリメント演算子といいます。 この最終式のcnt++は処理が１回

JavaScriptの超きほん　〜モジュールってなに？〜

# モジュールとは
モジュールとは、肥大化したコードを`機能ごとに分割して管理する仕組み`です。

モジュール化することで、メンテナンスが容易になり、再利用もしやすくなります。

# モジュールシステムの種類
`ESM`と`CJS`の２種類があります。

– ESM: ECMAScript Modules
– CJS: CommonJS

## ECMAScript Modules（EMS）
`ECMAScript`の仕様にもとづくモジュールシステムです。
主にブラウザ上で使用します。

ファイルの読み込みは`import`、
ファイルの書き出しは`export`で記述します。

モジュールファイルの拡張子は`.js`ですが、
ESMとわかるよう明示的に`.mjs`とすることもできます。

## CommonJS（CJS）

`Node.js`上に組み込まれているモジュールシステムです。

ファイルの読み込みは`require`、
ファイルの書き出しは`exports`で記述します。

モジュールファイルの拡張子は`.js`ですが、
CJSとわかるよう明示的に`.cjs`とすることもで

Google reCAPTCHA 認証されてたらなにかする

“`
$(document).ready(function(){
if (grecaptcha.getResponse().length > 0) {
//

}
})
“`

GAS(Google Apps Script)のUrlFetchAppのリクエストbodyに配列をセットする

# 失敗するパターン

### オブジェクトの配列をそのままpayloadにセット
“`ts
const reqOptions = {
method: ‘post’,
payload: [{sample: 1}, {sample: 2}]
}
const res = UrlFetchApp.fetch(Config.API.URL, reqOptions);
“`

### 単純なJSON.stringify
“`ts
const reqOptions = {
method: ‘post’,
payload: JSON.stringify([{sample: 1} {sample: 2}])
}
const res = UrlFetchApp.fetch(‘https://xxx’, reqOptions);
“`

# 成功するパターン

### `contentType: ‘application/json’`　をセットする
“`ts
const reqOptions = {

ドットインストールではじめてのJavaScriptをやってみた

# ドットインストール　はじめてのJavaScript編です
要点だけまとめてみたので、後で振り返り用としておきます

# JavaScriptを書いてみよう
– JavaScriptを書ける場所
– Script タグの場合
– body の中身を読み込んでから、それらの操作をする処理を書くことが多いので、　body の閉じタグの直前に書くのが一般的

– `’use strict’;`
– 厳密なエラーチェックをしてくださいね　と指定するためのキーワード
– 最近の環境ではこれを付けるのが一般的

– `document.getElementById()`
– getElementById
– 任意のHTMLタグで指定したIDにマッチするドキュメント要素を取得するメソッド

– `.addEventListener();`
– EventListener
– 何かのイベントが起きたら、何らかの処理をしてね　という仕組み
– 何らかの処理というのは()に記述する

– `funct

Jamstackへの移行：Mambuのケーススタディ

Gatsby、Sanity、およびNetlifyこそが唯一のSaaSクラウドバンキングのプラットフォームです。

著者：Michal Zielinski 2020年9月8日
原文：https://bejamas.io/blog/saas-banking-platform-jamstack/
補足：Bejamas社に許可を取った上で、掲載しております


>目次
>1. 顧客
>2. JamstackとGatsbyは大規模な組織にどのように役立ちますか？
>3. Sanityでコンテンツを管理する
>4. Netlifyによって処理されるCI / CD
>5. いくつかの技術
>6. 大企業での作業は、中小企業での作業とどのように異なりますか？

以下全文、元記事の翻訳です。

2019年の初めに、クラウドベースの勘定系プ

cssとjavascriptで軽度なアニメーションを実装してみよう！

# はじめに

こんにちは！GrowGroup株式会社の岩内と申します。
こちらの内容はcssとjavascriptを使って軽度なアニメーションを実装する内容となっており、
「アニメーションでどんなことができるのか」というイメージを掴んでいただくというのが今回の趣旨です。
ですのでエンジニア向けというより、ディレクター、デザイナー向けです。
後半で実際に手を動かします！

# 下準備
1. vscodeのダウンロード
URL:https://azure.microsoft.com/ja-jp/products/visual-studio-code/

2. ワークショップで使用するファイルのダウンロード
URL:https://40.gigafile.nu/0304-cdde4fed3c1c1f3dcf0df9c262c86023e

# 目次

1. アニメーションとは
2. css3アニメーション
3. javascriptでできること
4. 実際に手を動かしてみましょう！
5. アニメーションを見てみる（時間が余れば）

# 1.アニメーションとは

連続して変化する絵や物により

JavaScriptで作る、リロードごとに問題がシャッフルされるクイズ。

　JavaScriptでリロードごとに問題がシャッフルされるクイズを作った。

See the Pen
Untitled by mkunu (@m-kunugi)
on CodePen<

外部のJSファイルを読み込む方法

外部のJavaScriptファイルを読み込む方法をまとめます。

以下、

`index.js`→呼び出すファイル

`import.js`→呼び出されるファイル

とします。

## import/export

import/exportを使う方法です。

まず呼び出されるファイルにて、渡したい値に`export`を設定します。

“`javascript:import.js
export const nameText = `太郎`;
“`

複数の値を渡す場合などは、最後にまとめて設定することもできます。

“`javascript:import.js
const nameText = `太郎`;

const genderText = `男`;

export { nameText, genderText };
“`

続いて呼び出すファイルにて、importを設定します。

“`javascript:index.js
// 読み込みたい値を設定する
import { nameText } from ‘./import.js’;

const testElement

キャンバスについて

_HTMLコード_

“`




“`
上記コードのように、HTMLで「canvas要素」をID名「can」で記述し、
それをJavascript（ファイル名「example.js」）でいじっていきたいときの、
canvasについてのお話です。

# サイズ

まずキャンバスのサイズについては
[「canvasサイズについて」](https://qiita.com/tagotyan/items/52fb22a6140c8c0a227e)
を参照してください。
今回キャンバスサイズは５００×５００にしています。

次に実際にキャンバスへ描画していくのですが、
「今から２Dで絵を描いていきますよ〜」とPCに伝えないといけません。

# 要素の取得

_JSコード_

“`
let can=document.getElementById(“can”);
let con=can.getContext(“2d”);
“`
ということで

three.jsを触ってみた

# はじめに
three.jsというwebGLを扱えるライブラリがあったので軽く触ってみました。
試しに動かしてみる程度から始めたいので下記CDNを使用しています。
用語の理解など間違っている部分があれば指摘していただけるとありがたいです。

“`

“`

# 実際に試してみる
* htmlはcanvasタグを用意して、表示させるアニメーション、CGなどをcanvas内で扱う流れみたいです。

“`sample.html










“`

* レンダラー