- 0.0.1. Three.jsに入門
- 0.0.2. TS、JS 初心者向けに TS 初心者がよく使う配列操作の高階関数をまとめてみた
- 0.0.3. JavaScriptの式と文
- 0.0.4. JavaScript備忘録1 DOM操作
- 0.0.5. とりあえずBedrockを個人利用としてLambdaで実行するまで
- 0.0.6. Gemini Nanoを利用した翻訳Extensionをリリースしました
- 0.0.7. タビアンが求めるエンジニアの基準〜フロントエンドの場合〜
- 0.0.8. Document、NodeList、HTMLElementオブジェクト JavaScript
- 0.0.9. windowオブジェクト JavaScript
- 0.0.10. Mathオブジェクト JavaScript
- 0.0.11. 【paiza×Qiita】JavaScriptで最小文字数での解答を目指す【Aランク編】
- 0.0.12. ノイマン型 ファミリーコンピューター のアニメーションのゲーム。
- 0.0.13. 「JS基礎」Debounce, Curry and 関数コンテストにつて実現します
- 0.0.14. タイピングが遅い人用の html の入力補助用 html を公開してみる。
- 0.0.15. ブラウザ上でjavascriptによるテキストの音声読み上げを行う方法
- 1. デモ
Three.jsに入門
とりあえず、このサイトを見て勉強。
https://ics.media/tutorial-three/quickstart/
> まずはHTMLファイルを用意して、次のコードを貼り付けて試してください。
と言うので、とりあえず、下記コードを貼り付けて実行.
“`html:html
```このhtmlファイルをローカルに保存して,ブラウザで表示すると次のような画面が出る.
speakボタンを押すと入力したテキストを
JavaScript における型判定手法について
動的型付けの言語を扱っていれば、任意の型の値が入ってくる場合があるだろうし、その型を特定したいという需要がしばしば存在する。例えば Python であれば次のようにして型を判定することができる。
```python
# 判定する関数
def is_str(value): bool:
return type(value) is stris_str("文字列") # -> True
is_str(42) # -> False
```割と簡単に文字列かどうかを判定する関数を実装できるであろう。
しかし、 JavaScript においては、型判定の手法は上記ほどに一筋縄ではないようだ。
本記事では特定の型であることを判定する手法を幾つか紹介する。
また、こうした型を判定する手法を TypeScript で実装するには工夫が必要だと考えられるので、 TypeScript で型判定を実装するにあたって意識した方がいい内容を合わせて説明する。
但し、ここで記載する方法は完璧な方法だとは思ってないので、他にも方法があったら教えてください。## 型の判定方法: 文字列を例として
まず
【React】下層にあるpackage.jsonに書いてあるコマンドを実行したい場合
# はじめに
こんにちは、エンジニアのkeitaMaxです。
今回は、下層にあるpackage.jsonに書いてあるコマンドを実行したい場合があったので、その方法について調べたことをまとめてみます。
# ディレクトリ構成
```
app
├ src
│ └package.json
└package.json
```
`app`の直下にある`package.json`のコマンドを実行させることで、`app/src`にある`package.json`のコマンドを実行させたかったです。# 実装方法
```json:app/package.json
"scripts": {
"lint": "npm --prefix ./src run lint"
}
```
こんな感じで`--prefix`を使用することで実現することができました。# おわりに
この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。
最後まで読んでいただきありがとうございました!
# 参考
https://docs.np
プレイヤーとCPUが対戦するオセロゲーム のHTML + JavaScriptコード。
![スクリーンショット 2024-08-26 043118.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838874/e32b679c-2564-8d0e-953c-7a32602e4d3c.png)
![スクリーンショット 2024-08-26 043103.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3838874/25fc6d2b-2504-d405-2576-32be9221ac8e.png)
### プレイヤーとCPUが交互に手を打つ基本的なオセロゲームです。マウスでマスを指定して左クリックで決定です。
コードをメモ帳などのテキストエディタに貼り付け、ファイルを「index.html」などの拡張子が.htmlのファイルとして保存します。その後、保存したファイルをブラウザで開けば、コードが実行されます。
####
```html
メモ帳でコーディングしていた話
# はじめに
## ひとこと
アクセスしていただきありがとうございます。
タイトルの通りの、メモ帳でコーディングしていた話です。
タメになるかどうかは分かりません。## 目的
+ メモ帳でコーディングしていたことで得られた知見を共有すること()## 検証済みの環境
+ Windows11 Home x64
+ メモ帳## ご注意
+ この記事の情報は **2024/08/26現在** のものです# 1.前書き
筆者は高校に入学したと同時に、部活でプログラミングを始めました。
HTMLとCSSを一通り学習し、一人で簡単なウェブページをつくれるようになりました。
そして自然とウェブページに機能を実装したいと思うようになり、JavaScriptの学習を始めました。
(今もですが)ここまで独学だったこともあり、一度、挫折しながらも百人一首を4択から選んで覚えるウェブアプリをつくり、高校で公開しました。
その後も学習を続け、高校2年生の夏ごろに全体で1000行ほどのウェブアプリを完成させました。...そう、メモ帳で。
# 2.メモ帳でコーディングしていた話
## なぜ、そう
WeakMapを使用しキャッシュを作成する
# WeakMapとは?
WeakMapは使用するキーと値のペアを保持するコレクション。
WeakMapのキーはオブジェクトである必要があり、プリミティブ値(文字列、数値など)は使用できません。https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/WeakMap
# WeakMapのメリット
- メモリリークの防止
オブジェクトが他に参照されなくなったときに自動的にガベージコレクションされるので、不要なデータがメモリに残り続けることを防く事ができる。Mapを使ったオブジェクトとWeakMapの違い
- Mapを使ったオブジェクト
Mapのキーとしてobjが使われるため、objはガベージコレクションされません。```js
let obj = { name: 'Alice' };
let map = new Map();
map.set(obj, 'Developer');obj = null; // objは