- 1. prependメソッド
- 2. JavaScriptにおける配列の種類と値の取り出し方について
- 3. javascript デザインパターン
- 4. JavaScript 配列
- 5. 【WebSpeechAPI】Siriに無視されるので『活舌強化アプリ』つくりました。
- 6. JavaScript ループ（繰り返し）
- 7. JavaScript 条件分岐
- 8. JavaScript コメントアウト （コメントの書き方）
- 9. Javascript 関数の作り方
- 10. javascriptでjsonをforループさせたい場合の備忘録
- 11. styled-componentsでtheme Providerを使ってみる
- 12. 【Webアプリ】想いはQRコードにのせて伝えよう。
- 13. 【ゲーム物理】離散要素法DFMで簡単力学シミュレーション！① 基礎編
- 14. JavaScriptの非同期処理について
- 15. WebSocket調べてみた。
- 16. TampermonkeyでX(旧Twitter)の画像擬態系スパムURLを消す
- 17. 受け取ったnumber型を文字列に変換する
- 18. 【超入門】Node.js(Express)を使ってCRUD操作が出来るAPIを作成
- 19. 日時の値について。どの型を使用するか? ISO 8601? Timestamp?
- 20. HTML上に画像があるか探す
prependメソッド
### prepend() メソッドを調べる
Element: prepend() メソッド
Element.prepend() メソッドは、一連の Node または文字列をこの Element の最初の子の前に挿入します。
出典https://developer.mozilla.org/ja/docs/Web/API/Element/prepend
“`js
a = document.createElement(“div”);
a.id = “parent”;b = document.createElement(“div”);
b.id = “child”;a.prepend(b);
c = document.createElement(“div”);
c.id = “child2”a.prepend(c);
“`
“`html“`
# 感想
insertBefore() メソッド以外にも要素
JavaScriptにおける配列の種類と値の取り出し方について
# JavaScriptにおける配列の種類と値の取り出し方について
## 配列(一次元配列)とは
– 複数の変数を格納するための変数のこと。
– 0番から採番される。
-値を取り出す時は[]で番号を付けて指定する。“`
let fruits = [ “apple” , “orange” , “banana” ];
console.log( fruits ) ; // [“apple”, “orange”, “banana”]
console.log(fruits[0]); //apple
console.log(fruits[1]); //orange
console.log(fruits[2]); //banana
“`## 多次元配列とは
– 配列の中に配列やオブジェクトが格納されており、入れ子状態となっている配列のこと。
– 0番から採番されるのは配列と同じ。取り出し方も同様。
– テーブル形式でデータを管理したい時によく使われる。
“`
let likeFruits = [ [“ゴリラ”,5,”apple”], [“チンパンジー”,3,”orange”] , [
javascript デザインパターン
## 参考にしたデザインパターン著書
[Patterns.dev](https://www.patterns.dev/#patterns)
# シングルトンパターンシングルトン (singleton) は、一度だけインスタンス化でき、グローバルにアクセスできるようなクラスのことです。この_単一のインスタンス_をアプリケーション全体で共有できることから、シングルトンはアプリケーションのグローバルな状態を管理するのに適しています。
“`javascript
let counter = 0;class Counter {
getInstance() {
return this;
}getCount() {
return counter;
}increment() {
return ++counter;
}decrement() {
return –counter;
}
}
“`上記のパターンだと、シングルトンパターンの条件を満たしておりません。
理由としては、↓
“`javascript
con
JavaScript 配列
## 配列の初期化
“`
result = [];
“`“`
var result = [];
“`“`
let result = [];
“`“`
const result = [];
“`## 配列の要素取得
“`
result[インデックスの値]
“`## 配列に、値の追加格納
“`
result.push(格納したい内容)
“`
【WebSpeechAPI】Siriに無視されるので『活舌強化アプリ』つくりました。
# オタクは早口
私は、オタク特有の早口に加え、活舌が悪い。
Siriにも3回に1回くらい無視されている。くやしいよ私。
**『活舌（かつぜつ）強化アプリ』で特訓して見返してやりたい。**# どんなのつくろう
:::note info
【目標】早口言葉使って活舌を鍛えられるアプリをつくりたい。
■ 発話を聞き取り、言えているかどうかを判定してほしい（Web Speech API）。
■ スマホの振動を感知し、イライラ度を表現したい（Web Sensor API）。
:::# 技術・環境
Vue.js（JavaScriptライブラリ）
Web Speech API（発話の聞き取り）
Web Sensor API（スマホの加速度を取得）
Bootstrap（Web制作サポートツール）
CodePen（アプリ制作環境）
Netlify（完成アプリ公開環境）# これで私も「立て板に水」
紹介動画をご覧ください。『活舌強化アプリ』つくりました！ぜひ遊んでみてください！https://t.co/BWXEYEQelS#protoout#CodePen#Netlify#HTML#JavaScript pic.twitter.com/COK85ZHVHN
— XE-AY (@xe_ay51938) November 19, 2023
## 詳しくはこちら
### CodePen
JavaScript ループ（繰り返し）
## for文
“`
//関数定義
function hasOdd(numbers) {result = false;
for(i = 0;i < numbers.length;i++){ s = numbers[i] o = s % 2; switch (o) { case 0: continue; default: result = true; break; } if(result == true){ break; } } console.log(result); } //関数呼び出し hasOdd([1, 2, 3, 4, 5]) ``` 例えば、このコードは、 受け取った関数の要素の中に、1つでも奇数があった場合には、trueをコンソール出力するプログラムです。 ## do...while文 ## while文 ## for...in文 ``` //関数定義 function square(num
JavaScript 条件分岐
# 条件分岐
JavaScriptの条件分岐コードには、
`
if
`と
`
switch
`の２種類がある
## if
“`
if (条件式) {
実行する文;
}
“`が、コードの基本形
例えば、
“`
//関数定義
function checkTemperature(t) {if (t >= 30) {
result = “Hot”
}else if(t < 30 && t >= 15){
result = “Warm”
}else if(t < 15){ result = "Cold" } console.log(result); } //関数呼び出し checkTemperature(30) ``` というコードは、 もし、受け取った変数tに格納されている値が、 30以上だったら、Hot 30未満、15以上だったら、Warm 15未満だったら、Cold と表示するプログラムである ## switch ``` function checkOddOrEve
JavaScript コメントアウト （コメントの書き方）
## Jabascript コメント
JavaScriptのプログラムファイルには、コンピュータが実行をスルーしてくれる人間のためのメモ書きを記述できる
下記のようにかくと、
`
//
`
以降の文章が、コメントアウト（コンパイラが、コメントとして認識）される
“`
// コメント
“`下記のように書くと、
`
/*
`
と
`
*/
`
の間の文章が、コメントアウトされる“`
/*
コメント
*/
“`
Javascript 関数の作り方
# JavaScriptプログラマーによるJavascriptプログラマーのためのJavaScriptでの関数の作り方
“`
function greet(name) {
//関数の内容を書く
}
“`このように、関数は作成できる
例えば、
`
名前を受け取り、
挨拶する関数プログラムは、以下のように作成する
`1. 挨拶関数greetを作る
2. greetを呼び出す
### 完成系
“`
function greet(name) {
var message = “Hello, ” + name + “！”
console.log(message)
}greet(“Hikaru”);
“`のように記述する
javascriptでjsonをforループさせたい場合の備忘録
例えば以下のような`json`ファイルを取得してforループさせたい場合の備忘録
https://jsonplaceholder.typicode.com/posts
## 最終的に参考にさせて頂いたサイト
https://smallit.co.jp/blog/a2478/
> 今回の場合は、nameをキーとして、値をパラメータとして送信しています。そして、返ってきたデータに対して出力しています。また、成功すれば、responseで返された詳細を確認することができ、response.dataオブジェクトでJSON形式のデータを確認することができます。
> このようにObject.keysメソッドは戻り値が配列なので、この戻り値に対してはforEachが使えます。
## テストコード
“`test.js
print(“hello”)const jsons = { name: “鈴木一郎”, age: 30, place: “愛知県” };
print(“—– 2)forEachでキ
styled-componentsでtheme Providerを使ってみる
## 目次
1. [開発環境](#開発環境)
2. [何故この記事を書こうと思ったのか](#何故この記事を書こうと思ったのか)
3. [まずはnpmでstyled-componentsのインストールを実行。](#まずはnpmでstyled-componentsのインストールを実行。)
4. [src直下に、themeディレクトリを作成する](#src直下に、themeディレクトリを作成する)
5. [theme.tsのサンプルコード](#theme.tsのサンプルコード)
6. [index.tsxを編集する](#index.tsxを編集する)
7. [実際にコンポーネントに記述してみる](#実際にコンポーネントに記述してみる)
8. [作成したボタンコンポーネントの呼び出しと結果](#作成したボタンコンポーネントの呼び出しと結果)
9. [感想](#感想)
10. [補足](#補足)## 開発環境
“react”: “^18.2.0”,
“typescript”: “^4.9.5”,## 何故この記事を書こうと思ったのか。
styled-components
【Webアプリ】想いはQRコードにのせて伝えよう。
## 今日も今日とて
帰宅すると、放置されたゴミを見つけてしまいました。
あれ？ゴミ捨て、頼んどいたよね？？？
って、何度も言うのも、自分も相手も疲れちゃいますよね。## 無言の圧力
無言の圧力ってわかりますか？例を出しましょう。>付き合って３年、彼女の家に行くと、机の上にゼクシィが置いてあった。
分かりやすい無言の圧力ですね。
**言葉にはしない、けど強めにこの思いを伝えたい。**
**そんなことを考えてWebアプリを作ってみました。**## こんな感じになりました
### 使い方動画QRコードの使い方って色々ありますね。
思いついたものを形にしたら、ちょっと尖ってしまった。#protoout 【ゲーム物理】離散要素法DFMで簡単力学シミュレーション！① 基礎編:::note
この記事は、**基礎編** です。
この記事を読むことで、フルスクラッチで[スイカゲーム](https://www.youtube.com/watch?v=zBjjg44Shmo&t=708s)が作れるようになります。高校物理を未履修でも実装はできる、という記述を心掛けます。
しかしベクトルの知識は求められます。（ゲームプログラマー向けベクトル学習記事はいずれ書きます）
:::## はじめに
物理シミュレーション、自前の実装は難しいですよね。
高校物理の知識だけでは、運動方程式で例えば落下の **軌道** を再現できても（運動学）、例えば、[スイカゲーム](https://www.youtube.com/watch?v=4vt00dR-qjk)のように**力のつりあい**を保ってボールが積み上げることは再現するのは難しいです。
その理由は、運動の自由度（用語）が高く、方程式の数をそこまで増やすのが難しいため、運動方程式を立式して連立方程式ソルバーへ入れ込んでも各接触力が一意に定まらないからです。（あと単純に立式をプログラミングするのがメンドウ）その一方で、
JavaScriptの非同期処理について
### はじめに
個人開発メモ📝
なんとなく知っているけどしっかり理解できていなかったので、備忘録として残します。### 非同期処理が誕生した簡単な歴史
例えば、あるショッピングサイトを閲覧する際にそのサイトを表示するには、
▪️商品データや諸々必要データをバックエンドに取りに行く
↓
▪️ビューに反映させる
こんな流れだが、「商品データや諸々必要データをバックエンドに取りに行く」この処理を待っている間、ビューは反映されない。
つまりその間ユーザーを待たせてしまう＝ 表示速度が遅く、ユーザーが離れる といった課題が生まれた。
その課題を解決すべく、考案されたのが、「先にビューだけ反映させて、商品データが取得できたら表示しているビューに当てはめる」といった非同期処理の挙動である。参考サイト⇨https://www.youtube.com/watch?v=kbKIENQKuxQ
### 非同期処理の様々な課題
上記の非同期処理を実施するため、コールバック関数を使用して毎秒毎に表示させる処理を発明したが、
# 実際のスクリプト
Tampermonkeyに書いたスクリプトです。
“`JavaScript
//
受け取ったnumber型を文字列に変換する
# タイトル
受け取ったnumber型を文字列に変換する## 目次
1. [開発環境](#開発環境)
2. [何故この記事を書こうと思ったのか](#何故この記事を書こうと思ったのか)
3. [まずはnumberを引き渡して文字列を返す関数](#まずはnumberを引き渡して文字列を返す関数)
4. [numberの配列を受け取って、文字列の配列で返したい場合](#numberの配列を受け取って、文字列の配列で返したい場合)
5. [+αなお話](#+αなお話)
6. [結果](#結果)
7. [感想](#感想)## 開発環境
“react”: “^18.2.0”,
“typescript”: “^4.9.5”,## 何故この記事を書こうと思ったのか
SESフロントエンドエンジニアとしてReactを使用した業務を開始。
TSでの型指定なんかもまだまだ知見が足りないなぁと感じつつ、
まずはJSにおける配列に対する理解っていうのも乏しいので忘備録として記述しています。
APIを初めて使用される方なんかで、もし設計書に書かれている受け取るデータがnumber[]で困
【超入門】Node.js(Express)を使ってCRUD操作が出来るAPIを作成
# 本記事について
本記事は、Node.jsを使ったAPI作成に関して、自身の忘備録としての側面が強いです。
基本的なCRUD操作が可能なAPIを作成する過程をまとめたので、誰かの参考になればと公開してみます。
# はじめに
### 利用するツール
Postman : APIの動作を確認するために利用します。https://qiita.com/otohusan/items/43cbb61cfd177049d638
本記事で必要な操作は、こちらの記事でカバーしています。
## 実装
### コードを書く下準備
まずターミナルにて、ディレクトリ・ファイル作成とライブラリのインストールを行います。
はじめに、作業を行うディレクトリを作成します
“`bash
mkdir 任意のディレクトリ名
cd 任意のディレクトリ名
“`
次にnpm init を行い、pacakage.jsonを作成します“`bash
npm init -y
“`続いて、必要なライブラリをインストールします。
“`bash
npm install –save nodemon e
日時の値について。どの型を使用するか? ISO 8601? Timestamp?
# 目的
– 日時の値について、以下どちら (または他) を使うかを決めたい。
– `ISO 8601 Date and time string` (e.g. `2023-11-18T08:43:53+09:00`)
– `UNIX Timestamp` (e.g. `1700264648`)## 結論
Timestampを使用する。
理由は、パフォーマンスが ISO 8601 に比べて3倍ほど早いので## ISO 8601
### Pros
– ログやデバッガで見る時、人間が読みやすい
### Cons
– Timestamp より遅い
– タイムゾーン情報を扱わねばならず、欠落せぬよう実装に注意が必要## Timestamp
### Pros
– ISO 8601 より速い
– タイムゾーン情報を扱う必要がなく、バグが起きにくい
– Slack や Chatwork の API は Timestamp を採用している
– ref.
– https://api.slack.com/methods/conversations.
HTML上に画像があるか探す
開いたページから画像が存在するか探す方法のメモ。
HTML上に画像があるか探します。
下のコードは多少変えていますが、[MDN](https://developer.mozilla.org/ja/docs/Web/API/Document/images)のコードです。“`js
const imageList = document.images;for (let i = 0; i < imageList.length; i++) { if (imageList[i].src == "apple.jpg") { // 画像が存在した時の処理 } } ``` 上記コードで処理できるそうですが、私の環境ですと、うまく画像を探すことができませんでした。 いろいろ試したところ、絶対パスを指定することで動作でしました。 ```js if (imageList[i].src == '指定のURL/img/apple.jpg') ``` ただ上記の書き方ですと、使用できる場面が限定的になるので、実装上では`indexOf`を使用するのがベターかなと思いました。 ```j
