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

EcmaScripModuleを使う際の注意点

# ■はじめに

こんにちは。白水（しらみず）と申します。
普段は不動産スタートアップでフロントエンドエンジニアとしてお仕事しています。

今回「EcmaScripModule」を使うにあたって知っておくべき注意点について書いています。

[Shiramizu\_Junya lit\.link\(リットリンク\)](https://lit.link/js226)

# ■モジュールとは何か？

モジュールとは、1つの部品を意味します。

通常、モジュールはクラスや便利な関数です。

[モジュール](https://ja.wikipedia.org/wiki/%E3%83%A2%E3%82%B8%E3%83%A5%E3%83%BC%E3%83%AB)


上記画像のように、sayNameという関数をs

Reditor.jsを作った話

### はじめに
どうもこんにちはれししぐです。
このアカウントに変える前にあるアカウントで活動してました。
公式サイト：https://resisigu.42web.io/resisigu
Scratch：https://scratch.mit.edu/users/resisigu
Discord：@resisigu
プログラミングが好きな中学生です！
## 本題
まあ今回ReditorJSっていうのを作ったんですけど、
きっかけはEditorJSとかTinyMCEっていうやつなんですよね。
EditorJS : https://editorjs.io
TinyMCE : https://tiny.cloud
こう言うの作ってみたいなってことで、
僕の名前 resisigu + editor でReditorと言う名前にしました。
初めて作ったのでネットでコード調べたりでしたが、まあまあ良くなったと思います。
フリーソースではありませんが、
https://resisigu.42web.io/reditor/
で他のところでの埋め込み方を説明しているので使ってくれると嬉しいです。（フ

stimulus について知らないので簡単に調査したというメモ

Rails で stimulus を触れる機会があったため、そもそも何なのか基礎から調べることにした

# 概要
> Stimulus is a JavaScript framework with modest ambitions. It doesn’t seek to take over your entire front-end—in fact, it’s not concerned with rendering HTML at all.
>
> 「Stimulus は、控えめな目標を持つ JavaScript フレームワークです。フロントエンド全体を制御しようとするものではなく、HTML のレンダリングにはまったく関係ありません。」 (原文翻訳)
>
> 引用：https://stimulus.hotwired.dev/
* 最近はやりの React も JS のライブラリということで stimulus の比較対象としてサンプルコードを見比べた
→ 「[React のサンプルコード](https://ja.react.dev/)」 v.s. 「[stimulus のサン

event.targetプロパティを使用したプログラム例

## 1. 概要
`event.target`は JavaScript でイベントが発生した要素を指します.

ここではチェックボックスの切り替えを検出して，その結果をコンソールに出力する簡単な例を紹介します.

（初心者の勉強記録です．）

## 2. 実装例

### 2.1. チェックボックスの設置

以下の HTML コードによりチェックボックスを作成します．

“`html

チェックボックス

“`

### 2.2. ボタン要素の取得

`sample-Btn` というIDを持つ要素を取得し，変数 `checkBtn` へ格納する．

“`script
//script
const checkBtn = document.getElementById(‘sample-Btn’);
“`

### 2.3. イベントリスナー設定

チェックボックスの状態が変わったときに `typeChange` 関数を呼び出す．

“`sc

横棒って200本あんねん【Markdown AI】

すみません．200本も無いです．

# きっかけ
論文を書いている時に数字の範囲を示す横棒についての指摘をされた．波線がダメなのは知っていたが，ハイフンではなくエンダッシュを使うようにと……．なんか長さとか高さ違うのあるよな〜とは薄々思っていたけど，なにそれ．ちなみに[約物](https://ja.wikipedia.org/wiki/%E7%B4%84%E7%89%A9)というWikipediaのページに詳しく載っている．

# 今回作ったサイト
題して…… [横棒って200本あんねん](https://mdown.ai/content/a79275ac-f6ad-4d44-a308-5f1d6f1d1e87)

作ったサイトでAIが返答している様子は以下

# 前提
– Googleアカウントを持っていること
– 筆者は非

HTML,CSS,JavaScriptの勉強メモ

:::note info
最終更新日：11/15/2024
:::
# HTML
“` example.html











“`
### 要素
“`.html

“`
– **文書型宣言**
– **必須**の前書き
> – 昔々、 HTML がまだ出来たばかりの頃（1991 ～ 2 年）、文書型宣言は HTML ページが正しい HTML と見なされるために従わなければならない、一連のルールへのリンクとして機能することを意味していました。つまり、自動エラーチェックなどの有益な

GASとOpenAIAPIで好きな人のものまねをしてくれるLINEBOTを作った話

# はじめに
この記事は3か月ほど前にお遊びで作ったLINEBOTについての概要と解説です。記憶を掘り返しながらの執筆になりますので、細かい部分が抜けている可能性もあります、ご了承ください。

一応下のリンクから追加できますのでよかったら遊んでみてください！トーク履歴ファイルを投げてもらうだけで　分析　➡　会話　ができます。

あんまし精度は高くないです^^

ちなみにトーク履歴の中身はこちらからは確認できないので安心してください、！（こうするとできちゃうよー！ってのがあれば教えてほしいです😢）
※筆者のOpenAIAPIの残高次第です。

https://lin.ee/SqFD5DmH

ソースコードもGithubに公開してあります。

https://github.com/tsuchidarikuto/monomanelinebot

## 経緯
何か実装の経験が欲しいなと思っていたある日、私のtwitterのタイムラインにこんな記事が流れてきました。

https://x.com/livedoornews/status/1806317222526361846

これを見て私は、「

283文字(4行)でスネークゲームinHTML

# はじめに
初投稿です。タイトルの通り、HTMLでスネークゲームを作りました。メモ帳にコピペして拡張子を変えればプレイできます。矢印キーで操作しましょう。
ソースは284文字(293バイト)。jsだと一番短く書けてるんじゃないかな？
# で、そのソースがコレ
~~~

JavaScript

コードゴルフ

ショートコーディング

元記事を表示

returnは関数の出口です！

https://x.com/sho_owarai/status/1856953236642738397

論理演算子の基本

https://x.com/sho_owarai/status/1856965549420679366

VFを呼び出すカスタムボタンをLEXでも使えるようにする（リストボタン編）

長年Classic環境で運用されていた、VFページを呼び出す処理を実装したJavaScriptカスタムボタン。

↓

これをLightning Experience環境でも使えるようにしたい
（LEXではJSが使用不可のため、作り直しが必要となる）

方針としては、既存のVFページやコントローラクラスに手を入れる必要はなく
JS内で設定しているURLにリンクを飛ばせればよい。今回は画面フローで実装することにする。
※URLパスおよびパラメータ（SFIDをカンマ区切りで連結）を設定する

Classicではカスタムボタンを押した瞬間にVFを開くが、
LEXでは画面内に表示したリンクをクリックすることでVFに遷移する。
操作がワンクッション増えてしまうが、ベストな実現方法が思いつかなかったので
他に良いやり方があれば教えてください。

↓

①フロー

freee会計のファイルボックスのファイル詳細画面にショートカットキーを実装し入力を楽にしてみた

# これは何？
いつも経理にfreee会計を使っています。どうもfreee会計にはショートカットキーがなさすぎてマウスでの操作が多く、特に証憑から入力する経理作業に時間がかかっていました。
そこで「ショートカットキーが無ければ作ればいいじゃない！」の精神で実装してみました。

# 実装
使うのは[Shortkeys (Custom Keyboard Shortcuts)](https://chromewebstore.google.com/detail/shortkeys-custom-keyboard/logpjaacgmcbpdkdchjiaagddngobkck)というChrome拡張機能です。あるサイトにおいて任意のキーが押されたときに任意のJavascriptを走らせることができるので、これを使います。freee会計はdata-testid属性などが付けられていてとても要素を取り出しやすい✨
なお、この拡張機能のコメント欄に拡張機能が動かないという書き込みがありますが、以下を行うことで動作することを確認しています。

1. 拡張機能の設定変更後は保存する
1. 拡張機能の設定

[ScriptAPI参考書] 基本的な扱い #3

# 目次

• はじめに
• World

  • afterEvents
  • beforeEvents
  • scoreboard
  • structureManager
  • gameRules

vscodeでのTypeScriptのライブラリ開発とかでJSから参照するとき型を表示させる方法

今回は発見したライフハックを紹介します。
前提として、Visual studio codeに以下拡張機能を入れてください。

https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next

## TL;DR
TSで作ったライブラリを外部からJSで参照するときは`index.js`と`index.ts`を用意すると型補完(?)ができる

## フォルダ構成
“`
dist
– bundle.js
src
– index.ts
– …
…
“`
このような構成のライブラリとかを他フォルダから参照する場合はフォルダ配下に以下を追加します。
“`
index.ts
index.js
“`
そしてその内容を以下にします。
“`js:index.js
export * from “./dist/bundle.js”
“`
“`ts:index.ts
export * from “./src/index.ts”
“`
## 何をしたか
拡張子以外同じJS/TSで同じ内容

Apexクラスを呼び出すカスタムボタンをLEXでも使えるようにする（詳細ページボタン編）

長年Classic環境で運用されていた、Apexクラスを呼び出す処理を実装したJavaScriptカスタムボタン。

※参考URL：[tyoshikawa1106のブログ – SFDC：カスタムボタンからApexを呼び出す方法](https://tyoshikawa1106.hatenablog.com/entry/2016/10/16/204736)


これをLightning Experience環境でも使えるようにしたい！
（LEXではJSが使用できないため、作り直しが必要）
↓

①Apexクラスを修正
呼び出したいクラスのアクセス就職子がglobalになっていなかったらそのように修正。
呼び出したいメソッドに@InvocableMethodアノテーションを追記。（フローから呼び出せるようにする）
![6.png](https://qii

【個人開発】旅行予定管理アプリ爆速で作ってみた【React】

## 「旅ジョーズ」というサービスをリリースしました。


以下にサービスを公開しています。

https://ryomeblog.github.io/tabi-jaws/

:::note warn
※ 個人開発したアプリなので使用する際は自己責任でお願いします。
:::

## GitHub

以下にソースコードを公開しています。

https://github.com/ryomeblog/tabi-jaws

## 旅ジョーズというサービスについて

### はじめに

なぜこのようなアプリを作ったかというと、、、

かなり前になりますが、「行程さん」というWebサービスがサ終してしまい、似たようなサービスがないか探していたのですが見つからず、、、

類似サービスがまったくないわけではなかったのですが、「**広告がストレス**」、「**ユー

flatMapで遊ぶFizzBuzz　「すべてがFになる」

前回は flatMap がどんなものなのかという基礎の部分を考えたね。

#### 前回記事

https://qiita.com/KentaroMorishita/items/e4ecbfdd14b15a501547#array%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9Ffizzbuzz%E3%81%AE%E5%AE%9F%E8%A3%85

今回は、flatMap と前回作った`Box`を活用して、処理のサンプルとしてちょうど良い FizzBuzz の実装をしてみようか。

## FizzBuzzって？

知らない人はそんなにいないと思うけど、

https://wa3.i-3-i.info/word18535.html

こういうやつです。

## `Box`型のおさらい

まず、基本の`Box`型をおさらいしておくよ。前回作った`Box`は、次のように定義した。

“`typescript
type Box = {
map: (fn: (value: T) => U) => Box
flatMap: (fn: (v

元記事を表示

ブラウザで表示されているリンク取得

ブラウザで表示されているリンク取得

// すべてのリンクの href 属性を取得してコンソールに表示する
const links = Array.from(document.querySelectorAll(‘a’));
const hrefs = links.map(link => link.href).filter(href => href);

// すべてのリンクをコンソールに出力
console.log(“リンク一覧:”);
hrefs.forEach(href => console.log(href));

// クリップボードにコピー
const textToCopy = hrefs.join(‘\n’);
navigator.clipboard.writeText(textToCopy)
.then(() => console.log(“すべてのリンクがクリップボードにコピーされました。”))
.catch(err => console.error(“コピーに失敗しました: “, err));

元記事を表示

【JavaScript】Reflectについて

今回は【JavaScript】Reflectについての備忘録です。

## 1: Reflectとは？
・Reflectとは、「JSエンジン内部の汎用的な関数」に直接アクセスできるオブジェクトのこと。

## 2:「Reflect」をもう少し詳しく
⬇︎
◾︎JSエンジンでは内部でのみ使用される「内部メソッド」というものを保持している。
［［Get］］
［［Set］］
［［Delete］］
［［Construct］］

⭕️◾︎「Reflect」によってこの「内部メソッド」を間接的に呼び出すことができる。
get
set
deleteProperty
construct

## 3:Reflectを使用する目的は、主に2つ。
⬇︎
①「内部メソッドを、Reflectに格納していく」ことによって【Reflectを通して内部メソッドにアクセスするという目的。】

②「Proxyと合わせて使用する目的。」

主に以上の2点です。

## 4:実際に【Reflectを通して内部メソッドにアクセスしてみよう。】

__実践1__: 下記のようにn

元記事を表示

アプリの機能に悩むあなたに

個人開発でアプリを作成するときに基本意識するのはCRUD
ここに関しては多くの人が認識済みかもしれませんが、

個人開発でアプリ作成時の機能に関して、
**「自分の得意分野から」攻めたほうが良い**と考えます
同時に
**相手の得意分野は避けたほうがいい**と考えます

何言っているかわからないかもしれませんが、
以前テレビで見てたあたしンちのエピソードにヒントがあります

あなたが開発するアプリをプレゼントと例えてみてください

それは「相手によろこんでもらえるかどうか分からない」という不安にもなります

コーヒー好きな人に下手なコーヒー贈ると、
**ああこれね**
その人のほうが、あなたより舌が肥えていたらそのような反応が返ってくるリスクがあります

同じように、ついアプリ作成時に高度な技術を付けないとで加点法形式で「あの人は、○○が好きだから」という根拠を求めてしまいます

少なくとも「あの人はきっとLINEが好きだから」でプラス1点(だからLINE通知を実装しました)
少なくとも「みんな、おすすめを求めている」でプラス1点(だからレコメンドを実装しました)

そのプラスが、なん

元記事を表示