JavaScript関連のことを調べてみた2020年06月16日

JavaScriptでx === ‘a’ || x === ‘b’ || x === ‘c’ || …をシュッとさせる

JavaScriptで次のような`||`演算子が繰り返し使われたコードを、より簡潔に書く方法を紹介します。

“`js
if (
x === ‘a’ ||
x === ‘b’ ||
x === ‘c’ ||
x === ‘d’ ||
x === ‘e’
) {
console.log(‘ok’)
}
“`

このような文字列比較の繰り返しは、`Array.prototype.includes()`を使うと、簡潔に書くことができます:

“`js
if ([‘a’, ‘b’, ‘c’, ‘d’, ‘e’].includes(x)) {
console.log(‘ok’)
}
“`

`Array.prototype.includes()`はES2016で導入されました。

## 参考文献

* [Array.prototype.includes() – JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/A

React hooksを基礎から理解する (useReducer編)

#React hooksとは

React 16.8 で追加された新機能です。
クラスを書かなくても、`state`などのReactの機能を、関数コンポーネントでシンプルに扱えるようになりました。

– [React hooksを基礎から理解する (useState編)](https://qiita.com/seira/items/f063e262b1d57d7e78b4)
– [React hooksを基礎から理解する (useEffect編)](https://qiita.com/seira/items/e62890f11e91f6b9653f)
– [React hooksを基礎から理解する (useContext編)](https://qiita.com/seira/items/fccdf4e73c59c491558d)
– React hooksを基礎から理解する (useReducer編) :point_left_tone2: 今ここ
– React hooksを基礎から理解する (useCallback編)
– React hooksを基礎から理解する (useMemo編

React: フックで値を定めた要素に制御されたコンポーネントを使うよう警告が出る ー Warning: Changing uncontrolled input

フック`useState()`でテキスト入力フィールド(``)をコントロールしようとしたら、ブラウザコンソールに何やら警告が出てしまいました。

### 制御されたコンポーネントを使うよう促す警告

具体的にはつぎのメッセージで、制御されていない``要素を制御されたコンポーネントに変換しようとしていると警告しています。コントロールしたいのなら、制御されたコンポーネントを使わなければならないということのようです。

> Warning: A component is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of

[初心者向け]Reactができるようになりたい ~コンポーネントについて~

#はじめに
今回はReactの使い方についてまとめていきます。

環境構築については、以下の記事を参考にしてください。

[WindowsでReactの環境構築をしてみる](https://qiita.com/renesisu727/items/4b34df1a3cfe8d534303)

#コンポーネントについて
Reactはコンポーネント(部品)という単位で実装していきます。

Webサイトやアプリは、ボタンやタブなどのコンポーネントの集まりと考えることができます。

例えば、このQiitaだと以下のようなコンポーネントが存在すると考えることができます(適当です)。

+ ボタンコンポーネント


+ ナビゲーションコンポーネント

![image.png](https://qiita-image-store.s3.ap-northeast-

htmlでおみくじアプリ作成

dotinsallでおみくじアプリ作成を勉強したので学んだことをまとめておこう。

●ランダムな数を生成するMath.random()を使って条件分岐が基本。
結果の表示方法は①switch文、②result = []としてresult[n]のように配列でまとめる。
③if文で確率ごとに条件分け、がある。

特に配列で取得するやり方は今後かなり使えそう。実際のアプリで配列を初めて使って感動した。

●ボタンを押した感を出すには下部の影とmargin-topの操作で可能

●cursor: pointer　にすると手のようになってくれる

●opacity　は透明性で０だと完全に透明

以下、コード例

htmlコード

“`html

チェックボックス のカウント＆出欠データの表示

TECH CAMPのチーム開発も終了し、個人アプリに手を加えています。（個人アプリに関しては[こちら](https://qiita.com/ruby55tomo/items/69032cf98558825705fa #Qiita)）
今回は2つの実装を紹介します。

まず1つ目。幼稚園の先生が出欠確認をする際、出席している園児を確認しチェックボックスにチェックを入れる仕様になっていますが、それをカウントし出席者の合計人数を自動で表示される様実装します。

ビューです。（前後の記述は省略）

“`app/views/messages/index.html.haml
.main__main-ber__check-box__name-check__member-number
出席(名)：
= f.text_field :member, class: “member”
欠席・遅刻・早退(名)：
= f.text_field :absence, class: “absence”
合計(名)：
= User.count – 1
.main__main-ber__che

初めてのJavaScript-備忘録01

# 初めてのJavaScript-備忘録01

今回仕事でjavascriptを使うことになり備忘録を兼ねて本記事から身についたこと、知ったことを記事に挙げていこうと思った。
※週に2、3記事間隔で上げていけるよう努力しようと思う！

## JavaScriptとはなんぞや？

以下に簡単にJavaScriptについて纏めてみた。

1. スクリプト言語
Scriptというのだから当然、スクリプト言語であり、ある程度プログラミング経験がある人なら比較的簡単に始める事ができる。

2. インタープリンタ型言語
コンパイル、ビルドなどめんどくさい手続きを踏まずに
すぐに実行する事ができる。その分動作は遅いかもしれないけど、
現在のCPUやメモリの性能を考えると大したことはない。と思う…

3. さまざまな環境で動作

ウェブブラウザ上で動作する為、Windows、Macはもちろんのこと、iOS、Android端末からも動作できる。

個人的には色んな環境で試せるから達成感を早く感じる事ができ、
モチベの継続になりそう。

入門なら、変に環境

現代のフロントエンド開発シリーズ（3）- `==` と`===`の違いは知ってるけどなぜ？

JavaScriptでは、 `==`と `===`の違いがよく議論されています。2つの違いは、JavaScriptを少しでも書いたことがある人なら、比較するときに`==`が暗黙的に型変換を行うことを知っているでしょう。

また、配列、オブジェクト、クラスなどの型が異なるため、JavaScriptの比較が異なることにも注意してください。比較する方法は、2つの変数が**同じ参照**を指しているかどうかです。

例えば：

“`javascript
var a = [1,2,3,4]
var b = [1,2,3,4]
console.log(a === b); // ???

var objA = {name: ‘JavaScript’}
var objB = {name: ‘JavaScript’}
console.log(objA === objB); // ???
“`

## 参照値と値

**値**ではなく参照を指すように設計されているのはなぜですか？

プログラミング言語では通常、次の3つのタイプに分類できます。

1. 参照: 2つの値が同じポインターを指す
2. Sh

現代のフロントエンド開発シリーズ（2）- ECMAScriptとJavaScriptについて

>「これは最新のES6構文です」と多くの人が言っていますが、ES6とは正確に何であり、Javascriptと何が関係しているのでしょうか。

この記事では、それについて紹介したいと思います。

まず JavaScript の歴史から始まります。 JavaScript は、当時ブラウザを宣伝したいというNetscapeの願望であり、ブラウザ上で動作できるスクリプト言語を欲しがっており、その言語を設計するにはBrendan Eichに引き継がれました。翌年、1996年に標準化のためECMA Internationalに提出されました。

## ECMAScript

`ECMAScript`仕様は`ECMA-262`によって策定され、TC39メンバーによってレビューされています。

### そもそも基準は何ですか？
例えば、一般的に使用されている用紙はA4、A3、B5などですが、これらのサイズは仕様であり、用紙サイズが29.7×21cmであればA4と呼べます。

ECMAScriptの仕様は、実装する必要のある文法、構文とインターフェースを提供し、各ブラウザはそれに応じて実装します。

ブ

現代のフロントエンド開発シリーズ（1）ーあらすじ

日本語に一生懸命頑張りましたが、変な文法があったり、変な表現があったり、意味が全然通じなかったりする場合がありますのでご了承ください?‍♂️。こここう書いたら良くなる部分があればぜひこめんとしてください

## はじめに

ブラウザとインターネットの進化により、フロントエンド技術は革新的に新たな時代を迎えました。
過去には、多くの概念が時代遅れになり、ブラウザでできることはますます増えています。フロントエンドには、ますます複雑化するニーズに対処するための厳密なエンジニアリングとアーキテクチャも必要になりました。

このシリーズは、さまざまなJavascriptテクノロジーを紹介し、フロントエンド開発上でよくある問題を説明し、ブラウザ全体、Javascriptの操作を理解し、近年人気が高まっているフレームワークまでにも紹介したいと思います。詳しくは`web -component`、 `ReactJS`、` Vue`その3つです。

これは0から1までの教科書ではありませんが、フロントエンド開発の理解を記録し、自分の経験の一部を共有するため、基本的なフロントエンド機能を実装でき、もしくは経

JavaScriptでobjectとarrayのデータアクセス速度比較

# 検証
“`javascript
// それぞれ要素を300個ずつ用意する
const arr = Array(300).fill(1);

const obj = {};
Array(300).fill(1).forEach((i, e) => obj[i] = e);

// ランダムにデータを参照する
function test() {
const randomIds = Array(300).map(e => Math.floor(Math.random() * 299));

console.time();
randomIds.forEach(id => array.find((i, e) => i === id));
console.timeEnd();

console.time();
randomIds.forEach(id => obj[id]);
console.timeEnd();
}
“`

# 結果
objectの方が高速。

「Vue.js入門」基礎まとめ（１）

[Vue.js入門](https://www.amazon.co.jp/dp/4297100916)を読んでいます。
この本の3章までの内容について、開発するアプリケーションやチームの規模に関わらず、Vue.jsを使う上で最低限知っておく必要あると感じました。
そこで、時間がない人向けにVue.js入門3章＋αの重要と思う部分をまとめたいと思います。
今回のタイトルに（１）とあるように、何回かに分けて記事にしていく予定です。
私自身がFrontEnd初心者のため、初心者の方向けの基礎的な内容です。

今回は、Vue.js入門の2章にあたる、Vue.jsの基本的な書き方についてです。
何かを新しくインストールすることなく、Vue.js独自の書き方や思想を取り入れ、簡単なアプリケーションを作ってVue.jsを体験することを目的としています。

# Vueオブジェクトとインスタンス
Vue.jsを使うために、まずはhtmlのscript要素でVue.jsを読み込みます。
下記の例ではCDNから最新の安定版2.6.11（2020/05時点）を読み込んでいます。

“`xxx.html

【PAY.JP】#1 クレジットカード登録機能 実装の軌跡

#### はじめに
チーム開発にて Ruby on Rails を用いてWebアプリを作成中です。

まだまだ未熟なため、記述やコードがわかりにくいかもしれません。
記載しきれなかったものや変更点は、随時更新・ブラッシュアップしていきます。

私と同じ初学者の方は検索に検索を重ねると`「いま自分が何を調べたいのか」`が分からなくなってしまいがちですので、専門用語やカタカナ用語は都度 解説します。

#### PAY.JPとは
*cf.　https://paymentnavi.com/paymentnews/51558.html*

顧客のクレジットカード情報をアプリ側のデーターベースには保存せず、PAY.JPに保存します。顧客とクレジットカードを紐づけて処理することにより、安全にクレジットカードの決済が行えるAPIとなります。

フリーマーケットアプリの開発で商品購入機能については、このPAY.JPを利用しクレジットカードで決済を行う実装としました。

>`API`：
Application Programming Interface(アプリケーション・プログラミング・インターフェイ

はじめてのThree.js 11章 日記

[はじめてのthree.js](https://www.amazon.co.jp/dp/4873117704)

#新たに知った知識
– ポストプロセッシングで必要な最小限のJSファイル

“`js