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

オブジェクトの数の数えるにはkeysメソッドを使うって知ってた？

そんなの常識でしょ。と言われちゃうかもしれません。でも、私はハマりました。

オブジェクトって配列に入っているのと、オブジェクトを含んだオブジェクトと２パターンがありますよね。
“`
colors=[
{
color: ‘#72aee6’,
name: ‘Blue 20’
},
{
color: ‘#3582c4’,
name: ‘Blue 40’
},
{
color: ‘#e65054’,
name: ‘Red 40’
},
{
color: ‘#8a2424’,
name: ‘Red 70’
},
{
color: ‘#f2d675’,
name: ‘Yellow 10’
},
{
color: ‘#bd8600’,
name: ‘Yellow 40’
}
]
“`

これはcolorsという名前の配列の中に、オブジェクトが入っています。いくつオブジェクトを含んでいますか？

そうこれは`colors.length`で６が返ってきます。

これとオブジェクト内のオブジェクトの数を返

徹底解説 – Postman 変数 (Variables)

# はじめに

こんにちは！Postmanの変数を使っていますか？
変数はとても強力な機能です。変数を理解することで、Postmanでの作業が効率的になるだけでなく、テストの柔軟性や拡張性が驚くほど向上します。変数を制すれば、Postmanを制すると言っても過言ではありません。

しかし、実際にはPostmanを使ったことがある人でも、変数の存在を知らない方や、まだ活用できていない方がいることがあります。これは非常にもったいないです。

この記事では、変数初めての人にとっても、既に使っている人にとっても、役立つようにPostmanの変数機能についてできるだけ網羅的に徹底解説したいと思います。

# 変数とは何か？

変数を使うことで、Postmanに値を保存して再利用することができます。APIテストの自動化やリクエストのパラメータ化ができ、同じリクエストを繰り返し行ったり、複数のリクエストで共通のデータを使用したりすることが容易になります。

変数は、`{{変数名}}` という形式で定義します。変数名は任意の文字列で、後で参照する際に使用されます。

# 変数の使い方

変数はクエリー

MonacaとNCMBで地図メモアプリを作る

スマートフォンと地図は相性が良いです。スマホは持ち歩いて使うのが基本ですし、位置情報などの情報も取得できます。

今回はNCMBとMonacaを使って地図上にメモできる地図メモアプリを作ります。地図はOpenStreetMapのものを利用し、タップした場所にメモと写真を残しておけるアプリです。

まず最初の記事では画面の説明とSDKの導入までを進めます。

## コードについて

