Javascript オブジェクト内の短縮型メソッド定義

## 経緯

Reactのコードを読んでいると以下のようなコードがあり、少し読み方に躓いたので備忘録として残します。

“`javascript
const mapDispatchToProps = dispatch => ({
onMount(categoryId){
dispatch(actions.fetchRanking(categoryId))
},
onUpdate(categoryId){
dispatch(actions.fetchRanking(categoryId))
}
})
“`

書き換えると以下のようになります。

“`javascript
var obj = {
onMount(categoryId){
dispatch(actions.fetchRanking(categoryId))
},
onUpdate(categoryId){
dispatch(actions.fetchRanking(categoryId))
}
}

const mapDispatchToProps =

【JavaScript】関数とオブジェクト④　コールバック関数とthis

#はじめに

Udemyの[【JS】ガチで学びたい人のためのJavaScriptメカニズム](https://www.udemy.com/course/javascript-essence/)の講座の振り返りです。

前回の記事

https://qiita.com/nao0725/items/a6b6de600305fc61dfa1

#目的

* 関数とオブジェクトについての理解を深める

#本題
###1.コールバック関数とthis

####前回までのおさらい

““javascript
window.name = ‘John’;

// personというオブジェクトを定義
const person = {
name: ‘Tom’,
hello: function() {
console.log(‘Hello ‘ + this.name);
}
}
// ”HelloTom”と出力される
person.hello();
// オブジェクトのメソッドとして使った場合、thisは呼び出し元のオブジェクトを参照する
“““`

#

これからReact始めたい人のための今日だけでできるTODO#27 TODOアプリの作成⑤ コンポーネントごとファイルを分ける（リファクタ）

