- 1. Vue datepickerで【和暦】＋【年度/月】の表示
- 2. MathJaxのLaTeXから画像ファイルを錬成する
- 3. [javascript] ObjectとArrayの小技集
- 4. 【Elysia/Bun】Elysiaサーバーをhttpsにする
- 5. [javascript] カラフルなconsole.log
- 6. Labs.perplexity.aiでの日本語入力中のEnterで送信されないようにする。
- 7. 【React】Firebase認証の実装してみる：React Bootstrapのモーダルウィンドウを活用してログインとユーザ登録を行う
- 8. JavaScript頻出メソッド
- 9. 【メモ】Async・Await・Promiseについて
- 10. オブジェクトの一つだけ抜き出したいマン
- 11. 【JavaScript】プロトタイプとは
- 12. 【JavaScript】typeof演算子とは
- 13. 【JavaScript】Setオブジェクトとは
- 14. Vueで動的にコンポーネントを追加・削除するには？(script setup構文にて)
- 15. 【コピペ】特定のHTML要素の下部まで画面をスクロールさせる関数
- 16. SVG要素を、SVGファイルとして保存、PNGファイルとして保存
- 17. 某銀行のネット振込で確認番号の入力を自動化するスクリプト
- 18. 【JavaScript】構造化データとは
- 19. 【JavaScript】JSONとは
- 20. CSVダウンロード自分用メモ
Vue datepickerで【和暦】＋【年度/月】の表示
# Vue datepickerの年選択と選択年月日で和暦表示を追加する
### 参考サイト
[Vue datepicker公式(#year-overlay)](https://vue3datepicker.com/slots/overlay/#year-overlay])## 最終結果
## 準備
year-overlayを利用して年選択画面を”select”仕様に書き換える。(公式より↓)
“`js:vue
MathJaxのLaTeXから画像ファイルを錬成する# MathJaxのLaTeXから画像ファイルを錬成する
この記事は[アドカレ](https://qiita.com/advent-calendar/2023/hachinohe_kosen)に参加しています。
## LaTeXってなに？
平方根や、行列式などを綺麗に表示したいときがあります。そんなときに役に立つのが、LaTeXという記法です。例えば、Qiitaで$a = \sqrt{10}$と表示するには以下のように書きます。
“`TeX
a = \sqrt{10}
“`LaTeXで表わせる数式記号はたくさんあります。
・[Qiitaでの様々な数式の書き方 ～ TeX記法を使ったサンプルコード付き](https://qiita.com/ttabata/items/92a4a72b042e6a2dbbad)
・[よく忘れるので数学のTeX記法をまとめ](https://qiita.com/shepabashi/items/27b7284d1f0007af533b)
・[場合分けをきれいに書く](https://qiita.com/Yarakashi_Kikohshi/ite
[javascript] ObjectとArrayの小技集
# 空の要素を除く
“`javascript:example.js
const array = [“foo”, “boo”, “”, “bar”];
const newArray = array.filter(Boolean); //[“foo”, “boo”, “bar”]const paragraph = `これは一行目です
これは二行目ですこれは三行目です
これは四行目です
`;
const sentences = paragraph.split(“\n”).filter(Boolean);
// [“これは一行目です”, “これは二行目です”, “これは三行目です”, “これは四行目です”]
“`
このコード行は、JavaScriptにおいて配列から「falsy」(偽と評価される) 値を取り除く簡潔な方法を示しています。ここで使用されている .filter() メソッドは、配列の各要素に対してテスト関数を実行し、その関数が true を返した要素のみからなる新しい配列を生成します。# ObjectのキーをArrayにする
このコードスニペットでは、user
【Elysia/Bun】Elysiaサーバーをhttpsにする
Elysiaサーバーを作っていて、証明書なしの http は問題なくNet上にいくらでもサンプルがあります。でも、https にしようとすると、BunについてのBun.serveによる tsl 設定方法は見つかるのだけれど、new Elysia()では2024年3月現在ほぼ見当たらず試行錯誤して判ったので、簡単にメモしておこうと思います。
letsencryptを使った方法ですが、こんな感じです。
“`:ts server.ts
import { Elysia } from ‘elysia’;
const PORT = 443;
const KEYS = {
cert: Bun.file(“/etc/letsencrypt/live/＜ドメイン名＞/cert.pem”),
key: Bun.file(“/etc/letsencrypt/live/＜ドメイン名＞/privkey.pem”)
}const app = new Elysia()
.get(‘/’, () => ‘my https server is running!’).listen({
[javascript] カラフルなconsole.log
# はじめに
普段、一面の白いconsole.logを見て、イライラしたり、重要な情報を一目で見つけるのが難しいと感じたことはありませんか？今日は、console.logをカラフルに変える方法を皆さんに共有します。# エキスパート関数を作る
“`typescript:messageUtil.ts
import dayjs from “dayjs”;const getTime = () => {
return dayjs().format(“HH:mm:ss:SSS”);
};
const getLabel = () => {
return `[${getTime()}]`;
};export const success = (msg: string) => {
console.log(“\x1b[32m%s \x1b[0m”, `${getLabel()} SUCCESS: ${msg}`);
};export const error = (msg: string) => {
console.log(“\x1b[31m%s \x1b[0m”, `${g
Labs.perplexity.aiでの日本語入力中のEnterで送信されないようにする。
:koala: 以下の文はDBRX-Instructに作成してもらいました。
:koala: tampermonkeyが必要になります。Perplexity.ai Composition Events について
=========================================この記事では、Perplexity.ai Composition Events という UserScript について解説します。この UserScript は、日本語入力中に Enter キーを押下しても検索クエリが送信されないようにするものです。
Perplexity.ai Composition Events とは
————————————Perplexity.ai Composition Events は、日本語入力中に Enter キーを押下しても検索クエリが送信されないようにする UserScript です。この UserScript は、labs.perplexity.ai の Web サイトで使用することを想定していま
【React】Firebase認証の実装してみる：React Bootstrapのモーダルウィンドウを活用してログインとユーザ登録を行う
## はじめに
ReactにFirebaseを統合して認証機能を実装しました。そして今回は認証機能だけでなく、React Bootstrapのモーダルウィンドウを活用して、ログインとユーザー登録をスムーズに行えるようにしてみました。## 完成イメージ
ユーザー登録からログインへ移動することもできます(逆も同じ）
## デモページ
https://firebase-auth-template.vercel.app/
にて公開しています。
## クラス図
!
JavaScript頻出メソッド
# JavaScript頻出メソッド
## ・目的
記憶定着のため、頻出メソッドの用法をアウトプットする。## ・今回の対象メソッド
#### 〇配列処理に使用するメソッド
filter/map/reduce
#### 〇オブジェクト処理に使用するメソッド
Object.keys/Object.values/Object.entries## ・対象メソッドの用例
#### 〇filter
filterの引数にコールバック関数を渡し、コールバック関数で指定した条件を満たす対象配列の要素を格納した新しい配列を作成する。
“`
let menbar = [{Name: ‘John’, id: 25}, {Name: ‘Jane’, id: 30}, {id: 20}, {Name: ‘Doe’,id: 1}, {id: 22}]
let unKnowns = menbar.filter(function (person) {
if (!person.Name) { return true; }
});
console.log(unKno
【メモ】Async・Await・Promiseについて
今までなんとなくその場しのぎで理解していたAsynchronous Operationについて、備忘メモ的にまとめようと思う。
昔のJSでは、以下の様に .then() Callbackを使ってPromise Chainを書いていたが、これだと延々と.thenが続いてクリスマスツリーの様だ（アメリカではそう表現されてます）とのことで、async/awaitが今では主流だと教わっていました。
“`
const promise = xxx_func()
promise.then(() =>{…
}
“`しかしです。よくよく考えたら、Promiseを返さないFunctionもあるわけで、その場合にはPromise Chainがそこで分断されてしまいます。
そんな時は、このように、Promisifyすることで、Chainの一貫性を保つことができます。
“`
await new Promise((resolve, reject) => {
xxx.dosomething(error => {
if(error){
reje
オブジェクトの一つだけ抜き出したいマン
オブジェクト配列の欲しい一つだけ抜き出したいメーン
ほいさ、こんな感じ
“`js
const hogeList = [
{
name: “saburo”,
number: “3”,
},
{
name: “ziro”,
number: “2”,
},
{
name: “taro”,
number: “1”,
},
]const newArray = hogeList.filter(value => {
return value.name === “taro”
})console.log(newArray)
“`しかも新しい配列として用意できる
もちのろんで変数も渡して比較できる
多分もっと色々できる（見てる感じいっぱい条件つけていろんなことしてる）前も使ったのに忘れて毎度調べてしまう、、、、トリ頭や、、、、🐔
なのでメモ投稿
追記
今回の大切な知識、実務で使いそうなこと
・オブジェ
【JavaScript】プロトタイプとは
# プロトタイプとは
「プロトタイプ（prototype）」とは、オブジェクト指向プログラミングにおいて、あるオブジェクトが他のオブジェクトから継承する機能やプロパティを定義するための仕組みです。例えば、以下のコードでは、Animalというオブジェクトが定義され、そのプロトタイプとしてAnimal.prototypeが設定されています。そして、DogというオブジェクトがAnimalを継承し、新しいプロパティやメソッドを追加しています。
“`js
// Animalオブジェクトの定義
function Animal(name) {
this.name = name;
}// Animalオブジェクトのプロトタイプにspeakメソッドを追加
Animal.prototype.speak = function() {
console.log(this.name + ‘ makes a noise.’);
};// Dogオブジェクトの定義（Animalを継承）
function Dog(name) {
Animal.call(this, name);
}// D
【JavaScript】typeof演算子とは
# typeof演算子とは
`typeof`演算子は値のデータ型を返す演算子です。# 組み込み型(プリミティブ型)の場合
“`js
window.onload = function () {
// typeofの使用例// Number
console.log( ‘typeof 1 = ‘ + (typeof 1) );
console.log( ‘typeof 1.41 = ‘ + (typeof 1.41) );
console.log( ‘typeof Math.PI = ‘ + (typeof Math.PI) );
console.log( ‘typeof Infitity = ‘ + (typeof Infinity) );// String
console.log( ‘typeof “” = ‘ + (typeof “”) );
console.log( ‘typeof “abc” = ‘ + (typeof “abc”) );
console.log( ‘typeof “123
【JavaScript】Setオブジェクトとは
# Setオブジェクトとは
セットオブジェクトには以下の特徴があります。
– 値が一意であることが保証されている
– 順序を持たず、インデックスでアクセスできない# 値が一意であることが保証されている
以下のコードは、Setオブジェクトを使用して一意な値のコレクションを作成し、その動作を示しています。“`javascript
// Setオブジェクトの作成
const mySet = new Set();// 値の追加
mySet.add(1);
mySet.add(2);
mySet.add(3);
mySet.add(1); // 既に1が含まれているため、無視される// サイズの確認
console.log(“セットのサイズ:”, mySet.size); // 出力: セットのサイズ: 3// 値の重複が無視されることを確認
console.log(“セット内の値:”, mySet); // 出力: セット内の値: Set(3) { 1, 2, 3 }// 値の比較は厳密な等価性で行われることを確認
console.log(“1がセットに含まれているか
Vueで動的にコンポーネントを追加・削除するには？(script setup構文にて)
# はじめに
Vue.jsで開発をしている時に、タイトルみたいなことをしたくなったことが出てきました。
検索すると方法自体は結構出てきたのですが、`