今回のコードは[monaca-map-note-handson](https://github.com/NCMBMania/monaca-map-note-handson) にアップロードしてあります。実装時の参考にしてください。

## 利用技術について

今回は次のような組み合わせになっています。OpenLayersは地図ライブラリです。国土地理院APIは位置情報を住所に変換する、逆ジオコーディングに利用しています。

– Monaca
– Framework7
– OpenLayers
– 国土地理院API

## 仕様について

地図はOpenLayersを使い、OpenStreetMapを表示します

Powershell(Win11)でもbundle-analyzerを(無理やり)動かす方法

# 動かし方
“`posh
npx env-cmd -f .env.analyze next build
“`

本当はもっと効率のいいやり方や環境変数を活用する方法などはありますが、個人的にはこれが一番手っ取り早いです。

ボトルネックは早く特定したいですからね。

ちなみにNextJsのサーバーを止めないとPermittion errorになるのでお気を付けて?

ではー

JavaScriptの連想配列の要素を合計した配列を返す

次のような連想配列を１つの配列にまとめ、キーごとに要素をまとめたい場合にどうすればいいのか、少し悩んだのでその方法を残しておきます。

“`
////////////////////////
// Before
////////////////////////
facet: {
apple: {
‘1’: 10,
‘2’: 20
},
orange: {
‘1’: 30,
‘2’: 40,
‘3’: 50
}
}

////////////////////////
// After
////////////////////////
[
{
‘id’: ‘1’,
‘sum’: 40 // 10+30
},
{
‘id’: ‘2’,
‘sum’: 60 // 20+40
},
{
‘id’: ‘3’,
‘sum’: 50 // 50
}
]
“`

今回は `JavaScript` で実現するので、何かと便利な `lodash` を使います。
`_.transform(..)` を使うことで連想配列を配列に変換し、内部でキ

Three.jsで樹頂点ポイントデータをもとに森林を3Dビジュアル化してみる


demoページ

https://satoshi7190.github.io/TreeTopPoints-3Ddemo/

# はじめに
鳥取県が森林情報に関するデータを公開していました。

https://odp-pref-tottori.tori-info.co.jp/dataset/1717.html

>（本データは「[Tottori Forestory Innovation+（TFI+）](https://www.pref.tottori.lg.jp/307895.htm)」において参加者へ提供するデータのサンプルデータです。）

とのことで、どうやら森林・林業分野においての開発コンペ用のサンプルデータらしいですが、このデータの中に樹頂点ポイントデータがありました。

QGISで表示した樹頂点ポイントデータ（ヒノキ、スギ、マツ

【JavaScript】Webページ内にタブ切り替えイベントを実装してみた

# 背景
Webサイトに載せるコンテンツが1ページで収まり切れないけど、１ページ内に詰め込み過ぎるとUXが下がってしまうときがあると思います。
このような場合、ページ内に**タブ切り替え**を実装する事でUXが下がる事を防げると思いますので、今回**HTML・CSS・JavaScript**を使用し１つのWebページ内でタブ切り替えを実装してみました。

# 目標
– １つのWebページ内でのタブ切り替えを実装する。

# 成果物

# 実装コード
### ◆ HTML
タブの見出しと内容部分をそれぞれ大きく2つを作成し、JavaScriptファイルの読み込んでいます。

“`html:index.html

はじめてのReactで作るカンバン方式TODOリスト

## なぜつくるのか
SPAに可能性を感じてしまったから

## どんな可能性？
**（ソース：自分で調べた限りの浅い知識）**
SPA化されたWebサイトは、スマホから見た時にまるで純正アプリみたいな使いやすさがあるらしい
しかも、SPA化されたWebサイトにはアフィも付けれる為、広告収入も入ってくる
そして、純正アプリとは違い、プラットフォームにアプリ登録料を支払う必用がなくなる
（iOSアプリ作ってみたかったけど、このハードルで萎えた時があるから、個人的にはポイント大）

何より、実質Webサイトをブラウザから開いているだけだから、Flutterみたいな感じでクロスプラットフォーム化されていると言っても少しだけ過言なくらいだと思う

つまり、WebサイトをSPA化するとユーザーにとって使いやすくなり、なおかつ収益化も見込めると思った

## 作業開始前の自分の状態
+ マイナー言語を扱うPG（実務経験1年）
+ 余談：どのくらいマイナー？
+ A.公式が出版している言語規格がネットで調べると英語版しかなく、日本語版は有料（高い）
+ 基本的

【React Native】キーボードが表示されたときに要素を隠さないようにする方法

React Nativeでアプリを開発していると、テキスト入力時にキーボードが表示されると、そのキーボードによって画面下部の要素が隠れてしまうという問題に直面することがあります。この問題を解決するための一つの方法として、React Nativeが提供している`KeyboardAvoidingView`がありますが、その使い方が難しく、またiOSとAndroidの挙動の差異など、いくつかの問題点があります。

そこで今回は、`react-native-keyboard-aware-scroll-view`というライブラリを使った方法をご紹介します。

## 導入方法

まずはライブラリをインストールします。

“`bash
npm install react-native-keyboard-aware-scroll-view
“`

または yarn を使用している場合は

“`bash
yarn add react-native-keyboard-aware-scroll-view
“`

## 使用例

以下のように、`KeyboardAwareScrollView`コン

【初心者向け】スプレットシートと連携しGoogle Apps ScriptでtodoをSlackに発信する

お疲れ様です。
GeekSalonでWebコースのメンターをしています。

皆さんは以下の経験をしたことがあるでしょうか
**・自分のタスクが漏れてしまった**
**・タスクをメンバーに対して発信するのがめんどくさい**

**今回はこちらの悩みをGoogle Apps Script（GAS）を使って解決したいと思います！**

## 前提
今回使用するスプレットシート　
https://docs.google.com/spreadsheets/d/1WQFyls74qA0OGuBYR5zQepurGpbLoovQ79egSTUgNIA/edit#gid=578883701
　
## 今回のゴール
スプレットシートと連携しGoogle Apps ScriptでtodoをSlackに発信する

## Apps Scriptにコードを記載　

“`createSpreadSheet.gs
function nextAction() {
//①スプレットシート取得
const spreadSheet = SpreadsheetApp.openById(‘1WQFyls74qA

javascript async関数について

javascriptのasync関数についてまとめました。

以下ソースコードとなります。

async

React Hook Formを使ってバリデーションエラー時にページ上部に移動する

フォームのバリデーションエラーは、ユーザーエクスペリエンスにとって重要な要素です。ユーザーがフォームを送信しようとしたときに、何か問題があるとすぐに通知することで、問題を速やかに修正することができます。しかし、長いフォームではバリデーションエラーメッセージが見落とされることもあります。特に、エラーメッセージがページの上部にあると、ユーザーがスクロールせずには見られません。

そこで、この記事ではReact Hook FormとYupを使用して、バリデーションエラーが発生したときにページの上部に自動的にスクロールする方法を紹介します。この実装はカスタムフック内で行われ、フォームがこの挙動を共有するために再利用可能です。

## なぜそれが必要なのか？

長いフォームでは、エラーメッセージがすぐには見えない可能性があります。特に、ページの下部で「送信」ボタンを押した後、エラーメッセージがページの上部にあると、ユーザーは何が問題なのかわからないかもしれません。この問題を解決するために、バリデーションエラーが発生したときにページの上部に自動的にスクロールすると、ユーザーはすぐにエラーメッセ

CSV テキストと Markdown Table をキーボードショートカットで相互変換できる Chrome 拡張機能作ってみた

CSV テキストと Markdown Table をキーボードショートカットで相互変換できる Chrome 拡張機能作ってみました。この記事では、作ったものの仕組みや開発にあたって工夫・苦労した点などについて記します。

Chrome Web Store:

https://chrome.google.com/webstore/detail/csv2md-shortcut/fakcffdpcdlhgphdbcanlningmnoigoe

GitHub リポジトリ:

https://github.com/yamamoto-yuta/csv2md-shortcut

## 作ったもの

今回作った Chrome 拡張機能には次の機能があります:

– CSV テキストを範囲選択して Alt/Cmd + j を入力すると、 Markdown Table へ変換されたテキストがクリップボードに入る
– Markdown Table の テキストを範囲選択して Alt/Cmd + j を入力すると、 CSV 形式 へ変換されたテキストがクリップボードに入る
– それ以外で Alt/Cmd +

OutlookアドインをjavascriptとAngularとReactで試して沼ったこと

# はじめに
仕事でOutlookのアドインを試すことになったのですが、javascriptとAngularとReactの3つで試したのでそれぞれの沼ったことやすべてに共通して沼ったこと(主にmanifest.xml)を自分の備忘録用にまとめます。

# 環境
– Visual Studio Code
– Node.js v16.14.2

# 共通していること
すべてYeomanジェネレーターを使用してプロジェクトを作成しています。
ので、以下コマンドでジェネレーターをインストールする必要があります。

“`
npm install -g yo generator-office
“`

ツールの起動は以下コマンドをうつことでできます。

“`
yo office
“`
詳細な使い方は、参考にも載せているこちらの[公式ドキュメント](https://learn.microsoft.com/ja-jp/office/dev/add-ins/develop/yeoman-generator-overview)をご覧ください。

# javascript編
こちらの[公式ドキュメント

[React×TypeScript]propsでデータを渡す際の型定義について

## はじめに
propsでコンポーネントにデータを渡す際の型定義のテクニックについて書いていきます。

## 型定義について
コードを書いていきます。
“` page.tsx
type text = {
name: string;
age: number;
}

return (
<>


)
“`
まずは、親コンポーネントであるpage.tsxでpropsで送るデータの型を決めます。
そして、子コンポーネントであるPractice.tsxにpropsを渡します。
この時に、nameはstring型に、ageはnumber型に設定してるので、それ以外の型のを渡そうとすると、以下のようにエラーになります。
![スクリーンショット 2023-07-21 20.57.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2613586/3d7fdaad-633e-1955-e8b

ニコ生ゲームの個人用tipsみたいなやつ。

ツイッターでタグ付きでいつでも確認できるように書いてたけど、表示に反映されないことがあるのでこっちにメモ。

もしかしたらいつかみんなの役に立つかもしれません。

# 自分なりのカウントダウン処理

“`javascript:main.js

let CountFont = new g.DynamicFont({
game: game,
fontFamily: “Dela Gothic One”,
size: 48
});

let CountLabel = new g.Label({
scene: scene,
text: “5”,
font: CountFont,
fontSize: CountFont.size,
textColor: “black”,
anchorX :0.5,
anchorY: 0.5,
x: g.game.width/2,
y: 680,
hidden: true
});
scene.append(CountLabel);

scene.setTime

【JavaScript】【Jquery】文字列の配列をINT(数値型)にする

コード
“`javascript
process.stdin.resume();
process.stdin.setEncoding(‘utf8’);

var aaa = [‘1′,’2′,’3’].map(Number);
console.log(aaa);
“`

# 結果
“`javascript
[1,2,3]
“`

AIの力で懇親会を盛り上げる – 15周年記念イベントでの共通点探しゲーム


# 1.導入

今回は、 **AIを用いた共通点探しゲーム** の記事になります。

当社の15周年記念イベントは、従業員間の団結、働く喜び、そして仲間、お客様、パートナーへの感謝、未来への挑戦意識の共有といった価値を強調する場として設けられました。このイベントを成功させるため、多くの仲間と共にプロジェクトチームを組み、特別な瞬間を創出することに努力を注ぎました。

その結果、事前に行われたワークショップ、当日の洗練されたプレゼンテーション、そして当社の歴史を振り返る映像など、多様なプログラムが実施され、参加者には忘れられない体験を提供することができました。

私が参加した懇親会プロジェクトチームでは、 **AIを活用した「よりそう一枚岩　共通点探しゲーム

[悪用禁止] ブラウザだけでカメラ、キャプチャ、VideoやCanvasを録画してダウンロード

# TL;DR
## MediaStreamの取得
“`js
// mediaStreamの取得(video/canvas)
stream = document.querySelector(‘canvas’).captureStream()

// mediaStreamの取得(画面キャプチャー)
stream = await navigator.mediaDevices.getDisplayMedia()

// mediaStreamの取得(Webカメラ)
stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
“`

## MediaRecorderの作成
“`js
function processMediaWhenStop(stream, onStop) {
const mime = MediaRecorder.isTypeSupported(“video/webm; codecs=vp9”) ? “video/webm; codecs=vp9” : “video

React Hook FormとZodを活用した複数フィールドのバリデーションチェック

今回は、React Hook FormとZodを活用して、複数のフォームフィールドのバリデーションを効率的に行う方法について詳しく解説します。

# 開発環境
– react-hook-form: v7.15.4
– zod: v3.11.6

# はじめに
React Hook Formは、Reactでのフォームバリデーションを効率的に行うためのライブラリです。React Hook Formを使用することで、フォームフィールドの値の取得、バリデーション、エラーメッセージの表示などを簡単に実装できます。

一方、ZodはTypeScript向けのバリデーションライブラリで、簡単にバリデーションスキーマを定義でき、カスタムバリデーションもサポートしています。React Hook FormとZodを組み合わせることで、簡潔で理解しやすいコードで、複雑なバリデーションを含むフォームを実装することができます。

# Zodでの一つのフィールドのバリデーション
まず、一つのフィールドに対するバリデーションをZodを使ってどのように作成するか見てみましょう。ここでは、`firstName`というフ