カテゴリー: js

タイムラインでまとめてくれてるのありがたいからメモ

【最新v8】Swiperの使い方・実用的なデモ15個の解説ー基礎から応用までー – 東京のホームページ制作 / WEB制作会社 BRISK
https://b-risk.jp/blog/2022/04/swiper/#i-3

タグ Swiper

急に2,3個投稿してるけど作業中タブ閉じメモなのです

どうも、開いたままのタブを閉じるために投稿するスタンスです。

UA判定は師匠と一緒に会社で勤めてた頃から出汁（判定文）を継ぎ足し継ぎ足し使っていたので、（めんどいし）後回しにしていたのですが、他の方に引き継いでいろいろいじっていただくような案件が出てきたので
「は？BBA何書いてんの？古文書？」
と言われないように必要部分だけアプデしたのでした。

タグ ua

gulp js 開発関連

全然投稿してないね。そういやgulp-imageminやめたよ

投稿者作成者: hihihi
投稿日 2022年5月27日
全然投稿してないね。そういやgulp-imageminやめたよへのコメントはまだありません

gulp-imagemin で Error [ERR_REQUIRE_ESM]: Must use import to load ES Module と怒られる – Ewig Leere(Lab2)
https://labor.ewigleere.net/2021/08/17/gulp-imagemin-become-pure-esm-package/

gulpfile.esm.js で gulp-imagemin v8.0.0 を利用するとエラーになる – dskd
https://dskd.jp/archives/116.html

他の方が保守するのでパッケージ類を最新にしたら↑のサイトさんに書いてあるようなことが起こったので、いろいろ調べたけど最終的に今後を鑑みてimageminの処理をgulp経由の処理から外したよ。っていう話。理由はバージョン落としてまで使う気になれなかったのと、gulpの記述を全部ESModuleに変更して検証してまで使い続けるのは手間だったので。 gulp使わないプロジェクトではnpm scriptsでimagemin実行してたのでそれをgulp利用のプロジェクトでも使うようにしました。さよならgulp imagemin…

imagemin – npm
https://www.npmjs.com/package/imagemin
imageminをrequireして怒られる – Qiita
https://qiita.com/yukiji/items/fc4a2f17de5548d27fc6

タグ gulp, imagemin

js React 開発関連

Gatsbyビルドが通らなくて

結構前に書いた下書き出てきたので出しとく。
めっちゃ端折ってるけど。
死ぬんかと思った。死ななかった。

Debugging HTML Builds | Gatsby
https://www.gatsbyjs.com/docs/debugging-html-builds/

ずっとエラー文で探してはいろんなもの試したけど結局インポートしてたモジュール自体の問題だったのでそっ閉じしてgatsby-nodeにこの子通してあげてねって書いた・・・。

ありがとう公式。
ReactLazyきかへんかった

Code-Splitting – React
https://reactjs.org/docs/code-splitting.html#reactlazy

色んなものがあるのう。。
公式のチェックして無理だったらろだぶるというのもあるらしい

gregberge/loadable-components: The recommended Code Splitting library for React ✂️✨
https://github.com/gregberge/loadable-components

この方の記事めちゃんこわかりやすかっった

Gatsbyビルドエラー「window is not defined」への対処法Takumon Blog

https://takumon.com/error-about-window-is-not-available-during-server-side-rendering-gatsby

barba(v2.9.7)で.no-barba的な。

投稿者作成者: hihihi
投稿日 2021年9月28日
barba(v2.9.7)で.no-barba的な。へのコメントはまだありません

お久しぶり。久しぶりにPjax(barba.js)使ったら、リファレンスがあるようなないような、かすっててもドンピシャのものがなかったのでがんばって公式で調べたらめっけた。 barbaのv1？ではno-barbaってclassつけたリンクはbarbaの対象外の普通の遷移になるってのあったけど、今は無いのね？？ってのをしらべた。 https://barba.js.org/docs/advanced/strategies/

barba.init({
  // define a custom function that will prevent Barba
  // from working on links that contains a `prevent` CSS class
  prevent: ({ el }) => el.classList && el.classList.contains('prevent')
});

英語めっちゃ時間かかったけどめっけたからシェア。みんな実装頑張れ！お久しぶりでした。またいつか。

js React 開発関連

ReactSlick天地中央

css – Vertical align content slickslider – Stack Overflow
https://stackoverflow.com/questions/37455322/vertical-align-content-slickslider

.slick-track {
  display: flex;
}
.slick-track .slick-slide {
  display: flex;
  height: auto;
  align-items: center;
  justify-content: center;
}

js React

gatsby-imageで死にそうになる

公式を最初に読まない自分が悪い

qiitaの記事見て「へえ！Gatsbyではgatsby-image使うんがマストなんか〜」と思って
develop中は良かったがいざbuildしようとするとエラーの嵐で恐ろしく躓いた

