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

古いReactベースのWebアプリも完全にリファクタリング

この記事では、数ヶ月前の**React**ベースのWebアプリをリファクタリングして完全に書き換える方法と理由を共有します。

*本ブログは英語版からの翻訳です。オリジナルは[こちら](https://www.alibabacloud.com/blog/how-to-revamp-your-web-app-in-2019_595134)からご確認いただけます。一部機械翻訳を使用しております。翻訳の間違いがありましたら、ご指摘いただけると幸いです。*


私たちはミスをしがちです。そのため、作業の見直し、再編成、見直しが必要になることがよくあります。ソフトウェアエンジニアリングでは、このフェーズをリファクタリングと呼びます。

リファクタリングには価値があります。ソフトウェアを健全な状態に保つことができるからです。これはAoneに現れるような特別

JIRAチケットの説明文にデフォルト値を設定したいのでブックマークレットを作ってみた

## はじめに
JIRAチケットを作成したとき、説明文にデフォルト値を設定したいときありませんか。
テンプレートを作ってそれを説明文に差し込みたい…

それっぽいのはあるんですが。

https://community.atlassian.com/t5/Jira-Core-articles/Jiraのチケット起票時にデフォルト値を設定したい/ba-p/766066

ということで、ブックマークレットでめちゃくちゃ簡単なコードを書きました！

## やること

### コードを書く
`descriptionText` の部分は便宜変更してあげてください。

“`js
javascript:(
function(){
descriptionText = “■デザイン\n\n\n■概要\n\n\n■背景\n\n\n■実装方針\n\n\n■受入条件\n\n\n■リリース調整の有無\n\n”;
Node.jsを使ったECS上でのTCPアプリケーションの構築

このチュートリアルでは、**Alibaba Cloud** ECSを使って**TCP**クライアント/サーバのペアを作成し、**Node.js**を使って**TCP**アプリケーションを構築していきます。

*本ブログは英語版からの翻訳です。オリジナルは[こちら](https://www.alibabacloud.com/blog/node-js-tcp-app-development-on-ecs_594176)からご確認いただけます。一部機械翻訳を使用しております。翻訳の間違いがありましたら、ご指摘いただけると幸いです。*

Alibaba Cloud Tech Share執筆者のKunal Relanによるものです。Tech Shareは、クラウドコミュニティ内で技術的な知識やベストプラクティスを共有することを奨励するAlibaba Cloudのインセンティブプログラムです。

まず基本的なことから説明すると、オープンソースのJavaScriptランタイム環境として人気のあるものに、ChromeのV8 JavaScriptエンジン上に構築されたNode.jsがあります。Node.

【アロー関数】　javascript　() => {} 　意味　一言で、 入門　

##【ゴール】
アロー関数理解

##【コード】
■JSを学んでいくと出てきた**「　()　=>　{}　」**

“`js:hoge.js
const name = () => {
console.log(‘名前は太郎です’);
}
“`

■関数の省略
■下記と同じ意味(fucntionが有る、無い)
■function無しが推奨みたいです。

“`js:hoge.js
const name = () => {
console.log(‘名前は太郎です’);
}

const hoge = function(){
console.log(‘名前は太郎です’);
}

“`

##【まとめ】
###■「() => {}」はアロー関数という
###■推奨されている記述

##【合わせて読みたい】

■ 【javascript】　テンプレートリテラル とは　一言で。
https://qiita.com/tanaka-yu3/items/9b07bd9fc4126291be28

■ 【Javascript】JS　変数　定数　違い 　一言でまとめました
https://

【Rails】アクティブハッシュによる選択肢の表示まで

「送料込み」や「着払い」を選択する度に配送方法の選択肢を変えたい時の
手順についてこちらでご紹介。

# 1.アクティブハッシュの準備
今回は商品の配送方法についてだったので、以下の選択肢を準備。

“`ruby
class ShippingMethod < ActiveHash::Base self.data = [ {id: 1, name: '未定'}, {id: 2, name: 'ラクダ便'}, {id: 3, name: 'こうもり便'}, {id: 4, name: 'ゆうメール'}, {id: 5, name: 'レターパック'}, {id: 6, name: '普通郵便(定形、定形外)'}, {id: 7, name: 'クロネコヤマト'}, {id: 8, name: 'ゆうパック'}, {id: 9, name: 'クリックポスト'}, {id: 10, name: 'ゆうパケット'} ] end ``` # 2. HTMl側に表示させる htmlでとりあえず全ての選択肢を表示させます。 ```haml .bo

GASで簡易的な自動送信メルマガを作る

## 目的
指定した時間に自動的に送信される簡易的なメールマガジンをGASで実装します。
エンジニア以外のメンバーに運用してもらうため、スプレッドシート上に内容を記入してもらう形にしています。

## 概要
スプレッドシート上に以下の項目を記入しておくと、指定した内容でメールが送信されます。

* 送信日/時間
* 宛先(to,cc,bcc)
* タイトル
* 本文（定型文）
* 本文（都度変更文）

このような形です。

今回の例では宛先に英語圏と中国語圏を含み、本文（都度変更文）としてそれぞれの言語のメッセージボックスを用意しておき、必要に応じて挨拶を記入してもらいます。

## 事前準備

### スプレッドシートに必要な入力項目を用意する
概要で記した通りです。日付部分や宛先部分は条件付き書式や入力制限を使ってバリデーショ

お絵かきできるSNSを作りたい！11

１つ前に戻す(日本語あってる？)を実装したのでついついやりたくなるCtrl+ZをWEBページに実装ます。
方法は簡単でページ全体に対してonkyedownイベントを付与するだけです。

“`javascript:
document.onkeydown = function(e) {
var keycode,shift,ctrl,alt;
keycode = event.keyCode;
shift = event.shiftKey;
ctrl = event.ctrlKey;
alt = event.altKey;
event.cancelBubble = true;
keychar = String.fromCharCode(keycode).toUpperCase();
}
“`
このサンプルでは、documentに対して付与しました。

あとで扱いやすいように以下の変数を宣言しています。
keycode→押された文字列を大文字にして格納
shift→Shiftを押されているかの判定用
ctrl→Ctrlを押されているかの判定用
alt→Altを押

JavaScript　 オブジェクトをマージする（連想配列）　Object.assign()

## 非エンジニア一般人向け想定
JavaScript　 オブジェクトをマージする　（連想配列）

何かとプログラミングは横文字が多いな、、ロックダウン、オーバーシュート、クラスターってな感じで

今回は**マージ**が重要だと思います。
マージとは、結合のことですよね～～～

連想配列は、出席番号とかニックネームつけて分かりやすくした配列だと思ってます～～。

さて、マージする方法の一つは、、

## メソッド　Object.assign()を使います。

“`JavaScript
const a = {a: ‘a’};
const b = {b:’b’};
const c = Object.assign(a, b);
console.log(c);
c //{a: ‘a’, b: ‘b’}
“`

こんな感じですかね。

実際に数字とか入れてみましょう。

“`JavaScript
const animal1 = {a:’カエル’,b:’ヘビ’,c:’ワニ’};
const animal2 = {d:’おさる’,e:’わんこ’,f:’にゃんこ’};
con

JavaScriptでカラーバーを描画する [d3.js]

# はじめに

何の需要があるかわかりませんが, JavaScriptでカラーバー(だけ)を描画したかったので, 色々模索したときのログを残しておきます.

# 作れるもの

こんな感じです.


# d3.js と d3fc を使う

d3.jsとd3fcを利用しました. ちなみにバージョンはそれぞれd3.js(v5), d3fc(15.0.8)でした.
それぞれローカルにダウンロードするか, CDNとかでリンク貼ってください. そこら辺の説明は割愛します.

## とりあえず作る

### スクリプトを書く

とりあえず, テキトーにhtmlとcssを書いちゃいます.
今回は`#colorbar-container`にカラーバーを入れていきましょう.
CSSは左下にカラーバー置きたいな〜ってだけなので, 無くてもいいです.

“`html

console.logで配列やオブジェクトが省略されてしまうときはconsole.dirを使おう

`console.dir`の第２引数にオブジェクト`{depth: null}`を渡すと深い階層も省略されずに全部見れます。

[Node.js console.dir](https://nodejs.org/docs/latest-v12.x/api/console.html#console_console_dir_obj_options)

“`js
const menu = {
main: {
currey: 500,
udon: 450,
rice: 150
},
side: {
soup: {
misoshiru: {
wakame: 250,
asari: 250
},
potage: {
corn: 250,
potato: 250
}
},
dessert: {
icecream: {
vanilla: 100,
chocolate: 100

JavaScriptのIE11対応まとめ(勝手によしなにしてくれるやつ)

コピペjsしか書けないよわよわコーダーのメモ書きです。

###まず確認。
[IE11 で使用できる・できない JavaScript の機能](https://knooto.info/javascript-ie11/)

###そして以下対応策①。

[polyfill.io](https://polyfill.io/v3/)
古いブラウザでサポートされていない機能を使えるようにしてくれるコードらしいです。
[polyfill.io が便利すぎた](https://qiita.com/moriyuu/items/061de38704687fef93b9)

###対応策②。
[Babel.io](https://babeljs.io/)
jsのバージョンES6をES5に変換してくれるみたいです。
[ES6の概要と、最新ブラウザに対応させる「Babel」の使い方](https://liginc.co.jp/260178)

Babelはプラグインみたいですがブラウザ上で変換出来るサービスもあります↓↓↓
[Babel Try it out](https://babeljs.i

async/awaitとthen/catchを混合しない方がいいかもしれないという話

JavaScriptでこのようなコードを見ることがあります。

“`javascript
const response = await request(‘https://…’).catch((err) => {
logger.fatal(err);
});
“`

意図としてはこのようなものだと推測できます。

* 成功時はそのまま`response`を使いたい
* でも異常時はそのことをロギングしたい
* **`try catch`を書くのは面倒くさい**?

ですがこのコードは大きな問題を孕んでいます。

## 問題がない場合 : 成功時

成功時は問題がありません。`request()`で得られた結果はそのまま定数の`response`に代入されます。

## 大問題の場合 : 失敗時

`request()`が失敗したときは`promise.catch()`が呼び出されるのはお分かりいただけると思いますし、このコードを書いた人もそれを意図しているということも読み取れますが、このコードは異常終了する可能性がかなり高いです。

### なんでそんなに危険なんですか

危

文字数が多い時に最後に出す「…」をJSでパパッと作る。

今回は、webサイトでよく見る
「サンプルテキストです。サンプルテキストです。サンプルテキ…」の
「…」を関数で出力する方法を紹介。

DEMOはこちら。

See the Pen
pogaWpj by 坊 拓磨 (<

JSのオブジェクト型のデータを配列に変換してfilter関数を使って欲しい情報のみを抽出する

案件でAPIから受けとったオブジェクト型のデータの重複を取り除いたり欲しい情報のみを抽出するといったことをしました。
結構詰まったのでメモです。

“`javascript


```

## sample
https://youheinakagawa.github.io/go-to-safari-js/

## npm package
[go-to-safari](https://www.npmjs.com/

【GAS x Vue.js】JavaScript のみで今、家計簿をつくるとしたら【ハンズオン付き！】

「JavaScriptのみ」＆「無料」＆「サーバーレス」なスプレッドシートと連携した家計簿をつくる方法を考えてみました。
実際に家計簿アプリを作るハンズオン付きです！

# なにを作ったの？

Web上でデータを登録すると、スプレッドシートに反映される家計簿アプリです。
実際のページは[こちら](https://matsu7089.github.io/gas-account-book/#/)。使い方は「[家計簿アプリお試し方法](#家計簿アプリお試し方法)」で説明します。

データ追加の他に、データ編集と

データ削除を行えます。
![](h

【初学者向け】Vue CLIを使ってTODOアプリを作る

# はじめに

### 作成するアプリについて

本記事ではVue CLIを使って、簡単なTODOアプリを作成していきます。
機能としては以下の通りです。

- TODO一覧の表示
- TODO追加
- TODO削除


対象読者
- progateのhtml, javascriptコースを完了した方
- Vue.jsを勉強し始めた方

### 参考文献

[Vue.jsでTodoアプリを作ってみよう](https://www.amazon.co.jp/Vue-js%E3%81%A7Todo%E3%82%A2%E3%83%97%E3%83%AA%E3%82%92%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%88%E3%81%86-kenpapa-ebook/dp/B07JLBB1V9)
kenp

[JavaScript]テキストエリア間を矢印キーで移動したい

# やりたいこと
- テキストエリア間のフォーカスを`KeyboardEvent`イベントで発火させて移動させたい
- フォーカスをテキストエリアの最初とか途中とか任意の場所に移動させたい
- テキスト最後尾で↓キーを押したら次のテキストの先頭に移動させる
- テキストの先頭で↑キーを押したら前のテキストの最後尾に移動させる

# 結論
- `keydown`イベントで現在のテキストカーソルの位置を判定する
- `keyup`イベントでフォーカスの移動、フォーカスの位置の指定を行う

スクリプトレット：Udemy講座の目次を作成する

# Udemy講座の目次を作成する

## やること

Udemy講座の目次をぱぱっと作成してしまおう

## できること

Udemy講座の目次がクリップボードにコピーされます。

## やりかた

スクリプトレットでサクッと

以下をスクリプトレットとしてブラウザに登録してください。

```javascript
javascript:document.querySelectorAll(".section--section--BukKG").forEach(el=>{ if(el.getAttribute("aria-expanded") == "false" ){ el.querySelector("[role=button]").click(); }}); function execCopy(string) { var tmp = document.createElement("div"); var pre = document.createElement("pre"); pre.style.webkitUserSelect = "auto"; pre.st