## 作成したTODOリストのリファクタ
[前回の記事](https://qiita.com/tanimoto-hikari/items/4c5322b5e38187e28845)でTODOリスト自体は完成しましたが、`App.js`に全て記述した状態になっています。
本来はコンポーネント単位でファイルを分割できている状態が望ましいので修正していきます。

目指すファイル構造は以下の通りです。

## ファイルを切り出す
`App.js`に記述されているものを3つのファイルにコンポーネントに切り分けていきます。

### TodoList.js
新しく切り出す`TodoItem.js`をimportする記述と`App.js`に記載していた内容を移動させます。
import先で読み込めるようにexp

Unicodeを文字列へアンエスケープ


## ソース

### JavaScript

“`js
var unicodeUnescape = function(str) {
var result = ”, strs = str.match(/\\u.{4}/ig);
if (!strs) return ”;
for (var i = 0, len = strs.length; i < len; i++) { result += String.fromCharCode(strs[i].replace('\\u', '0x')); } return result; }; var result = unicodeUnescape('\\u3042\\u3044\\u3046\\u3048\\u304a'); console.lo

railsでAjaxが上手く連動してくれない時の対処法の１つ

#railsとAjaxが上手く連動してくれない時の確認
現在railsでアプリケーションを作成していて非同期通信を導入しようとしていました。
ですが、何が原因なのか上手く動作する時としない時があり原因不明だったのですが、なんとか解決に導いてもらえたので整理しておくために記録します。

“`ruby:jsファイル
function post (){
const submit = document.getElementById(“submit”);
submit.addEventListener(“click”, () => {
const form = document.getElementById(“form”);
const formData = new FormData(form);
const XHR = new XMLHttpRequest();
XHR.open(“POST”, “/posts”, true);
XHR.responseType = “json”;
XHR.send(formData);
});
}

javascript演習　4日目/３０日

覚えたこと

reduceの使い方

“`javascript
const totalYears = inventors.reduce((total, inventor) => {
return total + (inventor.passed – inventor.year);
}, 0);
//他にも重複を数えたり
const transportation = data.reduce(function(obj, item) {
if (!obj[item]) {
obj[item] = 0;
}
obj[item]++;
return obj;
}, {});
“`

sortの使い方

“`javascript
const oldest = inventors.sort(function(a, b) {
const lastInventor = a.passed – a.year;
const nextInventor = b.passed – b.year;

何故くそややこしいReactを勉強するのか？

##逃げるプログラマー、避けられない壁
Web系アプリケーション開発をするとなると、React, Angular, Vueといったフレームワークの話題は避けて通れないのだけど、面倒にかまけてみて見ぬふりをしているデヴェロッパー諸君は多いと思う。
自分もそういうダメグラマーの一人であった。
だが、Nodeベースでバックエンドを開発していると、どうしても使いたいライブラリーや機能を組み込むためには、フレームワークからは逃げられないと悟り、学習することにしたのであります。
React, Angular, Vueの３大フレームワークをざっと調べてみた際に、一番取っつきやすそうだったReactをチョイス。

##しょせんはHTMLとCSSとJavascript
で、結局Reactは何をやっているかというと、しょせんはHTML、CSS、JSなのである。
ReactのコードはJSXって呼ばれてますが、CSSとHTMLをJavascriptのファンクションで包んだもの。
JSXのコードは、ブラウザ等でレンダリングされると、ただの従来のHTMLコードになる。
つまり、やっているのはフロ

obnizでビールの飲み頃温度を教えてくれるIoTを完成させたい！

**させたい！**という願望含む、現状**未完成**の投稿で恐縮です。
絶賛**迷走中**ですので、**お力添えいただければ幸いです！**

プログラミングを習い始めて半月が経ち、obnizを使ってIoT入門しました。
天敵のプリン体を避けビールを絶っていますが、時には飲みたくなり、
そんな特別な時には**最高の状態のビールを飲みたい！**私利私欲のためのIoT製作です。

ビールの飲み頃温度は夏なら4～6℃、冬なら6～8℃とされています（喉越しはさておいて）。
冷蔵庫で長く缶ビールを冷やしておくと冷えすぎて、本来のビールの美味しさが半減されてしまいます。
出典：[サントリー](https://www.suntory.co.jp/customer/faq/001711.html)
そこで、**冷蔵庫から出して温度を測りながら、飲み頃と言われている4℃以上になったら
飲み頃サインをLEDが光って教えてくれるもの**を目指して作っています。

##現状

左端のセル固定ヘッダーのテーブルをプレーンなjavascriptのみで実装する方法

# 目的
* 横幅が表示領域より長い表を横スクロールした時に、左端の見出しセルを横スクロールに追従して表示する

# 前提
* tableタグのhtmlエレメントにidが付与してあること

“`html

(略)

“`

* 表内左端の見出しセル内にコピーされてはいけないエレメントが含まれていないこと
（id付きのエレメントやformで送信対象とする “`“` など）
※横スクロールに追従するラベルを左端のセルをコピーして生成するため

# 使い方

* 以下のクラスをjsファイル等に転記して読み込む

“`javascript
class FixedHeaderTable {
constructor(id) {
// 対象のDOM
this.table = document.getElementById(id);

// コピーstyle要素
this.copyStyl

jQueryによるtableのアコーディオンのサンプルコード

下記サイトに移動
[jQueryによるtableのアコーディオンのサンプルコード](https://pchanz.com/jquery-accordion/)

これで若い子とのカラオケも安心？！COBOLしか経験なし！文系出身SE(23歳女)が若者の音楽を伝授します！

#文系出身SE(23歳女)とは・・・

業務はもっぱらCOBOLオンリー。SE二年目文系出身＆プログラミング得意ではない、、、
そんな私がJavaScriptを初めて2週間。まだまだ何もできない、、、

これは、そんな私がJavaScriptやAPIに立ち向かいながら成長していく成長記録！
悪戦苦闘の様子をぜひご覧ください！！（笑）
(そしてうまくできなかったところは教えてください！大感謝します！)

#そろそろ行きたいですよね！カラオケ！
コロナも落ち着き、そろそろ久しぶりに職場のみんなでパーッとカラオケにでも行きたい！
そんなあなたにこんな悩みありませんか？

#今の若者って何聴いてるんだ？
このジェネレーションギャップはおそらく永遠の壁でしょう！
このLINE Botでは、これを歌ったら若い子に一目置かれる、そんな曲を返答してくれます。

#仕様
LINE Botを使用し、アーティスト名を入力すると若者に人気の曲を返答してくれる。
(ネット上からデータを取得なんでことはまだできず、、、
私の主観です。私の趣味がわかることでしょう！)

今

新社会人の初開発作業

今年からsier企業に就職し、今日からようやくvscodeを使用した開発作業を始めました。

既存システムのIEからedgeへの移行作業を行ったます。

ITはアウトプットすべきとよく聞くので、業務中に学んだことを気が向いたら書いていこうと思います。

【Vue.js】双方向データバインディング v-model

#はじめに
こんにちは！　松本　佑大（まつもと　ゆうだい）と申します！
今回は双方向データバインディング v-modelについてアウトプットしていきます！

#双方向データバインディング、v-modelとは
双方向データバインディングとは、

dataオブジェクトの値変更:point_right_tone4:テンプレートの値変更
に加えて
dataオブジェクトの値変更:point_left_tone4:テンプレートの値変更

というように双方向にデータをバインディングすることを指します。

v-modelは双方向データバインディングを実行するときに使用するディレクティブになります。

#書き方
“`HTML:HTML

{{ $data.message }}

“`

“`Vue.js
var app = new Vue({
el:’#app’,
dat

自分のTwitterAPIキーで任意のアカウントのAccess Tokenを確認するツールを作った

Twitter APIを使っているとき、自分のAPIキーであるアカウントのAccess TokenとAccess Token Secretを確認したいときありませんか？私はあります。ありますよね。(強制)

最近Twitter Developperの登録のハードルが上がり、**何日も承認待ちしてる暇なんかねぇ！**っていう時、Access Tokenを確認できたら良いなぁ～と思っていました。

なので任意のアカウントのAccess Tokenを確認するツールを公開しましたので紹介します。
※事前に各自で利用規約に違反しないかだけご確認ください。
## 紹介と使い方

https://tools.ic731.net/check_twitter_key/

https://github.com/ichii731/php-examples/tree/main/check_twitter_key

ページにアクセスする前にまずはAPIの設定を変えてください。
TwitterDevのDashboardで該当APIのコールバックURLを以下に変更してください。(使い終わったら切って構いません)

JSだけでやる google spreadsheet 用の excelのphonetic()みたいな「カナかな変換」関数

Google spreadsheets 最高ですよね！
データ連携や簡易SQLなど、もうExcelには戻れない要素満載です。

なんですが、ごくたまに欲しい関数が無くて困ったりする事も。
幸いjavascriptでいくらでも関数が追加出来ますので、足りないものは追加しちゃいましょう。

gooのAPIを使う方法などがよく紹介されているのですが、
今回は社内のデータを扱う関係でJavaScriptの埋め込みスクリプトだけで完結したいと思います。
よって機能はカタカナーひらがなーﾊﾝｶｸｶﾀｶﾅの相互変換だけに絞ります。

方法は文字コードから算定するなど色んなやり方があるかと思うのですが、
Pre-Practiceさんの公開されている「Google Apps Script試行錯誤Blog」の記事を拝見しまして、
https://www.pre-practice.net/2017/12/blog-post.html

このやり方が一番直感的だなと思いました。

ついてはこちらのコードを拝借させて頂いて、Arrayformulaなどでも使い易いように整理したいと思います。

“`code

JavaScriptのclass

# はじめに
初学者です。
基本は備忘録

# classってなに？
よく例えられるのは設計図
class(設計図)からinstance(設計図をもとに作った物)を生成する

# JavaScriptにおけるclass
*JSにおけるclassはコンストラクター関数をclass表記で書けるようにしたもの*
すでにある機能を簡単に書けるようにしたものをシンタックスシュガーという

—
*class*

“`js
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}

hello() {
console.log(‘hello ‘ + this.name);
}
}
“`

*コンストラクター関数*

“`js
function Person(name, age) {
this.name = name;
this.age = age;
}

Person.prototype.hello = function() {
conso

等価演算子と型変換

# 「等価演算子」と「厳密演算子」
JavaScriptでは、2つのオペランドが等しいか比較するための等価演算子が「**等価演算子(==)**」と「**厳密等価演算子(===)**」の2種類ある。
**等価演算子**：オペランド同士の値が同じの場合、true
**厳密等価演算子**：オペランド同士の同じ型、同じ値の場合、true
ここで、**等価演算子**はオペランド同士が異なる型の場合、比較する際に同じ型に暗黙的な型変換されてから比較される。

“`javascript
// 同じ値だが型が異なる場合
console.log(1 == ‘1’); // true
console.log(1 === ‘1’); // false

// 真偽値の場合
console.log(0 == false); // true
console.log(0 === false); // false
“`

#「暗黙的な型変換」と「明示的な型変換」
暗黙的な型変換とは、**ある処理において、その処理過程でオペランドの型に

JavascriptのPromiseについてざっくりまとめてみた！

## 前提
実務で入る前にはあんまり知らなかったのですが、実務に入ると当たり前のように使っているPromise。フロントエンドの方はもちろん、バックエンド志望の方でもJavascriptの知識は必要不可欠になっています。

そこで今回は「Promise」についてまとめてみたいと思います。

### 1. Promiseとは
Promiseとは、オブジェクトであり、非同期の結果を返します。
非同期メソッドは結果の値を返す代わりに、未来のある時点で値を提供するプロミスを返すことで、同期メソッドと同じように値を返すことができるようになります。

promiseの状態は以下のいずれかになります。

* **pending** (待機) 初期状態。まだ、処理が完了していない状態です。
* **fullfilled** (履行) 処理が成功して完了した。
* **pending** (拒否)　処理が失敗した。

### 2. 簡単なPromiseを作成して .then（）でPromiseを処理するパターン
ここでは簡単なPromiseを作成して実際にコードで確認していきましょう！

“`jav

Railsのテーブル要素にリンクをつけた

## tableのtr(行ごと)にリンクを貼る
### viewにリンクを追加
“`erb:index.html.erb

<% @institution.each do |institution| %>
<%# data-hrefにリンク先を記述する %>

<%= institution.name %> <%= institution.postcode %> <%= institution.

【備忘録】addEventlister で関数にうまいこと引数を渡すことでコードを短くすることに成功した

## はじめに
– JavaScript 上でmodal 表示のためのイベント処理を書いていたところ、コードの重複が多くなってしまい、なんとか短くできるか試行錯誤した結果、自分なりに短くすることができたのでその記録のため書きたい。
– 他に効率の良い書き方とかあったら教えて欲しい….

### やったこと

– 複数ある同じオブジェクト上のボタンを追加すると、モダルで前のオブジェクトの情報を反映する別のオブジェクトを表示させる
– JavaScript で元のオブジェクトの情報を引数として渡す

### 最初のコード

複数あるカードとボタン全てイベントを追加した後、引数のイベントのターゲットごとに Switch statement で一個一個のシナリオを書いた結果、重複が多く、コードの量が多くなった。

“`html

Card Title