JavaScript関連のことを調べてみた2022年04月11日

【コンポーネント】コンテンツを開閉させるもっと見るボタン

長いコンテンツを省略して表示し、ボタンを押すとすべて表示させるアノUI。

スマホでは省略表示、それ以外は全表示という実装が多いのですが、これが毎回地味に大変…:sweat:

というわけで、汎用的に利用できるコンポーネントを作成しました。

## 仕様

* 表示・非表示
* `` のチェックの有無で管理
* 省略時のコンテンツの高さ
* CSS変数（Custom Properties）で管理
* スライドアニメーション
* CSS の `transition` で `max-height` をアニメーション
* `max-height` の値は JavaScript で高さを取得、CSS変数に設定

## HTML

:::note info
親要素の `div` に設定している `class=”js-showMore”` は JavaScript のトリガーです。
アニメーションさせない場合は不要です。
:::

“`html:html

[自分用メモ] select2のoptions（選択肢）にclassとhtmlを引き継ぐ

select2の選択肢表示に元のoptionタグのcalssとinnerHTMLを引き継ぎたい話
忘れてまた探し回りそうなので自分用コピペメモ

### 注意点
この方法だと、ただの``でも中にタグがないと
`$(data.element.innerHTML)`のところでjQueryが停止するので、``要素で囲む
jsを工夫すればいいのでしょうけど、見づらくなりそうなので一旦これでＯＫとする
### コード
“`select.html
ただの選択肢 怪我
“`
“`select2_init.js
$selectEl = $(‘#select’).select2({
templateResult: (data, container) => { /

【Google MAP】地図移動後の緯度経度の再取得方法

# はじめに

– 以前、Googleスプレッドシートにある場所リストを利用して、GoogleMAPにマーカー表示＋場所リスト表示をしました。

https://qiita.com/yoshi_yast/items/44ef9da9bc136e455950

– MAPの横にあるサイドバーの場所リストについて、**地図を移動した際に、移動後に表示される地図におけるリストに更新**したいと思いました。言い換えると、複数の場所情報がある場合、GoogleMapの表示範囲のみの地点にて、マーカー＆リストを表示する、ということになります。

# 用意したいサンプルデータ(Googleスプレッドシート)
– Googleスプレッドシートから場所リストを読み込みする方法は、上記リンクを参照。

# サンプルプログラム
– 初期に表示される場所は6カ所。ドラックや

ES6のJavaScriptを知らないフロントエンドエンジニアは早急に学ぶべし! 配列の便利メソッドを7つご紹介します!

2021年9月にSIerからWebサービス企業に転職をして、これまであまり触れてこなかったフロントエンド開発をするようになりました。（前職では主にバックエンドだったので）

しかも、モダンなTypeScriptを使っているということでキャッチアップしなければいけなかったんですが、何がTypeScriptの機能で何がJavaScriptの機能なのか、あまり理解できなかったんですよね・・

TypeScriptは結局JavaScriptがベースの言語なので、まずはJavaScriptが理解できていないことには始まらないと思い、JavaScriptから勉強を始めることにしました。

前職では少しだけJavaScriptを触ったことがありましたが、ES6というモダンなJavaScriptは触ったことがなく、これからはES6以降を理解していないとダメだなと感じたので、ES6の勉強をするに至りました。

フロントエンドエンジニアを志望している方、現在フロントエンドエンジニアだがES6を理解していない方は是非一読下さい！！

## 記事はこちらに移管しました
https://toranokoeng

【jQuery】submit()を使ったのにフォームのPOSTが出来ない

## まえがき
フォームで送信用のボタンのクリックイベントを用いた際に発火は確認できているのに送信が出来ず詰まっていた。

## コード(送信できないパターン)
＊送信ボタン
“`

“`

＊送信処理
“`
var clickCount = 0;
$(‘#submitForm’).click(function() {
clickCount++;
if (clickCount === 1) {
$(this).closest(‘form’).submit();
return false;
} else {
setTimeout(function() {
clickCount = 0;
}, 2000);

ビジュアルリグレッションテストのすすめ

日々いろいろなWebサイトの制作や修正を対応していく中で、修正したページとは関係ない（と思っていた）ページで表示が崩れてしまったことってありませんか？

私はたびたび経験があります。

毎回目視で全ページをチェックすれば防げるのかもしれませんが、それは現実的ではありません。
自動で全ページをチェックしてくれて不具合があれば教えてくれる、そんな便利なツールがあればと何度も思いました。

どうやら現代の技術でそれは作れるみたいです。ビジュアルリグレッションテストというらしいです。

# ビジュアルリグレッションテストとは
ざっくりいうと「見た目の比較」をするテストのことです。
変更前のWebサイトのスクリーンショットを用意しておき、変更後のスクリーンショットを撮り比較することで、どこが変わったか差分を表示し確認することができます。

# どうやって使

【MPA】LarvelにVueコンポーネントを導入する方法とVueコンポーネントが大量にある時のコツ?

以前SPAとしてVueをフロントエンド、Laravelをバックエンドとして利用することは多々あったが、MPAでLaravelのBlade表示のためにVueコンポーネントを利用するという経験がなかったので、その時のことをまとめる。
## 環境
MacOS Catalina
Vue 2.6
Laravel 8.0

## SPAとMPAのイメージ
これまでやってきたSPA

初回のHTTPリクエストで返ってきたHTMLに対してコンテンツの切り替えのみを行うため、ページ遷移を行わずより高速な画面更新が可能になる。
完全にフロントエンドとバックエンドをVueとLaravelで分けて、Vueでaxiosを利用してLaravelのAPIを叩く形で利用。
LaravelはAPIとしての責任を持たせ、それ以外はVue側に責任を持たせるような実装である。

今回挑戦

JavaScript: 文字数を正確にカウントするには？

この投稿ではJavaScriptで文字数をできるだけ正確にカウントする方法について取り上げます。

## 文字数とは？

要件で「文字数を表示してほしい」「○文字以上はバリデーションエラーにしたい」と文字数を考慮しないとならないことがあります。

そもそも文字数とは何でしょうか。

たとえば、アルファベットの「A」は1文字と数えられそうです。

次の絵文字は、何文字になるでしょうか？

この絵文字はiOSであれば14.5の環境では、UI上では上のように1文字のように表示されます。しかし、それ以前のバージョンでは、同じ文字列データでも??のように2文字で表示されます。なお、この絵文字は3つのコードポイントU+1F635 U+200D U+1F4ABからなります。この絵文字の「文字数」はいったい何文字として扱ったらよいのでしょうか。

以上

二分木を用いた数値配列の部分範囲内の最大値取得

数値配列の部分範囲内の最大値は以下のように検索できます。

“`js:線形最大値検索
function findMax(nums, start, end, minValue = -Infinity) {
let maxValue = minValue;
for (let i = start; i < end; i++) { maxValue = Math.max(maxValue, nums[i]); } return maxValue; } ``` ただしこの方法では、一度の検索が線形時間であるため、数万要素数ある配列の場合、何度も範囲を変えながら最大値を求めるような場合には、とても大きな時間がかかってしまいます(繰り返したときの計算量はO(N^2))。 そこで、これを回避するには、最大値を収めた二分木を一度作成することによって、対数時間で検索できるようになります(繰り返したときの計算量はO(NlogN))。 ```js:対数最大値検索 function createMaxTree(nums, start = 0, end = nums.length

お年玉計算機を作りました２、React.jsで。


>初めてReact.jsを触りました。存在は知っていましたが使う機会がなかったのです。
>以前、jsコードで書いたものをReact.jsに置き換えました。

### 参考にしたサイト
1. 公式ドキュメント
2. todoリストのサイト
3. 連想配列の書き換え

https://qiita.com/taoka-toshiaki/items/cc3

ウクライナ国旗を油彩画風に描画する Generative Art

ウクライナへの支援も兼ねた Generative Art の啓発記事です。あまり深い意味はありません。

## 概要

* 油彩画風のウクライナ国旗を JavaScript で自動生成します。
* コードは 200 行ほどの HTML ファイル一枚のみ。
* Canvas API で国旗の下描きを描画し、それを元に擬似ブラシで描画する、といった流れです。

## コード

flag.html

“`html