f@ctor

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

JavaScript関連のことを調べてみた2023年01月17日
目次

JavaScriptの次の仕様ES2020で追加されることが決定した新機能まとめ

単なる調査結果のサイトの備忘メモ。

https://ics.media/entry/200128/

元記事を表示

JavaScript行きついた結論(2)

昨日書いた自分なりの結論の続きです。

https://qiita.com/EasyCording/items/724b69fbd7050fb86409

# 腑に落ちる
　腑に落ちるという感覚は、誰が言ったかは知らないが、実に不思議なものだ。
　だいたい「腑」なんて漢字自体が、日本人として習った覚えもなければ、漢字変換して初めて知ったぐらいだ・・・
　ちなみに意味は、納得がいく。合点がいく。ということらしい
　英語では “make sense” と言うらしい。そう言えば、GANを説明していたイアングッドフェローさんに、インド人エンジニアが説明していて、その時にこのフレーズを使っていた。最初は何か分からない感覚であったかが、ようやく自分もこの会話自体が腑に落ちたようだ・・・

# 進むべき方向性
　自分は業務でＡＩ関係をやっている。ただし、これは極々ユーザーに近い位置であり、ＩＴシステム屋さんとは、ほとんど反対方向に立っている。ここでシステム屋さんという言葉を使っているが、要するに

元記事を表示

JavaScript で Immer を使ってオブジェクトの階層が深いキーを immutable に消す（変更する）

