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

【CSS】画像のbefore・afterをスライドさせて、比較できるようなUIを作ってみた。

## 概要

みなさんは、このようなUIは見たことがあるでしょうか？

この記事では、↓このようなUIをCSSだけで作成する方法と`Image Compare Viewer`を使う方法を紹介します。


## CSSだけで実装する場合
:::note warn
CSSで実装する場合は、CSS プロパティの`resize`を使うため、
before と afterを切り替えるためのドラックするUIが少し扱いづらいですがご了承ください。
:::

### 基本的な書き方
以下のようなHTMLに対してスタイルを当てる前提で進めます。

“`HTML

人事のおじさんプログラミングを学ぶ Day7「while文を使って繰り返す」

書籍『確かな力が身につくJavaScript「超」入門 第2版』に沿って、
While文を使って繰り返してみた。

ウェブデザイン技能検定2級　令和4年度　対策　実技

実技の対策はYoutubeに参考の動画がありました。
学科の対策は公式の過去問やGoogle検索で見つけたもので学習。

GoogleAppsScriptは何で書くべきか(公式orローカル / JSorTS )

# 初めに

ライブラリ等でメリットデメリットが大きく変わってくるため、
大雑把になっています

# GoogleAppsScriptを書く手段

– 公式サイトで作成する
– 公式エディタ([https://script.google.com](https://script.google.com))でJavaScriptで記載する
– ローカルで作成する(EditorはVSCode)
– JavaScriptで記載し、そのままclaspでpushする
– TypeScriptで記載し、そのままclaspでpushする(自動でトランスパイルされる)
– JavaScript/TypeScriptで記載し、webpack等を使ってビルドして、claspでpushする

# それぞれのメリット・デメリット

## 公式エディタを使って、JavaScriptを使う

### メリット

– ライブラリ,サービスの使用やデプロイを、GUIで書ける
– JSDocで型を記載できる(paramとreturnしか使えない)
– 一応Gitが使える(拡張機能をインストー

JavaScript基礎知識の拾い集め

# 初めに
何か月もかけてやっと一通り基礎を勉強してきました。残りの断片的な知識は一つの文章にまとめたいと思います。

# Precedence & Associativity
優先度と結合性、[Operator precedence](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)。
（日本語版と英語版の順位は違う。ここでは英語版に準ずる）
**優先度：優先順位の大きいほうから実行する。
結合性：優先順位が同じである場合は実行の方向性を決める。**

“`jsx
let a = 5 * 2 + 6 / 3 – 2
console.log(a) // 10
// Addition (+): 11, left-to-right
// Subtraction (-): 11, left-to-right
// Multiplication (*): 12, left-to-right
// Division (/): 12, left-to-r

.find()メソッドのメソッドチェーンは便利だった

# 概要
再生リストをDOMアクセスする場合、リストの構造がネスト構造になっていて複雑な場合、深いところにあるセレクターをチェックしたい場合、どうしたらいいか悩んでいたところ、find()メソッドが使えることに気がつきました。このfind()メソッドをメソッドチェーンでつなげて行くと簡単に深いところにある、セレクターをチェックできました。

# 事例
「なつかしの曲(ポータル)」サイトの王冠再生ボタンでそのテクニックを使用しました。

“`
//王冠を再生
//
var crown_list=[];
//王冠再生ボタンのクリックイベント処理
//
$(document).on(“click”,”#crown_play”,function (e){
crown_list = [];
//再生リストのタグを順にチェックして、class=”.goodness”
//要素の中に

javascript using formcontext in dynamics 365

function OnLoad() {
// グローバルコンテキストのユーザ設定情報を取得
var userSettings = Xrm.Utility.getGlobalContext().userSettings;
// ユーザ名を取得して表示
var userName = document.getElementById(“userName”);
userName.innerHTML = “ユーザ名は ” + userSettings.userName + ” です。”;
// ユーザIDを取得して表示
var userId = document.getElementById(“userId”);
userId.innerHTML = “ユーザIDは ” + userSettings.userId + ” です。”;
}

/*
* ログインユーザー情報取得
*
*/
function GetUserInfo() {
debugger;
var result = new Array();
va

【JavaScript】querySelectorでスペースを含むクラス名を指定する場合

## 書き方

“`
// 取得対象

