JavaScript関連記事まとめ

JavaScriptに関する私の書いた記事をまとめました
新しい記事を更新次第、こちらに追加していきます。

[配列　オブジェクト](https://qiita.com/yuka-f/items/33db4e3bcae78570627c)
[繰り返し処理](https://qiita.com/yuka-f/items/f322bc9e365e918001c9)
[真偽値　比較演算子　条件式組み合わせ](https://qiita.com/yuka-f/items/419ec43ed56d8f7dcd3b)
[条件分岐](https://qiita.com/yuka-f/items/10d1c95df9bbf4f23f3a)
[テンプレートリテラル](https://qiita.com/yuka-f/items/34b46d49a8e6e354da1d)
[変数と定数の違い](https://qiita.com/yuka-f/items/a77b3df3acded0156464)
[文字列と数値違い](https://qiita.com/yuka-f/items/f7254fa317d0

JavaScript: isEven

isEven というGitHubトレンドに突如現れたライブラリ。

## プロジェクト

https://github.com/samuelmarina/is-even

> This is a 100% serious project,

そのプロジェクト。

中身がこれ


！？！？！

となる

## 作者

So I wrote this code to check if a number is even, and it’s going crazy https://t.co/HfU8K3Qms4 pic.twitter.com/fcTlz1H4BB

— Samuel Miller (@SamuelLMiller) August 17, 2021

## マジレス

“`js
isEven = (n)=>{
if (n % 2 == 1)
return false;
return true;
}
“`

しかし容赦はないコメント

https://github.com/samuelmarina/is-even/

Teaching Python to the Dogelog Runtime

We had that feeling that the full potential of the Dogelog runtime was not yet demonstrated. Although there was a lot of progress concerning the Dogelog runtime over the last weeks we
were only working for the JavaScript platform. So we started a new side quest porting the Dogelog runtime to the Python language. This would demonstrate that cross compiling needs less wo

js 3連続以上の改行を2行の改行に変換する

Twitterとかでありますよね。
連続した改行を入力しても、改行幅はマックス２行までに制限されるやつ。
ああいうやつをjsでサッと実装したいときはこれでおk

“`js
let newValue = value.replace(/(\r\n){3,}|\r{3,}|\n{3,}/, ‘\n\n’);
“`

参考 [013：正規表現を使い、連続した改行コード・改行文字を取り除く](https://www.system-ido.com/risouken/index.php?page=tech&num=13)

インクリメンタルサーチ rails ajax

インクリメンタルサーチを実装する！

インクリメンタルサーチとは・・逐次検索です！

完成イメージ

あるワード「コロナ」を入れると、、そのワードがタイトル、コンテンツ内に含まれてる記事が出てきます。
さらに、「コロナ」から「コロナウイルス」にうち進めると…
さらに絞り込まれていきます。
ちなみに下に出てくる記事のタイトルは、リンクにしてるので
押したらそのまま、記事に飛べます。

これが、ベストなインクリメンタルサーチではないですが・・・
頑張って実装したのでまとめていきます:fist:

![スクリーンショット 2021-08-20 20.49.58.png](https://qiita-image-store.s3.ap-northeast-1.amaz

JSON.stringifyのreplacerはtoJSON()の後で呼ばれる

`JSON.stringify` の第２引数はたいてい `null` を指定するけど、値を置換できる `replacer` 関数を指定することができる。
オブジェクトに `toJSON()` メソッドが生えていれば、それでも置換できる。
`replacer` と `toJSON` の両方を使用していた場合は、`toJSON` が先に実行される。
だから、`toJSON` 実装済クラスのインスタンスを外から `replacer` で変換することは難しい。

—-

検証用コード：

“`js
class Foo {
toJSON() {
console.log(“Foo#toJSON() called”);
return “FOO”;
}
}

const data = {foo: new Foo()};

JSON.stringify(data, (key, value) => {
console.log(`replacer(${JSON.stringify(key)}) called`);
return value;
});
“`

実行結果

１ファイルのHTML(+JavaScript)で、QRcodeを生成する #８つのマスクパタン対応

#１ファイルのHTML(+JavaScript)で、QRcodeを生成する
→　８つのマスクパタン対応

#実際のふるまい（動くものはこちら）

http://thomas.cranky.jp/js_QR/QRcode_javascript40x16_v2.html

注）本来、QRコード生成時、マスクパタンを手動で選ぶ、ということはないです。以下、参照。

JIS X0510 p.16
>7 要求事項　7.1 符号化手順概要
>手順6　マスク処理
>シンボルの符号化領域にマスク処理パターンを適用する。明及び暗の
>モジュールバランスを最適にし、また、望ましくないパターン
>の出現を最小限に抑えるパターンを評価し、選択する。

p.53
>表11－マスク処理結果の失点

#ソース

https://github.com/santarou6/QRcode_javascript/blob/main/QRcode_javascript40x16_v2.html

#マスクパタン選択
![image.png](https://qiita-image-store.s3.ap-north

疑似要素（::before, ::after)のCSSをJavaScriptで制御する

JSで疑似要素（::before, ::after)の操作をしたかったので調べたところ、[こちらの記事](http://koda.d.dooo.jp/css/css3/addrule01.html)を見かけたので備忘録として記録する。

## 「スタイルルールの追加」の概念で制御する

厳密に言うと**疑似要素はJSで直接制御できない。**
疑似要素にはHTML属性が無いのでstyle属性によるインラインCSSの制御もできない。

ではどうするかと言うと、スタイルルールの追加の概念で疑似要素を操作する。

JSで `.class::before {width:100px}` みたいな記述をドキュメントに追加してしまうという考え方になる。

## スタイルルールのリセット（全削除）

まずお約束としてドキュメントスタイルのリセットをイベント着火時など最初に行うと良い。

“`javascript
//ドキュメントスタイルの取得
var sheets = document.styleSheets, sheet = sheets[sheets.length – 1];

//スタイルルー

[Material UI]CardActionAreaとCardActionの違い

CardActionAreaとCardActionAreaの違いが公式ドキュメントでは分からなかったので生成されるHTML単位で違いを比較してみた。

CardActionArea
https://material-ui.com/api/card-action-area/

CardAction
https://material-ui.com/api/card-actions/

今回比較するコードは以下の２つ。
~~Cardが入っているけど今更変更するもの面倒なのでこのまま続けます~~

“`tsx:card.tsx

カードアクションエリア
カードアクション

“`

生成されたのが以下のコード

“`html:card.html

耳の遠い母とiPadの音声入力つかって会話してみる

# 使い方
https://xiaomuc.github.io/speech/
iPadもしくはiPhoneでこのページを開き、マイクボタンで押して音声入力すると、入力内容がテキストエリアに表示されるってだけです。

# 自動で消えます
どうせ残しておく必要のない情報を前提としているので、自動で消す機能がついております。iPad/iPhoneの音声入力は
* 無音状態が1分ぐらい続いたとき
* 手動でマイクボタン押したとき
に音声入力モードが終了します。音声入力モード終了後30秒で入力内容を消去します。

# 文字サイズと削除タイマ
文字サイズと音声入力後に入力内容を消すタイマ値を変えられます。
たとえば文字サイズ48pt、タイマを5秒(5000ミリ秒）にしたい場合は：
https://xiaomuc.github.io/speech/?size=48pt&timer=5000
って感じにしてください。
なお、デフォルトは文字サイズ36pt、タイマ30秒です。

# 参考にさせていただいた記事
https://qiita.com/tsmd/items/fce7bf1f65f03239e

JavaScriptを基本からまとめてみた【15】【コールバック関数】

##はじめに

####学習するに至った経緯
2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

##コールバック関数とは
『コールバック関数』とは、ある関数に引数として渡される関数のこと。コール(実行)する関数の引数に処理(関数でも可)を追加して、必要な処理が終わった後に引数の処理を実行する方法になる。
「関数の中で別の関数を呼び出し、呼び出した関数の結果を使って結果を返す」という動作が、「一度電話をかけて用件を伝えたのち、相手に折り返して返事をもらう」という「Call back（電話をかけ直す）」に似ているため、「コールバック関数」と呼ばれるらしい。
######※ JavaScriptの関数は、文字列や数値、変数だけでなく、関数も引数として受け取ることができる。

##関数の引数（ひきすう）とは
『引数』とは、関数に入力す

【javascript】要素を取得して操作するときに気をつけること~備忘録~

getElementByIdばかり使っていて、その他のgetElementsByClassName、getElementsByName等を使う時に少し注意する点がある。

id属性を取得するやり方は、getElementByIdとelementが単数であるように、その直後に関数をくっつけるだけで良い。
例えば、

“`
getElementById(‘hoge’).setAttribute(‘disabled’, true)
“`

と書けば良い。

だが、getElementsByClassNameやgetElementsByNameはelementsと複数形であるように、その直後にはどの要素かを指定する必要がある。
例えば

“`
getElementsByName(‘hoge’)[0].setAttribute(‘disabled’, true)
“`
と書く必要がある。

Google ToDo+GAS+Twitterで自分を監視！達成共有自動ツイートでライフハックしよう。

## 背景

様々な新しい習慣を始めたいなと思いつつも、どうしてもその習慣が続けられなくて悩んでいたので、GoogleToDoとTwitterを使った自己監視システムを作ってみました。タスク管理は、外に発信することで自分に対して強制力を持たせることができるので、ぜひ活用してみてください！


## 作ったもの
GoogleToDoの達成状況を毎週まとめて集計し、毎週定時に自動的にツイートするシステム。

## 利用したフレームワーク

– Google ToDoリスト
– Google Apps Script + Task API
– twitter + twitter API

今回作ったGoogle App ScriptのソースコードはGitHubリポジトリで公開してますので是非参考にしてくだ

[Rails]もっと見るボタンの実装（JavaScriptのみ、jQueryなし）

### 完成イメージ


合計のレコード数が9件だった場合、

最初は、6件だけ表示。
これを押すと、残りの3件が表示されるという仕組みを作る。

### 前提
マークアップコードはHamlで実装。

// Haml側でのデータの扱い
– ＠sections = 複数のセクション
– section: アプリケーション内で表示する後述の「contents」を格納するセクション
– contents: 「section」と1対多の関連がある、アプリケーション内で表示する複数のレコード

### JS側

“`haml
:javascript
// もっと見る表示
function SeeMore(contentsId, minimumContentsId, button) {
c

Vue.js HTMLの属性(attribute)の中で文字列内変数展開をする

ES2015(ES6)の`(バッククォート)を使った展開方法が使える

“`javascript
new Vue({
el: .app
data: { key: ‘sample’ }
})
“`

“`html

“`

IEはこのTemplate literals (Template strings)を対応してない。

## 参考

https://www.yoheim.net/blog.php?q=20170602

【React】Material-UI と Emotion を併用するときの環境構築

React (TypeScript) のプロジェクトにおいて Material-UI と Emotion (CSS in JS) を併用するときに、役に立つかもしれない準備的な話になります。

## 前提

create-react-app の TypeScript テンプレートを使います。
npm ではなく yarn を使っています（npm でも同様の手順を踏めば動くと思いますが、確認していません）。

## React の環境構築

プロジェクト名は適宜変更してください。今回は myapp にします。

“`shell
$ npx create-react-app myapp –template typescript
“`

## Emotion のインストール

Emotion をインストールします。

“`shell
$ yarn add @emotion/react @emotion/babel-plugin
“`

## CRACO のインスール

`CRACO` なにこれって感じですね。簡単にいうと create-react-app の設定を上書きするときに使え

JavaScriptを基本からまとめてみた【14】【Promise】

##はじめに

####学習するに至った経緯
2020年より、未経験からエンジニアへの転職を目指し、某プログラミングスクールへ通う。入学後、『Ruby』を未経験から学ぶ人が多いのと『Ruby』の求人が思っていた以上に少ないので、卒業後、フロントエンドのエンジニアを目指す事に。
Javascriptの学習した事を言語化し、認識の深化による備忘録として記載。

##非同期処理とは
『非同期処理』とは、ある処理が実行されてから終わるまで待たずに、次に控えている別の処理を行うこと。JavaScriptはシングルスレッドでしか動かない性質があるため、複数の処理を並列で走らせることができない。そのため効率的に処理をするために考えられた仕組みが非同期処理と呼ばれるもの。

##Promiseとは
『Promise』とはJavaScriptにおいて、非同期処理の操作が完了したときに結果を返すもの。Promiseは処理が実行中の処理を監視し、処理が問題なく完了すればresolve、反対に問題があればrejectを呼び出してメッセージを表示する。

##Promiseの状態
– apending： 初期状

SortableJSを使ってみる

formrunみたいに「ドラッグアンドドロップで何かしらの成果物を作成する」みたいなHTMLは自分で作れるのだろうか？

と思って色々調べていたら、SortableJSなるものが使えそうだったので使ってみる。

まだ使い始めなので機能とかは全然理解していないけど、メモ程度にここに残していく。予定。

# SortableJSとは
以下を見るよろし。サンプルも同ページにたくさんあるので、基本的な機能はここ見れば十分、なはず。

http://sortablejs.github.io/Sortable/

# 何となく作ってるもの
以下みたいなやつ。


ドラッグアンドドロップで追加できる。

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

Tailwind CSSのインストール方法2 〜Purgeとcssnanoを使って最適化しよう〜

[1.はじめに](#1-はじめに)
[2.Purge機能を使ってみよう](#2-Purge機能を使ってみよう)
[3.cssnano使ってみよう](#3-cssnanoを使ってみよう)
[4.開発環境を構築しよう](#4-開発環境を構築しよう)

#1. はじめに
[前回の投稿](https://qiita.com/YSasago/items/8625892876d45d9d4cf4)でTailwind CSSのインスールはできたので、今回はTailwind CSSを最適化していきます。前回の投稿の続きとなります。前回作成した“`dist.css“`ですが、まだ最適化されていないので、18万行位あります。そこで、使っているTailwind CSSを最適化していきます。

https://qiita.com/YSasago/items/8625892876d45d9d4cf4

* 最適化前のdist.css
![最適化前のdist.css](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/95954/2c866

React 入門道場　~Reactを学ぶ上で理解したいES5,ES6~

#　はじめに

Reactの勉強するを前にES5、ES6の違いについて浅はかであったので今回簡単に纏めることにしました。

#　目次
* Javascriptの標準仕様について
* ES6について
* ES6をES5に変換するBabel
* まとめ

#　Javascriptの標準仕様について

JavaScriptの標準仕様はECMAScriptと呼ばれています。
ECMAScriptはECMA Internationalのもとで標準化されているJavaScriptの仕様となっています。

__課題点__
標準化以前は、ブラウザごとに言語仕様の独自拡張が行われていたため、ブラウザ間の互換性が極めて低かったそうです。ECMAScriptが策定されたことにより、ブラウザ間での互換性が向上しました。

現在、大抵のブラウザは、ECMAScript 5.1以上に対応。
ECMAScript 5.1は、略してES5と表記します。

#　ES６について

__ES6は新しいJavaScriptで、今までのJavaScriptを改善したバージョン。
いわゆる次世代JavaScriptってわけで