続・マウントを取ってくる人への耐性をつけるWebアプリ

## ご好評につきレベルアップしました
先日アップしたこちらの記事ですが、

https://qiita.com/KendoLab/items/ddb2830af80c718d8172

おかげさまで多くの人にご覧いただけた（当社比）ようで、公開から2日間で翻訳に使っていたDeepL APIが無料利用枠の上限に到達してしまいました。自分としては非常に嬉しい限りです。
そこで、今回はご好評（？）にお答えして、マウントを取ってくる人への耐性をつけるWebアプリ、 **「ドヤ顔バズワードくん」** にいくつかの機能追加を行いレベルアップしてみました！
※元々どんなアプリだったかは上記のリンク先記事をご確認ください。

## 「ドヤ顔バズワードくん Ver.2.0」
新たに公開した新バージョンのアプリは以下になりますので、是非触ってみてください！

https://courageous-clafoutis-a4024c.netlify.app/

![画像1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/260

Unicodeの異体字セレクターを使ったステガノグラフィ：秘密の文字列をテキストにこっそり隠し込む方法

Unicodeの異体字セレクター(variation selectors)を使い、ユニコード文字列内に隠し情報を埋め込む方法です。

## 異体字セレクターとは

– 異体字セレクターは、文字の字体を詳細に指定するモディファイアのようなもの

https://ja.wikipedia.org/wiki/%E7%95%B0%E4%BD%93%E5%AD%97%E3%82%BB%E3%83%AC%E3%82%AF%E3%82%BF

– 異体字セレクターは16種類のコードポイントがある(FE00~FE0F)


## 仕組みの概要

– 隠したい文字列(hidden)を文字単位にバラす (例: `js` → `j`, `s`)
– 文字ごとに16進数に変換する (例: `j` → `6A`)
– その16進数をひと桁ずつ異体字セレクター

4KBのJavaScriptだけで動く可愛いアクションゲームを作ったのでソースと解説

年イチでちょっとしたブラウザゲームを作ってます（[→ 去年](https://qiita.com/yuneco/items/2f23f56acbc8f4e23dff)）。今年は**そこそこ遊べる可愛いアクションゲームを4KB以内で**作ってみました。

?宣伝させてください！
?今年も無事、猫の日ゲームができました！https://t.co/XnDD8AXx4k

今年は可愛さはそのまま、限界までコードを削って4KBにおさめました。PCの方はソース表示して見てみてね pic.twitter.com/j0QqH6iSSn

— ゆき (@yuneco) バッティングスコア管理アプリをお喋り出来るようにする⚾

## バッティングスコアに機能を追加
この前記事で作成したアプリの機能を充実させるということで、より一層かっこいい感じにしようと思う。

https://qiita.com/long66tail/items/ab96b204c4ca7bea56b0

今回は、かっこよく英語で語らうようにしてみた。

## 完成作品
と、いうことで、打撃成績を”追加”したら、
「good job.Always put your best foot forward.（訳：お疲れ様。いつもベストを尽くしていこう）」
と言ってくれるようにした。

https://batting-statistic-c35a90.netlify.app/

## ソースコード

ES6のモジュールをブラウザ環境で動作させる

## モジュールとは
WEBアプリ開発のようにJavaScriptでゴリゴリとコードを書いていく場合、ある程度機能（役割）別にファイルを切り出して別ファイルとして管理したいような場合に、関連性を持たせて切り離されたコード群を「**モジュール**」と呼ぶ。
JavaScriptではES6から実装された機能になっている。

## モジュールの基本
モジュールは1つのファイルとして定義するのが基本で、外部からモジュールにアクセスするメンバには「**export**」を付与する。
なお、モジュール内のメンバはデフォルトでは非公開となる。

#### コード例
“`js:js/mod.js
export let value = 100;

export function hello() {
console.log(‘Hello’);
}

const SECRET_VALUE = Symbol();
console.log(SECRET_VALUE); // =>Symbol()

export default class {
constructor(secret) {

元記事を表示

ブラウザのみでMarkdown表示 (marked.js + mermaid.js + highlight.js)

概要
—-

シーケンス図をテキストで記述するのに、昔少しだけ使ってみたことがあるPlantUMLを調べていたら、ブラウザのみで使用できてMarkdownで記述できるmermaid.jsというJavaScriptライブラリがあることが分かった。他にmarked.js、hilight.jsというJavaScriptライブラリと連携して、シーケンス図を含むMarkdownファイルを記述してブラウザだけで表示できることが分かったので、メモしておく。

コード
——

コードは以下の通り。「[MarkedとMermaidを連携ができずうがー！ってなって微調整した – Qiita](https://qiita.com/gat3ta/items/1e9ada8d81d423d60493)」のコードをベースに、各ライブラリのドキュメントを参照しながら、動かない箇所を修正したもの。
`marked.html#sample.md`のように、URLの末尾に#に続けて記述したMarkdownファイルを読み込んで表示する。

“`html:marked.html

元記事を表示

配列内のオブジェクト(連想配列)から　検索・取得

# 初めに
配列内にある、オブジェクト(連想配列)の中から、「指定の値が入っているオブジェクトのみ」を取得したい。

今回は、“name:“が“Bob“のオブジェクトを取得してみます。
“`
const users = [
{ id: ‘101’, name: ‘Alice’ },
{ id: ‘102’, name: ‘Bob’ },
{ id: ‘103’, name: ‘Charlie’ },
];
“`

## findメソッドを使う

下記コード、nameの値が、Bobのオブジェクトを取得
“`
//対象の配列.find((引数) => 引数.key名 === 検索したい値)
const targetUser = users.find((v) => v.name === ‘Bob’);

console.log(targetUser);
//出力結果　　{ id: ‘102’, name: ‘Bob’ }
“`
今回は、“name“で検索していますが、もちろん“id:“や他のkeyでも検索できます!

今日の天気とアニメは？？音声認識で天気予報とEテレ番組を教えて貰ってみた

## 音声認識と発話ができるアプリを作りたい！
音声認識と発話を利用したWebアプリを作成した。
今回は前回の[天気予報アプリ（ライブカメラで渋谷を見てみた）](https://qiita.com/kosuke0517lab/items/be242454c517b10a176b)をもとに作成している。前回と違う点としては**音声認識と発話の技術** を用いており、視覚だけではなく聴覚からも天気予報を知ることができる。
それに加え、NHK番組表APIという面白そうなAPIを見つけたので取り入れてみることにした。ジャンルをEテレに絞っているのでおかあさんといっしょやおじゃる丸、忍たま乱太郎といったアニメが好きな**子供たちにも楽しんでもらえるはず**なのでぜひ使ってみてほしい。

## どんなアプリ
・[前回](https://qiita.com/kosuke0517lab/items/be242454c517b10a176b)と同様に今日、明日、明後日の天気を画像付きで表示をする。
・『～の天気は』と訊くとその日の天気を教えてくれる。もしその日が雨なら傘を持って行ってと提案してくれる。

ポーカーのスターティングハンド表をいい感じに作る【Next.js/D3.js】

# 経緯

フロントエンドの勉強を始める
→息抜きにポーカーの勉強を始める
→とりあえず[エド・ミラーのポーカースクール ──ライブゲームで勝つ](https://www.amazon.co.jp/dp/4775949179/ref=cm_sw_r_tw_dp_PRA5XQYPNNSFN5AP7VFW)を読み始める
→図表が全くないし、文章だけだとスターティングハンド表を覚えにくい
→**ちょうど勉強していたNext.jsで作りました！**

https://startinghands-edmiller.vercel.app/

| PC版 | SP版 |
|:-:|:-:|
| | 【JavaScript】セレクトボックスの要素を移動させる

今回はセレクトボックスの要素の移動について記述します。
この実装はJQueryでよく見かけるのですがJavaScriptで実装しているものがなかった為
メモを残したいと思います。

【view】



左のセレクトボックスの要素を選択して右のセレクトボックスに移動させます。
※逆も可能。

<【JavaScript】>

![【JS】コード1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/

【React】公式のチュートリアルをやってみる～②プロジェクト用ファイル作成

[【React】公式のチュートリアルをやってみる～①環境構築](https://qiita.com/asahina820/items/9d7b1a8405c51d392afe) の続きです。
プロジェクトファイルを作成して、プログラムを読んでみました。

## ソースファイル配置
– src フォルダ内のファイルを削除する
– index.css, index.js を作成する
“`index.css
body {
font: 14px “Century Gothic”, Futura, sans-serif;
margin: 20px;
}

ol, ul {
padding-left: 30px;
}

.board-row:after {
clear: both;
content: “”;
display: table;
}

.status {
margin-bottom: 10px;
}

.square {
background: #fff;
border: 1px solid #999;
float: left;
font-s

.NETの型定義を書こうとしてえらいことになってる（ClearScript）

# ClearScriptとは

.NETのもろもろをJavaScript(V8)で記述することができる、ClearScriptをご存じでしょうか。Microsoft謹製の変態ライブラリなのですが、あんまり活躍しているところを見ません。

https://github.com/microsoft/ClearScript

# お試し

ちょっと使ってみましょう。てきとうなディレクトリにコンソールアプリケーションを作ります。

“`
mkdir otameshi-clearscript; cd otameshi-clearscript
dotnet new console
dotnet add package Microsoft.ClearScript
“`

サンプルなので、引数に与えられたファイルの内容を実行するだけです。簡単ですね。

“`Program.cs
using Microsoft.ClearScript;
using Microsoft.ClearScript.V8;

using (var engine = new V8ScriptEngine())
{

Javascriptで抽象クラスを作ってみた

プログラミング学習中、ふとJavascriptで抽象クラスを実装したいなと思ったので作りました。
いろいろ突っ込みどころはあるかと思いますが、優しく見守ってやってください。
# 抽象クラスとは
>abstractを明示的に宣言されたクラスか、抽象メソッドを含むクラスである。通常のクラスと異なり、インスタンス化はできない。（[Wikipedia](https://ja.wikipedia.org/wiki/%E6%8A%BD%E8%B1%A1%E5%9E%8B)より）
# 実装したもの
以下の2つの要件を満たすことを目的として作成しています。
* 抽象メソッドを含む
* インスタンス化はできない

そして、実際に作成したコードは以下のようになりました。
“`javascript:AbstractClass.js
class AbstractClass {
constructor() {
let checkString = “Abstract function not implemented.”;
if (this.abstractFunction.toString().ind

【JavaScript関数ドリル】初級編のwithout関数の実装アウトプット

## without関数の課題内容

-.without関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#without

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】without関数の実装

## 課題に取り組む前の状態

– 引数で、配列の後に複数の値が指定される場合の処理方法が分からない状態ながらもargumentsを使うのかもしれないと思った

## 課題に取り組んだ後の状態

– console.logでargumentsの仕組みを確認しながら実装
– 時間がかかった
– 解答例を見て、includes関数という便利なものがあることを確認

## without関数の実装コード（答えを見る前）
“`javascript
function without(array, values) {
const newArray = […arguments[0]];
let deletedNum = 0;

for (let

【JavaScript関数ドリル】初級編のzipObject関数の実装アウトプット

## zipObject関数の課題内容

_.zipObject関数を自分で実装する内容です。
https://lodash.com/docs/4.17.15#zipObject

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】zipObject関数の実装

## 課題に取り組む前の状態

– １ヶ月以上前に課題の動画を１度見た
– オブジェクトの操作についてあまり覚えていない状態
– オブジェクトの操作についてリファレンスを調べる必要がある

## 課題に取り組んだ後の状態

– 答えを見なくてもだいたい実装できたが、代入方法について思い出せず、リファレンスを調べる必要があった
https://www.w3schools.com/js/js_objects.asp
– 解答例の引数が、propsだけではなく、props = [] のようになっている

## zipObject関数の実装コード（答えを見る前）

“`javascript
function zioObject(props,val

【JavaScript関数ドリル】初級編のuniq関数の実装アウトプット

## uniq関数の課題内容

_.uniq(array)関数を自分で実装する課題。
https://lodash.com/docs/4.17.15#uniq

「課題内容」/「解説動画」/「解答例」を確認したい場合は、以下リンク先のページを参照。

【初級】uniq関数

## 課題に取り組む前の状態

– 前回includes関数を覚えたので、この課題については答えを見なくても実装できそうだと思った

## 課題に取り組んだ後の状態

– 実際に答えを見なくても実装できた

## uniq関数の実装コード（答えを見る前）
“`javascript
function uniq(arr) {
const newArr = [];
for (let i = 0; i < arr.length; i++){ if (!newArr.includes(arr[i])) { newArr.push(arr[i]); } } return newArr; }

四捨五入、切り捨て、切り上げをしたい(Math)

## はじめに
現在、独学でJavaScriptを勉強中です。
`Mathオブジェクト`で躓いてしまったのでまとめてみました。

## よく使うMathオブジェクト
`Math.round` ・・・四捨五入する(戻り値 数値)
`Math.round()メソッド`は次のような挙動をする。
・小数点部分が0.5以上であれば、次に大きい整数へ切り上げ
・小数点部分が0.5以下であれば、次に小さい整数へ切り下げ
“`javascript
Math.round(5.34); //結果: 5
Math.round(6.8); //結果: 7
“`
`Math.floor` ・・・切り捨てる。数値以下の最大の整数を返す(戻り値 数値)
※少数の大小に関わらず切り捨てる。
“`javascript
Math.floor(5.34); //結果: 5
Math.floor(6.8); //結果: 6
“`
`Math.ceil` ・・・切り上げる。数値以上の最小の整数を返す(戻り値 数値)
※少数の大小に関わらず切り上げる。
“`javascript
Math.ceil(5.34); //結

BigQueryで分かち書き

# はじめに
BigQueryだけで自然言語系の処理をしたいケースがあって、その最小限の方法を調べました。一般的な形態素解析というののちょっと手前の、分かち書きまでです。品詞の特定とか、単語の原型を出さない。
品詞を特定するのは、辞書ファイルが必要で、BigQueryではライブラリから外部のファイルを読むことができなさそうだったので、ひとまず分かち書きまで。

[TinySegmenter](http://chasen.org/~taku/software/TinySegmenter/)というライブラリを使用しました。

# 最初に結果
分かち書きの結果
> 入力：明日は天気が良さそうなので買い物に行きたい
> TinySegmenterの結果：明日 / は / 天気 / が / 良さ / そう / な / の / で / 買い物 / に / 行き / たい

学校ではこの分野は超絶 ~~嫌い~~ 苦手だったので正解はわかりませんｗ
ただ以前、こちらの記事（[kuromojiを使ったJavaScriptだけの形態素解析](https://qiita.com/yo16/items/880

セレクトボックスの一部の項目を選択できなくする

# 見出し1
JavaScriptでセレクトボックスの一部を動的に選択できなくする方法を記載します。

# コード

“`HTML
アイテム1アイテム2アイテム3
“`

“`JavaScript
let items = Array.from(document.querySelectorAll(‘#selectbox option[data-val=”1″]’));
items.forEach(option => option.disabled = true);
“`

これでセレクトボックスのdata-valが1の項目が選択できなくなります。

addEventListener()メソッドについて詳しく記載

## イベント発生時の関数を指定したいとき
`addEventListener()メソッド`は、特定のイベントが配信されるたびに呼び出される関数を設定します。
#### 構文
“`javascript
イベントターゲット.addEventListener(イベント, リスナー, [オプション*省略可])
“`

#### アロー関数を使う方法
アロー関数の利点はthisを固定できるというところです。
“`javascript
//要素の参照を取得する
const button = document.querySelector(‘.button’);

//アロー関数を使う方法
button.addEventListener(‘click’, () => {
console.log(‘ボタンがクリックされました’);
});
“`

#### function宣言を使う方法
“`javascript
//要素の参照を取得する
const button = document.querySelector(‘.button’);

//function宣言を使う方法
button