- 1. 【JavaScript】しりとりコードでFizzBuzz
- 2. GoでReactをSSRする
- 3. GASで呪術廻戦のキャラクターからメッセージが送られる、自動メール送信スクリプトを作ってみた。
- 4. HTML/CSSとJavaScriptは楽しかった話
- 5. JavaScriptでの部分検索
- 6. PMTiles から、タイル一覧とサイズを取得する（国土地理院最適化ベクトルタイルを例に）
- 7. Twitter API v2(X API Free)の使い方・移行(2024年)【GAS】
- 8. 新SkyWay と旧SkyWay の情報をそれぞれ軽く調べたメモ ＋α（WebRTC などでのビデオ通話の実装に関わる話）
- 9. svg要素をclickする動作を再現したい
- 10. react×Typescript環境でJSON、オブジェクト、配列について書く。
- 11. 【JavaScript】オブジェクトの比較についてまとめてみた
- 12. 【JavaScript】継続渡しスタイルでFizzBuzz
- 13. HTML & CSS & JavaScript でwebページに雪を降らせましょう！Part_2
- 14. Next.jsにvitest入れ、テスト時のエラー回避
- 15. 本当は dialog.open() にしたかった話
- 16. ハンズフリーカラオケの土台をつくる
- 17. 「継続渡しスタイル」の魔術
- 18. web版Outlookに表示される広告を消したいです！
- 19. client is using an unsupported version of the Socket.IO or Engine.IO protocolsの対処方法
- 20. RenderのExress.jsにReactアプリを載せる方法
【JavaScript】しりとりコードでFizzBuzz
## ルール
* コード内のアルファベットの文字列同士がしりとりのように繋がっていること。
* コメントアウトの使用禁止
* 小文字大文字はしりとりのときに区別しない。## コード
“`js
el = “log”;
gf = -1;
fb = “”, bf = -1, fbr = 0, rf = “”;
for (r = 1; r <= 100; r++) { r % 3 === 0 ? rf = "Fizz" : zr = 0; r % 5 === 0 ? rf += fb + "Buzz" : zr = 0; rf === "" ? fr = rf = fbr + r : rc = -1; console[el](lr = rf); fr = -1; rf = ""; } ``` ```text:しりとり el → log → gf → fb → fbr → rf → for → r → r → r → r → rf → Fizz → zr → r → rf → fb → Buzz → zr → rf → fr → r
GoでReactをSSRする
## 概要
GoでReactをSSRできそうだったので試してみました。
下記が動作の様子と実施のコードです。
https://github.com/K-Sato1995/go-ssr-poc
やっている間に良い感じに実現されている下記のプロジェクトも見つけました。
私の現状のPOCだと実現できないことが色々実現されててすごいなと思いました。https://github.com/natewong1313/go-react-ssr
## やりたい事
– Go環境でReactの[renderToString](https://react.dev/reference/react-dom/server/renderToString)でSSRを行う
– 実行結果をブラウザに渡す
– ブラウザでReactの[hydrateRoot](https://react.dev/reference/react-dom/client/hyd
GASで呪術廻戦のキャラクターからメッセージが送られる、自動メール送信スクリプトを作ってみた。
## はじめに
今週、知り合いの方からスプレッドシートで選択した行のみ自動でメール送信するスクリプトを作成してみて欲しいと依頼がありました。そこで初めてGAS(Google Apps Script)を使用したので、その中で学んだことを書いていきたいと思います。## GASとは？
Google Apps Scriptの略です。Googleが提供する様々なサービス（スプレッドシート、カレンダー等）で扱うことができて、自動化や機能の拡張を行うことができます。javascriptベースで作られているので、独自の関数等ありますが、書き方としてはほぼ同じように書くことができます。（違ってたらすみません）
イメージとしてはサーバ上で動くjajavascriptといったところでしょうか。
javascriptは最近学んでいる言語だったので、学んだことを活かしたり、復習にもなり楽しく作成できました。詳しくは公式ページを見てください。
https://developers.google.com/apps-script?hl=ja
## 呪術廻戦キャラ自動メール送信
HTML/CSSとJavaScriptは楽しかった話
## 1.初めに
今週は主にフロントエンドの領域の勉強をしていたので、フロントエンドを学習していて楽しかったことや思ったことなどを発信していきます。## 2.楽しかったこと
フロントエンドを学習していて楽しかったことは、自分の書いたコードがリアルタイムで更新されWebサイトになっていったところです。バックエンド側の勉強をしているときは一通り書き終わってから、エラーなどを攻略して、ようやく動いて完成だ！みたいな感じだったのが、フロントエンドになって製作過程が直にみられるようになるので、だんだん作り上げていっている感が自分はすごく好きです。## 3.逆に苦労したこと
苦労したことは、CSSをいじっているときに思い通りの配置に全然ならないことです。HTML/CSSを触ったことがある人は、みんな共感してくれるんじゃないかなというぐらいには、全然思い通りに動きませんでした。それで試行錯誤しながらコードを増やしていくと「前書いたこれ要らなくね？」という感じになるんですよね。なのでいずれは、コードをなるべく増やさず、必要なものだけを書いていけるように頑張りたいと思います！！## 4.最後
JavaScriptでの部分検索
ES6での部分一致検索機能を作成しました。
配列から検索できるサンプルコードは検索しても見つからなかったので、その型だけここに残します。
大文字、小文字、全角、半角などのバリデーション判定は実装していないので、適宜調整します。
“`html:index.html
- 入力してください…
“`
“`js:script.html
const nameArray = [
‘tanaka’,
‘yamada’,
‘sato’,
‘suzuki’,
‘tanaka’,
‘sato’,
‘saito’,
‘takahashi’,
‘ito’,
‘nakamura’
];
const searchInput = document.getElementById(‘js-search’)
const searchItem = document.getElementById(‘js-stock’)search
PMTiles から、タイル一覧とサイズを取得する（国土地理院最適化ベクトルタイルを例に）
## はじめに
以前、国土地理院が提供している[地理院地図Vector](https://github.com/gsi-cyberjapan/gsimaps-vector-experiment)（ベクトルタイル） や[標準地図](https://maps.gsi.go.jp/development/ichiran.html#std)（ラスタタイル）のタイルサイズの分布を観察したことがあります。このときは、国土地理院から提供されているタイルの z/x/y 座標とサイズ等の一覧（[地理院タイル目録](https://github.com/gsi-cyberjapan/mokuroku-spec)）を利用して、タイルのサイズを確認しました。
https://qiita.com/mg_kudo/items/f6d3a1ec5c0117237fd3
一方、国土地理院では、地理院Vector の他に、2022年9月6日より「[最適化ベクトルタイル](https://github.com/gsi-cyberjapan/optimal_bvmap)」という設計改良を施したベクトルタイルを提供し
Twitter API v2(X API Free)の使い方・移行(2024年)【GAS】
Twitter API v2(X API Free)の覚書です。少し前に仕様が変わったためそちらも踏まえて書いておきます。
# Twitter API v2(X API Free)の使い方・移行(2024年)
まずはX Developer Platform（Twitter Developer Platform）の登録方法からです。
[X（Twitter）Developer Portal](https://developer.twitter.com/ja)
1. 画面右上の**開発者ポータル**をクリックします。
1. ログインしていない場合は、X(Twitter)でログインします。:::note info
以前、Twitter APIを利用したことがある方は、画面右上の**開発者ポータル**を選択するとそのまま管理画面に移行します。一部の手順を飛ばせます。
:::画面下の**Sign up for Free Account**を選びます。
です。
それがずいぶん前の話だったのですが、久しぶりにログインしようとすると、以前作っていたアカウントでのログインができず、その原因は、どうやら「新SkyWay」とい
svg要素をclickする動作を再現したい
# 1. 背景
以下のようにbutton要素にsvg要素が埋め込まれている場合のユーザのクリックの動作を再現したいです。“`html
【JavaScript】オブジェクトの比較についてまとめてみた
# はじめに
業務でオブジェクトの比較を行うことがあって、等価演算子を使って実装したら思った動きになりませんでした。
下記のイメージになります。“`js
const objectCarA = {
make : “Toyota”,
model : “Corolla”,
color : “red”
}
const objectCarB = {
make : “Toyota”,
model : “Corolla”,
color : “red”
}
const isEqualCars = objectCarA === objectCarBconsole.log(isEqualCars) // false (あれ、trueにならないの？)
“`先輩にその理由を教えてもらったので、ここにまとめます。
# 参照型（オブジェクト型） 基本型（プリミティブ型）
JavaScript のデータ型は、大きく２つに分けて 「基本型(プリミティブ型）」と「参照型（オブジェクト型）」があります。
この違いは変数に値を格納する方法です。
以下に詳細
【JavaScript】継続渡しスタイルでFizzBuzz
“`js
function fizzbuzz(num) {
if (num % 15 === 0) {
console.log(“FizzBuzz”);
}
else if (num % 3 === 0) {
console.log(“Fizz”);
}
else if (num % 5 === 0) {
console.log(“Buzz”);
}
else {
console.log(num);
}
return cont => cont(++num);
}(fizzbuzz)(1)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(fizzbuzz)(f
HTML & CSS & JavaScript でwebページに雪を降らせましょう！Part_2
# 初めに
今回の頭骨は、…「投稿」は、前回書かせて頂いた
[HTML & CSS & JavaScript でwebページに雪を降らせましょう！（寒いです）](https://qiita.com/chi1180/items/0cfed7917cbb08c604f4)
という記事の、Part_2です！
書く予定ゼロでしたが、書いていきましょう！
今回は、背景を写真にしたり、前回説明不足なとこなどの説明を（私なりに）しっかりとやっていきたいと思います！
それでは生きましょう！…行きましょう！# 書いていこう！
それでは、書いていきます。
が、
今回は、CSS（スタイルシート）をいじくるだけです！
大変ご不便をおかけしますが、HTML及びJavaScriptにつきましては、初めに記載させていただいたリンクから見てみてください。それではやってきます！
まず、前回のCSS（コメント無し）
“`css:style.css
* {
margin: 0;
padding: 0;
}.snow-container {
width: 100%;
heig
Next.jsにvitest入れ、テスト時のエラー回避
## テスト実行に発生するエラー内容
“`bash
Error:~~~hogehoge /src/test/setup.ts). Does the file exist?
“``src`ディレクトリ配下に`test`ディレクトリを作成して`setup.ts`がないと言われている。早速、作成してみる。
## 解決策
“`tsx
import ‘@testing-library/jest-dom’;
“`上記を記述。早速、こちらでエラー回避することができました。
## 実行
“`tsx
“dev”: “next dev”,
“build”: “next build”,
“start”: “next start”,
“test”: “vitest watch”,
“coverage”: “vitest run –coverage”,
“lint”: “eslint src”,
“lint:fix”: “eslint src –fix”,
“format”: “prettier . –write”
本当は dialog.open() にしたかった話
# 1. 背景
ダイアログ要素のcloseメソッドを読み漁っていた際に知ったことです。以下のdocumentの“`We use show/close as the verbs for dialog elements, as opposed to verb pairs that are more commonly thought of as antonyms such as show/hide or open/close, due to the following constraints“`の所を和訳します。
https://html.spec.whatwg.org/multipage/interactive-elements.html#the-dialog-element:~:text=We%20use%20show/close%20as%20the%20verbs%20for%20dialog%20elements%2C%20as%20opposed%20to%20verb%20pairs%20that%20are%20more%20commonly%20thought%2
ハンズフリーカラオケの土台をつくる
## ハンズフリーでカラオケがしたい
料理をしているとき、家で仕事をしているとき、車に乗っているとき、手は離せないけど歌いたい、そんなときのためのハンズフリーカラオケをつくってみたい！
今回は要素技術に着目してプロトタイピングをしてみます。## どんな機能があれば良いか、要素を整理してみる
このような流れを想定しています。
音声で「カラオケをしたい」と言ったら曲が流れ、マイクで音声を拾い、歌唱力評価の演算をする、という工程です。
1. **音声でカラオケをスタートし曲を流す**
1. **歌声を録音する**
1. **録音した歌を解析し評価する**## 1.音声でカラオケをスタートし曲を流す
voiceflowで作成します。https://www.voiceflow.com/
シンプルに「起動→曲再生→終了」と
「継続渡しスタイル」の魔術
■魔術的コード
——————————以下のコードを見てほしい。
“`javascript
val = n => cont => cont(n);
add = n1 => n2 => cont => cont(n1 + n2);(val)(2)(add)(3)(console.log);
“`初見では完全に魔術に見えるが、このコードは意図した通りコンソールに 5 を出力する。
一体なぜこのような動きが実現できるのだろうか？
■説明
——————————この魔術は「継続渡しスタイル (CPS: Continuation-passing style)」という概念をもとに実現されている。
ステップ・バイ・ステップで理解していこう。
### step1
継続渡しスタイルでは「この処理の後で実行する内容」を引数に渡して実行する。
渡された数に+1した後でコンソール出力を実行する、単純な例を見てみよう。“`javascript
function inc(n, callback) {
web版Outlookに表示される広告を消したいです！
# 初めに
突然ですが…私はwindowsユーザーでありまして、メールは基本的にyandex, google, そしてoutlookを使用しています∮それでして、web版のoutlookを使用する場合、下のように、右側（必ずそうなるのかはわかりませぬが…）に広告が表示されてします。
私は広告が大嫌いでして…意識散ってメールの返信できねえ！！！
というときがありました。
その時、即興で広告を削除しようとしたら、案外簡単に出来たので、今回はそれをメモメモしていきたいと思います∮# 実際に
それでは、やっていきましょう！
といっても、実際にはひどくシンプルな内容です。
広告が入る要素タグを削除すればよいのです！…ってそりゃそうですね(笑)で、その、「広告が入る要素」とやらを、ブラウザの開発者ツールで調査していきます！
ちなみに、私は
client is using an unsupported version of the Socket.IO or Engine.IO protocolsの対処方法
#### 現象
PythonのFlask socketioを使って、Javascriptとデータのやりとりをしようとしたところ、以下のエラーが発生：
The client is using an unsupported version of the Socket.IO or Engine.IO protocols#### 確認
エラーが発生した環境の各モジュールバージョン＜Python側＞
Flask-SocketIO==5.3.6
python-engineio==4.8.1
python-socketio==5.10.0＜Javascript側＞
Socket.IO v2.2.0＜バージョン互換性の確認＞
https://python-socketio.readthedocs.io/en/latest/intro.html#### 原因
過去のコードをそのまま流用したので、JavascriptのSocket.IOとPython環境のバージョンが合ってなかっただけでした・・・。#### 対応方法
2024年1月現在、Socket.IOのリリース済みバージョン
RenderのExress.jsにReactアプリを載せる方法
# はじめに
Reactでちょっとしたものを作って公開しようとしたとき、次にどうする？を書いておきます。
①：Reactでちょっとしたものを作る（詳細は割愛）
②：Express.jsに①のアプリを載せる
③：Renderへのデプロイ## 簡単に用語の説明
### [Express.js](https://expressjs.com/ja/)
> Node.jsのための高速で、革新的な、最小限のWebフレームワーク（Express.jsのホームページより）HTTP(S)接続して何かしら返すAPIライブラリです。htmlを返すWebサーバーだけでなく、もちろんAPIとしてもOK。
### [Render](https://render.com/)
Node.jsだけでなく、Python、Docker、Goなど様々な環境をデプロイ・公開する環境。## 今回作ったもの
3次元の点群CSVを表示するツールです。表面上の機能はJavaScriptでできますが、わざわざNodeとExpressとRenderを使った版。
