f@ctor

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

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

「JS」パラメータに再び値を割り当ててはいけない

背景　
—————————————

以下のようなコードを書きましたが、書いてはいけないと言われたので、その理由について調べてみました。
“`js
function test(value) { // value パラメータ
value = 13; // パラメータ再び割り当て
return value;
}
test(30);
“`

例
—
関数内でパラメータの再割り当てるコードを書いてみました。どんな結果が出るか予測してみましょう。
“`js
var makePerson = function(favoriteColor, name, age) {
if (arguments.length < 3) { favoriteColor = "green"; name = arguments[0]; age = arguments[1]; } return { name: name, age: age,

元記事を表示

【個人開発】麻雀の着順条件ツールを作りました

# はじめに

初のWebサービスデプロイです。

# アプリの紹介
![welcome.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3457770/107eceac-ba99-b2f0-f836-39509a5ce804.png)

## サービスURL

レスポンシブ対応（スマホ・タブレット・PCで使用可能）です。

https://mahjong-runk-navi.glitch.me/

## Github

https://github.com/Kohki-Takatama/mahjong_runk_up_navi

:::note info
「着順ナビ」は「どうすれば着順が高くなるか」がわかる麻雀ツールです。
:::

:::note warn
雀魂など「外部ツールの使用」が禁止される環境での使用は想定していません。
友人との麻雀や、振り返りなどでお使いください。
:::

## 使い方

| |
|:-:|
| ![スクリーンショット 2024-06-04 14.16.50.png](

元記事を表示

レスト構文 [JavaScript]

レスト構文は、「…」と点を３つ書いて表現するものとなりますが、
以前書かせて頂いたスプレッド構文と似ているものになるのでごちゃごちゃにならないように整理したいと思います。

簡単に区分けするのであれば、

スプレッド構文　＝　「広げるイメージ」
レスト構文　＝　「集めるイメージ」

で覚えればいいかと思います。
特に、英語のスプレッドは「拡散」という意味もあり、ゲームやアニメを多少かじっている人であれば耳馴染みもあるかと思います。

それでは、スプレッド構文は、前回まとめた記事を参照していただき、今回はレスト構文についてまとめていこうと思います。

https://qiita.com/shisshi_engineer/items/9c75dae5ba1834bc5ed3

## 目次：
– [レスト構文](#レスト構文)
– [まとめ](#まとめ)

## レスト構文

>参照：MDN
>残余引数構文により、関数が不定数の引数を配列として受け入れることができ、可変長引数関数を JavaScript で表すことができます。

とあります。

#### 1-1. 例：パラメータの中身の

元記事を表示

Markdown is all you need!

![IMG_2852.jpeg](https://storage.googleapis.com/topdowncom/content/kqmyfjwWDJNNkVkY6G3mlruHqlx2/e647d470-d9fe-44f0-a4d3-7e67e1f2f3db/IMG_2852.jpeg)

# Markdown AI プロジェクト始動！

## MarkdownとAIでWebサイト作成？

![IMG_3080.jpeg](https://storage.googleapis.com/topdowncom/content/kqmyfjwWDJNNkVkY6G3mlruHqlx2/20532f37-4150-458f-970c-c56e81aadf01/IMG_3080.jpeg)

Markdownのみで、Webサイト生成やサーバ処理を全て実現する、Markdown AIが当社よりリリースされました！

私はこの企業のファウンダー兼 アーキテクトとして、この1年間、絵本執筆よりはるかに多くの時間を費やしてきました。

無事リリース出来て嬉しいです。

企画や開発に携わって

元記事を表示

【JavaScript】もっと見るボタンの実装

## はじめに
[参考記事](#参考記事)を読みながらjqueryで作成された「もっと見るボタン」を実装したのですが、理解のために自分でJavaScriptのコードに置き換えてみました。

以下のコードを読んで、「nth-child以外でわかりやすく書けないか？」と考えたことがきっかけでした。
“`
$(‘.comment-list:nth-child(n + ‘ + (moreNum + 1) + ‘)’).addClass(‘is-hidden’);
“`
（comment-listの6番目以降の要素に対してclass属性“`is-hidden“`を追加するっていうのはわかったけど…）

### 仕様
– イベントアプリの詳細ページ内でユーザーから送信されたコメントを表示する
– コメントが6件以上の場合に「もっと見るボタン」を表示する
– 「もっと見るボタン」がクリックされるか、コメントが5件以内の場合にボタンを非表示にする。
– コメントはページ内に直近で投稿された10件まで表示する。

## View
今回説明の関係上、Railsのビューに関する説明は省略させて頂

元記事を表示

【Typescript】 アサーション(as) を避ける

## はじめに
開発業務で下記のようなコードを見て、エラーが出ている理由が不明だったため型アサーションについて調べてみました。

“`typescript
type User = {
name: string;
age: number;
};

