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

【JavaScript】Shadow DOMを取得しGoogle Earthの地球儀を自動回転する方法

### 【概要】
Google Earthの地球儀表示部分はShadow DOMで生成されています。
Shadow DOMの要素はgetElementByIdなどを使用して取得することができませんが、開発者ツールから取得できます。
取得したShadow DOMに対して、キーボードの”→”キー押下のイベントを発火させることで地球儀を自動回転します。

### 【環境】
Google Chrome

### 【実行手順】
#### 1. Google Earthを起動する
下記リンク先へ遷移します。
[Google Earth](https://www.google.com/intl/ja/earth/)

`Earth を起動`ボタンをクリックします。


新しいタブが開き、地球儀が表示されます。

![Google Earth](https://use

JavaScript 基礎　～関数編～

・関数の定義方法

・関数宣言による定義

　　関数宣言で関数を定義する場合は、functionの後に関数名を記述します。引数は ( )内記述します。

“`JavaScript:JavaScript
function exFunc ( exVal1, exVal2, …) {
//処理を書く

//戻り値がある場合
return 戻り値
}
“`

　

・関数宣言による関数の実行

“`JavaScript:JavaScript
//戻り値がある場合
let exValuable(戻り値を格納する変数) = exFunc ( exVal1, exVal2, exVal3…){
exVal1 + exVal2;
};

//戻り値がない場合
exFunc ( exVal1, exVal2, …);

//関数で定義した引数(仮引数)と、実行文で定義した引数(実引数)が一致しない場合は、実引

【React】useStateとuseReducerはどのように使い分ければいいのか

# この記事について
初学者がReactを学習し初めて気づいた点や、学んだ点を発信しています。

# useStateとuseReducerはどのように使い分ければいいのか
useReducerとuseStateの使い分けについて学習したため、記録に残します。

## useStateについて
状態の更新の仕方は利用側に託します。つまり使用する場合は、使用する側が更新の仕方を新たに定義してあげる必要があります。

## useReducerについて
状態の更新と、状態の仕方も含めて状態側で管理をします。つまり使用する場合は、更新の**方法**を指定するだけで、更新の**仕方**を指定する必要は無くなります。

:::note info
今回分かったこと！
**複雑なアプリケーションを複数人で開発する場合では、予期せぬエラーを防ぐためuseReducerを使用することが適している。**
:::

Socket.io学習①　簡単なチャットアプリの構築

マルチプレイのオンラインゲーム開発に向けてsocket.ioの勉強をしている。
その中で見つけた良い参考動画がこちら

これを参考にして簡単なチャットアプリを構築しつつ、socket.ioとnode.jsの勉強をしていこうと思った。

まず、ネックになるのはそもそもnpmが何なのかである。
node.jsなどを始める際に必要になるパッケージ管理システムであるがそのインストール方法は複雑に見えた。
さらにMacについての説明は多く見られたがWindows用を探すのにも一苦労した。

結局こちらのサイト

https://zenn.dev/antez/articles/a9d9d12178b7b2

を参考にしてインストールした。割と簡単で

https://github.com/coreybutler/nvm-windows/releases

こちらのサイトからインストーラー(nvm-setup.zip)をダウンロードして実行すれば良い。

そうすれば最低限の動作はするようになった。

そして、

AnimateCC シンボルに外部のプログラムをリンケージしたい

# プログラムを紐付ける
AnimateCC（ターゲットcanvas）で、
ライブラリ内のシンボルに、旧Flashの様にプログラムをリンケージして使いたい
と思ってライブラリ内のシンボルの「シンボルプロパティ」を見ても、グレーアウトされてて使えないm(__)m
なので、強引?にプログラムを紐付けたいなと思って、試行錯誤

んで、これでいいのかな

各シンボルの先頭フレームのアクションに、
例えばルートの先頭フレームに、
“`Javascript
let myobj = new Main(this, lib);
“`

“`Main“`クラスは予め html でインポートしている jsファイルになります
（記述は TypeScript を使っています）
“`Javascript
class Main{
private _myDisp:createjs.MovieClip = null;
private _lib:any = null;

constructor(current:createjs.MovieClip, lib:any){
this._myDisp = c

【Laravel】BLOCSとSelect2でいい感じのプルダウンを作る

# 何を作るのか
BLOCSはLaravelで使えるテンプレートエンジンです。[こちら](https://qiita.com/hyada/items/11597f88102ed1c45407)で、BLOCSを使って簡単な本管理アプリを作ってみました。本の新規登録、編集、一覧表示はできましたが、それぞれの本にタグをつけたいので、今回はSelect2を使っていい感じのプルダウンを作ります。

Select2はプルダウンをちょっと便利にするJavaScriptのライブラリです。Select2を使えば、プルダウンの項目を検索や複数選択することができます。また、オプションを指定することで、自由入力で項目を追加することもできます。Select2を使って、本管理アプリに以下の2つの機能を追加します。

1. 過去に入力したタグを検索、複数選択する
1. 自由入力で新しいタグを追加する

https://select2.org/

開発は以下の3ステップですすめます。では、作っていきましょう。開発したLaravelアプリのソースは[GitHub](https://github.com/blocs/ex

paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript 連結の判定

連結の判定 (paizaランク A 相当)

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_graph_boss

# 解答例(C++の場合参考)
幅優先探索をします。探索を終えて、全ての頂点に色が塗られていたら、連結しています。
色が塗られているか`color`で管理、隣接行列を使用、`Q`をキュー、`now`を現在地とします。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);

const [N, M] = lines[0].split(” “).map(Number);
let color = Array(N);//各頂点に色が塗れたか管理、0未、1済
for (let i = 0; i < N; i++) { color[i] = 0;//初期値は全て0未 } //隣接行列 cons

JavaScript / TypeScript の豆知識 10 選

# JavaScript / TypeScript の豆知識 10 選

## 初めに

JavaScript / TypeScript にまつわる豆知識を、10 個ほど集めてみました。

コードは全て TypeScript で書いていますが、内容はほぼ全て JavaScript にも当てはまることです。

少し長めの読み物ではありますが、気軽に当記事を楽しんで頂ければ幸いです。

それでは、以下が目次です。

– [JavaScript / TypeScript の豆知識 10 選](#javascript–typescript-の豆知識-10-選)
– [初めに](#初めに)
– [1.Nullish と Falsy](#1nullish-と-falsy)
– [関連参考資料\_1](#関連参考資料_1)
– [2. tsconfig の便利な設定](#2-tsconfig-の便利な設定)
– [関連参考資料\_2](#関連参考資料_2)
– [3. 依存関係の綺麗な図示の仕方](#3-依存関係の綺麗な図示の仕方)
– [関連参考資料\_3

テンプレートエンジン

データとテンプレートをもとに文字列を作成する方法。

https://www.codegrid.net/articles/template-engine-1/#:~:text=%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%B3%E3%81%A8%E3%81%AF%E3%83%87%E3%83%BC%E3%82%BF,%E3%81%A8%E8%80%83%E3%81%88%E3%81%A6%E5%95%8F%E9%A1%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%9B%E3%82%93%E3%80%82

paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript りんご拾い（情報を持ちながらの移動）

りんご拾い（情報を持ちながらの移動） (paizaランク B 相当)

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_graph_step6

# 解答例
訪れた場所を変数visit、持っているりんごの数をSとして、移動していった。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//グラフの頂点の数 N
const N = Number(lines[0]);
//隣接行列g
let g = [];
for (let i = 1; i <= N; i++) { g.push(Array(N).fill(0)); } //各頂点にあるりんごの数 A const A = lines.slice(N,N*2).map(Number); //通れる辺 for (let i = 1; i

【開発日記】初心者がOpenAIを使ってReact + Next.js開発を学ぶ中で得た知見

## 1日目

やったこと
– node.jsのインストール等環境構築
– javascriptのexampleを使ってみた
– **漫画のタイトルを生成するWebアプリ**を作ることを決めた

https://beta.openai.com/examples/default-js-helper

## 2日目

1日目で行った表示をWebブラウザ上で表示しようと試みた。
Node.js,Next.js,React,javascript,typescriptの全てが分からず何とかならなかった。
そのため、こちらの動画を見始めた(なぜかNext.jsから見始めてしまった…)

## 3日目

動画を見る中でアロー関数に躓きつつ、動画を見終えた(ハンズオンで手も動かした)。

.t

paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript 一方通行（グラフ上の移動）

一方通行（グラフ上の移動） (paizaランク B 相当)

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_graph_step5

# 解答例
幅優先探索をします。訪れた場所を配列`visited`に保存し、今いる場所を変数`now`で管理します。後戻りしないので、訪れた頂点は1を0に書き換えます。
“`javascript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines = input.split(“\n”);
//グラフの頂点の数 N
const N = Number(lines[0]);
//隣接行列g
let g = [];
for (let i = 1; i <= N; i++) { g.push(Array(N).fill(0)); } for (let i = 1; i <= N - 1; i++) { //各辺の両端の

オブジェクト配列の操作

オブジェクト配列の操作のサンプルプログラムです

“`html