– [Using produce | Immer](https://immerjs.github.io/immer/produce)

“`js
import produce from ‘immer’

const object = {
a: {
b: 1,
target: 2,
},
c: 3,
d: 4,
}
const newObject = produce(object, (draft) => {
delete draft.a.target
})

console.log(object)
// => { a: { b: 1, target: 2 }, c: 3, d: 4 }

console.log(newObject)
// => { a: { b: 1 }, c: 3, d: 4 }
“`

元記事を表示

PlayCanvas のシンプルな Hello World のサンプルを p5.js Web Editor上で動かしてみる

この記事の内容は、タイトルのとおり、p5.js Web Editor上で PlayCanvas のシンプルな Hello World のサンプルを動かしてみた話です。

## 余談
余談ですが、他に PixiJS・three.js と、p5.js とを組み合わせるというのを試してみたことがあります。

– [PixiJS でパーティクルを描画して p5.js で扱うための下準備（まずは独立したキャンバスでシンプルな描画から） – Qiita](https://qiita.com/youtoy/items/238a3a083eaf8cd4abf7)
– [three.js の公式サンプルを p5.js Web Editor上で扱うための下準備（独立したキャンバスでシンプルな描画から） – Qiita](https://qiita.com/youtoy/items/de72739ec1567eb37f42)

## PlayCanvas のシンプルな Hello World のサンプル
今回のメインとなる、PlayCanvas のシンプルな Hello World のサンプルについて、まず

元記事を表示

Video.js完全マニュアル part11 〜言語設定〜

# はじめに
Video.js完全マニュアルとしてVideo.jsの解説をしていくシリーズのpart2です。
Video.jsの公式のガイドである[Video.js Guides](https://videojs.com/guides)を翻訳ツールを使いながら解説していきます。

前回はPlayerのサイズを変更する方法を紹介しました。今回はPlayerで使われるテキストの言語周りの設定を変更する方法を紹介します。

前回
[Video.js完全マニュアル part10 〜Playerのサイズ設定〜
](https://qiita.com/manzoku_bukuro/items/10137f64810f0dc40543)

part1から読む人は[こちら](https://qiita.com/manzoku_bukuro/items/10137f64810f0dc40543)

# この記事の対象者
– Video.jsを利用する人
– 動画プレイヤーのUI操作をしたい人
– 動画再生関連のサービスを作りたい人

# この記事の解説する章
[Languages](https://vi

元記事を表示

AnimateCC(CreateJS)で文字をキャプチャする

文字をキャプチャして図形とかに変換したいな
って思っても、CreateJS だけではできないようで
どうやら、HTML の Canvas の getImageData() メソッドで、ImageDataオブジェクトを取得すればいいことが分かった
でも、CreateJSとどう連動したらいいの?

# 文字をキャプチャする
“`JavaScript
let w:number = Math.floor(this._myDisp.text_txt.getMeasuredWidth() + 4);
let h:number = Math.floor(this._myDisp.text_txt.getMeasuredHeight() + 4);
this._myDisp.text_txt.cache(0, 0, w, h); // 一旦キャッシュ
let canvasElement:HTMLCanvasElement = this._myDisp.text_txt.cacheCanvas; // これでいろいろできる
let context = canvasElement.getContext(

元記事を表示

【JavaScript】JavaScript ライジングスター 2022

[](https://risingstars.js.org/2022/en)

[2022](https://qiita.com/rana_kualu/items/627411dcb086669e5902) / [2021](https://qiita.com/rana_kualu/items/b23a1bccae742bd031ef) / [2020](https://qiita.com/rana_kualu/items/e8a0f8f5589ff082539d)

JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2022年に最もホットであったJavaScriptライブラリのランキングを発表しました。
選考基準は累計スター数ではなく、『2022年の一年間で増えたスターの数』です。
過去流

元記事を表示

Next.js + Supabase | TTFB(Waiting for server response)を早めるTIPS

-　getServersideProps(SSR) → getStaticProps(SSG)を検討する
-　getServersidePropsでcacheを活用する
-　ファーストビューで画面外のデータはuseEffectやuseSWR、react/supspenseで取得をする
-　supabaseのjoin tableを活用して通信の回数を極力減らす

元記事を表示

React、日時を表示する

Reactで現在の日時を表示する機能を実装したのでまとめます。

Javascriptで使用できるDateオブジェクトが持つ値から日付と時刻の値を
それぞれ取得するメソッドを使用いたします。

“`
//年の値を取得する
getFullYear

//月の値を取得する
getMonth

// 日の値を取得する
getDate

//曜日の値を取得する
getDay

//時の値を取得する
getHours

//分の値を取得する
getMinutes

//秒の値を取得する
getSeconds

//ミリ秒の値を取得する
getMilliseconds
“`

①useEffectで現在の日時を取得する。

②、①で取得した値をuseStateに保管する。

③、②で保管した日時を出力する。

実際のコード
“`
import React, {useEffect, useState} from “react”;
import Dropdown from “@/Components/Navgation/Dropdown”;

export const MCNavi

元記事を表示

【JavaScript】ハンバーガーメニューの作成

# 1日1UI投稿

かなり時間が空きましたが、本日久しぶりに投稿します。

## ハンバーガーメニュー

最初のころに作った[ハンバーガーメニュー](https://qiita.com/ri-tama/items/134a406d510434693b0a)とは違うハンバーガーメニューを作成しました。

以下完成品です。

See the Pen 【React】フォームは状態管理せずに実装できるよ

こんにちは。[ぬこすけ](https://twitter.com/nuko_suke_dev)です。

皆さんは React でフォームをライブラリを使わずに実装する時にどう実装しますか？
おそらく `useState` を使いまくっているのではないかと思います。

少し上級者の方は `useReducer` を使っているかもしれません。
が、そもそも **React で状態管理することなくフォームは実装できます** 。

実際にコードをお見せしながら紹介しましょう。

※記事の最後に紹介した全てのコード例を CodeSandbox に載せています。

## ありがちな例

コードをお見せする前に、まずはありがちな例から見たいと思います。
（結論のコードだけ知りたい方は読み飛ばして OK です）

簡易的なフォームの例です。

![スクリーンショット 2023-01-13 10.40.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/164159/b2251feb-92de-e6a3-acfe-3cb

元記事を表示

高卒エンジニアがkintoneのプラグイン開発を超～楽にするソフト作った

# どんなん作ってん
AgeAgePluginというソフトを作りました

https://github.com/nishikawa-r/AgeAgePlugin

内容としては
– kintoneのプラグインを一発でパッケージ化&デプロイ
– カスタマイズファイルを一発でローカルからアップロードできる
# なぜ作ったのか
公式からとても優秀なパッケージやプラグインが輩出されていたのですが、案件で実際に開発を行っていて下記の点に不満があったため

– プラグインをパッケージ化/デプロイする際にコマンドを長く打つ必要があったため(ディレクトリの指定や監視オプションの指定/URL/ID/パスワード等)

– カスタマイズファイルをkintone上で修正できる「JSEdit」という神プラグインがあるが、Gitでソースコードの管理をする以上ローカルから変更しなければならず、そのたびにアップロードするのが大変なこと

2つ目のものは何とか耐えられたのですが1つ目のコマンドが長い部分に関しては、複数の環境の情報を覚えている必要があり自分の記憶力的にもこのまま開発していくのは無理だなと思った。

#

元記事を表示

【jQuery】ラジオボタンのvalue値を取得して開閉するアコーディオンを実装

こんにちは。E-kan株式会社の岡田です。

先日、ラジオボタンのvalue値を取得して開閉するアコーディオンを実装したので備忘録。

#### やりたいこと
– すでにあるラジオボタンに項目「ラジオボタン03」を追加したい
– 「ラジオボタン03」を選択した場合はテキスト入力欄を表示したい
– テキスト入力欄は「ラジオボタン03」選択時のみ表示するようにしたい

↓出来上がったもの。必要な部分のみを書き出すと、こんな感じです。

“`html

元記事を表示

小道具：rubyタグを使って文字の上にコードを出力

入力された文字の上に、rubyタグを使って文字コードを表示します。

※合字などは対応してないので分解されます

![スクリーンショット.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/226677/209b276c-606e-8c35-09fc-5d9976f2ea81.png)

“`html:unicode-point.html




Unicode コードポイント表示

入
力

Javascript

“`js
// returnがなくても返るケース
const hoge = () => ({a:1, b:2});

// returnが必要なケース
const fuga = () => {
const obj = {a:1, b:2};
return obj;
}
“`
この違いは、式の返り値がどうなっているかの違いです！
iTerm上だと、

“`js
> {a:1, b:2}
{a:1, b:2}
> const obj = {a:1, b:2}
undefined
“`

こんな感じになると思うのですが、変数定義の返り値はundefinedなので2文以上の場合は基本returnが必要になる。

参考：https://iwb.jp/javascript-arrow-function-omits-return-tips/

paizaラーニング レベルアップ問題集 スタック・キューメニュー JavaScript 逆ポーランド記法

逆ポーランド記法 (paizaランク B 相当)

https://paiza.jp/works/mondai/stack_queue/stack_queue__practice_step3

# 解答例
数字はスタックにためます。記号が来たら、スタックの末尾c2と末尾の隣c1の計算をします。計算はc1-c2の形式です。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const [N] = lines[0].split(” “).map(Number);
const A = lines[1].split(” “);//記号があるので文字列

let stack = [];
//Aの先頭から計算する
for (let i = 0; i < N; i++) { if (A[i] === "+") { let c2 = Number(stack.pop());

【Node.js】Stripeライブラリの入出力がsnake_caseになっているのをどうにかしたい

## はじめに

Node.jsでStripeを操作する際には、[Stripe Node.js Library](https://github.com/stripe/stripe-node)を利用する事になる。ただ、このライブラリのインターフェースはsnake_caseであり、JavaScriptのcameCaseと乖離があり利用しにくいと感じていた。

そこで今回は、インターフェース（入出力）をcameCaseで行えるようにするために、ライブラリに対しカスタムの拡張を行う実装をやってみたいと思う。

ソースコード全体は以下。

https://github.com/yuta-katayama-23/node-express/commit/3f76584935654a0ca472a7d8f8f42fbfab9dca57

## 実際にやってみる

“`js
import Stripe from ‘stripe’;
import { strict as assert } from ‘assert’;
import snakecaseKeys from ‘snakecase-keys’;

paizaラーニング レベルアップ問題集 スタック・キューメニュー JavaScript 最大の区間和

最大の区間和 (paizaランク B 相当)

https://paiza.jp/works/mondai/stack_queue/stack_queue__practice_step2

# 解答例
タイムオーバーにならないように、区間をキューとして考えます。まず、先頭の区間和を求めます。次の区間和を計算するときに、先頭の区間から、先頭の要素をキューから出して、X+1目の要素をキューに入れてから、区間和を求めます。すなわち、`次の区間和＝前の区間和ー前の区間の先頭の要素＋次の区間の末尾の要素`です。すると、計算の手間が、通常ならばX回足すところ、２回で済みます。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const [N, X] = lines[0].split(” “).map(Number);
const A = lines[1].split(” “).m

paizaラーニング レベルアップ問題集 スタック・キューメニュー JavaScript 2 つのキュー

2 つのキュー (paizaランク C 相当)

https://paiza.jp/works/mondai/stack_queue/stack_queue__practice_step1

# 解答例
query,K,Xを文字列のまま処理していることに注意。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const [Q] = lines[0].split(” “).map(Number);

//2 つのキューを用意
let [queue1, queue2] = [[], []];

//クエリを順に処理
for (let i = 1; i <= Q; i++) { const [query, K, X] = lines[i].split(" ");//文字列のまま if (query === "1") {//文字列 if (K === "1")

OTHERカテゴリの最新記事