const tanaka = (): User => {
return { name: “田中” };
};
// エラー
// プロパティ ‘age’ は型 ‘{ name: string; }’ にありませんが、型 ‘User’ では必須です。

const yamaguchi = () => {
return { name: “山口” } as User;
}; // エラーではない
“`

## 型アサーションとは
型推論の推測結果とは関係なく、型を上書きする機能です。
コンパイラーよりもプログラマーがより正確な型を知っている場合に使用します。

つまり、確信のある型にのみ型アサーションを使用して、その他はコンパイラーに任せる方がバグを生みにくいコードになり

元記事を表示

javaScriptで存在しない関数を呼び出した場合、エラーにせずに何らかの処理を実行する

## はじめに

PHPの`マジックメソッド`やRubyの`method_missing`に近い機能をJavaScriptで実装する方法です

通常、javascriptでは、存在しない関数を呼び出すとエラーが発生します

“`js:test.js
const obj = {};
obj.some_method();
“`

“`
$ node test.js
E:\Users\tkykn\git\proxy\js_method_missing\test.js:2
obj.some_method();
^

TypeError: obj.some_method is not a function
at Object. (E:\Users\tkykn\git\proxy\js_method_missing\test.js:2:5)
“`

この`obj`を[Proxy](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy)でラッ

元記事を表示

React 子コンポーネントから親コンポーネントの State を操作する例

## 三行で！

子コンポーネントで親コンポーネントのアクションを実行したいケースがあると思います。
これが少し面倒で、うまく行かず思ったような分離をできないなんて経験もあるのではないかと。
GPTもろくな文章返してくれないし、解説する記事も少ない気がするので一例として参考にしてみてください。

## 先に結論

こういうとき

“`js
interface Props {
state: boolean;
children: ReactElement;
}

export function Parent({ state, children }: Props): ReactElement {
return (
<>
ParentState: {state}
{children}

);
}