// 取得できない
let element = document.querySelector(‘.aaa bbb ccc’)

// 取得できる
let element = document.querySelector(‘.aaa.bbb.ccc’)
“`

クラス名がスペースで区切られている場合、HTML要素はclass属性を複数持っている、ということ。
上記の場合、以下の意味となる。

×「`aaa bbb ccc`クラス」
○「`aaa`クラス、かつ`bbb`クラス、かつ`ccc`クラス」

## 参考
https://web-camp.io/magazine/archives/87658
https://www.web-dev-qa-db-ja.com/ja/javascript/documentqueryselector%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E3%80%81%E3%82%B9%E3%83%9A%E3%83%BC%

kintone で条件付バリデーション

## kintone とは？

– kintone については[こちら](https://kintone.cybozu.co.jp/what_is_kintone/)に詳しく掲載されていますのでご確認下さい

## 条件付バリデーションとは何か？
– 何らかの条件が成り立つ場合のみ、値が妥当かどうか検証する仕組み
– ここで言う条件付バリデーションとは特定のフィールド内で特定の値を持つレコード間でのみ重複禁止を指す
– 具体的には下記の従業員DBの雇用状態が **在職中**、**休職中** のレコード間ではニックネームの重複を禁止する
– 例: id が **1** のレコードの場合
– ニックネームを **せと**、**ぼんこつ** に変更することはできない
– ニックネームを **あんず**、**ほんだ** に変更することはできる(**退職済**のため)

## 従業員DB
– ()内は[フィールドコード](https://jp.cybozu.help/k/ja/user/app_settings/form/autocalc/fieldcode.

【JavaScript】ハイフンで区切られた２つの日付から、それらの間の日付を〇月〇日（〇曜日）の形に直した配列を生成する

# 概要

　ハイフンで区切られた２つの日付（”2022-01-01″）と（”2022-01-31″）の間の日付を〇月〇日（〇曜日）の形に直して配列を生成する方法。
MUIのDatePickerなどで日付を取得するとハイフン区切りになり、それを変換する関数を書いたのでメモしておこうと思います。

### **➀２つのDateオブジェクトの間の日付を取得し、配列に保存**
### **➁配列に保存したDateオブジェクトを〇月〇日（〇曜日）の形に直して配列に保存**

の順番で説明していきます。

# 全体
“`

