- 1. React-leafletを使って、線路・駅検索を作ってみた
- 2. Next.jsのレンダリング方法「CSR/SSR/SSG/ISR」について図解する
- 3. AntデザインのTableで使用するデータが可変長の配列の場合に、Grouping table headの要素をその配列の要素数の最大値に合わせて作成したい
- 4. 【(JavaScript)】DOMについて
- 5. 【React初学者向け】純粋関数って理解してる？
- 6. 楽しいな。簡単な 3Dの オープンワールドのフライトシュミレータ ゲームです。
- 7. [paiza]コレがSランクだと？（文字列収集 (paizaランク S 相当)
- 8. Selenium VBAでjavascriptやonclick絡みの処理に関する格闘と考察
- 9. toLocaleDateStringで日付けフォーマット
- 10. [paiza]遅いけど動くよ（十億連勝 (paizaランク S 相当)
- 11. プロダクトコードに顔文字(*^-^)を導入した話
- 12. 【Javascript】ProgressBar が動かない(一連の処理が終わってから初めて動く)現象を回避したい
- 13. Typescript / Javascript：fast-csv で csvを取り込む
- 14. JavaScriptを、一から学びなおしてみた。(一応初心者向け+練習問題4問)
- 15. ＃26 【Chrome用】Google Chatのメッセージのリンクをコピーできる拡張機能を作った
- 16. [ScriptAPI参考書] ScriptAPIの情報まとめ #2
- 17. Reactでクエリパラメータ使ってみる。（URLって？から）
- 18. chromecast-api ＋ Node.js（JavaScript）で Chromecast への動画のキャストを行う
- 19. JavaScriptで蟻本 貪欲法 コインチェック
- 20. 【初めてのWEB開発】Node.jsを使用した小説紹介サイト開発
React-leafletを使って、線路・駅検索を作ってみた
# React-leafletを使って、線路・駅検索を作ってみた
物自体は3か月ぐらいに作っていたが、ここから何か機能などを追加して面白くできる案が思いつかなかったので、いったん公開してみようと思いました
※何か面白い案などがあればコメント貰えると嬉しいです
アプリのリンク(firebase)：https://reaflet-12c2e.firebaseapp.com/leaflet線路・駅の情報は、「国土数値情報ダウンロードサイト」のデータを使用しています。
登録すれば、誰でもダウンロードしてしようできます。leafletの経度・緯度のデータを読み込ませるときに、上記データの緯度・経度が逆になっていたので、そこだけ変換処理が必要でした
駅名を選択すると、その路線が表示されます。
上のプルダウンは路線検索できるようになっています赤
Next.jsのレンダリング方法「CSR/SSR/SSG/ISR」について図解する
# はじめに
Reactはクライアントサイドレンダリングを得意とするライブラリで、サーバーサイドレンダリング（SSR）も実装可能です。しかし、ReactでSSRを実装しようとするとたくさんの設定や追加のコードが必要になってきます。
そこで登場したのがNext.jsです。
Next.jsはReactをベースにしたフレームワークで、以下の特徴があります。
1. **簡単なSSR実装**
2. **パフォーマンス最適化**
3. **ファイルベースのルーティング**
4. **静的サイト生成（SSG）とインクリメンタル静的再生成（ISR）**
5. **開発環境の向上**
6. **ビルトインのCSS/Sass支援**
これらの機能により、Next.jsはReactのみを使用する場合と比べて、**開発効率、パフォーマンス、SEOの面で大きな利点があり、そのため多くの実務プロジェクトではReactとNext.jsが一緒に使用されています。**
つまり、React開発者にとってNext.jsの理解が非常に重要になっています。
そこで最初に初学者がぶち当たる壁がこの**CSR
AntデザインのTableで使用するデータが可変長の配列の場合に、Grouping table headの要素をその配列の要素数の最大値に合わせて作成したい
掲題通り。
下記の[Antデザイン Grouping table head](https://ant.design/components/table#table-demo-grouping-columns)を使用したテーブルで、オブジェクト内のパラメータが可変の配列の場合に、その長さに合わせた子ヘッダーを作成しつつデータを表示する方法に四苦八苦したため(サンプルコードは固定長だった)、備忘録として残す。
下記のような形で作成できた。
】DOMについて
# はじめに
DOM及びその操作の概要をまとめました。
JavaScriptの一部ではなかったことを学びました。
「ノード」や「要素」といった言葉の違いについても新しい発見がありました。# DOM(ドキュメントオブジェクトモデル)
– DOMは、文書をオブジェクト指向で表現したものであり、その構造はツリーである。この構造の各構成要素を**ノード**と呼ぶ
– DOMのコア部分は、文書をオブジェクトで記述する機能の基礎的なものを提供する。Web APIにもあり、HTMLに向けた拡張がHTML DOM APIである
– DOMで文書を表現することで、その構成要素をプログラミング言語で操作することができる
– 多くはJavaScriptで行われるが、特定のプログラミング言語からは独立している。例えば、Pythonで操作することもできる
– データ型
– Node
– 文書内のすべての構成要素は、何らかの種類のノードである
– HTMLでは、エレメントノード、テキストノード、属性ノード等がある
– 他のDOM APIオブジェクトのベー
【React初学者向け】純粋関数って理解してる？
# はじめに
Reactではコンポーネントを純粋関数として扱うことが推奨されています。
純粋関数とmutable,imutableという言葉は非常に密接な関係にあって、これを理解しておかないとコンポーネントを扱っていく上でとてつもなくつまづくことになります。公式ドキュメントでもmutableな操作ではなくimutableな操作を推奨するような文章がでてきます。
https://ja.react.dev/learn/updating-arrays-in-state
### では純粋関数とはなんでしょうか？？:frowning2:
# JavaScriptの純粋関数
## 1. 純粋関数とは？
純粋関数は、以下の特徴を持つ関数です：
1. 同じ入力に対して常に同じ出力を返す
2. 関数の
楽しいな。簡単な 3Dの オープンワールドのフライトシュミレータ ゲームです。
簡単な3Dオープンワールドのフライトシュミレータゲームです。カーソルキーで移動です。上で機首上げ、下で機首下げ、左右で旋回です。（操作に慣れてくると面白いです。）
実行結果。
ジュピター ノートブックにコードを貼り付けて実行すると、サーバーが起動してブラウザ上でゲームが始まります。
#### フライトシュミレータ ゲームです。
“`python
import http.server
import
[paiza]コレがSランクだと？（文字列収集 (paizaランク S 相当)
# なんか急に簡単じゃね？
処理自体4行で書けたんだけど、これホントにSランクなの？https://paiza.jp/works/mondai/real_event/word_collection
# 面倒くさいので画面パタメータをListでもらった後のFunctionだけ
ちなみに引数のListを作ってる箇所は[こっちの記事](https://qiita.com/AsilHatake/items/842548e48ae4a0eae119)に書いてあるYO!!“`javascript:wordCollection.js
// [問題文（原文）]
// あなたは文字列の愛好家で、文字列を収集することにとても熱心です。
//
// 文字列は市場で高値で取引されています。今、市場には N 個の文字列が出まわっており、文字列 S_i (1 ≦ i ≦ N) の価格は P_i です。 あなたは数ある文字列の中でも、とくに先頭がある特定の文字列で始まる文字列に興味があり、そのような文字列をすべて買い占めたいです。例え、同じ文字列が複数売っていたとしてもそのすべてを買います。
//
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
