- 1. さっくり解説するReact hooksのuseState
- 2. Promiseで定義したコールバックの実行順序
- 3. JavaScript 忘備録 ~効果音の鳴らし方
- 4. 正規表現：曖昧なパターンはエンジンによって動作が変わる（教訓）
- 5. paizaラーニング レベルアップ問題集 ソートメニュー応用編 JavaScript プログラミングレベル
- 6. １日の振り返りを簡単に楽しくできるSlack botを作ってみた（furikaeru）
- 7. 【NestJS入門?】NestJSを使用してCRUD実装!
- 8. 俺みたいになるな！Lambda+Node.jsでDynamoDBにputItemするだけで半日溶かしたAWS SAP
- 9. 何年か前の今日の日経春秋を検索するブックマークレット
- 10. AWS Lambda + Node.jsの実行環境でローカルタイムを扱いたいが、とりま日本時間JSTに甘んじる（JavaScript）
- 11. へっぽこエンジニアが MobX を更に学ぶ（Observable State の作成編）
- 12. webページにカスタムCSSを導入する拡張機能を作ってみた
- 13. 友だち自作超入門
- 14. 高専Wordleを作ってみた
- 15. とりま何か公開してぇならChrome拡張もええんでない？
- 16. 市販の汎用赤外線リモコンをスマートリモコンにする
- 17. お店選びのお供に！ 「食べログスター拡張」を作ってみた
- 18. PM2のログに時刻を表示したいなぁ……
- 19. immerを使うのは？ ……今でしょ！
- 20. MiniSearch を読んでみる ①
さっくり解説するReact hooksのuseState
# そもそもフック(hook)とは？
フックはReact16.8で追加された機能であり、
これによりstateなどのReactの機能を、クラスを書かずに使えるようになりました。# useStateとは？
useStateは関数コンポーネントにてstateを保持・更新するための機能です。
初回のレンダリングで、初期値となる値をuseStateに引数として渡し、その値が1つ目の要素のstateとなります。
2つ目の要素はstate値を更新するための関数となり、基本的にこの関数を使ってstate値を更新します。以下のように定義します。
“`TypeScript
import React, { useState } from ‘react’;const Example = () => {
const [state, stateを更新する関数] = useState(初期値);~~~~
“`# useStateを試してみる
“`TypeScript:Example.tsx
import React, { useState } from ‘react’;
Promiseで定義したコールバックの実行順序
Promiseを定義したときにasync/awaitするとコードを見たまま上から下に実行されるので難しくないのですが、then/catchで後の処理を定義するとどのタイミングでコールバックが実行されるのかわかっていませんでした。
ちょっと調べてみたのでまとめます。
# サンプル
aとbというPromiseを作ってそれぞれの関数の中でログを出力してみます。
また、各定義の間と、aとbをPromise.allした後にもログを出力します。“`TypeScript
const a = new Promise((resolve, reject) => {
console.log(‘a’);
resolve(‘a: resolve’);
})
.then(() => { console.log(‘a: then’); });console.log(‘aの後’)
const b = new Promise((resolve, reject) => {
console.log(‘b’);
resolve(‘b: resolve’);
})
.then(() =
JavaScript 忘備録 ~効果音の鳴らし方
# JavaScriptで効果音の鳴らし方
JavaScriptを用いて効果音を付けたいときのプログラムを書いていきます。howlerというライブラリを使います。
# HTML側
“`html
“`
# JavaScript側
“`javascript
//タイプ音読み込み
const sound = new Howl({
src: [‘./sound/type.mp3’]; //パスは変えて下さい
});
sound.play();// 任意タイミングで
“`
正規表現：曖昧なパターンはエンジンによって動作が変わる（教訓）
検索してどういうことなのか調査してみようとしたのですが、上手に検索できませんでした…。
検索しても全然それっぽい情報が出てこない！
のでとりあえず記事にしてみます。もし原因をご存じの方いましたらお教えいただけると嬉しいです…！
# 環境
– グループ1（JavaScript系）
– JavaScript (Firefox 104.0.2)
– JavaScript (Google Chrome 105.0.5195.127)
– グループ2（Perl系など）
– PCRE (PHP 7.3.11 & PCRE 10.32 2018-09-10: [RegExr.com](https://regexr.com/))
– Python 3.10 (re モジュール)
– コメントに頂いた検証：Ruby 3.1.2 (Onigmo)
– コメントに頂いた検証：CotEditor 4.3.4 (ICU)PCREは「PCRE ライブラリは、Perl 5 と同じ文法構文を用いた 正規表現パターンマッチ処理を実装した関数群ですが、多少異なる点もあります (以下を
paizaラーニング レベルアップ問題集 ソートメニュー応用編 JavaScript プログラミングレベル
プログラミングレベル (paizaランク C 相当)
https://paiza.jp/works/mondai/sort_advanced/sort_advanced__problems_speedup_step1
JavaScriptで解いてみました。
# 解答例
問題は好きな順序で解くことができるので、考えやすいように、aを難易度が小さい順にソートしておきます。
あとは、問題文に従って、aの難易度が小さい順に、以下の条件を満たすか調べていきます。
>難易度 a_i の問題を解くには「プログラミングレベル」が a_i 以上である必要
>難易度 a_i の問題を解くと「プログラミングレベル」が a_i + 1 になる変数flagを使って判定をします。
途中で解けなかったらfalse→No、全部解けたらtrue→Yesを出力します。
“`javascript:JavaScript
const fs = require(“fs”);
const input = fs.readFileSync(“/dev/stdin”, “utf-8”).trim();
const lines
１日の振り返りを簡単に楽しくできるSlack botを作ってみた（furikaeru）
## :frog: 解決したい課題
僕のチームでは有志のメンバーが、毎晩仕事が終わるときに、Slackのチームチャンネルで一日の振り返りを投稿しています。目的は２つ。
自分の頭の整理と、チームメンバーへの共有です。しかし、毎回フォーマットをコピペしに探しに行ったり、今日自分がやったことを思い出す作業にはまぁまぁの負荷があります。一日真剣に働いて、ウィルパワーが消耗し切っているのに、これはキツイです。それで、なかなか毎日続かない。一度サボると、やらなくなってしまう。そんな循環を繰り返しています。
それを少しでも楽にできるようにしようということで、botアプリを作ることにしました。
アプリの名前は`furikaeru`にしました。:frog:
`今は一般公開はしていませんが、一応それも見据えてコード書いたので、ゆくゆくできたらと考えていたり、考えていなかったり。`会社のインフラ使わせてもらっているので、インフラ代が気になるところ。:money_with_wings:
## :frog: 仕様
### 実装済みのもの
#### 1. アプリをチャンネルに招待するアプリのい
【NestJS入門?】NestJSを使用してCRUD実装!
### NestJSとは
NestJSとは、NodeJS環境で動くサーバーサイドアプリケーションフレームワークです。基本的にTypeScriptでコーディングを行いますが、JavaScriptで書くことも可能です。
Expressをコアに作られているので、Expressの機能は備えつつ、テストフレームワークJestを標準装備していたり、NestCLIを利用して効率良く開発を進めることができたり、多くの機能を搭載しています。
今回は、DockerでPostgreSQLサーバを立ち上げ、NestJSを用いた商品管理のCRUD実装を行なっていこうと思います。
### 1. NestJSのプロジェクト作成
NestCLIを使用して、NestJSのプロジェクトを立ち上げます。まずは以下コマンドで、NestCLIがインストールされて
俺みたいになるな！Lambda+Node.jsでDynamoDBにputItemするだけで半日溶かしたAWS SAP
## やりたいこと
ただただシンプルにLambdaでDynamoDBに書き込みたい。それだけなんです。初体験でも無い。
なのにハマって、シルバーウィークの初日の半日それで溶かしてしまいました。
AWS SAPの称号を剥奪されるかと思って誰にも相談できませんでした。https://qiita.com/kakudaisuke/items/174ff82b558b86d041b4
ちなみに、なんでそんなことしたいかというとコレです↓ :frog:
https://qiita.com/kakudaisuke/items/18681418cebc3bee93b5
## 実装！
### DyanmoDBの設計
完了したタスク(task)を、ユーザー(user)、日付(date)ごとに登録したいです。
で、取り出す時はあるuserとdateのtaskを全て取得したい。試行錯誤の末、保存したいアイテムはuser, unixtime, date, taskにしました。
ちなみに、user, dateはDynamoDBの予約語。予約語だけど使えちゃう。queryする時にちょい厄介だけど使
何年か前の今日の日経春秋を検索するブックマークレット
入力した[数値]年前の今日の日経春秋を検索する。
以下のどちらかで設定。
## 方法1
https://caiorss.github.io/bookmarklet-maker/
上記の生成ツールに下記のソースをコピーアンドペーストし、タイトルをつける。
Generate Bookmarklet ボタンを押し、作成された「春秋検索」リンク（下図青文字箇所）をブックマークバーなどにドラッグアンドドロップする。“`JavaScript
var defaultSub = “3”;
var subYaer = prompt(“何年前の記事を検索しますか？（半角数字を入力）”, defaultSub);var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var day = today.getDate();
var calcYear = year – subYaer;var baseUrl = ‘https://www.nikkei.com/searc
AWS Lambda + Node.jsの実行環境でローカルタイムを扱いたいが、とりま日本時間JSTに甘んじる（JavaScript）
## やりたいこと
AWS Lambdaで時間を扱うのに、日本時間JSTが欲しい。（本当はローカルタイムが欲しい。）
だけど、Lambdaではローカルタイムという概念がないらしく、全てUTCになってしまう。
日本時間JSTが欲しいと思っていると、9時間ずれた値が返ってきたり、表示が`19/9/2022`となって欧米か！とツッコミたくなったり、してしまう。ちなみに、なんでそんなことしたいかというとコレです↓ :frog:
https://qiita.com/kakudaisuke/items/18681418cebc3bee93b5
## 実装！
色々調べたが簡単に済ませたかったので、とりま+9時間してJ、日本的なフォーマットに自力でした。“`js:index.js
let dateTime = new Date();// JSTにする
time.setHours(dateTime.getHours() + 9);// 2022/9/19の形にする
const year = dateTime.getFullYear();
const month = dateTim
へっぽこエンジニアが MobX を更に学ぶ（Observable State の作成編）
本文はこちら
https://zenn.dev/taichi221228/articles/fd70bd8b121763
webページにカスタムCSSを導入する拡張機能を作ってみた
Qiitaへの投稿は初めてになります。Kendeaです。
クローム拡張機能を作ってみたので紹介をしたいと思います。# 概要
– カスタムCSSを活用して、学校の通信アプリを改造したいと思った
– もともと、調べてみるとStylishという拡張機能を使っていた
– だけど、要素を調べながら書きたいから自分で作ろうと思った## 作ったファイル
– manifest.json
– Classi-platform
– script.js
– style.css
– script.js
– style.css
– script.js
– style.css
– YouTube
– script.js
– style.css## コード
#### manifest.json
“`json
{
“name”: “Vialdi CSS Import for Kendea”,
“author”: “Kendea”,
“description”: “chrome extension for customize
友だち自作超入門
どうも，僕は友だちが少ない
スター宮☆みゆきです．今回は誰からも連絡が来ず一人寂しく眠れない夜を過ごさないで済むように，友だちを自作することにしました．
## Index
1. LINE Messaging API による簡易的な返信
2. Web hook で少し複雑なメッセージの返信## 要件
– 相手から返事が送られる
– メッセージの内容が変化する
– インターフェースは LINE## 開発
### 1. LINE Messaging API による簡易的な返信
手始めに LINE Messaging API で，メッセージを送信すると友だちから返信がくるようにします．
LINE Messaging API の設定は[こちら](https://qiita.com/nkjm/items/38808bbc97d6927837cd)をご確認ください．
上記を設定して簡単に自動返信機能をつけるだけで，友だちから返信がくるようになります．普段は友だちがいないので，●ロネコヤマトと日●郵便からしか連絡がこないのですが， LINE って意外と便利なんですね
![
高専Wordleを作ってみた
こんちは現役JK[^1]のTrimsCashですだいぶん前に作ったやつ現実逃避のために書く
これはほぼ自分語りだと思ふhttps://github.com/trimscash/KosenWordle
https://trimscash.github.io/KosenWordle/
汎用赤外線リモコンは、学習リモコンである必要はありません。
見た目や操作性を重視すればよいです。
複数の国内メーカに対応したリモコンがよいですが、NEC式の赤外線信号プロトコルを使う場合は例えばパナソニックを選択します。
汎用赤外線リモコンでボタンを押下すると、パナソニックのテレビ用の信号が赤外線で送信されます。赤外線は、M5S
お店選びのお供に！ 「食べログスター拡張」を作ってみた
# 食べログスター拡張(Chrome拡張)とは？
お店選びのときによく使われる「食べログ」。その店舗ページには、そのお店の評価を示す評価点（スター）がつけられています。この点数は、単純な口コミ評価の平均点ではなく、食べログによって独自の重みづけがされたものであることが知られています。この重みづけの後の評価によると、開店して間もないお店であったり、口コミの件数が少ないお店にとってはどうしても辛口の点数になってしまうような気がしました。
食べログスター拡張(Chrome拡張）は、食べログによる評価点の下に、**ユーザーによる口コミ評価平均点** を表示するChrome拡張機能です。
## Chromeウェブストア
https://chrome.google.com/webstore/detail/%E9%A3
PM2のログに時刻を表示したいなぁ……
## PM2のログに時刻を表示したいなぁ……。
“`sh
pm2 start ./dist/main.js –log-date-format “YYYY-MM-DD HH:mm”
“`これだけ！
便利！
immerを使うのは？ ……今でしょ！
## イミュータブルにオブジェクトを更新したいなぁ
イミュータブルにオブジェクトを更新したいときってあるよね。たとえば雛形のオブジェクトがあって、それをもとにいくつもオブジェクトをつくりたいとか。
僕はだいたいこんな感じでやります。
“`TypeScript
/* まずは型をつくり */
type User = {
id: string;
name: string;
hand: number[];
};/* 基本となるオブジェクトを作成し */
const basicUser: User = {
id: ”,
name: ”,
hand: []
};/* そのオブジェクトをシャローコピーして更新する */
const user1: User = {
…basicUser,
id: ‘user1’,
name: ‘Tanaka’,
hand: [0, 1, 2]
};/* user1_2をつくるならこんな感じ */
const user1_2: User = {
…user1,
hand: [0, 1]
};
“`こんな感じで
MiniSearch を読んでみる ①
MiniSearch という軽量な全文検索ライブラリがあったので、ソースコードを読んでみた まとめ。
## MiniSearch とは？
Javascript で書かれた軽量の全文検索ライブラリ。https://github.com/lucaong/minisearch
作者の [Luca Ongaroさん](https://github.com/lucaong) が、サーバーサイドでの全文検索(N-gram など)で検索するとレイテンシーの関係でユーザービリティが良くないと思い、フロントエンドで全文検索(Radix木)してみたいと思って書いたライブラリ。
デモは、[こちら](https://lucaong.github.io/minisearch/examples/)。MiniSearch には 全文検索のみならず 自動サジェスチョンなどの機能があります (日本語対応はしてないそうです) が、この記事では、全文検索部分のみに焦点を当てて説明します。
(気が向いたら、続きも書きます。)※ もし内容が難しかったら、MiniSearch の [バージョン1](
