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

Qiitaのコメント欄を改善するユーザースクリプト

## はじめに

Qiita のコメント欄を見て「連番が振ってあれば見やすいのに」と思ったことはありませんか？:thinking:

Qiita のコメント欄を改善するユーザースクリプトを作りました。

## Qiitaのコメント欄の何が不満か

このユーザースクリプトがどの不満をどのように解決するかを表にしました。解決策がユーザースクリプトの機能に対応します。:blush:

| 何が不満？ | 解決策 |
| —— | —— |
| どこまで読んだか分からない。 | 各コメントに連番と総コメント数を振る。 |
| コメント投稿者の何件めまで読んだか分からない。 | コメント投稿者ごとに各コメントに連番と総コメント数を振る。 |
| どれが作者のコメントか分からない。 | 作者のコメントに（作者）の印をつけ、枠の左に縦線を付ける。 |
| 本文を読む前にコメントの存在が分からない。 | 冒頭にコメント数を表示する。 |
| 作者が投稿したコメント数が分からない。 | 冒頭に作者が投稿したコメント数を表示する。 |
| コメントの性質がわからない。 | 冒頭に前向きなコ

【PlayCanvas】Twitchのコメントを受け取って3Dのキャラクターが反応する仕組みを作る

### Twitchのコメントを受け取って3Dのキャラクターが反応する仕組みを作る

Twitchの配信中にコメントを貰った瞬間に反応をするための仕組みをPlayCanvasを利用して作成します。

### PlayCanvasについて
PlayCanvasはJavaScriptで記述されたWebGLのエンジンで、最近GitHubのスター数が7000を超えました。SaaS型のエディターを兼ね備えているゲームエンジンです。engineについては主にSnapのメンバーWill Eastcottを中心にOSSとして公開及び継続的に開発が進められています。Engine単体として利用する場合には、Three.js, Babylon.jsなどのWebGLライブラリと似た使い方を使用することができます。またビジュアルエディターとコードエディターが存在しており。エディターはクラウド上でプロジェクトの作成から公開までが出来ます。FBXやOBJといった3Dモデルの素材については、ブラウザへドラッグアンドドロップをすることでGUIから操作・配置ができるエディターがあります。

https://github.

【JavaScript】クリップボードコピー(navigator.clipboard.writeText)が使えないときの対応方法

端末&ブラウザによって、クリップボードコピー(navigator.clipboard.writeText)が使えなかったので、
使えないときの対応を行いました。そのメモを残しておきます。誰かの助けになれば幸いです。

# 対応方針① window.clipboardData.setData