多分原因はバージョンのミスマッチ。途中でコマンドラインで言われるがままにgatsbyと他にもいくつか更新してからの気がする・・・
gatsby自体なのかどれかのプラグインなのか・・・
それ以降延々とエラーの原因を探し続けることに・・・
アップデートはホント作業落ち着いてから似すればよかった。

という戯言はさておき、メモメモ

とりあえず入門

GatsbyJSのimageを使ってみよう – Crieit
https://crieit.net/posts/GatsbyJS-image

パスを渡せばgatsby-imageで画像を表示してくれるコンポーネントの作成方法Takumon Blog
https://webcache.googleusercontent.com/search?q=cache:28cNeHbHP88J:https://takumon.com/simple-gatsby-image-wrapper+&cd=1&hl=ja&ct=clnk&gl=jp

gatsby-image | Gatsby
https://www.gatsbyjs.com/plugins/gatsby-image/

Gatsby.jsの画像最適化プラグインのgatsby-imageを使おう！ – Qiita
https://qiita.com/tkkrr/items/34f384956fb968a30fe5#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB

Gatsby：イメージ（画像）を表示させるための作法 – Qiita
https://qiita.com/atomyah/items/e6aebf0a0abe3d488787#%E3%82%B9%E3%82%BF%E3%83%86%E3%82%A3%E3%83%83%E3%82%AF%E3%81%AB%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%82%93%E3%81%A7%E8%A1%A8%E7%A4%BA%E3%81%95%E3%81%9B%E3%82%8B

エラーのときにみたやつ

死ぬほどあったけど残ってない

Error: The result of this StaticQuery could not be fetched. · Issue #24902 · gatsbyjs/gatsby
https://github.com/gatsbyjs/gatsby/issues/24902

タグ gatsby, gatsby-image

js React

JSでのファイルDL download blob axios react

投稿者作成者: hihihi
投稿日 2020年8月14日
JSでのファイルDL download blob axios react へのコメントはまだありません

変なとこでハマりました

基本素直にWebに落ちてる内容で行けそうなのにいざDLすると真っ白なpdfが・・・
ハマりました。

結局わかったこと

responseType: ‘blob’　ダイジ・・・

axiosの設定って知らないと通り過ぎそうになるけど、ちゃんとファイルが来るよ〜〜って
指定しないと準備できてないから、ちょ、待てよバリに空白のファイルがDLされてたみたい。

Ajaxで複数ファイルをダウンロードさせる方法 – console dot log

Ajaxで複数ファイルをダウンロードさせる方法

sonota

これではなかった

ボタンを押されたらaxiosで取得したBlobデータをダウンロードさせたくてやった事 – Qiita
https://qiita.com/tk_zawa/items/a0e65e7a9106a6535c79

ファイルをダウンロードさせるには？［JavaScript］：.NET TIPS – ＠IT
https://www.atmarkit.co.jp/ait/articles/1603/30/news026.html

【JavaScript】各ブラウザでダウンロード処理を実装する（Chrome, Firefox, IE, MS Edge, Safari） | Black Everyday Company
https://kuroeveryday.blogspot.com/2016/05/file-download-from-browser.html

jsでダウンロードを実装した話 – Qiita
https://qiita.com/Ohtak/items/b7fb05c4e3dee13c0d1f

jsでファイルを一括ダウンロードしてみる – Qiita
https://qiita.com/saki_kawa/items/ecf24297943a37ce0626

ファイルをダウンロード保存する方法 – JavaScript の基本 – JavaScript 入門
https://javascript.keicode.com/newjs/download-files.php#1-3

Blob() – Web APIs | MDN
https://developer.mozilla.org/en-US/docs/Web/API/Blob/Blob

タグ blob, downloadAPI

JS !! ビックリマーク２つはboollenやで。

投稿者作成者: hihihi
投稿日 2020年8月14日
JS !! ビックリマーク２つはboollenやで。へのコメントはまだありません

誰かの役に立ちますように。

JavaScript – Javascriptで !! ←この意味がわかりません｜teratail
https://teratail.com/questions/146649

バグじゃないけどIEさんよ・・・！

DOMがらみで要素指定してのforEachは気をつけよう

javascript forEachをIEで使う時の注意点 | Next Clip
http://nextclip.net/front-end/185

JSONとかのArrayからのforEachは大丈夫みたい？
死ぬかと。

参考

IEで NodeList を forEach するとエラーになる問題の対処方 – Qiita
https://qiita.com/snjssk/items/8d179566b023703c0663

おまけ
forEach vs map in JavaScript – Qiita
https://qiita.com/Uuparu/items/e9867cb6c48736700a4f

おまけ２
async-awaitでもforEachしたい！ – Qiita
https://qiita.com/jkr_2255/items/62b3ee3361315d55078a

タグ IEさん