- 1. Google Apps Script (GAS) で楽天カードのお知らせメールをスプレッドシートに自動反映してみた
- 2. 【Javascrip】alert()が先に実行されてしまう
- 3. JavaScript初心者に伝えたい、一番最初に守って欲しい3つのこと
- 4. JavaScriptでAzure Table Storageを操作する
- 5. 【jQuery】vTickerで垂直スクロールのティッカー作成
- 6. 埋め込みのTwitterをライト・ダークモード、動的に切り替える
- 7. ただ15行のシェルスクリプトで個人ナレッジマネジメントツールを作った話
- 8. 初投稿！Parsing error
- 9. Node.jsで「Error: getaddrinfo EMFILE」というエラーが出る
- 10. 【javascript】メモ：negative indexが存在しない、、、
- 11. stackoverflowの黒ポップアップを消去したいときのプラグイン
- 12. Javascriptの".."(ダブルドット)、"::"(ダブルコロン)
- 13. AWS Lambda FunctionURLs触ってみる(JavaScript Hands-on)
- 14. #Scratch 3.0 のキー入力イベントをブラウザのコンソール（開発者ツール）の JavaScript からランダムに繰り返し発生させてみる
- 15. Javascript_クラスを作る
- 16. ?お前らのゴールデンウィークはゴールドじゃない?
- 17. JavaScriptでのAsynchronous（非同期）勉強ノート
- 18. music-metadata-browserがブラウザで動かなかったのが解決した
- 19. 生JavaScriptのみでなんちゃってスライドショーを作ってみた
- 20. Bootstrapとは？
Google Apps Script (GAS) で楽天カードのお知らせメールをスプレッドシートに自動反映してみた
## やろうと思ったきっかけ
生活費は夫婦でほとんど折半しているのですが、固定費とか雑費とかを支払う際に使用する家族共有カードを楽天カードで作成してました。毎月お互い決めている一定金額を入金し、さらに雑費分はその都度入れてたつもりだったんですけど、ふと残額を確かめてみると
「あれ！？結構余裕持って入れてたつもりなのに結構ギリギリになってるやん、、！」
という事態に遭遇しました。
確かめてみたところ雑費も折半しているのですが、とりあえず買っちゃってお金は後から振り込む〜みたいな感じでそのまま忘れるケースがお互い多々あり、それがちりつもでギリギリになっていたみたいです。これちょっと改善せないかんな〜と思い、とりあえずカード使用したらスプレッドシートに記載していこう！ということになった訳ですが、そもそも毎回毎回書き込むのも面倒すぎるから自動化できないかな〜と考え、ググってみるとGoogle Apps Scriptとかいうやつがあることを知り試しにつくってみるか〜となったのでした。
(前置き長くてすみません笑)## Google Apps Script の始め方
スプレッドシー
【Javascrip】alert()が先に実行されてしまう
javascriptって上から順番に実行されるのでは？
でも実際にalertの前に書いているコードが実行されtしまうのだけれども、何故だか分からない
原始的ですが、一度下記コードを試して頂ければと思います。
setTimeout(function() {
alert(“XYZ”);
}, 1000);alertを1秒遅らせるだけで回避できました。
あんまり美しくはない解決策ですが、これでも対応可能という事だけ覚えておきたい。
JavaScript初心者に伝えたい、一番最初に守って欲しい3つのこと
## 誰に読んで欲しいか
– 初学者を指導するにあたり、どこまで拘って指導したらいいか、最低限守るべきラインに悩む人
– JavaScriptを学び始め、少しキレイなコードを目指したい人## 本題
### 1. 変数宣言でconst以外は使わないJavaScriptの変数宣言にはvar, let, constが存在します。
極力constを使うことは変数の意味が一意に決まり、全ての開発メンバーがプログラムを理解することに役立ちます。
２番以降の守るべきことを実践していくと、自ずとconstだけで通用するようになります。– varは絶対に使わないでください。グローバルスコープが汚れてしまいます。
– 変数を宣言するたびに全てのファイルで同じ名前が宣言されていないかチェックするのは現実的でないでしょう。
– letは基本的に必要でありません。
– counterなどの特定要件で必要なこともあります。しかし、プログラムの位置によって変数の値が変わることは可読性の低下、バグにつながります。明確な理由がなければ使わないことが無難です。### 2. 配列に
JavaScriptでAzure Table Storageを操作する
JavaScriptでAzure Table Storageを使用するには、2022年5月現在、[**@azure/data-tables**](https://github.com/Azure/azure-sdk-for-js/tree/main/sdk/tables/data-tables)というライブラリを使用します。（従来は、[**azure-storage**](https://github.com/Azure/azure-storage-node)というライブラリを使用していましたが、現在は非推奨となっています。）
# 利用可能な環境
[GitHub](https://github.com/Azure/azure-sdk-for-js/tree/main/sdk/tables/data-tables#prerequisites)には、
> Currently supported environments:
> * LTS versions of Node.js
> * Latest versions of Safari, Chrome, Edge and Firefo
【jQuery】vTickerで垂直スクロールのティッカー作成
# はじめに
「[このwebサイト](https://elderaffairs.org/)のように自動縦スライドをヘッダーに入れたい！」と、Google先生に尋ねまわったところ、jQuaryプラグイン「vTicker」で実装可能なことが判明。
あわせてこのような表示形式をティッカーと呼ぶことも判明（以下引用参照）。
さっそく設定してみました。#### ティッカーとは
>特定範囲内に文字列を流して表示させる表示方式のことである。右から左（あるいは上から下へ）文字が次々に流れてゆくのを読ませる方式であるので、限られた狭い領域で多くの情報を表示することができる。
ティッカーの代表的な例としては、新幹線の車内や看板、証券取引所などにある電光掲示板がある。Webページにおいても、左右に文字の流れるティッカー表示が用いられる場合が珍しくない。
（引用元：[IT用語辞典バイナリ](https://www.sophia-it.com/content/%E3%83%86%E3%82%A3%E3%83%83%E3%82%AB%E3%83%BC)）# 基本設定
### vTickerをGith
埋め込みのTwitterをライト・ダークモード、動的に切り替える
## JavaScriptかjqueryで簡単に切り替えることができます
### Twitterのダークモードの入れ方
“`HTML
@hogehoge
“`data-theme が dark であればダークモードになります。
### jqueryで切り替える
“`HTML
### Hands-onスタート
」や「[Googleさんの Puppeteer](https://github.com/puppeteer/puppeteer)」などがあります。
今回は、そういったものを使うまでもない簡単なキー入力の処理を、ページ外のプログラムから実行するという方向の話です。## 仕組みの概要
今回の仕組みは、開発者ツールのコンソールから JavaScript のプログラムを実行する構成になっています。冒頭の動画での処理は、Chrome の開発者ツールのコンソールを開き、そこにこの後に掲載している JavaScript のプログラムを貼り付けて実行することで実現しています。## 実行するプログラム
### Scratch
Javascript_クラスを作る
# はじめに
Javascriptでクラスの作り方を学んだのでメモ。
継承の考え方がしっくりこなかったので殴り書き
## 内容
```javascript:Messageクラスを作る
class Message {
//↓コンストラクタに情報を設定する。
constructor(title, text) {
this.title = title;
this.text = text;
}
//↓メソッドでアクションを設定する
success() {
console.log("正常に投稿されました。");
}info() {
this.success();
console.log(`タイトルは${this.title}です。`);
console.log(`内容は「${this.text}」です。`);
}
}const testmessage = new Message("test", "配信テスト。本文はここに表示され
?お前らのゴールデンウィークはゴールドじゃない?
**ゴールデンウィークがゴールドじゃない**のでちゃんとゴールデンウィークにする話です。
ということで、今年もGWアドベントカレンダーが立ち上がっていましたね。[何の役にも立たないプロトタイプ](https://gw-advent.9wick.com/calendars/2022/122)のアドベントカレンダーの参加記事です。
## 黄金週間
着手前にゴールデンウィークのゴールデンって僕らの思ってるゴールドなんだよね？と疑問に思いました。
疑心暗鬼。
[ウィキペディア](https://ja.wikipedia.org/wiki/%E3%82%B4%E3%83%BC%E3%83%AB%E3%83%87%E3%83%B3%E3%82%A6%E3%82%A3%E3%83%BC%E3%82%AF)によると
> ゴールデンウィークまたはゴールデンウイーク（和製英語: Golden Week, GW）とは、日本において毎年4月末から5月初めにかけて休日が続く期間のこと。春の大型連休（おおがたれんきゅう）、黄金週間（おうごんしゅうかん）[1]ともいう。
らしいです。ちゃんとゴールデ
JavaScriptでのAsynchronous（非同期）勉強ノート
# 初めに
今回は非同期通信について自分なりにまとめてみました。
前提としてほかのアジェンダも触れていますが、主な参考資料はこちらです。
[イベントループとは一体何ですか？ | Philip Roberts | JSConf EU](https://www.youtube.com/watch?v=8aGhZQkoFbQ)# Asynchronous VS. Synchronous
Asynchronous（非同期）：同調しない。
→ 自分と他人のやることに分けて、同時進行する。
Synchronous（同期）：同調する。
→ みんな同調して前の人の仕事が終わるまで待ち続ける。# Node.js VS. Browser runtime
Node.jsもブラウザもJavaScriptのruntime、Node.jsはChromeのV8エンジンを基にして作られたruntimeです。Node.jsが提供するインタフェース（file system、fs）を通して、JavaScriptを使ってファイルの読み込みができるようになったり、いろんなモジュール(os, http, setT
music-metadata-browserがブラウザで動かなかったのが解決した
javascriptで音楽ファイルのメタデータを読み込める`music-metadata-browser`というnpmパッケージがあります。これは`music-metadata`のブラウザ版らしいです。
https://www.npmjs.com/package/music-metadata-browser
これをviteでバンドルしたWebアプリケーションで使おうとしたのですが、そのままだとブラウザで実行したときにいろいろエラーが出ました。そして今日、ついにエラーなく動作したので対応したことを書きたいと思います。
# 解決
3つのパッケージを追加しました。
```diff_json:package.json
{
"dependencies": {
"music-metadata-browser": "^2.5.6",
+ "buffer": "^6.0.3",
+ "events": "^3.3.0",
+ "process": "^0.11.10",
}
}
````music-metadata-browser`パッケージより先に次のコード
生JavaScriptのみでなんちゃってスライドショーを作ってみた
GWも変わらず勉強続けるのみ。
最近は暖かいのか寒いのかよくわからない季節ですね。今回は[Swiper]("https://swiperjs.com/")や[Keen-Slider]("https://keen-slider.io/")などプラグインを使わず気合いでVanillaJsでスライドショーを作るという試みをしました。
### なぜプラグインを使わないのか
最初はプラグインを使って質の良いスライドショーにするつもりだったんです。私は[Keen-Slider]("https://keen-slider.io/")を使おうとnpmインストールを使ってどうたらこうたらしようとしました。
でも実際にインストールしてみるとオプションがたくさんあって何が何だか分からなくなり、「これもう自力で作った方が早いんじゃね？」と思ったのがきっかけです。もっとjsでのモジュールとかの扱い方に慣れてからにしようかなという次第。### こうなったら自力で…
早速本題に入ります。まずHTMLで要素を並べる。
同時にスライド用のボタンも実装します。画像の領域にボタンを入れたいので同じ箱に入れました。
Bootstrapとは？
# bootstrapについて学んだこと
## bootstrapとは
HTML／CSS／JavaScriptから
構成される最も有名なWEBフレームワーク
###### フレームワークとは
概念的な意味で、何かの枠組みのこと。雛形等
可視化できるもので表現すると
履歴書に引いてある罫線、項目。
雛形を導入することで工数が減る手伝いをしてくれる。## Bootatrap メリット
##### コーディング量を減らせる
HTMLファイルととCSSファイル２つに記述しなければならない場合もBootstrapで予め用意されたクラスというものを、HTMLファイルに書くだけで簡単に作成することができます。##### レスポンシブ対応のデザインを簡単に作れる
レスポンシブ対応とは、PCやスマートフォン、タブレットなど様々なデバイスに適したWebページを制作することを言います。## Bootstrap デメリット
##### 画一的なデザインになりがち
近年Bootstrapを使用している人は多数いますので、自分なりにカスタマイズしないと、有益なものになりにくくなります。カスタマイ
