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

React + TypeScript: SimpleBarでスクロールバーのスタイルをカスタマイズする

[SimpleBar](http://grsmto.github.io/simplebar/)はスクロールバーをカスタマイズするライブラリです。スクロールバーを独自につくるのではなく、CSSのスタイルを割り当てるので、おかしな挙動は起こらず、ネイティブなスクロールのパフォーマンスが保たれます。あくまで、スクロールバーの見栄えを変えるだけです。


#### デザインはCSSで定める
SimpleBarは純粋なCSSでスクロールバーのスタイルを定めます。CSSで与えられるスタイルでさえあれば、自由にカスタマイズできるということです。また、macOSとWindowsで同じ見た目になるのも大きな魅力といえます。

#### 軽量なライブラリ
6KBのとても軽いライブラリです。JavaScriptはスクロールの動きそのものには触れません。ネイティブな動きとパフォーマンスが得られます。

###

再利用できるプレゼン用WEBページを作ろう 第３回

# CSS

素の状態では、sanitize.css のみ適用していました。

このあと、準備しておいた
1. baseDefault.css
1. develop.css
1. upLeftRight.css
1. toneGreen.css

を順次読み込んでみます。
まず CSS の中身を確認し、取り込むたびに見た目がどのように変わっていくのか見ていきましょう。

## baseDefault.css

「base」「default」って、なんか意味がかぶっていてセンスのなさを感じますね。もしかしたら名前を付けるタイミングでは必然性があったのかもしれませんが忘れました。そのうち base.css か default.css に変えるかもしれません。

ディレクトリ構造の中には 2 つの baseDefault.css がありますが、develop/css/baseDefault.css は
###### develop/css/baseDefault.css
“`
@charset “utf-8”;
/**
* @package jQueryMock
* @version

再利用できるプレゼン用WEBページを作ろう 第２回

# 全体構成

今回から、実際のソースコードを見ながら解説していきます。
少しでも開発効率アップのお役に立てれば幸いです。

とにかく WEB サーバなしが大前提。デモンストレーションしたい内容をすべてブラウザ側だけで実現する必要があるので、今回は jQuery を使います。
ちょっとした動作（の模倣）のあるページを作るには jQuery はうってつけです。

## フォルダ構成

１ページのためにずいぶんたくさんのファイルが必要なんだな、と思うかもしれません。
JS は機能ごとに分かれているので、対応するブロックが表示対象外なら読む必要はなくなります。
CSS は baseDefault.css と develop.css 以外はレイアウト、トンマナ各１を読み込みます。

今後たびたび **モジュール** という言葉を使いますが、このディレクトリ構造でいうと **common と並列にある develop のこと**だと考えてください。
今回はサンプルのため、1 種類のモジュールしか出てきませんが、本来は
1. クライアント向け管理画面の機能拡張するときに使う module01
1.

再利用できるプレゼン用WEBページを作ろう 第１回

# きっかけ

WEB エンジニアをしていて、こんな経験したことありませんか？
1. クライアントに対し、ワイヤーフレームでページの表示内容、構造を**共有、承認**される
1. 承認された内容に基づいてデザインされたページの画像を作成、提示し、**承認**される
1. 承認された内容・デザインに基づき実際に動作するページを作成、提示
1. 内容・構造・デザインすべて了承済みだったはずなのに、**いろいろ覆ってしまう**
1. 完成したはずのものに手を入れて、なんとかクライアントの要望を満たして再提示
1. **また別の要望が出てくる**、の繰り返し

**なぜこうなってしまうのか**、の原因はいろいろあります。5個や10個は考えつきそうですが、その中でもかなり大きい要因は、 1. 2. の過程で「**クライアント（非エンジニア）は、実際に動くページを見ないと、提示されている内容を正しく評価できない**」ということだと思うのです。
これは「いい・悪い」の話ではなく、**単に現実です**。

それに気づいてからは、可能な限り納品物に近い見た目・動作の HTML を組み、WEB ブラウザで

Python,Ruby,PHP,Java,JavaScript,Perlの日付・時刻の比較

Qiita > プログラミング言語の比較

Python,Ruby,PHP,Java,JavaScript,Perlの日付・時刻の比較

# Python

https://qiita.com/papi_tokei/items/43b1d15a6694f576486c

# Ruby

https://qiita.com/prgseek/items/c0fc2ffc8e1736348486

# PHP

https://qiita.com/aminevsky/items/a222845ddbdd2536da56

# Java

https://qiita.com/suema0331/items/35da67426ffea0fb4435

# JavaScript

https://qiita.com/mzmz__02/items/e316d3962e7d3ecfebf8

# Perl

https://perlzemi.com/blog/

JSONs(仮) のすすめ

# はじめに

みんな大好き`jq`の入力って、実は単なる`JSON`じゃないの知ってます？

“`
% man jq

jq can transform JSON in various ways, by selecting, iterating, reducing and otherwise mangling JSON documents. For instance, running the command jq ´map(.price) | add´ will take an array of JSON objects as input and return the sum of their “price” fields.
jq can accept text input as well, but by default, jq reads a stream of JSON entities (including numbers and other literals) from stdin. Whitespace is only needed to separate entitie

paizaラーニング レベルアップ問題集 Aランクレベルアップメニュー JavaScript 陣取りゲーム

陣取りゲーム (paizaランク A 相当)

https://paiza.jp/works/mondai/a_rank_level_up_problems/a_rank_camp_boss

JavaScriptで解いてみました。

メインの処理は、開始位置が２つの幅優先探索です。
方法は２通りあります。
1. queue(キュー)を２つ用意して、距離を管理しながら、幅優先探索をして、交互に陣地を広げる方法。
2. 幅優先探索では、距離が昇順でマス目に記録できるので、１つのキューへ、先頭に先攻の開始位置を、次に後攻の開始位置を入れ、幅優先探索をする方法。

最後に各プレイヤーの陣地を数えて、勝者を出力します。

個人的には、2の「1つのキューへ先攻後攻をまとめて入れて幅優先探索」が考えやすかったです。

***
# 1. キュー２つで、距離を管理しながら、幅優先探索

## C++の場合参考とPython3の場合参考の、幅優先探索中の、ターン判定の考え方

C++の場合参考とPython3の場合参考の解答例は、1.のqueue(キュー)を２つ用意して、距離を管理しながら、幅優先探索

プロトアウトスタジオの投稿記事、読むのを習慣化するためにLINE BOTを作ってみた。強くなりたいので。

# そもそもの動機

**「強くなりたい」**
史上最強の男にだれでも一度は憧れるものです。
とはいえ、僕は筋力が無ければ、運動神経も悪い、ただの独身男性なので早々と断念しました。
方向性をぐるんと変えて、「妄想を形にできる最強のクリエイター」を目指すことに。
それがきっかけとなり、僕は[プロトアウトスタジオ](https://protoout.studio/)の門を叩いたのでした。

# なぜ習慣化するためのBOTを作るのか

プロトアウトスタジオには[Qiita上](https://qiita.com/organizations/protoout-studio)にメンバーが執筆した記事がたくさん投稿されています。
ので、まずは記事をたくさん読み込んで圧倒的に成長しようと考えたのですね。
そして、すぐに挫折することとなりました。
* 「よく投稿

Next.jsで画像とメタデータとCSS ModuleとGlobal Stylesを扱う

# はじめに
Next.jsで画像とメタデータとCSS ModuleとGlobal Stylesを扱うための方法を学習した内容をまとめます。

https://nextjs.org/learn/basics/assets-metadata-css

# 静的ファイルの扱い
Next.jsの静的ファイルは、publicディレクトリのファイルを参照します。

① “`publicディレクトリ下“`に画像を配置します


② publicをルートとしたルートパスで記述します

“`html
Powered by
【Deno】「やっぱnpmをサポートするわ」 → 10日後「サポートしたわ」

[Deno](https://deno.land/)は、[Node](https://nodejs.org/)の作者がNodeの反省を生かして作り上げたランタイムシステムです。
Nodeより高速・高性能で使い方も容易です。

が、いまいち流行ってない理由の大きなひとつが[npm](https://www.npmjs.com/)が使えないことです。
Denoユーザの多くが[古臭くて非標準的で奇怪なパッケージ管理から開放されたことに歓喜している](https://deno.com/blog/changes#compatibility-with-node-and-npm)そうですが、それはそれとして過去の遺産が使えないので新たなライブラリを探さなければならなず手間がかかります。

またDenoは[様々なレジストリが使えることが利点](https://qiita.com/access3151fq/items/455c34ff0892b96e74ff#%E4%B8%AD%E5%A4%AE%E9%9B%86%E6%A8%A9%E7%9A%84%E3%81%AA%E3%83%A2%E3%82%B8%

GoogleスプレッドシートAPIをサービスアカウント認証方式でNode.jsから利用する

Google系のAPIはOAuth認証、サービスアカウント、APIキーの利用の3パターンあると認識してますが、簡単な読み書きくらいのやりとりだとサービスアカウント利用は手ごろです。

> 参考
> [Google DriveのAPIをサービスアカウント認証方式でNode.jsから利用するメモ](https://qiita.com/n0bisuke/items/59607865040a63d1a640)

## 前提

以下ができてる前提になります。

– Google SheetsのAPIを許可してサービスアカウント作成
– 作成したサービスアカウントを対象のシートに権限付与
– サービスアカウントの鍵ファイルをJSON形式で取得

鍵ファイルをDLすると以下のような雰囲気の中身となります。

“`json
{
“type”: “service_account”,
“project_id”: “xxxxxxxx”,
“private_key_id”: “xxxxx”,
“private_key”: “—–BEGIN PRIVATE KEY—-○—–END P

[JavaScript] マウスでcanvasにお絵描きする現代的な方法

JavaScriptでマウスを使ってcanvasにお絵描きするコードの作り方。

### 動作サンプルとソースコード

以下の動作サンプルでは、赤枠の中でマウスをドラッグすると線を描くことができます。

https://gistpreview.github.io/?5d0213b49523f669d322ae86db8d5c3c

“`html:マウスでお絵描きのコード

```

## 対象読者様
・Vue.jsを学び始める方
・Vue.jsを学んでいるけど、「あれここどうなってたっけ？」気分の方
・Vue.jsを学んだが、忘れてしまったので、即思い出したい方。

## htmlとjs間のデータの受け渡しに関して

## v-bind

aタグのhref属性をVueインスタンスのdataから引っ張りたい時

```html

Google

省略記法
Google

```

js側
```javascript

new Vue({
el:'#app',

Vue.js コンポーネント検証

どうも、豚野郎です。
今回はコンポーネントを使ってみようと思います。

今回もソースの動きを見ながらの検証です。
ドットインストールのソースを参考にしています。
(プログラムは異なります)

## 1. コンポーネントの呼び出し
内容は、ボタンをクリックすると、ボタン横数字とTotalの数がカウントされていくものです。

```js/main.js
(function() {
'use strict';

let childComponent = Vue.extend({
props: {
message: {
type: String,
default: 'button'
}
},

data: function() {
return{
count: 0
}
},

template: '

asyncなscript要素で読み込むライブラリと依存コードを同期的に実行する方法(2)

## 読み込むライブラリファイルに依存コードを同梱する方法

追記：w3cのSCRIPT要素の仕様にみあたら無いということで下記の方法を試したのですが、よく考えたら　scriptElement.onload で読み込み終了を確認できるのではないかという事で、次はそれを試します。ただ、同梱方式のメリットは有効かなと思います。

[前回](https://qiita.com/toshirot/items/d87a408f53c0461914a4)は、script要素にasync属性を使い、例えばjqueryなどのライブラリ読み込んだ時の発火タイミングの難しさについて書きました。

async属性は、文字通り非同期な読み込みとなり、ブラウザの描画をロックしないので、ページ読み込み速度が大幅に上がります。

このメリットは読み込み速度で秒を争うWebサイトでは小さくないといえます。

しかし、その読み込みのタイミングがずれると、もしjqueryならそれに依存する例えば＄などの付いたコードが全てエラーになるという、極めて不安定な実装ができてしまいます。

そこで一つの対策を考えてみました。

音声通話でチーム開発が捗るバーチャルオフィス「MetaLife」を開発した（React, Three.js）

## はじめに

今勤めている会社で『MetaLife』という **バーチャルオフィスツール** を開発しました。読み方は「メタライフ」です。

「バーチャルオフィス...？なんじゃそれ...？」

っていう方向けに一言で説明すると「リモートワーカーが集まって仕事をするバーチャル空間」です！

コロナ禍以降、「リモートワークで勤務しているよ〜」というエンジニアの方は多いと思います。

MetaLifeはリモートワークで働いているエンジニアとのコミュニケーションを円滑にし、現実のオフィスでありがちな「〇〇さん、今ちょっといいですか？」をオンラインでも実現できる、そんなバーチャル環境を目指して開発しています。

私は開発を進める中で「このサービスってエンジニア向けにすごく良いんじゃないか？」と思ったので、リリースから1ヶ月近く経ったこともあり、エンジニア向けにサービスの概要をご紹介したいと思いました。

## MetaLifeとは？

改めてMetaLifeをご紹介します。
MetaLifeはバーチャルオフィスとして利用できる、メタバースの概念を導入した新しいコミュニケーションツールです。

Python,Ruby,PHP,Java,JavaScript,Perlの文字コードの比較

Qiita > プログラミング言語の比較

Python,Ruby,PHP,Java,JavaScript,Perlの文字コードの比較

# Python

https://qiita.com/ny7760/items/d9c247781a790210936d

# Ruby

https://qiita.com/ima1zumi/items/28ef13f5af3d9afdeaf3

# PHP

https://qiita.com/suin/items/3edfb9cb15e26bffba11

# Java

https://qiita.com/motoki1990/items/cee6a4a75c0320b79ec4

# JavaScript

https://qiita.com/weal/items/3b3ddfb8157047119554

# Perl

https://perlzemi.com/blog/201610061475

Async GeneratorによるJavaScriptイベント処理のリファクタリング: お絵かきアプリを例に

JavaScriptのもつ言語機能のなかで、なかなか理解が難しいとされるものにPromiseとGeneratorがあります（自分調べ） 。特にこれら2つが組み合わさったAsync Generator（ `async function*` ）と `for await ... of` 構文は使い所が分かりにくいので、具体的にどのようなケースで活用できるのか、お絵描きアプリを例にご紹介します。

なお、Async Generatorそれ自体について、何ぞや？という説明はしておりません。インターネットに転がっている情報（参考: [MDN - イテレーターとジェネレーター](https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Iterators_and_Generators)）をご参照ください。あまりAsyncにフォーカスして詳しく解説されたものはありませんが、Generatorについて抑えられれば、それが非同期関数でも使えるのだなとふわっと理解できるかと思います。

# お絵かきアプリのデモ
今回はこのようなお絵かきアプリを用