A|B|C
目次
- 1. 【Rails/JavaScript】非同期のフラッシュメッセージ表示
- 2. JSF**kのカラクリ
- 3. 【JavaScript】ローマ字が複数入力できるタイピングゲームのライブラリと簡単な使用例【typing-jp】
- 4. JavaScript 〜JavaScriptの変数について〜
- 5. JavaScriptのserch()メソッド
- 6. JavaScriptに関するdelete演算子
- 7. CSS アニメーションでネオンサインの点灯の雰囲気を出してみる
- 8. 【useSWR ①入門編】基本的な使い方とメリットをまとめてみた
- 9. turbolinksがJavaScriptに干渉する
- 10. 【JavaScript】兄弟要素を取得する方法
- 11. 【BizRobo!・DA】古いサイト/アプリを操作する方法【RPA】
- 12. Uncaught SyntaxError: Identifier ‘mouseoverCard’ has already been declared 解決
- 13. JavaScript: 圧縮力編8
- 14. やってみたシリーズradioとcheckboxで遊んでみた。
- 15. html radioの使い方 JavaScript含む
- 16. 【練習】ブラウザで作った文字列コピーツール
- 17. eslint-plugin-strict-dependenciesを使ってみる
- 18. スライドアニメーション
- 19. やってみたシリーズ7編htmlStdio html CSS JavaScript 完結編
- 20. 「同じものを含む順列」その総数を求める（練習）
【Rails/JavaScript】非同期のフラッシュメッセージ表示
## はじめに
非同期処理に合わせて、Javascriptでフラッシュメッセージも非同期的に表示する実装についてまとめました。## 実装内容
### フラッシュメッセージを表示する関数
jsの各メソッドについては、後述の[解説](#解説)にまとめています。
“`js
function displayFlashMessage(data) {
const div = document.createElement(‘div’);
div.className = ‘flash-message’;
div.textContent = data.message;const flashContainer = document.querySelector(‘.flash-message-container’);
flashContainer.appendChild(div);
div.classList.add(data.message_type);//js側でstyleを設定（画面の中央に固定で配置する）
flashC
JSF**kのカラクリ
# JSF**kとは
JSF**kとはJSFuckのことであり、Javascriptで以下の文字だけでプログラミングするJavascriptの縛りのようなものです。
“`js
![]+()
“`
# JSF**kの基本
## 数の生成
まず、空の配列をNOTするとtrueになります。
“`js
![] //falseになる
“`
そして、boolean同士を足すと数字になります。このときtrueは1、falseは0のようになります。
“`js
!![]+!![] //2になる
“`
あと、最初に+でもいけます。
“`js
+!![] //1になる
“`
## 文字の生成
文字列を生成するには、以下の性質が必要です。
“`js
true + [] //”true”になる
false + []//”false”になる
“`
そう、なんらかのオブジェクトに配列を足すと文字列になるのです。
## コードの実行
### コード実行のカラクリ
これである程度コードは作れますがこれでは何もできません。
が、なんとこのようにして文字列をJavascriptコードとして実行できます。
【JavaScript】ローマ字が複数入力できるタイピングゲームのライブラリと簡単な使用例【typing-jp】
## 前書き
タイピングゲームのライブラリを作ったのでタイピングゲームを作りたいと思う。
https://www.npmjs.com/package/@mogamoga1024/typing-jp
## 成果物
https://mogamoga1024.github.io/TypingGameQ/
## 雑な設計
・日本語のテキストとローマ字を表示する。
・入力に応じてローマ字の色を変える。
・複数のローマ字入力に対応する。
・ミス数、タイムを計測する。## 作る
### ライブラリの読み込み
ありがたいことにCDNが使えるので使わせてもらう。
“`html
“`### 問題
問題は適当にChatGPT君に考えてもらう。
JavaScript 〜JavaScriptの変数について〜
## JavaScriptの変数の型の一覧
“`JavaScript
var myVar; // 定義なし
var myVar = “Hello”; // 文字列
var myVar = 42; // 数値
var myVar = true; // boolean
var myVar = null; // null
var myVar = {}; // オブジェクト
var myVar = []; // オブジェクト（配列）
var myVar = function() {}; // 関数
var myVar = Symbol(); // symbol“`
## Symbolについて
一意の値を表す。
以下のソースコードのように値が同じでもifではfalseの判定がされる。
“`JavaScript
let string1 = Symbol(‘文字列です’);
let string2 = Symbol(‘id’);
console.log(string1 === string2); // false
JavaScriptのserch()メソッド
パターンマッチングする方法で、簡単なメソッドはserch()メソッドです。検索する文字列(正規表現)を引数にしているすると、最初に見つけた文字列の先頭の文字位置を表す数値を返します。マッチする文字が見つからない場合は-1を返します。
“`javascript
“hello world”.search() // 0
“The quick brown fox jumps over the lazy dog”.search(“over”) // 26
“abcdefghijklmnopqrstuvwxyz”.search(“s”) // 18
“JavaScript”.search(/script/ui) // 4
“Puthon”.search(/script/ui) // -1
“`#### 参考
https://www.oreilly.co.jp/books/9784873119700/
JavaScriptに関するdelete演算子
この記事はJavaScriptのdelete演算子について学習し疑問に思ったことをまとめて書いてみました。
delete演算子の前に配列について簡単に説明します。
## 配列とは？
– **配列**：順番に並んだデータの集まり。
– **インデックス**：配列の各要素には番号がついていて、最初の要素は0番、次は1番というように番号が続きます。## delete演算子とは？
– **delete演算子**：配列の特定の要素を削除するために使います。### deleteを使う例
“`javascript
var animals = [“dog”, “cat”, “rabbit”];delete animals[1];
console.log(animals); // [“dog”, undefined, “rabbit”]
“`
`animals[1]`（”cat”）を削除しました。削除された場所は`undefined`になり、他の要素（”dog” と “rabbit”）はそのままです。## なぜ削除しても他の要素は動かないのか？
– **配列の要素は特定の場所にある
CSS アニメーションでネオンサインの点灯の雰囲気を出してみる
SVGのロゴをネオンサインが点灯するようなイメージのアニメーションにできないかと試行錯誤した結果を記事に残しておく。
## 最終完成バージョン
まずは出来上がりを、Codepen で確認してほしい。Start ボタンを押すと、ロゴが点灯する。
ネオンサインが点灯する雰囲気にみえるとうれしい。
（と言っても、今となってはネオン管っぽいLEDチューブが主流なので、本物のネオン管を見たことがない世代が多いかもしれないが…）【useSWR ①入門編】基本的な使い方とメリットをまとめてみた
## はじめに
泣く子も黙る [Vercel](https://vercel.com/about) 社によって開発された、シンプルかつ強力なデータ取得のための React Hooks ライブラリ、**`useSWR`** をご存知ですか？
https://swr.vercel.app/ja
`useSWR` を使うことで、データをキャッシュに保持しながらバックグラウンドで更新する仕組みを簡単に実装することができ、アプリのパフォーマンスはもちろん、コードの可読性やメンテナンス性も大幅に向上させることができます。
`useSWR` は個人的に気になる技術なので、複数回に分けて記事を書いていくつもりです。
今回の記事では入門編として、以下のトピックについて解説しています。– そもそも SWR とは？
– `useSWR` の基本的な使い方
– 使うことで得られるメリット
– おまけ：公式ドキュメントに PR を送った話では早速見ていきましょう！
## 1\. そもそも SWR とは？
SWR とは、Web におけるキャッシュ戦略の１つで、”**S**tale-**W**h
turbolinksがJavaScriptに干渉する
turolinksによって、画面が切り替わってもその通常起こりうるloadイベント（jsファイルが実行)が起きない場合がある。
document.addEventListenerなどで囲っている宣言の方法を変えてみるとうまく動作するかも。
【JavaScript】兄弟要素を取得する方法
## 直前の要素を取得する
`previousElementSibling`を使用するとその要素の直前の兄弟要素を取得できます。
“`js
const previousSibling = elem.previousElementSibling;
console.log(“prevSibling”, previousSibling);“`
https://developer.mozilla.org/ja/docs/Web/API/Element/previousElementSibling
## 直後の要素を取得する
`nextElementSibling`を使用するとその要素の直後の兄弟要素を取得できます。
“`js
const nextSibling = base.nextElementSibling;
console.log(“nextSibling”, nextSibling);“`
https://developer.mozilla.org/ja/docs/Web/API/Element/nextElementSibling
【BizRobo!・DA】古いサイト/アプリを操作する方法【RPA】
## はじめに
官公庁、金融業界、大企業などは昔ながらのサイトやシステム（JavaScriptなどで作成されているもの）を使用している事が多いと思います。そのようなサイト・システムを **BizRobo!** のDAを用いて操作する時、普通にロボットを作成していっても、サイト・システムの要素が取れずに操作ができない場合があります。
今回は、上記のような場合に活用できる方法を記載していきます。
２つの方法があるので、１つ目を試してみて改善が見られない場合は２つ目を試してください。
## 方法１
１．DAのエディター画面を開く２．画面左にある「TreeModes」を開く
３．TreeModeで「Windows」を選択する
４．チェックを全て外し、「Legacy Depth+Index」にだけチェックを入れる
## 方法２
１．DAのエディター画面を開く２．画面左にある「TreeModes」を開く
３．TreeModeで「ISA」を選択する
ISAに関しては公式ナレッジに詳しい解説がありますので、併せてご参照ください。
https://knowledge.biz
Uncaught SyntaxError: Identifier ‘mouseoverCard’ has already been declared 解決
問題が解決した要因としては、以下のポイントが考えられます：
1. **即時関数の使用 (IIFE)**:
– コードを即時実行関数（Immediately Invoked Function Expression, IIFE）で囲むことで、スコープが閉じられ、他のスクリプトとの干渉が防がれます。これにより、同じ変数名や関数名を持つ他のスクリプトとコンフリクトすることがなくなります。
2. **`window` オブジェクトへの関数の追加**:
– `window.mouseoverCard` として関数を定義することで、グローバルスコープに関数を追加しました。これにより、関数が複数回定義されることを防ぎつつ、どのスクリプトからもアクセス可能になります。
3. **関数の存在チェック**:
– `if (typeof window.mouseoverCard === ‘undefined’)` で関数が既に定義されているかどうかをチェックしました。これにより、同じ関数が再定義されることを防ぎました。以下に、重要な変更点をまとめます：
### 変更前
1.
JavaScript: 圧縮力編8
皆様お待ちかねの圧縮力の記事となってしまいました。今回はhuffman符号と部分一致予測(通称PPM)の組み合わせを紹介します。
## 構造
まずは接尾辞木**のようなもの**によって文脈を構築し、高速化を図ります。その弊害としてhuffman符号は毎回最初から作り直す羽目になります(本末転倒)が、[前回の記事](https://qiita.com/mashuel/items/02b4794e6a65d3ac9d6b)のものよりは遥かに高速です。
0次の文脈(初期接尾辞木)には最初から全ての文字を登録しておきます。`s`は文字(実装上は整数)、`c`は頻度とします。
“`js
let Tree=[];
for(let a=256;a;)Tree[–a]={s:a,c:1};
“`
続いて指定次数まで木を伸ばす。`son`は下位の文脈、dadは上位の文脈。
“`js
for(let d=Tree[0],i=-1;d=d.son=[],d.dad=Tree,Tree=d,i++
やってみたシリーズradioとcheckboxで遊んでみた。
https://qiita.com/tattyan3/items/906d863584c85a8d0e26
上の項目の、改造版で遊んでみた。
動的にアンケートを行えないか試してみた。“`html my_test0.html
my_test0
eslint-plugin-strict-dependenciesを使ってみる
:::note
## 概要
[eslint-plugin-strict-dependencies](https://github.com/knowledge-work/eslint-plugin-strict-dependencies)は
- `module`,`allowReferenceFrom`の設定を個別に指定することでpackage-privateは実現できます！
- 以下を再調査します
- ルールの`allowSameModule`,`excludeTypeImportChecks`
- オプションの`pathIndexMap`
:::# 1. 背景 🖼️
TypeScirptではexport宣言した変数や関数は全てのファイルからimportできてしまいます。
しかし、モジュール内に処理をまとめすぎると肥大化してしまいます 😢package-privateが実現できれば外部のディレクトリからimportを制限できたり、モジュール管理がしやすくなると思います。
この記事でeslint-plugin-strict-dependenciesについて触れて
スライドアニメーション
#### はじめに
今回は、JavaScriptを使用したスライドアニメーションの実装について触れてみようと思います。私のまとめは"自分が見返せるように"という意味合いもあります。エンジニア初心者故、温かい目で見ていただけると嬉しいです。
#### 【スライドアニメーション】
このコードを使用すると、要素を指定した方向にスライドさせることが出来ます。
```ruby:例
function slideAnimation(element, direction, distance, duration){
/* 開始時刻を取得 */const startTime = performance.now();
/* スライドアニメーションの関数 */
function slide(timestamp) {
/* 現在時刻を取得し、開始時刻からの経過時間を計算 */
const currentTime = timestamp - startTime;/* 経過時間がアニメーションの継続時
やってみたシリーズ7編htmlStdio html CSS JavaScript 完結編
２か月かけたhtml,CSS,JavaScriptで編集できる、video,audio,image,table,textを組み合わせ時間経過で変えて一つの動画的に見られる、試行錯誤の結果が出ましたので、お知らせします。
なにぶん、大きくなったのでホームページにて、公開と致しております。アドレスは、
https://tattyan0-0.sakura.ne.jp/etc/index.html
お得なように、色々付属して大きくなっております。必要なのを残して掃除して使う事をお勧めします。
すべて、実働のファイルを提供いたしています。
検査不足の動作不具合などが見つかったら直していただいて結構です。著作権は保留「使わない」ので、二次頒布、類似品は、覚悟の上ですが、使用者におかれましたら、すべて無料ですから
騙されない様にしてください。
