JavaScript関連のことを調べてみた

人気プログラミング10位の三項演算子？を調べてみた！ #ぼくの大発見日記

# はじめに

ナイトウ([@engineer_naito](https://twitter.com/engineer_naito))と申します。

Pythonの好きなところ。
1つ挙げろと言われたらぼくは三項演算子と答えるでしょう。

ぼくはPythonの三項演算子の書き方がとても気に入っています。
Python以外の三項演算子の書き方を調べて、Pythonの三項演算子くらい好きな書き方がないか探していきます。

※以下の記事よりランキングを引用させていただきます。

https://prtimes.jp/main/html/rd/p/000000312.000049221.html

:::note warn
今回はいろんなプログラミング言語の三項演算子を調べてまとめることが目的の記事です。
ぼくは言語の優劣についての思想などは持っておりません。
引用している言語ランキングについても特に感情や思想は持っておりません。
:::

# 三項演算子 とは

三項演算子を使うと、if文else文を1行で書くことができます。
条件演算子と呼ばれることもあるようです。

英語ではterna

Promiseについて

### なぜPromiseが必要なのか？

1. 非同期処理のコールバック関数地獄はネストが深くなる上に、エラー処理が相まって、可読性を著しく下げる傾向があります。このコールバック地獄を避けるために考えられたの仕組みが、Promiseです。
2. 非同期処理中に発生した例外を扱う仕様はありませんでした。

## 内容

1. 非同期処理についての理解

非同期処理とは 通常はコードを順番に処理していくが 非同期処理では一つのが終わるのを待たずに次の処理を評価します。 つまり非同期処理では同時に実行している処理が複数あります。 代表的なのがSetTimeout等

2. Promiseの概念を理解

非同期処理とは 通常はコードを順番に処理していくが 非同期処理では一つのが終わるのを待たずに次の処理を評価します。 つまり非同期処理では同時に実行している処理が複数あります。 代表的なのがSetTimeout等

### SetTimeout例：

“`jsx
setTimeout(() => {
console.l

How to Write Success Stories?

How to Write Success Stories?!

Success stories are powerful narratives that inspire, motivate, and resonate with people from all walks of life. Whether you want to share your own triumphs, document the achievements of others, or craft a compelling piece of content, knowing how to write success stories is a valuable skill.

These stories not only provide insight into the journey of individuals or organizations but also

アロー関数とは？

### アロー関数とは？

ES6 JavaScript のアップデートで導入されました。 これは、変数を宣言し利用するもうひとつの方法です。 アロー関数がもたらすメリットは次のとおりです。

– より簡潔である
– this が周辺のスコープからピックアップされる
– 暗黙的な return

## 内容

### アロー関数のここがすごい!!

– 関数を短く書ける　※例①
– thisを束縛しない　※例②

### アロー関数 実用例①：関数を短く書ける

**function() の場合**

“`jsx
let normalFunc = function(x){
console.log(x);
}
normalFunc(‘今までの関数’);
“`

**アロー関数の場合**

“`jsx
let arrowFunc = (x) => {
console.log(x);
}
arrowFunc(‘アロー関数式’);
“`

### アロー関数 実用　例②： thisを束縛しない

**function() の場合**

“`jsx
this.text

Websocketで、異空間通信。その3

# 概要
メタバースを使った、ドローン自動運転シュミレーターを提供します。

# 詳細
エージェント（ドローン）が環境で、自動運転するシュミレータを作り、結果をwebsocketに出力、neosvrで受け取り、ＢＯＸを移動させる。
websocketサーバーは、elixirで準備します。
エージェントと環境は、Plunkerで提供します。
設定は、ドローンが、８の字飛行運転を続けるシュミレーターです。
各ポイントは、以下です。

“`
var point1 = {
‘x’: 50,
‘y’: 100
};
var point3 = {
‘x’: 50,
‘y’: 200
};
var point2 = {
‘x’: 250,
‘y’: 100
};
var point4 = {
‘x’: 250,
‘y’: 200
};
“`

ドローンは、ステートマシンを持っていて、ポイントをクリアすれば、次のポイントに向かいます。
ドローンは、X,Yを得て、自分で判断します。
環境は、６０ｆｐｓで更新し、ドローンを移動し、位置を更新します。
環境は、Box2dで

box2djsの作法 その12

# 概要
box2djsの作法、調べてみた。
drone、やってみた。
pid制御で、8の字飛行、やってみた。

# 写真


# サンプルコード

“`

var Agent3 = function() {
this.err2 = 0;
this.err = 0;
this.P = 0;
this.I = 0;
this.D = 0;
};
Agent3.prototype.get_action = function(setPoint, input) {
var Kp = 100;
var Ki = 22;
var Kd = 22;
var dt = 0.01;
this.P = setPoint – input;
this.I += this.P * dt;
this.D = (this.P –

Babylon.js の Procedural Texture のアニメーションする炎のテクスチャ（Fire Procedural Texture）を試す

Babylon.js の公式ドキュメントの「Asset Libraries」を見ていた際に「Procedural Texture Library」という項目が目にとまり、それが気になったので、少し試して記事にしてみました。

●Asset Libraries | Babylon.js Documentation
　https://doc.babylonjs.com/toolsAndResources/assetLibraries


公式ドキュメント上の「Procedural Texture」のページは以下になります。

●Procedural Texture Library | Babylon.js Documentation
　https://doc.babylonjs.com/toolsAndResources/assetLibraries/

【完全ノーコード】簡易メモアプリケーションの作成: HTML, CSS, JavaScriptを使った実践的プロジェクト

本記事は著者（人間の方）がプロンプトエンジニアリングを駆使して制作したカスタムGPT「AcePilot」の実演になります。僕はノンプログラマーですので「ノーコード」の厳密な定義を知りませんが、今回リアルガチでコードは一文字も書いておりません。「AcePilot」をご紹介した記事は以下になります。

https://qiita.com/sharakus/items/21a74d29e7085e9fceab

あとのことはAIであるAcePilotさん…いや、エースの兄貴にすべてお任せしやす。

# 簡易メモアプリケーションの作成: HTML, CSS, JavaScriptを使った実践的プロジェクト

## 導入
プログラミングの学習初期段階において、実際に手を動かして何かを作り上げる経験は非常に価値があります。この記事では、HTML, CSS, JavaScriptの基本的な知識を活用して、シンプルながらも実用的なメモアプリケーションの作成プロセスをステップバイステップで解説します。このプロジェクトは、初心者のウェブ開発者やJavaScriptの学習者に特に適しています。

## プロ

JavaScriptの正規表現と実例

## はじめに

初めてQiitaで記事を書くので、内容が分かりにくい・読みづらい等々あると思いますが、ご容赦ください。

今回の内容は**正規表現**です。最近使ったので、軽くまとめてみました。

## 身近な正規表現
今まで使ったことがなかったのですが、Visual Studio Code（VS Code）での検索機能（`Ctrl` + `F`）のところに、`Aa`や`ab`の右横に`.*`と表示されています。あのボタンを押すと、正規表現で検索ができるみたいですね。

### サンプルのソースコードで検索してみる

>試しに、下記のようなコードがあったとします。
>“`js
>let変数名 = 1;
>“`
>
> letと変数名の間に半角の空白がないことを正規表現で見つけたいと思います。

“`sample.js

let a = 1;
letb = 2; //間違っている
let c = 3;
letd = 4; //間違っている
“`

では、letの後に半角の空白がないものを正規表現で探してみましょう。
– `letb` や `letd`が

JavaScriptのconcatを利用する

## はじめに
表題通り、JavaScriptのconcatを利用します。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

“`js:sample.js
const array1 = [‘a’, ‘b’, ‘c’];
const array2 = [‘d’, ‘e’, ‘f’];
const array3 = array1.concat(array2);

console.log(array1);
console.log(array2);
console.log(array3);
// Expected output: Array [“a”, “b”, “c”, “d”, “e”, “f”]
“`


:

JavaScriptの分割代入をマスターしよう

## はじめに
React（JavaScriptライブラリ）を勉強する中で、分割代入を目にすることが頻繁にあります。
例えば`props`の受け取りや、`useState`の戻り値は分割代入を使用することが一般的です。

しかし、その分割代入についてよく書く割に深いところまで理解できていないと感じたため、いま一度分割代入とはどのようなものかについて確認して、マスターしてきます。

まず初めに分割代入の基本的な構文について確認し、その後応用的な内容について触れていきます。

## 分割代入とは
配列や、オブジェクトなどの中身をいっぺんに変数に受け取ることが出来る代入方法のことを分割代入といいます。

### 配列の分割代入
配列の値を一つずつコンソールに出力したいとき、for文を使わずに一つずつ変数に格納すると、以下のようになります。
“`javascript:ふつうの書き方
const FRUITS_ARRAY = [‘apple’, ‘banana’, ‘cherry’];

const ap = FRUITS_ARRAY[0];
const bn = FRUITS_ARRAY[1

node.jsのimport文でつまずいた話

# node.jsのimport文でつまずいた話
vue.jsの入門中にimport文でつまずいたので備忘としてメモる。

## エラーコード
“`getting_started.js
import { creatApp } from “https://unpkg.com/vue@3/dist/vue.global.js”
import App from ‘./App.vue’
const app = creatApp({
App
})
“`
出たエラー↓
“`
(node:23304) Warning: To load an ES module, set “type”: “module” in the package.json or use the .mjs extension.
(Use `node –trace-warnings …` to show where the warning was created)
c:\Users\shotaro\Documents\作業場.oridinal\0001_program\js\projects\vue_gettin

HTMLとPuppeteerでOGP画像を動的に生成するプログラムを作った話

ブログサイトを運用する上でほぼ必須と言えるOGP画像を動的に生成するプログラムを作れたので解説します！

# OGP画像を作る
とりあえずHTMLでそれっぽいものを作ってみましょう！
フォントは Noto Sans JP を使用しています。

※CSSは自分で書いてね★


“`html:index.html

保守・理解しやすいコードを書きたい！ 〜VSCode拡張機能で循環的複雑度と戦う〜

# 概要

みなさん、保守・理解しやすいコードを書きたいですよね。

以前読んだ[良いコード/悪いコードで学ぶ設計入門 ―保守しやすい 成長し続けるコードの書き方](https://www.amazon.co.jp/%E8%89%AF%E3%81%84%E3%82%B3%E3%83%BC%E3%83%89-%E6%82%AA%E3%81%84%E3%82%B3%E3%83%BC%E3%83%89%E3%81%A7%E5%AD%A6%E3%81%B6%E8%A8%AD%E8%A8%88%E5%85%A5%E9%96%80-%E2%80%95%E4%BF%9D%E5%AE%88%E3%81%97%E3%82%84%E3%81%99%E3%81%84-%E6%88%90%E9%95%B7%E3%81%97%E7%B6%9A%E3%81%91%E3%82%8B%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E6%9B%B8%E3%81%8D%E6%96%B9-%E4%BB%99%E5%A1%B2/dp/4297127830/ref=sr_1_1?adgrpid=138

[JavaScript/TypeScript] constを使ってコードの堅牢性, 可読性をあげよう！

# はじめに

こんにちは！
[Habitat Hub](https://qiita.com/organizations/habitatHub)のボードゲーム好きエンジニア @tom-takeruです。
JavaScriptやTypeScriptを使っている皆さんにとってお馴染みの`let`と`const`の使い分けに焦点を当てた記事をお届けします。
ちなみに、私の詳しいプロフィールは[tom-takeru Web](https://job-history-introduction.vercel.app/)でチェックしてみてください。

さて、`let`ではなく`const`を使うことのメリットって知っていますか？実は、この小さな選択がコードの読みやすさや安定性に大きく影響するんです。でも、どうやって`let`から`const`に変えるのがベストなのか、そんな疑問に答えるためにこの記事を書きました。

「え、そんなに大事なの？」と思うかもしれませんが、この記事を最後まで読むと、`const`を使うことの大切さがきっと伝わると思います！

# これはなに

「JavaScriptやTyp

JavaScriptで要素をドラッグして移動する簡単な方法

要素をドラッグして移動することは、JavaScriptにおいて頻出パターンです。
しかし、それを簡単に実現するコードは意外と知られていません。

“`html:画像をドラッグするとグリグリ動かせるコード