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

ヤマトB2クラウドをFileMakerで動かしたい

送り状発行システムB2クラウドはご存知でしょうか。

上記記載通り、Web上でヤマト運輸の送り状を発行する画期的なシステムです…
※昔はアプリケーションでした。（佐川e飛伝Ⅱのような）

B2クラウドには、[ヤマトビジネスメンバーズ](https://bmypage.kuronekoyamato.co.jp/bmypage/servlet/jp.co.kuronekoyamato.wur.hmp.servlet.user.HMPLGI0010JspServlet)の登録が必要です。

今回は、ヤマト運輸の送り状を何とか楽にしたいなと思い、備忘録として、記しておきます。

Windowsユーザーのみしかできません。
AdobeAcrobatReaderDCはインストールしといた方がいいかも。
（大体は入ってるのかな…知らんけど…）

ヤマトビジネスメンバーズのログインから行いたいと思います。

ヤマトビジネスメンバーズのログインには、Id・Cd・Pwの3点は必要です。

変数を設定で、3点を変数に格納。
webビュアーにヤマトビジネスメンバーズのリンクと名前を付け忘れずに。

hit and blowというゲームをjavascriptで作ってみた

# hit and blowとは
hit and blowとはa-zの文字を使用して
出題者が用意した答えを当てるゲームです。

回答者がa-zの文字を入力し、
答えと同じ順番にあればhit
答えと違う順番だけど、答えに含まれていればblow
というゲームです。

## コード
### html
“`.html

判定
クリア

入力した文字:

HIT:

BLOW:

【個人開発への道①】初心者が、Nuxt.jsでFullCalendarを使ってカレンダーページ作りにチャレンジ！結果は・・・！？

こんにちは！たわちゃんです:sunny:

私は３ヶ月前からプログラミングを学び始めた初心者ではございますが、
プライベートでサービス開発にチャレンジしようとしております・・・！

その開発までの道のりを、これからQiitaにちょこちょこ書いていこうかなと思うので、
さりげな～く応援よろしくお願いします！:relaxed:

#構想中のサービス
現在、考えているのがこちらのサービス！

私の兄はマジシャンをしているのですが、常日頃から告知や宣伝活動に困っているのを見てきました。

そこで、兄のような芸人さん、さらには個人経営の店主さんを対象に
告知専用サービスを作ろうと考えました！

主な機能は３つ
（１）__スケジュールの管理・共有URLの発行__
（２）__SNSで簡単にシェア！__
（３）__告知用の画像もラクラク作成できる

vuejs-datepickerで動的に多言語対応する方法

# 概要
ユーザーが設定している表示言語設定に応じてvuejs-datepickerの表示言語を動的に変更するという実装をする機会があったので、念のためメモしておきたいと思います。。

#困ったこと
親コンポーネントとvuejs-datepickerを使用している子コンポーネントが存在し、親コンポーネントから渡すpropsに応じて子コンポーネント側で使用しているvuejs-datepickerの表示言語を変更すること

#解決策
全ての言語を配列としてimportし、dataオブジェクトの任意のプロパティの値として指定しておきます（下記コードの場合、all_langという名前でimportし、dataオブジェクトのlanguagesというプロパティの値としてall_langを指定しています）。
そして親コンポーネント側から使用したい言語を文字列でpropsとして渡し、その文字列をもとにlanguagesの配列から使用したい言語オブジェクトを抽出し、それをdatepickerのlanguageプロパティに指定すれば解決しました！こんな書き方があるんだ。。
ちなみに下記の場合、親コンポーネ

【JS・TS】コーディングTips集

# 概要

JavaScript/TypeScriptを書く中で、自分自身の気づき、他の方から頂いたアドバイスをメモとして残してきました。
その中で、使用頻度が高そうで、知っていれば誰でも簡単に実践できる物を抜粋して記事にしました。
ですので、主にJavaScript/TypeScriptの使用歴が浅い(プログラミングの歴が浅い)方向けに少しでも参考になれば幸いと考えています。

(※JS/TSに限った事では無いものも含まれます。また、ある程度JavaScript/TypeScriptを書き慣れた人には当然の事かと思いますが、暖かい目で見守ってくださればと思います。)

# 早期returnを利用する

条件を満たす場合に直ぐに return することで、コードのネストを減らし、コードの見通しを良くするテクニックです。
簡単な例としまして下記のコードが、

“`tsx
const checkNumber = (num: number) => {
if (num === 2) {
return “2です。”
} else {
return “

整数に3桁区切りカンマを入れる (JavaScript)

# 結果

処理前

“`
123456789
“`

処理後

“`
123,456,789
“`

# 方法

https://github.com/HubSpot/humanize を使う

# 準備

“`sh
yarn add humanize-plus
“`

# 実装

“`js
import Humanize from ‘humanize-plus’

let r = Humanize.intComma(123456789)
console.log(r) // 123,456,789
“`

Symbol from NEMのSDKを利用して暗号と署名検証を行う方法

今回はsymbol-sdkを利用してブロックチェーンを使わずに暗号化と署名検証を使う方法を説明します。

# 事前準備

### スクリプト埋め込み
“`js

(script = document.createElement(‘script’)).src = ‘https://xembook.github.io/nem2-browserify/symbol-sdk-pack-0.21.0.js’;
document.getElementsByTagName(‘head’)[0].appendChild(script);
“`

### ライブラリインポートとアカウント生成
“`js
nem = require(“/node_modules/symbol-sdk”);

alice = nem.Account.generateNewAccount(nem.NetworkType.TEST_NET);
bob = nem.Account.generateNewAccount(nem.NetworkType.TEST_NET);
“`
今回の暗号化や署名に使用するアカウントを生成し

css,js,html 備忘録

要素を上下中央に配置する方法

参考元：https://sole-color-blog.com/blog/532/

[JavaScript] thisを使用する理由

# 概要

フロントエンド初心者による学習忘備録。
本投稿ではJavaScript(jQuery)で使用する`this`についてまとめる。

## 環境

* jquery-3.5.1.min.js

“`html

“`

## thisを使用するメリット

メリットとして以下3点が主に挙げられる。

* 処理のパフォーマンス向上
* コードの流用
* 複数のセレクタを指定した場合の処理の切り分け

### パフォーマンス向上

jQueryの処理は`メソッドチェーン`として順に処理される仕組みであり、ブラウザは指定されたセレクタを手がかりにHTMLから要素を集めるが、`this`を使用しないとメソッドが実行されるたび毎回集めることになりCPUに負荷が掛かってしまう。

“`js
$(function () {
$(‘.test’).on(‘click’, function () {
$(‘.test’).css(‘color’, ‘#ebc000’);

#2【初心者】知識0からeclipseでWebアプリ（Webサイト）を作る．「 GitHubとEclipseを繋げて動的Webアプリを共同開発する」

#はじめに

前回の[#1【初心者】知識0からEclipseでWebアプリ（Webサイト）を作る．「 Webアプリを作る為の環境を構築しよう」](https://qiita.com/drafts/ba13d78aefe821600357/edit)では，EclipseをPCにインストールしてプロジェクトを作り，サーバーを立てて動かしてみた．
次に誰かと開発したり，自分の変更をオンライン上で管理する為にEclipseでGitHubを使用するための設定と，アップロード方法について書いていく．
使用するプロジェクトは[前回](https://qiita.com/drafts/ba13d78aefe821600357/edit)作ったものをそのまま使う．

環境一覧
プログラミングソフト：[Eclipse 2020](https://mergedoc.osdn.jp/)
JAVA SE 14
Tomcat 8.5.88
[Git for windows 2020 10月時点最新版](https://gitforwindows.org/) :version 2.28.0
[Git Hub](ht

ES2015（ES6）のモジュールについてまとめ

## そもそもモジュールって何？
まず前提として、アプリケーションはたくさんのプログラムから成り立っています。
この全てをひとつのファイルで管理するとファイルの肥大化を誘発させてしまいます。

ファイルの肥大化による弊害は次のようなものがあります。

* コード量が多くファイルが縦長になる
* ぱっと見どこに何が書いてあるのかわからず、ものすごく見にくい。
* 先に定義した変数を上書きしてしまうことによるバグの発見が遅れる

そのため、規模の大きなアプリケーションはファイルの肥大化による弊害を防ぐためにひとつのファイルにすべてのコードを記載するのではなく、複数のファイルに分けます。この分割したファイルひとつひとつをモジュールといいます。一般的には機能ごとにコードを分けてファイル名を「機能名.js」のように命名するようです。


### モジュール

javascriptのLocalStorage を使ってお気に入り機能を自作してみた ①準備編

# どうも7noteです。プラグインより多機能なお気に入り機能を作成。まずは準備編。

wordpressの投稿にお気に入り機能を実装するため、プラグインの導入を検討したのですが欲しい機能がついているプラグインがなく、

***「プラグインがないならもう自作で実装してしまえ！」***

と思って、javascript開発経験が浅い頃に3日かけて作成したお気に入り機能です。
書き方など至らぬ所多々あるかもしれませんが、優しく見守ってください。

## この記事を読む前に

できるだけド素人でもわかりやすく説明していく予定です。
ですが、本当に1から始めると日が暮れてしまうので、最低限WEBに関する事をある程度理解をされている以下のような方向けの記事になっています。

・HTML・CSS・javascriptの初歩的な書き方を知っている人
・WordPressがなんとなくどういうものか知っている人（wordpressに応用しなければ別にOK）
・ゴリゴリのプロじゃない人

### よく出てくる用語集

|単語・用語|説明|
|:–|:–|
|Wordpress|代表的なCMSの1つ

【React+TypeScript】GETエラーを感知して、404ページに遷移させる

めちゃめちゃ久しぶりの投稿です。
先日までコミットしていたプロジェクトの中で自分のリサーチとスキルではどうにもできなかった404ページへのリダイレクトの処理について。
先輩に教えていただいたので備忘録として書いておきます。
# 今回実現させたかったこと
今回実現させたかったのは、大きく分けて2つです。

– **/hogehoge/token**のようなURLが叩かれたときにtokenが正規のものか判断する
– 正規のものである場合、tokenが合致するデータをデータベースからGETする
– 正規のものでない場合、404ページへリダイレクトさせる

これらをReact+TypeScriptのプロジェクト内で実現させるというタスクでした。

# 行き詰まった点
**「tokenが正しいかどうかとか、どうやって判断したらいいん。。。」**
大きくいってこの点でした。
今までHTMLとCSSでやってきたので、もう何を使えばいいんかもわからずどう調べればいいのかも分かりませんでした。

あとは今までリダイレクトさせる処理は**.htaccess**で記載してたので、それ以外でどうやった手法があ

javascriptでitemの件数を指定し、シャッフルする関数

忘備録です。
既に設置してあるliが多い時、無理やり件数を絞ってシャッフル表示がしたい時用です。

var shuffleItem = function (max) {
var randomContent = [];
i = 0;
$(‘.itemList .item’).each(function() {
randomContent.push($(this).html());
});

randomContent.sort(function() {
return Math.random() – Math.random();
});

$(‘.itemList .item’).remove();

for (i = 0; i < max; i++) { $('ul.itemList').append('

‘ + randomCo

E2Eテストの始め方 番外編 – reg-cliで差分比較 –

今回は、TestCafeで撮影したスクリーンショットの差分比較をreg-cliを使って実装していきます。

スクリーンショットについては↓を参考にしてください。
[E2Eテストの始め方 TestCafe③ -スクリーンショット編-](https://qiita.com/natsu_mikan/items/60b51a0d87dcc98e7e9b)

#reg-cli(reg-suit)とは
Visual Regression Testingのためのコマンドラインインターフェイスです。
画像は別途用意する必要がありますが、アサートする画像を指定するだけで現在の画像と以前の画像を比較し、差分のHTMLを作成してくれます。

2つの違いとして、
**reg-cli**：２つの画像(ディレクトリ)を指定し実行すると分かりやすい差分HTMLレポートを生成するコマンドライン。
**reg-suit**：reg-cliの進化版みたいなものでreg-suitの内部でreg-cliが使われています。正解データや差分レポートを自動的にクラウドストレージ(AWS S3, Google Cloud Stor

【ReactNative】タイムゾーン無し文字列をDate()に渡した時の挙動がiOS14から異なる件

# 概要
`iOS14`の公開に伴い`react-native`で開発したアプリの挙動を確認していたら、何やら日時がずれているのを発見しました。
細かく処理を追跡していったところ、どうやら`Date(string)`の挙動が若干変わったようです。

***※個人ブログで同様の記事を書いています。今後追記があればそちらを更新していきます。***

– [ネコニキの開発雑記 | 【ReactNative】iOS14とそれ以前でタイムゾーン無し文字列のDate型コンストラクタの挙動が異なる](https://nekoniki.com/20201014_react-native_ios_date_constructor)

# 環境
– `react-native@0.63.1`
– `iOS14`
– `2020/10/14`時点の情報です(今後のアップデートで修正される可能性あり)

# コンストラクで文字列を渡している場合は注意
例えば以下のように文字列から`Date`型のコンストラクタを利用した場合です。
サンプル①は`ISO-8601`の拡張形式のタイムゾーンを指定していない形式です

JavaScript リロードしないと動作しない問題

## 記事の対象者
Railsアプリにおいて、JQueryを使用して投稿を分けて表示させるタブを実装。
実装したはいいが、リロードしないと正常に動作しない問題が発生、、。
Turbolinksはそのままに、解決する方法とその理由を示したいと思います。

他の記事で解決策はあったものの、「なぜ？」が解消されず附に落ちなかった為、
Rails定番の参考書「現場Rails」の引用と独り言を添えて、初学者向けの記事にしてみました。

初学者の為、解釈が間違っていれば、ご指摘頂けると幸いです。

##リロードしないと正常に動作しないタブ部分のjsファイルのコード

“`tab.js
$(function() {
let tabs = $(“.menu-tab”);
$(“.menu-tab”).on(“click”, function() {

.
(省略)
.

})

“`
コードは間違ってないはずだが、なぜかタブの切り替えができない。
他の記事で以下の解決策が示されていました。

##解決方法

以下のように、document.addEventListener(“turbol

eslint-plugin-prettier って generally not recommended だったのか

# 背景

手元のアプリで `npm audit` したら万単位で脆弱性がレポートされてきたので、そろそろ package-lock.json を再作成しようか…とやってみたところ、 prettier のルール違反が消えなくなってしまった。正確には、 prettier の警告にしたがって修正したら eslint(prettier/prettier) のエラーが出て、そちらを直したら元の prettier エラーになってしまうという conflict 状態。なんでかいな、とググったら…

# 「eslint で prettier 実行」はお勧めではない(generally not recommended)

見つけたのが [この記事](https://knote.dev/post/2020-08-29/duprecated-eslint-plugin-prettier/)。 Prettier 公式が

– prettier と eslint を組み合わせて使うなら、 prettier はコード・フォーマッターに、 eslint は静的解析に各々専念させたほうがよい
– eslint-pl

Javascript 関数宣言と関数式について

# ◎はじめに
Javascriptを扱う上で関数宣言と関数式のどちらを使用するべきか気になったのでまとめてみました。

# ◎関数の役割
Javascriptの関数は第一級オブジェクトと言われており、**変数への代入や配列、オブジェクト、関数に関数を持たせることができる**非常に柔軟なオブジェクトです。

→**頻発して使用する一定の処理を予め定義して、それを何度も使用する**ことが関数の役割です。

# ◎関数宣言とは
“`js
function fn(){
//処理
}
//このように関数を定義すること。

“`

# ◎関数式(関数リテラル)とは

“`js
const fn = function(){
//処理
}

const fn = () => {
//処理#
}
//このように関数を式として変数に代入することです。
“`

※基本的には、無名関数として使用します。

# 関数宣言と関数式の違いについて
①関数宣言では巻き上

Storybook v6.0新機能まとめ

#はじめに
https://storybook.js.org/releases/6.0
2020年8月10日にStorybook6.0がリリースされました。
5.3からアップグレードを行う際に調べた新機能や変更点などを自分なりにおおまかにまとめてみました。
基本的にはドキュメントや公式の記事に書いてある内容になるので詳しく知りたい方は[こちら](#参考)へ

**※間違いなどがありましたらご指摘お願いします。**

#Storybook 5.3からの主な変更点
##ざっくり
– セットアップが爆速でできるようになった
– ストーリーの再利用性があがった
– 複数のStorybookを一つにまとめられるようになった
– ドキュメントが充実

## Zero-config
公式がconfig書かなくていいよ！と言っている通り、セットアップが非常に簡単になりました。
具体的には以下になります。

– Typescriptのサポート
– Storybook Essentialsの登場

### Typescriptのサポート
Typescriptサポートが組み込まれました。これにより、プロジェ