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

jestでモックしてみたメモ

レガシーコードのテストをjestに移行していた時に、
jestだとどうやってモックしたり、追跡したりするんだ？となったのでその時のメモ

# 最初に
相当アホなところでハマったのだが、jest はnamespaceをそのまま読み込むため以下のようの読み込まないといけない。

“`typescript
import ‘jest’ // OK

import jest from “jest” // NG

jest.xxxx()
“`

# 特定の関数をモックする
関数にもろもろについてモックの仕方です。

## テスト用のモック関数の作成

“`typescript

const mockFunc = jest.fn().mockImplementation(() => return “mock func”);
console.log(mockFunc()); // mock func
“`
関数自体のモックは jest.fn()に集約されており、単純に何か値を返すのみの関数は mockImplemantionの引数で定義します。
また、mock関数の引数や、どういった値を返した

Javascript基本集(2)~配列~

#Javascript基本集（配列）

####自分の学習用です

##配列宣言
配列の宣言には2種類の方法がある。

①　配列コンストラクタ「Array」を使う方法
　~　「new」を使ってArray()の引数へ格納したい文字列を設定する　~

②　配列リテラル「[ ]」を使う方法
　~　[]を使ってそのまま文字列を設定する　~

“`js
//①配列コンストラクタの例
var array1 = new Array(‘いぬ’, ‘さる’, ‘きじ’);

//②配列リテラルの例
var array2 = [‘いぬ’, ‘さる’, ‘きじ’];

console.log( array1 );
console.log( array2 );
“`

実行結果

“`js

[“いぬ”, “さる”, “きじ”]

[“いぬ”, “さる”, “きじ”]
“`
　　
　　
コントラクタとリテラルでの相違点

“`js
var array1 = new Array(5);
var array2 = [5];

console.log( array1 );
console.log(

モーダル、SPのメニューが表示されたときだけ中の要素をスクロールさせる

## モーダル、SPのメニューが表示されたときだけ中の要素をスクロールさせる

※覚書メモです

以前[jQueryでモーダルやSPのメニューを表示したときに背景を固定する記事](https://qiita.com/TAO_TAO_/items/fc8c8fefed95c55c822f)を載せたことがありました。
しかしそれから数年たって、そんなことをしなくても簡単に実装できちゃういいものを見つけることができました（教えてくださった同僚には感謝です）。

## body-scroll-lock

▽github
https://github.com/willmcpo/body-scroll-lock

▽npmjs
https://www.npmjs.com/package/body-scroll-lock

指定した要素だけスクロールができるようになるというライブラリ。
androidもiosも難なくできました。
まさにそれがしたかったこと…！

***

### 以下使い方
今回もyarnを使います。
yarnじゃなくてもnpmでも大丈夫です（インストールするときのかき方が違うの

結婚式の招待にLinebotを導入してみた話

## 経緯
いつもはITコンサルティングの会社で働いているTsugaです。
この度結婚することになり、妻と共に式の準備に勤しんでいます。

準備をする中で、ちょっとこの風習は古いんじゃないのか？と思うことがいくつかあったので、自分たちの式では少し工夫をしてみました。

## 結婚式のここがイケてない
### 1 招待状
未だに結婚式の招待状は手紙で用意することが前提になっています。

これを業者に丸っと外注すると、非常にお値段的に高くつきますし、自分たちで用意するとなると、それはそれで大変でやりたくありませんでした。

何より、手紙をもらった側も、返信の際は[暗黙のしきたり](https://www.weddingpark.net/magazine/8225/
)に従って返さねばならず、ちょっと億劫です。

あと、招待状でしか会場の情報や開始時間の情報は送られてこないので、
自分なんかは管理が苦手なので当日になって焦って探したりします。

もう、普通に紙で管理する必要が全くないので電子化したいなと。

### ２ ご祝儀
これ、自分が参列する時も悩みの種です。

銀行って仕事時間中にし

(箱だけドラフト)【最短・脳死】 画像認識AI LINE BOTの作り方

■目次
•はじめに
•Line Botアカウントを作ろう
•使いたAIを見つけよう
•Javascriptコード(フュージョン！！！)
•Line botへの接続
•(参考)ＡＩの作り方

○はじめに
さて、できるだけ簡単に画像認識AI Botを作りましょう！
尚、AIと言ってもAIメーカーですので悪しからず。

①Ｌｉｎｅ　ｂｏｔアカウントを作ろう！
■@n0bisukeさん記事
1時間でLINE BOTを作るハンズオン (資料+レポート) in Node学園祭2017 #nodefest – Qiita
-LINE developersのサイトにアクセスし、ログインしましょう。
-Messaging APIのチャンネルを作りましょう！
-Botと友達になろう(QRコード)

②ＡＩメーカーで画像認識ＡＩを見つけよう。
AIメーカーにアクセスしてLine BotにしたいAIを見つけましょう！
-見つけたAIから①id(3~4桁)②APIキー③AIに登録されているラベルをメモ

③Javascriptコード
鋭意作成中(すみません)

④Line botへ接続しよう
■再び@n0bi

create-react-appを使わない構成でGAEにデプロイする

create-react-appを使わずにインストールするための記事はたくさんありましたが、デプロイを行う方法が見当たらなかったため、実際にやってみました。
create-react-appを使わない意図としましては[脱create-react-app](https://qiita.com/ohs30359-nobuhara/items/bdc06b2db1bef7af2439)がわかりやすいかと思います。

# 参考
今回は下記を参考に環境構築およびインストールを行いました

[作りながら学ぶ React 入門](https://github.com/yuumi3/react_book/blob/master/docs/install_mac.md)
[Cloud BuildでReactアプリをGAEにデプロイする](https://code-log.hatenablog.com/entry/2019/12/03/210055) ※今回はCloud Buildは使用していません。

# 構成
[作りながら学ぶ React 入門](https://github.com/yuumi3/

ES6(JavaScript)の基礎を押さえる

#ES6とは

ES6はJavaScriptの新しいバージョン。
現在は多くのブラウザが対応していないため、ES6で書いたコードを動かすためにはES5(1つ前のバージョン)への変換が必要になる。
この変更を”トランスパイル”と呼び、Babelというツールを利用してトランスパイルを行う。

#letとconst

letで変数を、constで定数を定義できる。
letは再代入が可能であるのに対し、constは再代入が不可能。

letでの変数宣言

“`javascript:
let name = ‘Jonh’;
console.log(name); // => Jonh

