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

【Qiitaアナリティクス】自分の記事がどれだけ伸びているか見える化するスプレッドシートを作りました ?

# ? 作ったもの

## Qiitaアナリティクス
自分が Qiita に投稿した記事について、
– view 数
– LGTM 数
– ストック数

の推移を時系列で見ることができるスプレッドシート (**Qiitaアナリティクス**) を作りました！

テンプレートにして公開しているので
**今すぐ誰でも**、使い始めることができます！?‍♂️

▶︎▶︎▶︎ [**Qiitaアナリティクス テンプレート**](https://docs.google.com/spreadsheets/d/1QpVwx8hHm-JJwjtdC1_Lws9sxk8Y6I3PNHe2mfBLMok/edit#gid=279393869) ◀︎◀︎◀︎

:::note info
使い始め方を知りたい方はこちら
→ [? 使い始めるための準備](#-使い始めるための準備)
:::

# ?‍♂️ 何ができるのか
大きく以下 3つ です。
– [記事全体としてどのくらい伸びているのか見られる](#記事全体としてどのくらい伸びているのか見られる)
– [各個別の記事についてどのくらい伸びているのか見

7/25 初めてのプログラミング

目標：Javascriptでシューティングゲーム制作する
⬜️事前知識
・HTML(Canvas)とは
・Javascript基礎知識
DOM操作
DOMでHTML内のオブジェクトや要素にアクセスすることで
機能追加してリアルタイムで確認することができる
・補正
DOM（Document Object Model）を使用して、HTML内のオブジェクトや要素にアクセスすることで、機能を追加し、リアルタイムで結果を確認することが可能です。

DOMは、HTML文書をツリー構造として表現する方法です。各HTML要素は、DOM内でノード（Node）として表されます。JavaScriptを使用してDOMにアクセスすることで、HTML要素の内容やスタイル、イベントなどを動的に変更することができます。

定数
const:キーワードを使って宣言する、定数を使用すると、その値が意図せず変更されることを防止
再宣言できないようにすること！

変数
let:キーワードを使って宣言します。任意のタイミングで変更できる。
現在のJavascrptの推奨される方法です。

私はロボットでありません(reCAPTCHA)のレイアウトのものを作成「ネタ枠」

はじめに

最近暇だったのでインターネットでよく見るあなたはロボットではありませんを自作したと思いネタで作成した。この本のネタはGoogleが提供しているreCAPTCHAというものである。以下のコードを用いることで誰でもあなたはロボットではありませんということを改造して遊べる。
完成系URL

カスタムする際の変更点

HTML

`Javascript
`const ans=[“1,1″,”1,2″,”1,3″,”2,1″,”2,2”,

JavaScriptで正確な消費税の計算

## 前提

decimal.jsを使います。
npm, cdnお好きな方法でダウンロードしてください。

https://www.npmjs.com/package/decimal.js

https://cdnjs.com/libraries/decimal.js

なお、私はChromeで動作確認しています。

## 結論

“`js
function strPriceInclTax(strPrice, strTaxRate = “1.08”) {
return (new Decimal(strPrice)).times(new Decimal(strTaxRate)).floor().toString();
}

strPriceInclTax(“100”); // “108”
strPriceInclTax(“123456789”); // “133333332”
“`

切り捨てではなく四捨五入したい場合はfloorをroundに、切り上げたい場合はceilにしてください。

終わり。以下は読みたい人だけ。

## 数値を文字列で扱っている理由

数値を文字列

Oracle Database 23cで追加されたMLE JavaScriptにおけるJSONデータ型を扱う機能を試してみた

Oracle Database 23cではMultilingual Engine(以下MLE)のJavaScriptに関する機能が大幅に強化されています。
21cでもJavaScriptをOracle Database上で動かす機能はありましたが、23cではさらに使い勝手が良くなっています。
21cではアドホックな形でしか使えず、再利用するためにコードを保存しておく機能がありませんでした。
23cでは一度実装したコードをスキーマ・オブジェクトとして保存し、任意のタイミングで呼び出したり、他のコードへimportできるようになっています。

本記事ではやや応用的な内容を扱いますが、MLEを使う上での第一歩に関しては以下が参考になります。
+ [オラクルエンジニア通信 – Oracle Database 23c Free – Developer ReleaseにおけるJavaScriptの概要](https://blogs.oracle.com/oracle4engineer/post/ja-intro-javascript-db23c-free)
+ [オラクルエンジニア通信 – Ora

useContextについての学習メモ

前回はuseReducerについて書きましたが、今回はuseContextについての備忘録です。

https://qiita.com/makoto-ogata@github/items/132f0a6b8b3707d90c13

# useContextとは

通常propsを渡す歳に、親から子、子から孫みたいなコンポーネントツリーをバケツリレーで渡すのですが、useContextを使用すれば親から直接孫へpropsを渡すことができます。

## 使い方

以下の様なディレクトリ構造があるとします。
“`
.
├── App.jsx
└── components
   ├── Child.jsx
  └── Grandchild.jsx

“`

まず親要素に`createContext`で関数を作成します。

“`App.jsx
import { createContext } from “react” // インポートでcreateContextを読み込む
import { Child } from “./component/Child”;

export const

ITエンジニアなのにまだ投資やってないの？ChatGPTでクオンツシステム作って儲けようぜpart3

## 前回まで
[ITエンジニアなのにまだ投資やってないの？ITエンジニアならChatGPTでクオンツシステム作って儲けようぜ](https://qiita.com/kazukichi/items/fa6433c3d0115c2b627b)
[ITエンジニアなのにまだ投資やってないの？ITエンジニアならChatGPTでクオンツシステム作って儲けようぜpart2](https://qiita.com/kazukichi/items/b211fca9c414aeff0e92)

## ネトフリは面白い
僕はネトフリのヘビーユーザーなんですが、投資系にも
リーマンショックまでの経緯と仕組みを実録インタビューで振り返る「インサイドジョブ」や

AIテック系の話で、チェスは機械には勝てないと言われてAIが勝ち、「人間の高度な知的能力でしか勝てない」と言った囲碁の世界王者に勝ち、今では7、8年も訓練を積んでようやくなる戦闘機のエースパイロットにも勝ち、AIの実用速度の高さをドキュメントした「アンノウン」なんかも面白いし勉強になります。

## 投資思考では技術力UPは悪手
投資思考って事業でも人生

React Nativeでコンポーネントの位置を取得する方法と注意点

# はじめに

React Nativeは、クロスプラットフォームのモバイルアプリケーション開発フレームワークで、JavaScriptとReactの力を活用してiOSとAndroidのアプリケーションを開発することができます。この記事では、React Nativeでコンポーネントの画面上部と左側からの位置を取得する方法とその際の注意点について詳しく解説します。

# コンポーネントの位置取得方法

React Nativeでは、コンポーネントの参照（ref）を利用して `measure` というメソッドを使い、コンポーネントの画面上部と左側からの位置を取得することができます。具体的なコードは以下の通りです：

“`jsx
import React, { useRef } from ‘react’;
import { View, Button } from ‘react-native’;

const MyComponent = () => {
const myRef = useRef(null);

const getPosition = () => {
myRef

スプリント0

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

yarn.lock

## yarn.lock

**yarnが生成するファイル**
yarn : JavaScriptのパッケージ管理ツール(node package managerと同様)
→プロジェクトで使用される依存関係のバージョンを固定するために使用

### yarn lockファイル

:::note
– **特定のプロジェクトで使用される依存関係のバージョンを確実にするために作成**
プロジェクトで使用される各パッケージの正確なバージョン情報が含まれている
→**プロジェクトメンバーがインストールしたバージョンがそれぞれ異なることを防げる**
:::

– **yarn installコマンドを実行する場合**
→yarn lockファイルを参照し、指定されたバージョンのパッケージがインストールされる

– **プロジェクトのルートディレクトリにあることが多い**
プロジェクトをGitなどのバージョン管理システムで共有する場合
→yarn lockファイルを含めると、他の開発者が同じ依存関係を持つ状態で開発できる

## yarn.lockファイルの例

“`json
“lodash”:

【ほぼ、そのまま使えるコード配布中】Googleアナリティクスの実績をスプレッドシートへ自動で転記する方法

## Apps Scriptとは？

Apps Scriptとは、Googleが提供するプログラム言語で、javascriptをベースに作られています。

GmailやGoogleドライブなど、Googleのサービスと連携して何かを行うWebサービスやアプリをつくることができます。


### アナリティクスと組み合わせて、何かできそう！
Googleアナリティクスの分析結果をレポート化して、毎日自動で配信する方法を、下記の記事で紹介しました。

【テンプレート配布中】Googleアナリティクスの分析結果を自動で出力する方法

※ここで紹介しているレポートは、テンプレートも配布中です。

このレポート、めちゃくちゃ見やすくて本当に良いものなのですが、１つだけ不得意なことがあります。

それは…「データのストック（蓄積）には不向きなこと」。

つま

Vue + Vite で既存システムの各ページに部分的に配置するためのスクリプトを生成する

# はじめに

既存のシステムがある状態で、一部のページのみ動作が複雑なため Vue を採用したい。
この用途の場合、SPA として構築するのではなく、導入するそれぞれのページごとにエントリーポイントが存在することが望ましい。

以下のような記事も見つかったが、ここで紹介されている [Vue CLI は既にメンテナンスモード](https://cli.vuejs.org/) であり、最新の Vue を導入すると CLI 用のツールとして Vite が入ってくる。

https://qiita.com/kamicop/items/c5c0917ed226234ee288

そこで、上記記事のように複数エントリーポイントを持つ Vue プロジェクトを Vite ではどのように作成するのかをまとめる。

# プロジェクトの初期設定とバージョンなど

公式に倣ってインストール。 インストールできたバージョンも表示。
注意点としてはルーティングは別システムでの管理を行うため、Vue Router をインストールしないこと。

https://ja.vuejs.org/guide/quick-s

アイコンフォントならPhosphor Iconsがおすすめ

Webサイトを作る際に、気軽にアイコンフォントを導入したいときがあるかと思います。

そういったとき、最近はPhosphor Iconsを気にって使っているのですが、
誰も話題に挙げていないので、他のアイコンフォントと比較しながら推していきたいと思います。

# Font Awesomeじゃダメな理由

https://fontawesome.com/

**有料だから** です。

無料部分もありますが、検索して「これ使いたい！」と思ったものが有料アイコンだったときにとても悔しい思いをします。

もちろん予算があるなら種類も豊富なのでぜひ買ってあげてほしいですが、気軽に使うには向きません。

# Google Material Iconsじゃダメな理由

https://fonts.google.com/icons

Google Material Iconsは素晴らしいです。僕もよくお世話になっています。

しかし、アイコンの豊富さで言うとそれほど多くなく（約3000）、 **欲しいものが無い** ということがよくあります。

「矢印」といったようなWeb UIで定番で必要となるも

オブジェクトの数の数えるには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