function Before() {
const [parentState, setParentState] = useState(false);

const parentAction = () => {
setPa

元記事を表示

Cypress コマンドチートシート

[こちらのwebサイト](https://medium.com/@anshita.bhasin/commonly-used-cypress-commands-5ba0f7b55cfc)を参考に、分かりづらいところを付け足しながら作成させていただきました。

インストール方法やCypressのメリットなどは[公式サイト](https://www.cypress.io/)でご確認ください。

## コマンド一覧

#### `cy.visit()` ：特定の URL にアクセスするために使用する

“`jsx
cy.visit(‘https ://www.amazon.jp/’)
“`

この例では、`cy.visit()`コマンドを使用して URL “ [https://www.amazon.jp/”](https://www.amazon.jp/)にアクセスしています。
これは、その URL のページの動作をテストする場合や、特定の URL にリダイレクトされたときのページの動作をテストする場合に役立ちます。

#### `cy.get()` ：ページ上の要素を選択するた

元記事を表示

how to handle the table.20240603

how to handle the table.
plese reference this site.

“`



Table Insertion and Update


Ke

Javascriptのイベントを消しずらくする方法

# 経緯
サポート詐欺ページが出たらEsc長押しという面倒なことや、
Ctrl+Alt+Deleteでタスクマネージャーを起動して泣く泣く
すべてのタブを犠牲にすることになる時がありました。

そのため、Ctrl+Alt+Shift+@キーでそのタブを簡単に消せるようなChrome拡張機能を開発しました。
しかし、もし仮にこれが有名になれば対策が打たれてしまいます。
このタブを消す仕組みは、`document.addEventListener`でタブを消すショートカットキーを検出してサービスワーカーにタブを消すメッセージを送って…となっています。

`addEventListener`で追加したイベントリスナーは関数の内容さえ知っていれば`removeEventListener`で消せるのです。

#### 要点1: イベントの内容が分かっていればイベントを消せる

自分はこのプログラムをオープンソースにするつもりですし、
仮に公開していなくてもコードを解析されて関数を消せるようになってしまうと意味がなくなります。
しかし、幸い`addEventListener`で追加した内容は

配列のメソッド 高階関数 [JavaScript]

配列のメソッドについて、以前の投稿で書かせていただいたのですが、
高階関数の形を取る配列のメソッドについては言及していなかったので、
高階関数をまとめた上で、改めて高階関数の形を取る配列のメソッドについてもまとめておこうと思います。

また、高階関数とは？配列のメソッドの基本とは？と疑問に思われた方は、下記文章にて記載させて頂いております。

ご参考までに。

>参照：
>[配列　[JavaScript]](https://qiita.com/shisshi_engineer/items/a6c39764536fb960dda6)
>
>[高階関数の基本 [JavaScript]](https://qiita.com/shisshi_engineer/items/5a8d577d9eb3cf7a7a7a)
>

## 目次：
– [1. forEachメソッド](#1-foreachメソッド)
– [2. mapメソッド](#2-mapメソッド)
– [3. filterメソッド](#3-filterメソッド)
– [4. someメソッド](#4-someメソッド)
– [5. ev

法律の（かっこ）ネスト問題：深すぎる「◯段ネスト」条文と、読解を拒む「とあるのは」条文《法令.app》

誰でも楽しく:books:法律:books:が読める[《法令.app》](https://jplaws.app)というWebアプリを作っています。

https://jplaws.app

## :open_mouth: 誰にとっても平等に「条文は読みにくい」

当初はWebアプリにするつもりはなく、Chromeの「拡張機能」で、「漢数字」をローマ数字にするだけで読みやすくなると考えました。「昭和六十年」を「1985年」、「一、○二五、二○○円」を「1,025,200円」にするだけで頭に入りやすくなります。

しかし、拡張機能はセキュリティの制限が厳しくなり（前はできた気がしますが）本文を書き換えるのは「裏ワザ」的になり、今後はさらに厳しそうでした。

次はどうしようかと調べているときに、カルアパ(@lawyer_alpaca)さんの記事を見つけました。「すでに先のことまで大体やられてしまっているぞ。。」と思って、開発意欲がいったんゼロになりました:weary: ３ヶ月くらい考えるのも止めてましたね。

https://qiita.com/lawyer_alpaca/items/0e4

【アイディア】「検索してはいけない言葉」をびっくりせずに見る拡張機能

## 前書き

これはただのアイディアです。
コードはありません。

## 要求

サイト内のグロ画像を見たくない。
でも気になる。どうしたものか。

## 拡張機能の概要

* サイト内のすべての画像/動画のサムネにモザイクをいれる
* 背景も画像なら例外なくモザイクが適用される
* モザイクはダブルクリックで解除/再適用される
* 部分的にモザイクが外せると尚よい
* 段階的にモザイクが外せると尚よい
* 初期表示以外のタイミングで出てくる画像などもきちんとモザイクが適用される
* とにかくグロ画像を急に見させない

## 動機1

怖いもの見たさで「検索してはいけない言葉」のサイトを見たいが、グロ画像は見たくないから。

## 動機2

5chに貼られている画像リンクを確認すると、釣りでグロ画像を見せられるケースがあるから。

## 最後に

自分で作ればいいだろ、と思われるかもしれないが、
Chromeの拡張機能は初回に5ドル取られるのが怠いのでね。。。
いまいちやる気が湧かない。

ちなみに今は画像を見るときは目をかなり細めてから大丈夫そうか判断しています。

Open BIM Components(IFC.js)の最小構成

# はじめに

2023年9月[^Sep]？11月[^Nov]？くらいにIFC.jsが一新されて、[`Open BIM Components`](https://github.com/ThatOpen/engine_components) というライブラリに変わっていました。

[^Sep]: 2023年9月に`web-ifc-viewer`が[非推奨になっている](https://github.com/ThatOpen/web-ifc-viewer/commit/1f5c975ad6d019e7355c8759369f318f9fa3e339)
[^Nov]: 2023年11月に`Open BIM Components`の初板?が[リリース](https://github.com/ThatOpen/engine_components/releases)

もともと `IFC.js`は `web-ifc`, `web-ifc-three`, `web-ifc-viewer` の3つのレイヤーで構成されていました。それが、IFCのパーサーである `web-ifc` はそのままで、ブラウ

【React/Firebase】TodoistCloneアプリに挑戦してみました

## 目次
– [目次](#%E7%9B%AE%E6%AC%A1)
– [はじめに](#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB)
– [完成イメージ](#%E5%AE%8C%E6%88%90%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8)
– [筆者について](#%E7%AD%86%E8%80%85%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)
– [経緯](#%E7%B5%8C%E7%B7%AF)
– [技術スタック](#%E6%8A%80%E8%A1%93%E3%82%B9%E3%82%BF%E3%83%83%E3%82%AF)
– [実装について](#%E5%AE%9F%E8%A3%85%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6)
– [テーブル設計](#%E3%83%86%E3%83%BC%E3%83%96%E3%83%AB%E8%A8%AD%E8%A8%88)
– [ディレクトリ構成](#%E3%83%87%E3%82%A3%E3%83%A

ソフトウェアキーボード「jQuery Keypad」を使用してみる

# はじめに
お仕事にて`Classic asp`で作成された既存アプリケーションを`Blazor Server`に作り替える作業をしています。
このアプリケーションには、ガラケーの文字入力を模したソフトウェアキーボード(1キーで3文字割り当て)が作成されておりました。
これを`Blazor`で一から作成し直すのは面倒だしコストも掛かります。現在の使用状況を調べたら、3年前を最後に使用されていないようでした。
実質オマケ的な感じでもあればいい状況です。

そこで見つけたのが、ソフトウェアキーボード「jQuery Keypad」でキーのカスタマイズ可能です。

http://keith-wood.name/keypad.html

# 環境
|ライブラリー|バージョン|
|:–|:–|
|jQuery.min.js|3.7.1|
|jquery.plugin.min.js|-|
|jquery.keypad.min.js|2.1.1|

https://github.com/kbwood/keypad

## 準備
jQuery Keypad 2.1.1のCDNが見当たらなかったた

Javascript　map　配列を新しく作るとは

## map　配列を新しく作るとは
記事を書いたきっかけ

Javascriptでmapを使ったループをさせる方法の書き方を勉強しているときに新しく配列を
作るという言葉の意味がしっくりとイメージをつかめていなかったので記事を作ることにしました！

## 挙動を確かめるためのコード
“`
const numbers = [1,2,3,4];
const double = numbers.map(( (value) =>{
return (value * 2);
}))
console.log(numbers);
console.log(double);
“`

## 実行したコード結果
“`
(4) [1, 2, 3, 4]0: 11: 22: 33: 4length: 4
(4) [2, 4, 6, 8]0: 21: 42: 63: 8length: 4
“`
## ここから分かったこと
* mapで配列を生成したときにはmapを使う際のもとになった配列とは参照している先が違うこと
* mapで配列を新しく生成したときに(ここではdouble)元の配列（

アロー関数 [JavaScript]

アロー関数とは、関数式を簡潔にかける新しい書き方になります。

通常の関数式を簡潔に掛ける大替構文となり、functionのキーワードを使用せずに使うことができます。
また、アロー関数は、その名の通り、=>(矢)を使って関数リテラルを記述します。

例を参照しながらアロー関数についてまとめていきたいと思います。

## 目次：
– [関数と関数式とアロー関数](#1-関数と関数式とアロー関数)
– [アロー関数の例](#アロー関数の例)
– [アロー関数の暗黙的なreturn](#アロー関数の暗黙的なreturn)
– [まとめ](#まとめ)

## 　1. 関数と関数式とアロー関数

#### 1-1. 関数と関数式の違い

関数では、functionを使って関数宣言をして、returnで戻り値を設定して戻すことにより
*関数で算出された値を別の関数の計算に使うことができました。*

https://qiita.com/shisshi_engineer/items/da93acbbf8dcbb519f1b#return-function%E9%96%A2%E6%95%B0%E3%8

フロントjsでも使えそうなデータ保存方法

## はじめに

趣味でプログラミングをする際にフロントjsを使うことが多いのですが、
フロントjsのみでデータを保存することができるのか気になったので調べました。

※なんだかんだ言って面倒だからGPTにコード生成してもらった。

使用ライブラリに関しては下記記事のデータストレージの項目から選びました。

https://qiita.com/rana_kualu/items/96b303307d6435aedf8b#%E3%83%87%E3%83%BC%E3%82%BF%E3%82%B9%E3%83%88%E3%83%AC%E3%83%BC%E3%82%B8

## 自分が使いたいもの(メモ)

どれか一つを選ぶとしたらDexie.jsを使おうと思っています。

正直、indexedDBを使用していて[フロントjsで使えるもの](#フロントjsで使えるもの)であればなんでもよく、
その中からDexie.jsを選んだ理由は他のフロントjsで使用できるライブラリと比べて性能が
どうこうというよりただの好き嫌いで選んでいます。

Dexie.jsはLocalForageやPouchdbと比

OTHERカテゴリの最新記事