- 0.0.1. Selenium VBAでjavascriptやonclick絡みの処理に関する格闘と考察
- 0.0.2. toLocaleDateStringで日付けフォーマット
- 0.0.3. [paiza]遅いけど動くよ（十億連勝 (paizaランク S 相当)
- 0.0.4. プロダクトコードに顔文字(*^-^)を導入した話
- 0.0.5. 【Javascript】ProgressBar が動かない(一連の処理が終わってから初めて動く)現象を回避したい
- 0.0.6. Typescript / Javascript：fast-csv で csvを取り込む
- 0.0.7. JavaScriptを、一から学びなおしてみた。(一応初心者向け+練習問題4問)
- 0.0.8. ＃26 【Chrome用】Google Chatのメッセージのリンクをコピーできる拡張機能を作った
- 0.0.9. [ScriptAPI参考書] ScriptAPIの情報まとめ #2
- 0.0.10. Reactでクエリパラメータ使ってみる。（URLって？から）
- 0.0.11. chromecast-api ＋ Node.js（JavaScript）で Chromecast への動画のキャストを行う
- 0.0.12. JavaScriptで蟻本 貪欲法 コインチェック
- 0.0.13. 【初めてのWEB開発】Node.jsを使用した小説紹介サイト開発
- 0.0.14. 【JavaScript】カウントダウンタイマー実装
- 0.0.15. Node.jsやJavaScriptビルドツールのインポートパスの仕組み：index.tsxなどを使った簡略化
- 0.0.16. JavascriptをHTMLで使う
- 1. 文書の主見出し
Selenium VBAでjavascriptやonclick絡みの処理に関する格闘と考察
# 目的、背景など
業務自動化の一環としてWebスクレイピングを独自に学習しています。
Selenium、VBAを使ったスクレイピングなんですが、htmlのパスを指定して行いたい処理をやりくりするだけに留まっていました。
ですが一部の処理でjavascriptの処理をキックしたい場面があったのですが、その際のVBAの記述の仕方に格闘しました。
なかなか自分好みの記事がなかったので、備忘録がてら投稿したいと思いました。# 作業環境
* Selenium Basic 2.0.9.0
* Microsoft Visual Basic for Applications 7.1
* Google Chrome バージョン:126.0.6478.182（Official Build）（64 ビット）# 伝えたいこと
DevToolsから覗いて以下のような “`onclick=“` でJavascriptが指定されているとき、“`
“`Selenium VBAでは以下の記述でJavas
toLocaleDateStringで日付けフォーマット
toLocaleDateStringいつも忘れるのでメモ。
“`js
const date = Date.now();
// 1723185748505const formatDate = new Date(date).toLocaleDateString(“ja-JP”);
// 2024/8/9
“`オプションも設定できるらしい。
“`js
toLocaleDateString(locales, options)
“`時間の表示
“`js
const formatDate = new Date(date).toLocaleDateString(“ja-JP”, {
hour: “2-digit”,
minute: “2-digit”
});
// 2024/8/9 15:53
“`https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString
[paiza]遅いけど動くよ（十億連勝 (paizaランク S 相当)
# 動くけどダメダメ
やっとSランクに来たわいいけど、やっぱり難しいものね。
マジで納得がいかない出来だけど、とりあえず動くものが出来たので晒し上げようかと。https://paiza.jp/works/mondai/real_event/continuous_winning
# 今回は2つの言語で書いたよ
いつもはJavaScriptで書いていたけど、今回はJava版も書いてみたよ！
理由としてはJavaScript版だと【入力例3】を実行するとメモリエラーで落ちてしまうという問題があったため、急遽同じようなコードをJavaで書いてみて動かしてみたって感じです。## プログラムの概要
・ステージ分ループしてステージ内で起こり得る結果を生成
“`text:
[
[ ‘1’, ’01’, ‘001’, ‘000’ ], // ステージ1:x(負け),ox(勝ち負け),oox(勝勝負),ooo(勝勝勝)
[ ‘1’, ’01’, ’00’ ], // ステージ2:x(負),ox(勝負),oo(勝勝)
[ ‘1’, ’01’, ‘001’, ‘000’
プロダクトコードに顔文字(*^-^)を導入した話
## はじめに
最初に書いておきますが、この記事からは何も知見は得られません。
フロントエンドエンジニア歴2年の新米です。これはプロダクトコードに半分はギャグで、半分は真面目に顔文字をコードの一部に導入したときの話です。2024年現在もこのコードは異常なく動いています。
## 経緯
ある日バグレポートがあがってきて、その原因はフロントエンドで定義して利用していたセパレータ(アンダースコア2つ`__`)とバックエンドから返してきているフィールドのセパレータ(アンダースコア2つ`__`)とのコンフリクトでした。
そこでシニアエンジニアに雑談がてら相談しました。すると「確かに `__` は簡単すぎるよね～、うーん、どうしよっか。。。？顔文字にでもしてみる？w」と言われました。
日々の業務に退屈していた私は「あー、いいですね！！コンフリクトも起きなさそうですしね！」と返事し、(この時点でQiitaに書けるぞ～と邪な考えもしながら)どの顔文字を採用するか検討を始めました。
*私もシニアの方もセパレータとして、もう少し複雑にすれば(例えば `__**__`)充分だと理解しています。
【Javascript】ProgressBar が動かない(一連の処理が終わってから初めて動く)現象を回避したい
html で 処理に時間がかかる javascript を組んだ時に
ProgressBar を実装して
一連の処理が全て終了してから
初めて ProgressBar が動いて困った人はいますか？この記事ではその場合の
応急処置の 1 例を紹介したいと思います。この工程を踏めば
ProgressBar が処理中に動作してくれます。***
手順1 重い処理全体を async なメソッドに配置する
まずは重い処理全体を
async なメソッドに配置して
実行して下さい。“`javascript:async なメソッドの例
async function MyFunction(ctx, canvas) {}
MyFunction(ctx, canvas); // 必ず元の場所で実行して下さい。
“`***
手順2 ProgressBar の Value を変えた後に sleep 処理を書く
次に ProgressBar の Value を変えた後に
次の処理を記述します。“`javascript:記述する処理
const sleep = ms =>
Typescript / Javascript：fast-csv で csvを取り込む
# Typescript環境でcsvを取り込みたい
管理画面系の開発をしていると、csvファイルを読み込みDBに保存するといった場面によく出会います。
私も最近 Nodejs を利用した開発でそのような機会があり、fast-csvというライブラリを用いたところ思ったより簡単に実装できたので、実際のコードと共に残しておきます。typescriptの実行環境作成は以下記事などが参考になると思います。
https://qiita.com/jonakp/items/da5988b783cb28c03192
## 実装
### 実行環境
“`
yarn: v1.22.22
node: v20.10.0
ts-node: v10.9.2
“`### fast-csvをインストール
parseを利用するので、devDependenciesにparseもインストールしました。
“`:command
yarn add fast-csv
yarn add @fast-csv/parse
“`### ディレクトリ構成
※ package.json等は省略
“`
csv-s
JavaScriptを、一から学びなおしてみた。(一応初心者向け+練習問題4問)
※この記事の作者(私)は、既に一つ以上の言語(高級言語)をマスターした後に、新しい言語 JavaScript を習い始めたという記録です。そのため、JavaScript とは違った文であったとしても構造が類似するため、それぞれ後述するコードの解説を行っております。
一応、**JavaScript に対しては初心者です**が、他の言語で学んだことと類似しているものは、その点を生かして解説をしております。ご了承ください。あと真面目には書いていますが、おちゃらけている部分もあります。読む際はご注意ください。
# 1. 自己紹介
皆さん初めまして、まっちゃラテです。抹茶が大好きな大学2年生です🍵
知っている方は、知っています。(私を知る人はかなりマイナーですが…)えーと、高1からAtCoderもやっております。現在 **茶色** 、元緑コーダーでは、あります。実力は保証できない(小声
で！
最近はpaizaに焦点を当て始め(この訳は後述します)、最近、8月初めくらいに **黄色ライン** にたどり着きました！！！(結構がんばりました)あと、これまでに経験したこと
＃26 【Chrome用】Google Chatのメッセージのリンクをコピーできる拡張機能を作った
## 追記
Google Chat公式でメッセージのURLをコピーする機能がが追加されたため、拡張機能を使わずともコピーが可能になりました。
本記事は公式が対応する前に執筆したものです。## 概要
Google Chat にて特定のメッセージを指したいときに、そのメッセージのURLが分からないと不便でしたので、URLをコピーできる機能を作成しました。
URLをクリックすると、そのメッセージのところまで移動します。
もちろん、自分が参加していないルームのURLは開けません。(警告が出るのみ)## 使い方
こちらのページからインストールしてください。
https://chrome.google.com/webstore/detail/google-chat-copy-message/fcpndhggcmeanomlafjkgdnbjkbpkeihインストール後は、Google Chat のメッセージにフォーカスを当てるとクリップボードマークのボタンが表示されるようになり、ボタンを押すとURLがコピーされます。
– [モジュールの種類](#モジュールの種類)
– [@minecraft/server](#minecraftserver)
– [@minecraft/server-ui](#minecraftserver-ui)
– [@minecraft/server-gametest](#minecraftserver-gametest)
– [@minecraft/server-net](#minecraftserver-net)
– [@minecraft/server-admin](#minecraftserver-admin)
– [@minecraft/server-editor](#minecraftserver-editor)
– [ScriptAPIの仕様](#scriptapiの仕様)
– [JavaScriptの仕様](#javascriptの仕様)
– [beforeEventsの仕様](#beforeeventsの仕様)
– [Playerクラスの仕様]
Reactでクエリパラメータ使ってみる。（URLって？から）
# Reactでクエリパラメータを使ってみる
## 何故この記事を書こうと思ったのか
ReactではuseStateを使ったり、Reduxを使ったりと様々な値を保持したりする機能がありますが、その中でも使用頻度がとても高いクエリパラメータ,
SubmitEventなんかで値を取得する際などで使用しますね。ページ遷移後にリロードしてもクエリパラメータは変更されないため、情報を保持しておく場面では特に多用します。## 意外と解説してくれてる記事とか少ない気もする
フロントエンドエンジニアとしてはとりあえず、必要な知見となるので今回書かせてもらいます。
単純にURLを取得したいだけだったり、クエリパラメータだけ取得したい場合なんかで違うため、まとめます。
後半部分で実際にクエリの取得だったり、動的に作成したりっていう解説があります。前半は、基礎内容です、。## まずURLの仕組みについて学ぶ
そもそもURLとは、「インターネット上に存在する情報資源の、場所を指し示す技術方式」のことです。
ここで今更書くほどでもないのですが、（このURLは、自分の前回更新した記事のURLです）
“`
chromecast-api ＋ Node.js（JavaScript）で Chromecast への動画のキャストを行う
以下の記事で扱った「Chromecast制御 ＋ JavaScript」の話に似た内容です。
●castjs を使って Chromecast への動画のキャストを JavaScript で行う（p5.js も併用） – Qiita
https://qiita.com/youtoy/items/595147a78f4d2b2c8630上記との違いは、自前で用意したプログラムをブラウザで動作させるのではなく、Node.js で動作させるという部分です。
## 今回利用するパッケージ
今回は、以下のパッケージを使って実装します。●chromecast-api – npm
https://www.npmjs.com/package/chromecast-api
## 実装内容
### JavaScript のコード
JavaScript
JavaScriptで蟻本 貪欲法 コインチェック
# 概要
アルゴリズムを学習をした際の記録を投稿します。
今回は蟻本・貪欲法のコインチェックについてです。# 問題
以下引用
“`
>1円玉、5円玉、10円玉、50円玉、100円玉、500円玉が、それぞれC1,C2,C10,C100,C500枚ずつあります
> できるだけ少ない枚数の効果でA円を支払いたいと考えています。
>何枚の効果を出す必要があるでしょうか？なお、その様な支払い方は少なくとも1つは存在するとします。“`
# コード部分
“`javascript/** コインチェックpp43
*
* @param sum{Number} 金額の合計額
* @param coinNumbers{Number} 各コインの枚数 要素数は6 1番目は1円、2番目は5円,3番目は10円,4番目は50円,5番目は100円,6番目は500円
* @return {Number} コインの最小枚数
*/
const check = (sum,coinNumbers) =>{
const coinValue = [1,5,10,50,100,500]
【初めてのWEB開発】Node.jsを使用した小説紹介サイト開発
## はじめに
約1ヶ月ほどで友人と共同開発した小説紹介サイト「ノベルバース」について、使用技術や開発過程で直面した課題、そしてセキュリティ面での取り組みを紹介します。
## サイト概要
サイト名：ノベルバース (https://www.novelverse.net)
ノベルバース（以下、本サイト）は、次に何を読もうか迷っている人が最新情報を元に、手軽に小説を探せることを目的に設計されました。ユーザーは多様なカテゴリーや作家名から小説を探索し、お気に入りの作品をブックマークできます。
### 主な機能
– アカウント管理（作成、削除、ログイン、ログアウト）
– 多様なカテゴリーによる小説一覧表示
– 小説詳細情報の閲覧
– ブックマーク機能（「読みたい＋」ボタン）
– 検索機能（全文検索および作家名検索）
– お問い合わせフォーム## 使用技術
開発に使用した主要な技術スタックは以下の通りです：
### フロントエンド
– HTML / CSS
– JavaScript (Vanilla JS)
– EJS（テンプレートエンジン）### バックエンド
– Node
【JavaScript】カウントダウンタイマー実装
## 最初に
カウントダウンタイマーを実装する学習をしたので、学んだことを記事にしたいと思います。
今回はJavaScriptを使ってシンプルなカウントダウンタイマーを実装します。
カウントダウンタイマーは、特定の時間が経過するまでの経過時間を表示するツールで、イベントのカウントダウンやプロモーションの終了時刻の通知など、様々な場面で活用できます。## 目次
[1．完成形](#完成形)
[2．HTML、CSSの実装](#2htmlcssの実装)
[3．JavaScriptの実装](#3javascriptの実装)
∟[3.1.タイマーの設定](#31タイマーの設定)
∟[3.2．残り時間の計算](#32残り時間の計算)
∟[3.3．タイマーの更新と表示](#33タイマーの更新と表示)
[5．実際に動かしてみよう](#5実際に動かしてみよう)
[6．応用編：イベントのカウントダウン](#6応用編イベントのカウントダウン)
[7．まとめ](#7まとめ)## 1．完成形
タイマーを1時間にセットして、終了時に「終了しました」と表示されます。
▼カウント開始
## asideの利用
aside はこのように使います。
“`tsx
$ asdf local nodejs 22.2.0
$ npx @google/aside init
“`実行すると、いくつか質問が出てきます。
この回答結果で clasp の開発に便利なコード
記事まとめ（JavaScript）
私が投稿したJavaScriptに関する記事のまとめです
– [非同期処理](https://qiita.com/ramgap/items/f1857de32b6f4a1d0732)
– [プロトタイプチェーン](https://qiita.com/ramgap/items/2d481d8d6368dfeb5232)
