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

プログラミング初心者が学ぶべき言語の選定

こんにちは。
長野県某所のA型事業所にいまは体験で入っています。
みなさん障害福祉事業ということで関心が高いようでこの前の記事もだいぶ伸びていました。

長野県のここら辺の地域はA型事業所バブルで、かなりA型事業所が乱立しています。
私の知っているところだけでも4カ所か5カ所くらいが新しく設立されているようです。
これは障害者の法定雇用率があがったことも関係しているそうです。
良い事業所があるのはありがたいことです。

事業所では私はプログラミングをしています。
目下Javascriptを覚えないといけないのですが、その次のアクションとして覚えていくべき言語を選定していました。

目的としてはアプリ開発をどの言語で行うか、ということですね。
以前の記事でSwiftやKotlinのはなしをしました。
ですが、特にKotlinは経験者向けの言語で、素人がやるにはハードルが高く、文献があまり見当たりませんでした。
Swiftのほうがまだ本などがたくさんあったので、やるならSwiftかな？とも思ったのですが、それよりも良い方法はないかな？と探してみているところです。

ちょっと前だったらXam

配列に対して`for`ループを回そうとした時にちょっと失敗した話

# はじめに

私が仕事で書いていたコードで、配列に対する`for`ループを書いた時、想定外の結果が出てしまったことについて書いていきます。

# JavaScriptの`for`文について

JavaScriptでは、`for`を用いる構文が幾つかあります。
まず、C言語等を扱ったことがある方にはお馴染みの
“`javascript
for (let index = 0; index < 20; index++) { // 処理 } ``` があります。 また、オブジェクト指向言語ではよくある、配列やオブジェクトの中身を直接用いることができる、 ```javascript for (const element of array) {// 実際は「array」のところには、配列に限らず「反復可能オブジェクト」であれば何でも入れることができる // 処理 } ``` ```javascript for (const key in object) {// keyにはオブジェクトのキーが代入される // 処理 } ``` という記法を用いることができます。 ここでは書きま

【kintone】別アプリのテーブルデータを追加、編集、削除する

## はじめに
kintoneのアプリで予約データ登録・編集時に、別アプリへデータを追加、編集、削除する仕組みを作成しました。
kintoneにはアプリアクションも存在していますが、更新は行えないため、自作しました。

## 予約管理アプリ
日付・ユーザー毎の予約を管理するアプリです。1日にユーザーが複数予約をする場合があり、その際は複数レコードに分けて登録を行います。

## 売上管理アプリ
予約日・ユーザー毎に1レコードとなる構成です。
予約管理アプリの1レコード分を売上管理アプリのテーブルに1行追加して、テーブルにてその日の売り上げリストを管理します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/700107/4bf0e2bf-308b-9

JavaScriptのクロージャについて

