- 1. サムネイルを押すとメイン画像が切り替わる動作の実装方法
- 1.0.1. JavaScript forEachを何度も調べがちな方々へ
- 1.0.2. pdf-libで日本語のカスタムフォント使用時にpdfが作成できない
- 1.0.3. JavaScriptでかの有名な水の移し替えパズルを解く【幅優先探索】
- 1.0.4. JSで完全なイミュータブルは難しいが、知っておくとよいこと
- 1.0.5. 【TypeScript】画面表示までの仕組みを図解で理解する
- 1.0.6. kintoneに保管したJPEGのExifからGPSなどの情報を取得して保管する
- 1.0.7. 多言語サイトを簡単に作りたくない? – 自作のJavaScriptライブラリもどき
- 1.0.8. Proto : JSツールチェインのバージョンマネージャ
- 1.0.9. DiscordのWebhookを使ってNode.jsから画像をPOSTする
- 1.0.10. 信じてたのに裏切られた気分（JSのconstは変更可能←）
- 1.0.11. スマホのスワイプ処理
- 1.0.12. Storybookのtitleタグやfaviconを無理やり変更する
- 1.0.13. WebビューアでJavaScriptを実行をようやく使ってみた。
- 1.0.14. 便利ページ：plus codeのエンコード・デコード
Next.js requires react >= 18.2.0 to be installed.
# 問題点
Next.js14で作成したアプリをVercelにデプロイする際に「Next.js requires react >= 18.2.0 to be installed.」と出力され、失敗してしまいました。# 対応
package.json ファイルを更新するだけでした。
Next.js13以降はReactの最小バージョンは18.2.0になっているようです。“`
“react”: “^18”,
“react-dom”: “^18”
“`
リスト内包表記の二重ループと flatMap
Python でのリスト内包表記の二重ループと JavaScript での `flatMap` を比較します。順を追ってコードを構築します。
# 題材
一部の項目を結合させることを考えます。
入力 1 2 3 4 5 6 出力 1 2 3 4 5 6 これをコード化します。
構成を文字列で表現して、ネストしたリストに変換します。
* `1,2+3,4+5+6` → `[[1], [2, 3], [4, 5, 6]]`
使用されている項目を並べる際には、フラット化すると便利です。
* `[[1], [2, 3], [4, 5, 6]]` → `[1, 2, 3, 4, 5, 6]`
# Python
:::note info
REPL での実行状況を示します。`>>> ` は
HTML無限スクロール
# HTML無限スクロール
ブラウザでページ遷移ではなくスクロールで次々とデータロードして続きを見せるページのサンプルを作成しました１．仕組みとしては前（又は次）のデータを読み込んで新しいHTML要素を追加する
２．現在のスクロール位置から前後５０００ピクセル以上離れた要素を削除する端に到達するたびに １～２ を繰り返し無限にスクロールしていきます
特定範囲外のHTML要素は削除されるためメモリ消費量は一定になります
超高解像度なモニター使ってる方はサンプルが上手く動かないかもしれませんサンプル動作はこちら
[https://ikuo0.github.io/infinite-scroll/infinite_scroll.html](https://ikuo0.github.io/infinite-scroll/infinite_scroll.html)# サンプルソース
## HTML
[https://github.com/ikuo0/infinite-scroll/blob/main/infinite_scroll.html](https://github.com/
D3 v7 グラフ – d3-scale、d3-axis、d3-shape
[D3 v7 入門 – Enter / Update / Exit – Qiita](https://qiita.com/sand/items/8b5ca42d1bf511e61ccd)
[D3 v7 応用 – Enter / Update / Exit – Qiita](https://qiita.com/sand/items/999715cebe52ade66c0b)
[D3 v7 グラフ – d3-scale、d3-axis、d3-shape – Qiita](https://qiita.com/sand/items/721db51592e1d161d69d)D3 の基本概念である Data Join – Enter / Update / Exit の説明は上記の記事で述べましたが、今回は実際に D3 でグラフを描く際に必要となる d3-scale、d3-axis、d3-shape について述べたいと思います。この３つのモジュールは大きなものですが、今回は必要最小限な部分についてまとめました。
# １．d3-scale
[d3-scale – 公式ドキュメント](http
寺社巡りの管理ページを作った
よく神社やお寺をめぐっているのですが、行ったことのある場所を備忘録として残しておこうと思い、管理ページを作成しました。
特に特別な機能を使っておらず、今まで習得した技術の詰め合わせです。（完全に自分用です ^_^;）こんな感じのページです。
行ったところのある場所にマーカーを表示させるようにしています。数が多くなってきたので、都道府県でフィルタリングできるようにしました。
地図の描画にはLeafletを使っています。
マーカーをクリックすると、詳細情報が表示されるようにしました。
登録は、別の
サムネイルを押すとメイン画像が切り替わる動作の実装方法
サムネイルを押すとメイン画像が切り替わる動作の実装方法
サムネイル画像をクリックするとメイン画像をふわっと切り替えるjQuery
【jQuery】サムネイルをクリックしてメイン画像を切り替える方法【枠線の変更方法も解説】
JavaScript forEachを何度も調べがちな方々へ
# はじめに
この記事は`JavaScript`の`forEach`の仕様について書いています。
開発作業中に調べる頻度が高いと思ったので、一度しっかり理解しておこうと思い記事を書きました。同じような方は参考にしていただけますと幸いです。公式ドキュメントを参考にして書いています。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
# forEachとは
念の為、`forEach`について確認しておきたいと思います。
>forEach() メソッドは反復処理メソッドです。指定された関数 callbackFn を配列に含まれる各要素に対して一度ずつ、昇順で呼び出します。 map() と異なり、 forEach() は常に undefined を返し、連鎖させることはできません。典型的な使用する用途は、チェーンの終わりで副次効果を実行することです。上記は公式ドキュメントの一部を引用したものです。
配列の要素数の数だけループを回すメソッドで、返り値
pdf-libで日本語のカスタムフォント使用時にpdfが作成できない
pdf-libで日本語のカスタムフォント使用時にpdfが作成されず、真っ白な状態になってしまった。
特にエラーなどは表示されていない状態だったのでどこがまずいのかがわからなかった。最初のコードは以下
“`js
const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true });
document.getElementById(‘pdf’).src = pdfDataUri;
“`日本語フォントを使って正常にpdfを作成できているサンプルコードを探したところ以下のように読み込んでいたので、同じように変更したところ見事に作成できた。
“`js
const pdfBytes = await pdfDoc.save();
const file = new Blob([pdfBytes], { type: ‘application/pdf’ });
const fileURL = URL.createObjectURL(file);
document.getElementById(‘pdf’).src = fileUR
JavaScriptでかの有名な水の移し替えパズルを解く【幅優先探索】
## 元ネタ
https://qiita.com/jerrywdlee/items/c7bbcbb6c68e37e7ef71
## 問題
水が5L入る容器と3L入る容器がある、この2つの容器だけを使って、
4Lの水を量るにはどうすれば良いですか？
水はいくらでも使えるものとします。## ソース
“`js
function 水を捨てる_3L(容器3Lの容量, 容器5Lの容量, need操作テキスト = false) {
const result = {
new容器3Lの容量: 0,
new容器5Lの容量: 容器5Lの容量
}
if (need操作テキスト) {
result.操作テキスト = “3L容器を空っぽにした。 ”;
}
return result;
}
function 水を捨てる_5L(容器3Lの容量, 容器5Lの容量, need操作テキスト = false) {
const result = {
new容器3Lの容量: 容器3Lの容量,
JSで完全なイミュータブルは難しいが、知っておくとよいこと
# はじめに
[前回の記事](https://qiita.com/kohki_takatama/items/a3035c025f30d185a9db#comment-2bfa8ce16e109733c4a3)でJSの`const`、イミュータブル性について無知を晒した私です。
ありがたいことにコメントをいただきまして、それがどうも私が求めていることが書かれているっぽい。
大変丁寧に説明いただき、ありがとうございます。
# 問題
#### いただいたコメントがこちら
> ## Primitive型
> JavaScriptの世界でイミュータブル性を持つのはPrimitive型です。“`js
const number = 1;
console.log(number.toString === Number.prototype.toString); // true
number.toString = 2;
console.log(number.toString === Number.prototype.toString); // true
“`> Object型はイミュータブルでは
【TypeScript】画面表示までの仕組みを図解で理解する
# はじめに
先日、下記動画を用いてTypeScriptを勉強したときに、そもそもどうやってTypeScriptで書いたコードを画面で表示させるのか？？といった概念理解が難しいなと感じました。勉強する前に、TypeScriptを用いたソースコードを実務で眺めていたのですが、仕組みをほぼ理解していなかったため、「なぜwebpackやNode.jsを途中で使っているのか？」「bundleって何？」など疑問が多く出ていました。
そのため、TypeScriptで書いたコードの画面表示方法(build手順)を図解形式でまとめました。皆さんの理解の一助になれれば幸いです。参考動画：https://www.youtube.com/watch?v=qSHlXcSces8
# 画面表示までの仕組み
TypeScriptファイルを作成して画面を表示させるまでの流れは以下のようになります。
# JPEG画像のExif情報について
Exif（エグジフ）情報とはスマートフォンやデジカメなどで撮影した画像ファイルに付与された撮影や位置などの情報です。スマートフォンなどで撮影した JPEG画像を W
多言語サイトを簡単に作りたくない? – 自作のJavaScriptライブラリもどき
# ナニコレ？
自分が作ったJavaScriptライブラリもどき。ライブラリではないです（笑）
# 本編
多言語サイトを実装しようと思ったのですが、多言語となるとファイル数がいっぱいで管理しにくいところが不便ですね。
それを解決するのが、名付けて…
“`
タイトル：私のキラキラ・ダイナミック json & js 多言語変換ライブラリ
別名：`LD-lang.js`
対応言語：英語・日本語
*初期設定あり
“`ネーミングセンスがバグってますね。
一応、コードを見せるとこんな感じ。
“`JS:LD-lang.js
function change_lang() {
var lang = localStorage.getItem(‘lang’);
var head = $(‘head’);
var headChildren = head.children();
var childrenLength = headChildren.length;
for (var i = 0; i < childrenLength; i++) {
Proto : JSツールチェインのバージョンマネージャ
https://zenn.dev/asip2k25/articles/d8962abf6333f3
DiscordのWebhookを使ってNode.jsから画像をPOSTする
以外とまとまって無かったのでメモ。
DiscordのAPIを使うとクライアントキーとか発生して面倒なのでWebhookの仕組みだけ使って画像を送ってみます。Gyazoとかに上げつつURLをシェアするパターンもありそうですが、今回は直アップロードとなります。
## テキストを送る場合
Fetchでテキストを送るときはこんな感じです。
https://qiita.com/n0bisuke/items/d6970e180355ce0e2fdc
## Fetchのmultipart/form-dataで画像をポストする
https://github.com/otoneko1102/discord-webhook/blob/main/index.js#L17C40-L17C40
こちらのサンプルを見るとmultipart/form-dataを使ってポストしてました。
BloB指定になる模様なのでNode.jsからやる場合はfsモジュールで読み込みます。
`screenshot.png`という名前のファイルが同じ場所にあるイメージです。
“`ts
‘use strict’
信じてたのに裏切られた気分（JSのconstは変更可能←）
# はじめに
独学趣味プログラマです。
独学で趣味だと、自分なりの流儀がいろいろとできてきますよね。
命名規則とか、functionを全てアロー関数で書くとか、逆にアロー関数憎し！！とか。
そんな「自分ルール」の一つが、
#### varは絶対に使わない。
#### letも極力使わず、constで書く。でした。深い理由はないです。
`var`に関してはなんか問題あるって聞いたから。
`let`ではなく`const`である理由は、
イミュータブルという概念（というかHaskell）に何となく憧れがあるから。
# 問題
さて、問題が起こったのは偶然でした。
“`js
const todayAt18 = new Date();
todayAt18.setHours(18, 0, 0, 0); // 時間を18時、分、秒、ミリ秒を0に設定
“`
とある文脈で、ChatGPTが提示してきたコードです。#### あれ？constなのに変更されてる？
ChatGPTに聞いてみると……
> JavaScriptにおいて、`const` キーワードで宣言された変数は再代入ができ
スマホのスワイプ処理
# コード
“`javascriptスワイプ削除“`
# 結果
“`javascript
var swWrap = $(‘#wrap’);
var sw = swWrap.children(‘.box’);
sw.bind({
‘touchstart’: function(e) {
e.preventDefault();
// スワイプした距離を保存(※スワイプした距離を固定する)
this.pageX = e.originalEvent.touches
Storybookのtitleタグやfaviconを無理やり変更する
Storybookで[自作のライブラリのドキュメントサイト](https://phavuer.laineus.com)を作ったのですが、そうなると当然titleタグやfaviconを独自のものに変更したいわけですが、正規の設定ではできないっぽい？ので無理やり変更しました。
# 初期レンダリング時のtitleタグを変更
index.htmlに静的に設定される初期レンダリング時のtitleタグですが、どうせ直後にStorybookによって動的に変更されるため、あまり意味はありません。
ただ、シェア時などにシェア先のボットが読みに来る際は、js実行前の静的なhtmlを参照するため、こちらも一応変更しておきたいです。
Storybookの設定でどうこうしようと考えるのはやめて、ビルドされて生成されたhtmlファイルを書き換えちゃいましょう。
htmlファイルを読み込んで、titleタグ部分を文字列置き換えして上書きするスクリプトを作成します。
bashでもなんでもいいんですが、今回はnode.jsで作成しました。
“`js:update-title.js
import fs
WebビューアでJavaScriptを実行をようやく使ってみた。
## WebビューアでJavaScriptを実行をようやく使ってみた。
今回は、19で新登場した[webビューアでjavascriptを実行](https://help.claris.com/ja/pro-help/content/perform-javascript-in-web-viewer.html)をようやく使っていきたいと思います。
まず初めにwebビューアでjavascriptを実行をGoogle先生で調べてみると、自作Formに値を入れて、Webビューアから値を戻す。
といった内容が広く一般的に書かれています。あんまりこんなこと言いたくないんだけどね。
いやそれどこのタイミングで思ってどこで使うん。
※個人的な主観の為、気分を害された方には心よりお詫び申し上げます。なので今回は、自分で使うタイミング作ってみました。
## ヤマト運輸で送り状作ります！
え？そんな急な…
~~私、送り状作る仕事してないから、そんなん言われてもピンとこんわ。~~
特段深い意味はないよ。
過去のサンプル探してたら、それしかなかったんだ。皆様[ヤマト
便利ページ：plus codeのエンコード・デコード
GoogleMapで見かけるようになったPluscodeをエンコードして緯度経度を算出したり、その逆をしてみます。
「[便利ページ：Javascriptでちょっとした便利な機能を作ってみた](https://qiita.com/poruruba/items/6c67c7eef34ed302feb3 )」のシリーズものです。
Pluscodeは、位置情報(緯度経度)を短縮した文字にエンコードしたコードをいいます。
GoogleMapでは以下の部分です。
2種類のエンコード方式があります。
* Full：少々長いコードですが、緯度経度の値を表します。
例：8Q7XFJ3V+25* Short：少々短いコードですが、狭い範囲しか位置を特定できません。したがって、どこの場所の狭い範囲なのかおおよその位置を別途町名等で補います。こちらがGo