// ➀二つのDateオブジェクトの間の日付を取得し、配列に保存
const getDatesBetweenDates = (startDate, endDate) => { // dateオブジェクトの開始日と終了日を引数に取る

const theDate = new Date(startDate)

while (theDate <= endDate) { // 開始日から最終日まで開始日に+1日していきそれを配列に入れていく dates = [.

マンデルブロ集合をJavaScriptで高速に描く。

# はじめに


このサンプルのマンデルブロ集合の画像は複素平面上の実部-2から1,虚部-1から1くらいのエリアを描いたものです。

マンデルブロ集合のさまざまな部分をズームしていけるようなサイトを作ったので、よかったら参照してください。

https://slip.828.tokyo/Mandelbrot.html


マンデルブロ集合そのものについては他所でたくさん説明があるので詳細はWikipediaなどを参照していただくとして、ここでは実装に必要な

[解説]ドットインストールのJavaScriptミニアプリが意外に手強かった_vol1[基礎]

# はじめに
本記事では __ドットインストール__ さんの __JavaScriptでミニアプリを作ってみよう__ の解説をしています。
1年ぶりくらいにやってみたら意外と面白いなーと思ったので載せます。
意外と苦戦したんで、間違っている箇所（特にスプレッド構文あたりが怪しい）、生ぬるい目で見守ってやってください。気づいたら、適宜記述を訂正していきます！

## この記事の対象読者様
・ドットインストールをやってる、やったことのある人、該当の動画を見たことのある人
・Jsの練習をしたい人
・Jsの基礎を実践でどのように使えるのか、基礎文法と照らし合わせながら学びたい人。

## ３択クイズアプリの制作における要件とヒント

クイズを作成する
ー クイズ配列をオブジェクトで作成(初期設定)

シャッフル関数の実装
ー フィッシャー・ィエ〜ツさんのアルゴリズムで実装
ーー 乱数の生成と分割代入を使います
ーー その後スプレッド構文で、参照渡しのようなことをして新しい配列を作成します。

解答(li)をクリックした時の処理
ー　正誤判定をする関数を実行。
ーー　正誤に応じて背景色が変化する

Reactでアナログゲームつくってみた【Slipe】

# 序
会社の事業部でReact強化しよう！みたいな話があり、アプリを作ってみました。
初学者なので、Reactいろいろ触りたいなーと思いつつ、テキトーなアプリでお茶を濁すのも…とか考えながらいろいろ入れられそうなゲームを作ってみました。

github pagesで公開中

https://monaka-13.github.io/slipe-react/

##slipe
今回はアナログゲームのslipeを作ってみました。最初はチェスを作ろうと思っていたのですが、キャスリングとかアンパッサンとかプロモーションとか無理すぎて頓挫。
そこまで壮大じゃないけど、特殊なコマ移動とチェスみたいな戦略性のあるslipeというゲームに白羽の矢が立った次第です。

ルール
https://bodoge.org/2020/01/01/slipe/

# 実装
今回reactで使った主な技術です
## コンポーネント構造
![components.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/741385/153f642

Reactでセレクトボックスを実装する方法【コピペ→書き換えるだけ】

## 序
Reactでセレクトボックスを実装する方法です。
調べて時間がかかったので、自分用も兼ねて記事にしました。

## サンプルコード(そのままコピペ)
“`react:App.js
export const App = (props) => {
const arr = [“りんご”,”みかん”,”ぶどう”,”いちご”]
let txt = “みかん”
　function method(data){
txt = data
}
return (
<>
method(e.target.value)}
value=”0″>
{arr().map((data, index) => {
return{index + 1}. {data};
//選択肢はこんなかんじ
// 1.りんご
// 2.みかん

元記事を表示

javascriptをudemyで学んでみた（関数とオブジェクト編）

udemyの[ガチで学びたい人のためのJavascriptメカニズム](https://www.udemy.com/course/javascript-essence )という講座を受講しまして、
自分の言葉でまとめたいなと思ったのでこの記事を書きました。

最近エンジニアになったばかりですので暖かい目で見ていただければと思います

# jsを学ぶ理由
シンプルに「Reactを使ってみたいなー」と思ったからです
しかし、どうやらReactを使うにはjsの基礎がわかっていないと話にならんとのことだったので、とりあえず素のjsしっかり学ぼうと思いました。教材に触れる前の自分のレベル感としては「プログラミングの基礎はある程度わかる」「DOM操作も何となくわかる」「非同期処理はJQueryを使ってならやったことある」です

ちなみに知らなかった用語としては「スコープ」「クロージャー」「モジュール」などです
（スコープに関しては今まで意識して使ったことがないというのが正しいかもです）

# Reactに必要な知識
[こちら](https://dev-k.hatenablog.com/entry/

元記事を表示

React Query(v4)使ってみたので、使い方をまとめてみた

# TL;DR

– VercelのSWRとReduxをまとめたような機能を持つライブラリー
– fetchのコントロール、データの整形、オフライン対応等が含まれている
– 強力なdevtoolあり

# 概要

[公式ドキュメント](https://tanstack.com/query/v4/docs/overview)

[チュートリアル](https://tkdodo.eu/blog/practical-react-query)

作成物：[レポジトリ](https://github.com/rowaxl/react-query-tutorial)

上記チュートリアルの題材に沿って、基本的なTODOアプリを作ってみたので、使い方と特徴をまとめたく思います。

## Installation

“`bash
$ npm install @tanstack/react-query
$ yarn add @tanstack/react-query
“`

アプリケーショントップで、プロバイダーを用意

“`jsx
// index.tsx

import {
QueryC

元記事を表示

【kintone x OCR】～OCR結果確認編～　kintoneのOCRプラグインを開発する⑦【GCP】

# 最終目標
kintone上でこの↓画像（請求書）をOCR処理し、請求番号・支払期限・振込先・請求元・明細（品名・数量・・・のテーブル部分）の値を取得することを最終目標とします。

尚、説明は後回しで「まず試したい」という方は、[プラグイン（テンプレート）のダウンロード](#プラグインテンプレートのダウンロード)からkintone用のプラグインとテンプレートを試用（1か月間）頂けます。

### 今回（OCR結果確認編）の目標
前回（⑥）の通り、最終目標については、達成出来ました↓。

ただし、現

元記事を表示

【kintone x OCR】～マスター置換編～　kintoneのOCRプラグインを開発する⑥【GCP】

# 最終目標
kintone上でこの↓画像（請求書）をOCR処理し、請求番号・支払期限・振込先・請求元・明細（品名・数量・・・のテーブル部分）の値を取得することを最終目標とします。

尚、説明は後回しで「まず試したい」という方は、[プラグイン（テンプレート）のダウンロード](#プラグインテンプレートのダウンロード)からkintone用のプラグインとテンプレートを試用（1か月間）頂けます。

### 今回（マスター置換編）の目標
前回（⑤）の最後で今後の課題とした、「品名」列の値を取得したいと思います。
![KEYWORZONE正規表現文字置換.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/543387/5cfccd47-abb2-d7df-d10c-bee

元記事を表示

【kintone x OCR】～文字列置換編～　kintoneのOCRプラグインを開発する⑤【GCP】

# 最終目標
kintone上でこの↓画像（請求書）をOCR処理し、請求番号・支払期限・振込先・請求元・明細（品名・数量・・・のテーブル部分）の値を取得することを最終目標とします。

尚、説明は後回しで「まず試したい」という方は、[プラグイン（テンプレート）のダウンロード](#プラグインテンプレートのダウンロード)からkintone用のプラグインとテンプレートを試用（1か月間）頂けます。

### 今回（文字列置換編）の目標
前回（④）の最後で今後の課題とした、文字単位での認識違いの対策を説明したいと思います。対象となるのは↓の「単価」列の5行目で100を10Dと認識違いしていますので、100と取得できるようにしたいと思います。
![KEYWORZONE正規表現.PNG](https://qiita-image-store.s3.ap-n

元記事を表示

JSの非同期処理[Promise/async/await]と仲良くなる

javascriptの非同期処理（Promise/async/await）仲良く出来ていますか？
自分は、結構苦戦していました。
非同期処理は、プログラミングをみっちり構造的に理解している人ほど、罠に陥りやすいんじゃないかと思っています。
特に、構造化プログラミングを信奉していてフローチャート的に考える習慣のある人は、たちまち破綻して地獄を見ます。
javascriptの場合、外部とのやり取りをしていない場合は比較的平穏にコーディングを進められるんですが、外部とのやり取り、つまりajaxリクエスト・DBへのアクセスetcを扱うようになると非同期の世界へ一気に引き摺り込まれます。
自分の場合、ajax処理なんかは従来のjsのコールバック処理で何とこなすことが出来ていたのですが、nodejsでDBやファイルを扱うようになってからハマるようになって来ました。

始終jsを使う仕事なら非同期処理などは身体に叩き込まれるんでしょうけど、使ったり使わなかったりして、その度に知識がリセットされるのも悔しいし無駄なので、自分の忘備録として用意しておきます。
場合によっては他人様にも役に立つかも知れませ

元記事を表示