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

React Three Fiber + TypeScript: 3次元空間で立方体を回してみる

[React Three Fiber](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction)は、Reactのコンポーネントで[three.js](https://threejs.org/)の3次元空間を組み立てて、3Dオブジェクトが操作できるライブラリです。Reactの宣言的な記述で、WebGLによる3D表現が簡単にできます。採り上げるのは、3次元空間で立方体を回してみるというつぎのような作例です。カメラはマウスでインタラクティブに操作できます。

#### 本稿の作例

**マウスによるカメラ操作**
* ドラッグ: 立方体の中心から一定の距離で旋回する。
* 右ボタンドラッグ: カメラの方向は保ったまま、フレーミングを水平・垂直に移動させる。
* ホイール: カメラの方向に、映像を拡大・縮小させる。

エンジニア向けチートシート集

## はじめに

今回はエンジニア向けのチートシート集のまとめを紹介していきます。

チートシートを利用することで

– 作業効率が上がる
– 概要が掴みやすい
– 学習にもなる

といった恩恵が得られます。

ただし前提として毎回コードを書くたびに「**チートシート集でカンニングすればええや**」と思うのではなく「**最初はチートシートでカンニングしつつ徐々に体で覚えていく**」ことを意識して使うことが大切です。

最終的にはチートシートは見ずに「**自分の使える技術**」として定着させるための道具だと思って使ってください。

## この記事の対象者

– エンジニア初心者~中級者
– 作業効率を上げたい人
– コードを書くテクニックを知りたい人

## [VsCodeチートシート](https://camo.qiitausercontent.com/8e7b0b88be526969f856b75f97e05b23516f0d72/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732

Google Spreadsheetで西暦を和暦にカンタンに変換する関数 (DateTimeFormatを利用)

この投稿では、Google Spreadsheetで、西暦の日付を和暦の年に変換する関数を紹介します。

## Google Spreadsheetには和暦を表示する書式がない

Google Spreadsheetは「2022/08/04」のような日付を入力すると、日付フォーマットとしてあつかうことができます。しかし、対応しているフォーマットは西暦だけです。令和のような和暦を表示するフォーマットがありません。

Google Spreadsheetビルトインの日付関係の関数でも、和暦に変換するような関数がありません。

## 意外とめんどくさい和暦

Google Spreadsheetで、西暦の日付から和暦に変換するには、式を編む方法もあります。

しかし、西暦の年数と和暦の年数は必ずしも一致しないので、式でやってしまうと複雑化するのが問題になります。たとえば、令和元年は2019年5月1日からです。2019年は平成31年と令和元年、どちらの可能性もあるわけです。また、平成元年や令和元年のような1年目を元年とする場合も、分岐が必要になります。こうした分岐処理を式で表現するのは、結構面

【JavaScript】初学者「正規表現の学習ってなんとなく避けてきた…」って人のために

こんにちは。masakichiです。

コードを書いていると、正規表現ってわりと出くわすけど、なんとなくで理解している方も多いのではないでしょうか？

わたしはそうでした。

しかし、さすがにいつまでもこのままではダメかなと思い、基本的なところから学習してみました。
せっかく調べたので、同じような悩みを持っている同志に向けて、記事をまとめてみました。

## 正規表現とは？
文字列内の組み合わせを照合するために用いられるパターンのことです。

例えば、`I bought an apple`という文字列から、`apple`という文字列が含まれているか確認したい場合、以下のように記述します。

“`javascript
let str = ‘I bought an apple’;
let reg = /apple/;
let result = reg.test(str);
console.log(result);
// >> true
“`

上記では、変数regにスラッシュで囲まれた`/apple/`という謎の文字列を格納しています。実はこの謎の文字列こそが、正規表現のために用いられ

Nuxt.jsでSal.jsを使う方法(裏道)

最近Nuxt.jsを使い、SPAを作り始めた者です。
そもそも、Webページ制作自体あまりしたことがなかったため、何かするたびに壁に当たり大変だったので、ここに書いて忘れないようにしたいと思います。
（他の初心者の方も参考になったら嬉しいです。）

今回は、制作しているWebページをもっとリッチな感じにしたいと思い、スクロールに連動してオブジェクトにアニメーションを付与してくれる、「Sal.js」を導入してみようとしました。
https://mciastek.github.io/sal/
（友達に教えてもらいました）

## 導入編(失敗)

まず、
“`
npm install –save sal.js
“`
をして、プラグインをインストールしてみました。
そして、
“`
npm run dev
“`
をすると
“`
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: D:\[省略]\.nuxt\client.js: Cannot read property ‘no

秋月電子通商の買い物かごに入れた商品の陳列情報を一括表示するスクリプト

# まえがき

　以前秋月電子さんにお邪魔した際、自分の買うものの陳列場所（売り場にあるのか、裏の倉庫に置かれているものなのか）を全く把握しておらず、店員さんを何度も倉庫に往復させてしまうなどという大変なご迷惑をおかけしました。

　その際の反省を活かして、また同じような陳列場所未把握の民を救うため、秋月さんのwebサイトの買い物かごとスクリプトを活用した陳列場所の簡便な把握方法をご紹介いたします。

# イメージ

> https://akizukidenshi.com/catalog/cart/cart.aspx
「通販コード」の右側が…
![スクリーンショット 2022-08-03 15.37.43.png](https://qiita-image-store.s3.ap-northeast-

javaScript_基本データ型とコンストラクタ

“`
// undefined nullの違い
typeof undefined　　// undefined
typeof null　　　　　// object
null === undefined　// false
null == undefined　　// true

// javaScriptよく使うデータ型
typeof “John” // string
typeof 3.14 // number
typeof NaN // number
typeof false // boolean
typeof [1,2,3,4] // object
typeof {name:’John’, age:34} // object
typeof new Date() // object
typeof function () {} // function
typeof myCar

Google Meet のチャット欄を Slack に自動で流す拡張機能のご紹介

# はじめに
みなさん、Google Meet は使っていますか？ リモートワークが増えオンラインミーティングサービスを使用する頻度が多くなった人も多いと思います。

Google Meet はオンラインミーティングサービスの中でも有名ですが、ミーティングが終了するとチャット欄の内容が失われてしまいます。

最近のアップデートで、ミーティングを録画するとチャット欄の内容も記録されるようになりましたが、毎回録画するのはめんどうだと思います。

そこで今回は Google Meet のチャット欄を自動的に Slack に共有する Chrome 拡張機能 **[Cuckoo](https://github.com/noraworld/cuckoo)** を紹介します。

# インストール
[Cuckoo – Google Meet チャットメッセージ記録ツール](https://chrome.google.com/webstore/detail/jgkpnadfdhhglgkimejpibhfiniemhhf?hl=ja)

# 使いかた
使いかたは簡単です。以下の手順に沿って設定を

GAS (Google Apps Script) でスタンドアロンなライブラリを作るメモ

## はじめに

GAS (Google Apps Script) でライブラリをデプロイしたときの手順をメモします。

## 参考サイト

https://developers.google.com/apps-script/guides/standalone

https://qiita.com/shikumiya_hata/items/0aed6d0c67ee365d9161

https://admin-it.xyz/gas/library-use-ownlibrary-attentions/

## 作業

### Google Drive での操作

Google Drive から Google Apps Script のプロジェクトを作成する。

<

JavaScript Text Character Splitting

JavaScript の文字列を1文字ごとに分解する際の注意です。

# はじめに

”良い天気?” を [”良”, “い”, “天”, “気”, “?”] に分解する時に、気づいた事をメモしました。

以下の解説とだいぶ重複するので、参考になるかもしれません。

– JavaScript textLength as halfWidth
– https://qiita.com/yoya/items/5da038312279f98bdd28

日本語しか考慮していないのと、本来、Unicode の”1文字”は仕様が複雑なので、ちゃんと処理したい場合は、専用ライブラリを使う方が良いでしょう。これとか。

– https://www.npmjs.com/package/graphemesplit

# text[i]

JavaScript は文字列の１つ１つの文字を配列要素として参照できます。
以下のようにして大抵の文字は１文字つづ取れます。

“`js:
const text = “良い天気?”;
const charArr = []
for (let i = 0; i < tex

Cordovaでクロスプラットフォームのアプリ開発をする①

主にWindowsの小型ノートPCを使用して、隙間時間で
クロスプラットフォームアプリケーションを開発するためのメモ（備忘録）

### 【前提条件】
– 開発環境はWindows10(11)
– Androidアプリを中心にiOSアプリも配布予定

### 【アプリの条件】
– オフラインで使用できること
– ユーザーの情報を保存できること（ローカルかサーバーかは要検討）
– iOSでも配布可能であること
– 開発原資を得る為に、最低限の課金要素（出来れば、広告でユーザーからは徴収しない）
– バージョンアップしてもデータは継続されること

### 【作りたいもの】
1. マンホールカードコレクション用アプリ
1. 御城印コレクション用アプリ
1. ビックリマンコレクション用アプリ

### 【環境構築（Windows）】
https://qiita.com/yama-take/items/8c6434efbcd4bece6310

プログラム初心者が今何を学べばいいかさっぱりわからない時に役立つサイト

独学から早２年。

何事も最初は全体像を理解したいもので、私は理解するまで約１年かかりました。

これをもっと早く知っていれば…というサイトを紹介します。

https://roadmap.sh

このサイトからまたFrontendやBackend,Pythonなどといった学習に必要なロードマップが記載してあります。

このサイトのおかげで今、何が足りていないのかの認識や、必要な知識が身につきました。

ただ、初学者が見てしまうとあまりの膨大な知識の量に絶句してしまうかもしれません。

一度で全てを理解することは困難です。地道に理解を深めていきましょう＾＾

配列にあれば削除なければ追加

### コード

“`typescript
const arr = [1,2,3,4]
const x = 5

// indexOf()による判断
const index = arr.indexOf(x);
// index < 0: なければ，追加 // index >= 0: ある，削除
index < 0 ? arr.push(x) : arr.splice(index, 1) console.log(arr) // [1,2,3,4,5] ```

ライブラリ・バンドラ・Web Componentsを使わずコンポーネント指向開発（Singleton Components v2）

（検討中につき随時更新していこうかと）
## 経緯
Javascript だけでいごくのに
なんでアレ（React）もコレ（Web Components）も覚えんといけんのか、
という勉強嫌いが高じまして。

ライブラリやバンドラ、Web Components も使わず、
コンポーネント指向で実装してみようと。

static render() 版の末尾で検討を続けているもので
https://qiita.com/_tt/items/18f682304e66a6cb8521
現状までを整理し実装してみました。

## サンプル実装
React チュートリアルを Singleton Components v2 で実装してみた

## 方法
##### 1. コンポーネント単位でファイル分割するため、エントリポイントを type=”module” とする
“`index.html