# 初めに
何かわかるけど実際分かっていない`Closure`、今回も自分なりに自分の理解をまとめていきたいと思います。
主な参考資料はこちらです↓
[You Don’t Know JS: Scope & Closures](https://github.com/KBPsystem777/You-Dont-Know-JS/blob/master/scope&closures/README.md#you-dont-know-js-scope–closures)

そして[TL;DRの方へ](https://qiita.com/drafts/4e1c6253c85d1093e1d4/edit#tldr)

# Closureとは
まずMDNの説明文から…
>クロージャは、組み合わされた（囲まれた）関数と、その周囲の状態（レキシカル環境）への参照の組み合わせです。言い換えれば、クロージャは内側の関数から外側の関数スコープへのアクセスを提供します。JavaScript では、関数が作成されるたびにクロージャが作成されます。
[クロージャ – JavaScript | MDN](https

googlecharts 背景色 background color の設定　

# はじめに

以下の画像のようにgooglechartsで背景色を設定したい。
けれどgooglechartsってoptionの設定がいっぱいあってどう書けばどの範囲のbackground color を指定できるのかわからない。
日本語文献も少なそうなのでまとめました。


# ソースコード
“`test.blade.php

テスト

“`

cssは以下のように設定
`

【React / Next】SWRのfetch中のチラつきをなくす

SWRのfetch中のチラつきをなくすための方法です。
公式に書かれていました。

# 環境
– React: 17.0.2
– Next: 11.1.3
– SWR: ^1.2.2

# サンプルコード
公式から拝借

“`tsx:SWR
const useUser = (id) => {
const { data, error } = useSWR(`/api/user/${id}`, fetcher)

return {
user: data,
// ここ
isLoading: !error && !data,
}
}
“`

“`tsx:component
export const Component = () => {
const { user, isLoading } = useUser(id);

if (isLoading) {
return ;
}

return (
// 省略
);
};
“`

# 参考
https://swr.vercel.app/ja/doc

Reactの

{[

,

]}

←これの違和感から脱却して一足先に幸せになりました

## はじめに
こんにちは！この記事は、Reactを使っていてずっとモヤモヤしていた、配列からmapを使って要素を挿入する方法が動く理由についてモヤモヤが解消されたので、同じ快感を共有したいと思い執筆しました。

感じていたモヤモヤとは、「mapって配列から新しい配列を生成するものであってJSX.Element[]とかは返せてもJSX.Element自体は返せなくない???」というモヤモヤです。

結論、「JSXがparseされると全部配列になってその後再帰処理で配列の各要素にちゃんと処理が施されhtmlになるから」ということで納得いったのですが、今までJSXをElement.innerHTML脳で眺めていたのでモヤモヤしていました。以下で一つずつ説明して参ります。

## Reactでmapを使うとは
配列に何か処理を加えてから配列の要素を差し込むテクニックです。
公式ドキュメントの[この辺り](https://ja.reactjs.org/docs/lists-and-keys.html)に書いてあります。
具体例として、以下のように使います。
“`jsx
const List

【React】複数useRefを指定するときのTips

## はじめに
Reactで map を用いて繰り返しDOMを生成したものに対して `useRef` を適用したいときのTipsです。

## 概要
例えば input要素をコンポーネント化してリストにし、その数が動的に変わる かつ その中のinputにアクセスしたい場合は、それぞれのコンポーネントのref指定を少し工夫をする必要があります。

今回は、
– focusボタンを押すと、最後のinput要素にフォーカスされるようにする
– 削除ボタンを押すと、対象のinput要素をクリアしてフォーカスする

というのを例に挙げて、mapでDOMを生成したものに対してそれぞれ`useRef`を適用する方法を解説します。


## 実装
上記の動きを実装すると、以下のようなコードとなります。
“`tsx
import { use

ReactもSvelteも大好きな私が思うSolidJSの良いところ

# SolidJSとは
https://www.solidjs.com/
仮想DOMを使わない、Reactライクに書ける新しいフロントエンドのフレームワークです。
同じく仮想DOMを使わないフレームワークとしてSvelteがありますが、Svelteと違ってReactと近い書き方で記述できるのが特徴です。
今回はReactもSvelteもがっつり使っている私が思うSolidJSの良いところ・もうちょっと改善してほしいところを挙げていきます。

## SolidJSの良いところ
### 高パフォーマンス
SolidJSの最大のポイントは仮想DOMを使わずに直接DOMを更新することで高パフォーマンスを発揮することです。
Svelteと同様にコンパイル時点で、このステートが更新されたらこのDOMを更新するというのを紐づけることで仮想DOMいらずにReactのようなアプリケーションを作ることが出来ます。
公式にパフォーマンス比較の画像が載っていますが、Vanillaとほぼ変わらないパフォーマンスが出るそうです。（Svelteよりも高速）
![image.png](https://qiita-im

【はじめてのThree.js】アップロード画像をジオメトリのテクスチャにする

Three.jsとは、手軽に3Dコンテンツを制作できる商用利用可能なJavaScriptライブラリです。

って書いてありました。なんかすごそうです。

canvasの使い方すら知らない自分でも手軽にできるのか気になったので、
ユーザーがアップロードした画像をThree.jsで3Dな感じで動かしてみようと思います。

## コード

“`html