name = ‘Kate’; // 再代入する
console.log(name); // => Kate
“`

constでの変数宣言

“`javascript:
const name = ‘Jonh’;
console.log(name); // => Jonh

name = ‘Kate’; // 再代入するとエラーになる
“`

#テンプレートリテラル

バッククオートで文字列を囲むと、`${}`

Chromeのautocompleteはユーザーのアクションがあってからはじめて値が入力される

タイトルを換言すると、
**ページ表示直後、autocompleteされた値はJavaScriptで取得できない。**
# 何の話をしているのか
たとえば、よくあるログインページ。
メールアドレスとパスワードでログインするフォームだが、
以前ログインしたことがあれば、ブラウザが自動でメールアドレスとパスワードを入力してくれる。これがautocompleteだ。
上の画像は、Google Chromeでログインページを開いた直後に、autocompleteしてくれたときのスクリーンショットだ。

この状態で、**input要素にはすでに値が入力されているようにみえるが、実はまだ入力されていない**。
何を言っているのかわからねーと思うが、おれも何が起きているのかわからなかった…

“`html

Amplify+ReactでCRUDアプリ作成RTA(Any%)Part.1

amplify+reactでアプリ作成RTAやっていきます。
当方基盤エンジニアです。(ただ、ハッカソンでアプリ作成経験ありです。)
はい、よーいスタート

#レギュレーション(又の名を前提)
– AWSに乗っかるのでamplify利用(前も使ったから)
– 面倒なので認証なし(前はCognitoとか実装した)
– GraphQLを使いたい(バックエンド考えるの大変だからね。)
– 必要機能はCRUD(わかりやすさ重視)
– 計測期間はreactの雛形作成からデプロイして初回アクセスまで
– Google先生は多用する。
– 失踪しない

###イメージ図

1.Create画面

2.一覧表示

【Sass】【Javascript】CSSアニメーションとローディング画面【おまけのRails】

ポートフォリオにローディングアニメーションを実装をしたので、備忘録をつらつらと。

#Sassでアニメーション
CSSをもっと便利に使えるSassを使って、簡単なアニメーションをコーディングしました。

以下がデモ動画。

Sassを使ってこんな感じのローディングアニメーション作りました〜。

ポートフォリオにも実装完了！ pic.twitter.com/0LAQzVcxzh

— hukushima (@hukushima_nem) March 26, 2020