以下の記事を読むと
– [JavaScript: document.execCommand(“copy”) の代替](https://qiita.com/e99h2121/items/4166deba79e1bb8e77dd)

navigator.clipboardが使えないときは、window.clipboardData.setData(‘Text’, ~~) で代替できると書いてありました。

しかし、window.clipboardDataのclipboardDataが色々とやってみても使えなかったため、断念しました。
(※ 何かwindowオブジェクトの設定がミスってるのかも)

“`
var clipboardText = “clipboard”;
if(navigator.clip

非同期でNo route mach Get…

## 備忘録で書きます。

いいいね機能実装し、jQueryで非同期処理を行いました。
最初はエラーも出ず順調順調でしたが、、、

## jQueyで非同期が完了した後のこと…

### javascriptファイルを独自に作成

application.jsに
“`
:
import “jQuery”;

import “sample.js”;
:
“`
のような形で記述していました。

jqueryと独自のjavascriptファイルが何やら邪魔をしていたようで一旦、import”sample.js”の記述を削除しました。

すると、エラーも出ずに元どおりになりました。

まだ個人的な問題は解決せずつまずいていますが、Turbolinks関連や、htmlのレスポンスの詳細などに加えて、Webpack関連も少ししれたのでもっと勉強していきたいと思います。

下記の記事を教えて頂いた@mochi_yu2さん。本当にありがとうございます。

参考
https://qiita.com/fujishiro380/items/12e39ec85f162ce6b3c8
https://

-3の2乗 という計算

# これは何？

指数演算子が `**` だとして。

`-3**2` という文字列を評価する場合。

* `(-3)**2`
* `-(3**2)`

という二通りの解釈があり得る。

一方。
数学では $-3^{2}$ は $-(3^{2})$ と評価するのが常識となっている。
プログラミング言語ではどうなっているだろうという調査。

# 各言語の対応

## ruby

この調査を始めようと思ったきっかけ。

“`ruby:ruby3.1
p( -3**2 ) #=> -9
“`

つまり、 `-3**2` は `-(3**2)` となる。
[Ruby 3.1 リファレンスマニュアル 演算子式](https://docs.ruby-lang.org/ja/latest/doc/spec=2foperator.html) を見ると、単項 `-` より `**` の優先順位が上なのでそうだよね。
……という簡単な話ではない。

“`ruby:ruby3.1
p( -2[3] ) #=> 1
p( (-2)[3] ) #=> 1
p( -(2[3]) ) #=> 0

JavaScriptで作る変則リバーシ②

# はじめに
以前ご紹介させていただいた、下記記事からの続編になります。

https://qiita.com/y-tetsu/items/5ba5a5487534e47cc7ca

今回は前回作ったものをベースに、新たに**灰色の石**というものを追加した、**3人対戦で遊べる変則リバーシ**を作りましたので、ご紹介したいと思います。

なお本記事は、基本的なリバーシの処理やAIの作り方に関しましては、**深く踏み込まない内容**となっております。そのあたりは必要に応じて他の記事などを参照し、情報を補っていただけたらと思います。

# できたもの
以下のような、ブラウザで遊べるものを作りました。
自身が先手(黒)で、相手(白と灰)はコンピュータ、としています。
仮想通貨ライブラリ ccxt

# 仮想通貨ライブラリ ccxt

Node.jsを使う機会があったので、そのまま仮想通貨自動取引Botを自作することにしました。今回は軽く板情報取得までの流れを掲載します。

## そもそもccxtとは
ccxtは、**様々な仮想通貨取引所のAPIをまとめたライブラリ**です。
ccxtについては様々な記事で詳しく紹介されているのでそちらを参照してください。
今回はJavaScriptでccxtを使ってみたので、サンプルソースを掲載します。
取引所はBitflyerを利用しているので、その他の取引所を利用している場合はソースが異なる場合があります。

## 1. ccxtライブラリの導入
Node.jsでは、パッケージ管理システムのnpmを利用してライブラリの導入を行います。
今回はccxtのライブラリを使用するので、導入する際は以下のコマンドを打ちます。

“`console
npm install ccxt
“`

## 2. ライブラリを読み込む
以下はソースコードに記述するものになります。

“`javascript
const ccxt = require(

【React・CSS】すりガラス風カードUIを作ってみた

# 前書き
こんにちは。普段クラウドやバックエンドをメインにお仕事しているてちといいます。
今回UIデザインのトレンドの一つであるグラスモーフィズムを取り入れたカードUIを作ってみました。
フロントエンドやデザインについてはまだまだ勉強中なので気になる点があればご指摘いただけると嬉しいです?

# 完成画面


おお〜、なんだかMac味があってオシャレですね?

# カードのスタイル
“`
background: rgba(255, 255, 255, 0.25); /* カード背景の色＋不透明度 */
backdrop-filter: blur(10px); /* 背景のぼかし具合 */
border-radius: 16px;

O’Reilly「JavaScript第7版」を読んだ（14章まで編）

O’Reilly「[JavaScript第7版](https://www.oreilly.co.jp/books/9784873119700/)」を読んだので、自分の学習メモを主目的として気づきをまとめます。

## 前置き

本投稿内容は第14章までの内容アウトプットになります。

お仕事柄、第15章 「Webブラウザ上の JavaScript」 のメモが多くなりそうなのでその手前までで分けることにしました。

実務では TypeScirpt を使うエンジニアリングマネージャーをしていますが、体系立てて JavaScript を学んだことがほぼ無かったため、本書を手に取って、スキマ時間で読み進めてきました。今回を機に、新たに勉強になったこと・解釈間違いなどを整理してメモとしておきます。

## Null合体演算子（??）
>左辺のオペランドが `null` でも `undefined` でもない場合は、右辺の値を返します。

とのこと。なんとなく理解していたことを今回ちゃんと理解。

`||` に似ているが、`0` や `”` など、 Falsy な値での挙動が異なる。

“`j

「なつかしの曲(ポータル)」サイトを改良しています。

# 概要
[site]: https://tecoyan.blogspot.com/#btn_cntrl
[store]: https://chrome.google.com/webstore/search/tecoyan?hl=ja
[youtube]:https://www.youtube.com/watch?v=aUYJZqZOX2s&t=1326s
このサイト([なつかしの曲][site])は、youtubeの動画を再生するGoogleブログサイトです。ページの中に、youtubeプレーヤーと再生リストを置いています。一つの投稿記事に一つの再生リストを割り当てています。日付毎に再生リストが割り当てあります。リストの選択はブログのアーカイブからも選択できますが、さらに、より簡単にリスト選択出るように目次を作成しています。作成当初は、投稿リストのみでしたが、その後に、リスト選択ボタンとスペシャルリストを追加しました。これについては、後述します。

# 特長
このブログサイト([なつかしの曲][site])の特長の一つは、サーチボタンです。このボタンで、[youtube][you

【Rails】Rails６でのjQueryを使うときのwebpackerの設定

# 初めに

`Rails6`での`webpacker` の設定が分からなくなっていたのでここで書き残しておきます。

## 環境

– Rails 6.1.4
– Ruby 2.7.4
– webpacker 5.4.3

# webpacker

Rails6 の javascript の設定は config/webpacke の下にあるファイルで行います。
今回は jquery が使えるようにします。

## enviroment.js

“`javascript:config/webpack/environment.js
const { environment } = require(“@rails/webpacker”);

const webpack = require(“webpack”);

environment.plugins.prepend(
“Provide”,
new webpack.ProvidePlugin({
$: “jquery”,
jQuery: “jquery”,
jquery: “jquery”,
Pop

filter()사용하기

# fileter()메쏘드 사용하방법
# 봐도봐도 잘 이해가 되지 않는다.

“`javascript:store.js

export default new Vuex.Store({
namespaced: true,
state: {
//data
items: [],
},
getters: {},
mutations: {
addItem(state, item) {
const resultItems = state.items.filter((cartItem) => {
cartItem.id = item.id;
});

if (resultItems.length === 0) {
state.items.push({
…item,
qty: 1,
});
} else {
resultItems[0].qty++;
}
},
},

paging 만들기

1. page은 백엔드가 아닌 json 파일에서 가져와서 만든다.
“`json:all-product.json
{
“allproduct”:[
{
“id”:9,
“image”: “https://picsum.photos/720/960/?image=476”,
“title”: “Herschel supply co 25l”,
“link”: “”,
“price”: 75.00,
“badge”: “new”
},
…..
{
“id”:10,
“image”: “https://picsum.photos/720/960/?image=478”,
“title”: “Denim jacket blue”,
“link”: “”,
“price”: 92.50,
“badge”: null
},
],
“total”:24

}
“`
2.ap

Node.jsのトランスパイル時にESLintでエラーがあればBuild停止する設定をWebpackでやってみた

## 以下の記事を参照して頂ければと思います

https://note.com/shift_tech/n/n92d51d4445ff

**※Qiitaの記事は全て個人的な記載であり、所属する組織団体とは無関係です。**

## 補足
ソースコード全体は以下。

https://github.com/yuta-katayama-23/node-express/commit/d7f4b09ade8c708fbcbb78fe3d804ec2c081b3c0

vConsole「スマホでもコンソール使えるようにしてみた」

## はじめに
ある日、Mediumというサイトで、下記の記事が投稿されていました。

https://javascript.plainenglish.io/5-javascript-utility-libraries-to-improve-your-efficiency-4380b1d373c5

**わい「ほうほう。どんなライブラリがあるんじゃろか」**

興味を持って、記事を読んでみるとvConsoleなるライブラリが紹介されていました。

**わい「vConsole？ なになに…」**

>Debugging web pages on mobile is very difficult, but with “Vconsole” everything will be much easier.
>
>~日本語訳~
モバイルでのWebページのデバッグは非常に難しいですが、vConsoleがあればすごく簡単にデバッグ作業ができます

**わい「なにこれおもしろそう…」**

ということでvConsoleなるものについて少し調べてみたところ、なかなかに便利そうだったので、わたしみたいな初

【Vue3】Vue3-carouselで迅速にそれっぽいUIを作る


Vue3にはVue3-carouselとうコンポーネントがあります。
これを使えば誰でも手軽にそれっぽいカルーセルを作ることができます。

## インストール
“`npm
npm install vue3-carousel
“`

テンプレート
“`vuejs