- 1. デモ
- 1.0.1. JavaScript における型判定手法について
- 1.0.2. 【React】下層にあるpackage.jsonに書いてあるコマンドを実行したい場合
- 1.0.3. プレイヤーとCPUが対戦するオセロゲーム のHTML + JavaScriptコード。
- 1.0.4. メモ帳でコーディングしていた話
- 1.0.5. WeakMapを使用しキャッシュを作成する
- 1.0.6. Salesforce自組織URLをLWCのJavaScript内で得る
- 1.0.7. date-fnsの便利な関数を紹介
- 1.0.8. 【Svelte】checkboxやradioを使用する際は bind:group ディレクティブを使用する
- 1.0.9. とにかくシンプルな静的 HTTP (Web) サーバを Deno で書く
- 1.0.10. paizaBランク問題「名刺バインダー管理」を解く
- 1.0.11. reduceの使い方を整理した (JavaScript)
- 1.0.12. TypeScript初学者の振り返り
- 1.0.13. forEachの使用例
- 1.0.14. Excel LAMBDA関数で「ハノイの塔」を解く
- 1.0.15. タブIdを使用するプラグイン作成時の支援ポップ画面です。
- 1.0.16. 【React】学習記録アプリを改良してみた
- 1.0.17. HTML: file読み込みで疑似loop
- 1.0.18. 【Nuxt 3とLambdaでTypeScriptの型を共有】：🔰エンジニアが感じたモノレポ構造の威力
タイピングが遅い人用の html の入力補助用 html を公開してみる。
タイピングが遅い人向けの
html の入力補助用の html を作成しましたので
皆さんの役に立てればと思い
公開してみます。[オンラインで動作するバージョンはこちら](https://uni928.github.io/SephirothHTMLCreatAider/)
[ダウンロードはこちら(Google Drive)](https://drive.google.com/file/d/1xnXBl69vuKfEfs-81TI4NGpXWCn5t8-E/view?usp=sharing)
***
この html の使い方
各ボタンを押すと
そのコードがクリップボードにコピーされます。例えば
というコードを入力したいならば
そのボタンを押して
入力中のコードに張り付けることで
入力する事ができます。***
この html ファイルのコード
この html ファイルは
下記のコードで動いています。ht
ブラウザ上でjavascriptによるテキストの音声読み上げを行う方法
# やりたいこと
– サーバから受け取ったテキストをブラウザ上で読み上げてもらいたい
– まずは最小限，テキスト読み上げの機能だけを作りたい# 解決策
次のように作るだけ．“`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コード。
### プレイヤーと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は
Salesforce自組織URLをLWCのJavaScript内で得る
“`javascript
const devPath = location.pathname.startsWith(‘/dev/’) ? ‘/dev’ : ”;
const absoluteUrlVF = location.origin + devPath + ‘/apex/XXX’;
const absoluteUrlS = location.origin + devPath + ‘/s/XXX’;
const rootRelativeUrlVF = devPath + ‘/apex/XXX’;
const rootRelativeUrlS = devPath + ‘/s/XXX’;
“`
date-fnsの便利な関数を紹介
# はじめに
date-fnsを使用する機会があり、便利だと思った関数を紹介します。
ほかにあれば随時追記していきたい…### add – 指定された日付に、指定された年、月、週、日、時、分、秒を加算する。
“`js
const result = add(new Date(2014, 8, 1, 10, 19, 50), {
years: 2,
months: 9,
weeks: 1,
days: 7,
hours: 5,
minutes: 9,
seconds: 30,
})
//=> Thu Jun 15 2017 15:29:20
“`### formatDistance – 与えられた日付間の距離を単語で返す。
“`js
const result = formatDistance(new Date(2014, 6, 2), new Date(2015, 0, 1))
//=> ‘6 months’
“`### formatDistanceToNow – 指定された日付から現在までの距離を単語で返す。
“`js
// 今日が2
【Svelte】checkboxやradioを使用する際は bind:group ディレクティブを使用する
## 問題のコード
“`svelte
{#each hogeList as hoge}
{/each}
“` サーバを Deno で書く
## 背景
ESM (ECMAScript Module) の `import` 宣言を使用している場合、ローカルファイル読み込み (HTML ファイルを直接開く) では動いてくれません。何らかの HTTP サーバを立てて、それ経由で読み込む必要があります。
:::note warn
もうちょっと具体的に言うと: CORS ポリシーに引っかかります。
:::HTTP サーバといえば Apache とか nginx とかがありますが、しかし簡単なテスト動作をしたいだけなのにルート権限で色々いじくったりするのは面倒だし行儀が悪い。
かといって、わざわざ Docker とか仮想環境を作ってやるほどの規模のことでもない。
ルート権限無しでサッと起動できる HTTP サーバがあると便利なわけです。ということで、Deno で極限シンプルな HTTP サーバを作ってみることにします。
## 準備とか
ファイル構成はこんな感じ。
“`txt
./
|- main.js
|- static
| |- any_script.js
| |- any_style.css
paizaBランク問題「名刺バインダー管理」を解く
paiza×Qiitaコラボキャンペーン、もう少しで終わりますね。
最後に一つ面白そうな問題を見つけたので解いてみます。
paiza問題ランクB Final問題の「名刺バインダー管理」になります。※問題文はリンクより参照してください。
https://paiza.jp/works/mondai/b_rank_skillcheck_archive/name_card
## 解き方
以下の流れに沿って解いていきます。1. 面裏のバインダー番号配列作成
2. 再帰関数で検索数値が含まれているバインダー番号配列があるまで繰り返す
3. 検索数値が含まれていれば現在のバインダー番号配列を返却
4. バインダー番号配列から検索番号の位置を特定
5. 配列最後から検索番号の裏側の値を取得 <- これが目的 あとはこれをコードに書き写せばいいですね。 ## 完成コード 別段難しいことはしていませんが、再帰関数の使い方がコツでしょうか。次々とバインダー番号配列を作成し、検索番号があるまで繰り返すようにしています。 目的は**配列最後から検索番号の裏側の値を取得**することなので、`b
reduceの使い方を整理した (JavaScript)
配列のメソッドである`reduce`を整理してみました。
### reduceの基本形
“`javascript
const result = arrayData.reduce(
// 第一引数
(accumulator, currentValue, index, arr) => {},
// 第二引数
initialValue
)
// 構造がわかりやすい様に改行してます
“`**第一引数のコールバックの引数（最大4つ）：**
`accumulator`: 累積値（直前のループの結果）
`currentValue`: 現在のループの要素
`index`: 現在のループの配列インデックス *省略可
`arr`: reduceが呼ぶ配列そのもの *省略可**第二引数**
initialValue: accumulatorの初期値 *省略可### 配列の全ての要素の和を返すreduceの一番シンプルな使い方で中身を見てみます。
“`javascript
const numbers = [1,2,3,4,5,6,7,8,9]
const result =
TypeScript初学者の振り返り
## はじめに
TypeScriptを勉強していく中で、印象的だったものを書き出していく。## null
型宣言をしたプロパティに対してnullの代入を行うとエラーになる。
後述するユニオンをしようするとnullも許容することができる。
tsconfig.jsonのstrictNullChecksを無効にすると、すべての型にnullやundefinedが許可される。“`typescript:
let test1: string = “aaa”;
test1 = null;let test2: number = 1;
test2 = null;let test3: null = null;
let test4: string | null = “bbb”;
test4 = null;“`
## ユニオン型
関数の引数やオブジェクトのプロパティに対して型を指定する際、複数の型を指定することができる記法。“`typescript:
const test = (age: number | string) => console.log(`im ${age} y
forEachの使用例
# forEcachの使用例
forEachの使い方を備忘録として残しておく。
## 使用例 その1
### やりたいこと
配列に格納されている値に対して繰り返し処理したい### 構文
配列.forEach( value, index, arry ){ 各配列の値ごとに行う処理 }
// 第一引数 value: 配列の値が一つずつ渡される
// 第二引数 index: 配列の添え字が一つずつ渡される
// 第三引数 arry: 配列自体が渡される### サンプルコード
“`js
// 配列を作成
const arry1 = [“りんご”,”メロン”,”オレンジ”];// forEachを実行
arry1.forEach( function( value, index, arry ) {
console.log( “大もとの配列は ” + arry )
console.log( “添え字が” + index + “番目の値は” + value )
})arry1.forEach( function( valu
Excel LAMBDA関数で「ハノイの塔」を解く
[paiza×Qiita記事投稿キャンペーン「プログラミング問題をやってみて書いたコードを投稿しよう！」](https://qiita.com/official-events/9ab96aa95d62fe3cbdd7)に参加してみた。
問題は[ハノイの塔](https://paiza.jp/works/mondai/real_event/hanoi)
残念ながら、問題通りのアウトプットが作れませんでした。配列の状態を書き換えるのができないので、書き換えずに常に3本の杭の状態を返す関数を作ればよいのだと思うのですが、難しい。。。
使い方はこんな感じ。
円盤3枚を初期値として、4回まで動かすとしたら、“=HANOI(3,4)“とするイメージ。
# Excel LAMBDA関数版「ハノイの塔」のコード
“`javascript:コード
H
タブIdを使用するプラグイン作成時の支援ポップ画面です。
# はじめに
プラグインを開発しているとよくtabs.query()を使用します。
このメソッドはbackground.jsで使用可能です。content.jsでは使用できません。
今、youtubeのiframeプレーヤーをプラグインを使用して作成していますが、そこで、tabIdやframeIdを使用することが多々あります。
作成中によくこのtabIdでエラーが起こります。
どうやら、tabIdやframeIdを指定してメソッドを実行しているのですが、正しいIdではないようなエラーメッセージが出ます。複数のタブを使うプラグインのため、例えば、今のアクティブタブのtabIdを知りたいことがよくあります。いちいち、コンソールデバッガーを開いてチェックするのは、結構面倒です。そこで、今回、この支援ポップ画面を作成しました。# 支援ポップ画面
以下にそのサンプル画面を示します。
### popup.html
# 工夫した点
前回はスタイリングを行わず、機能面の実装だけにとどめていたので、今回はスタイリングを行いました。また、styled-componentsを初めて使ってみました。普段はTailwind CSS
HTML: file読み込みで疑似loop
以下の例ではfileを読み込んだ直後からa要素にloop回数を表示しています。これだけでは当然何の意味も無い処理です
“`html
【Nuxt 3とLambdaでTypeScriptの型を共有】：🔰エンジニアが感じたモノレポ構造の威力## はじめに
こんにちは。入社2年目、実務経験約半年の駆け出しフロントエンドエンジニアです。日々の業務では主にNuxt、Vue、AWS、TypeScriptを使って開発を行っています。今回は、最近の開発で採用した「モノレポ構造」を通じて、型の共有がどのように役立つかについてお話しします。駆け出しのエンジニアの方にとって、少しでも参考になる情報をお届けできれば嬉しいです。
## 現在の開発環境
私の現在の開発環境は以下の通りです：– フロントエンド: Nuxt 3
– バックエンド: AWS Lambda (Node.js)
– 共通言語: TypeScript## 直面していた悩み
フロントとバックで別々のリポジトリに分かれていると、同じ型を使いたいのに、変更があるたびに手作業で同期しなければならず、とても面倒だなあと思っていました。
結果として、型の不一致が原因でエラーが発生したりして、開発スピードが落ちることもありました。## 型共有の課題とモノレポ構造との出会い
フロントエンドとバックエンドで型を共有する一般的な方法としては、以下のようなものがあります：1
