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

Typescript ジェネリクス

Typescriptでは予め型を決めておく必要がありますが、ジェネリクスを使うと使用直前まで型を定義しなくて良くなります。
型が違う同じような機能をいくつも定義しなくて良くなるので、ソースコードの再利用性や保守性が増します。

以下では、ジェネリクスを使はない場合はstringとnumberの両方のクラスを用意しないといけないですが、ジェネリクスを使う場合は1つのクラスだけで機能提供できていることがわかります。

“`typescript:ジェネリクスを使わない場合
class useString {
constructor(public arrays: string[]) {}
print(value: string): void {
for(const array of this.arrays) {
if(array === value) {
console.log(`Yes you have ${value}`)
}
}
}
}

class useNumber {
constructor(public a

express.jsアプリをAWS CloudFormationでデプロイする

CloudFormationを使用してexpressアプリをlambda functionとしてデプロイ、API gatewayを通して公開する

## express.jsでアプリを作る

まず、ふつうにアプリを書く。ファイル名はapp.jsとする

“`js
// app.js
const express = require(‘express’);
const cors = require(‘cors’);
const app = express();
const port = 3000;

app.use(cors());

app.get(‘/’, (req, res) => {
console.log(req.method, req.url);
res.send({ status: true });
});

app.listen(port, () => {
console.log(`listening on http://localhost:${port}`)

RxJS公式Overview要約(備忘録)

僕もJavascript触り出したの最近で非同期処理という言葉を認識して勉強し出したのはこれがほぼ初めてなので勉強がてら書いていきます。間違っていることがあれば指摘してくれると嬉しいです。

## そもそも非同期処理って？
同期的な処理とは上から順に実行される処理です。反対に非同期処理とはクリックなどのイベントが起こるまで実行されない処理です。`document.addEventListner(“click”,()=>{console.log(“クリックされたよ！”)})}`などが非同期処理の典型例です。

## RxJSを使うと何が嬉しい？
非同期処理の流れがわかりやすく書ける。RxJSを用いないとコールバック地獄と呼ばれるIf文が複雑に絡み合った大変読みづらいプログラムになってしまう。

## イントロダクションを行う上でのローカル環境構築
クリックとかのブラウザに関するイベントのために一応説明しておく。ただし、１回しか使わないので飛ばしてもらっても問題ないです。他はVSCodeのデバッガーで動きます。
あとあとAngularで使いたいと思って勉強してるのでAngular上で実行し

なぜスクールはRubyを学習させるのか

#なぜJavaではなくRubyを推奨するのか
##結論
###挫折しにくく比較的理解しやすいから(参考文献豊富)
#実際に転職で求められるスキルとは
##レバテックでの言語別求人
##こんな感じでJavaが全体の約３５%と高割合を占めていて、PHPと合わせる全体の約５０%という結果となっています。
![kangaeruhito.png](https://qiita-

toioの磁気センサーを使って上に載せたものを検出する

#サマリ
本記事を読むと、下記の動画の様にtoio™Core Cubeの磁気センサーを使って、キューブの上に載せたものを検出できるようになります。しかもp5.toioを使用しているのでブラウザと磁石があれば、どなたでもお試しは可能です！

– 例1. ピコトンズの帽子の種類を検出する
– 例2. ゲズンロイドの紙工作の種類を検出する

#ゲズンロイド の工作物も判定出来ました。これは応用のしがいがあるな。 pic.twitter.com/5jpi3JpAGY

— Tetsunori NAKAYAMA | 中山 哲法 (@te

Reactコンポーネントの雛形生成を自動化するスクリプトファイルを作る

エンジニアにとって無駄な作業はストレス。
繰り返しの作業を自動化したい。

という事でコンポーネントファイルを自動生成するスクリプトを書いた。

#スクリプトファイルの使い方
まずは使い方から。
ルートディレクトリで

“`shell
bash ./etc/scripts/make-component-template.sh components Layout
“`
というように、ディレクトリ名とコンポーネント名を指定するだけ。

ルートディレクトリ直下に`components`ディレクトリがある事を想定しています。

#自動生成するファイル
`./etc/scripts/make-component-template.sh components Layout`を実行すると以下のファイルを生成します。

“`
compo

【JavaScript】すぐ命令してくる夫に困っています…


**『しかも、何度も同じことばかり命令するんです…..』**

“`javascript:夫
if (env === ‘test1’) {
if (os === ‘ios’) {
setUrl(‘https://aaa.example.com/apple’);
} else {
setUrl(‘https://aaa.example.com/google’);
}
} else {
if (os === ‘ios’) {
setUrl(‘https://bbb.example.com/appple’);
} else {
setUrl(‘https://bbb.example.com/google’);
}
}
“`

・・・

・・・

・・・

# 読みやすいコードを

JavaScriptの非同期処理とコールバック、Promiseについてまとめてみた

# はじめに
JavaScriptの非同期処理とコールバック、Promiseについてあまり理解できていなかったので、自分なりに調べてまとめてみました。
間違いがあればコメント頂けると幸いです。

# 目次
– そもそも非同期処理とは
– 非同期処理のサンプル
– コールバック(Callback)とは
– コールバック(Callback)の問題点
– Promiseとは
– Promiseの書き方
– 参考

# そもそも非同期処理とは
まず、Promiseを知る上で、必要な概念として、非同期処理があります。
非同期処理とは、「ある処理が実行されてから終わるまで待たずに、次に控えている別の処理を行うこと」です。
ちなみに同期処理とは、「ある処理が実行されてから終わるまで、次に控えている処理は待つこと」です。
具体的に非同期処理が必要とされるものとしては、以下の3種類があります。
1. ネットワーク経由のリクエスト(例えばAjax呼び出し)
2. ファイルシステム関連の操作(ファイルの読み書きなの)
3. 意図的に遅延された操作(例えばアラーム)

上記を例えば同期的に処理すると、
1.

kintone-rest-api-clientでゲストスペースを動的に判定してみる

# はじめに
kintone-rest-api-clientはとても便利ですが、kintone.api.url()を使うような感覚で、
動的にゲストスペースかどうかの判定が今の所できません。
自社用のカスタマイズであれば問題ないですが、配布を目的としたプラグインなどの場合に少々問題があります・・・。
なので動的に判定できるようにしてみます。

# 実装
早速実装していきます。
今回はレコード一括取得を例に進めていきます。

“`Javascript
function getAllRecords(){
return new Promise(async (resolve, reject)=>{
const guestSpaceId = await checkGuestSpace().catch(err=>{showErrorMsg(err)})
const prop = guestSpaceId ? {guestSpaceId} : {};
let client = new KintoneRe

[初心者向け]Vue.js 重要単語集

# Vue.js
– 簡単に言うと、ユーザーインターフェイスを構築するためのフレームワークのこと
– JavaScriptでDOMを操作するWebアプリケーションを構築するときに向いている
– DOMよりも先にデータが存在していて、それに合わせてDOMが構築される
– HTMLベースのテンプレート構文を使っているので、Vueインスタンスのデータと描画をDOMを宣言的に対応させることができる

## Vueインスタンス
“`javascript
var app = new Vue({
//下記などのオプションを記述する
})
“`
### el
アプリケーションを紐付ける要素のセレクタ

### data
アプリケーションで使用するデータ、オブジェクトや配列も登録できる

### computed
dataと似たように扱うことのできる、関数によって算出されたデータ、算出プロパティ

### mothods
このアプリケーションで使用するメソッド、コードを管理しやすくするために処理を分けたり、イベントハンドラなど細かな実装を担当する

## DOM
– JavascriptからHT

ReactHookFormの導入と簡単な使い方

## はじめに
今回はReactHookFormの導入と簡単な解説をしていこうと思います。
Reactの環境構築はできているものとします。一応、JavasciptとTypescriptの両方のコードを載せているので自分が使っている方を見てください。

参考：[ReactHookFormドキュメント](https://react-hook-form.com/)

## ReactHookFormとは
ReactHookFormでは、Form内のデータをStateで管理する必要が無くなり、onChangeなどによるレンダリング回数を劇的に減らすことができます。(useCallbackとかでも減らせるっぽい)
さらにバリーデーションも簡単に行うことができます。
早速やっていきましょう！

## 導入
VSCodeのターミナルなどで以下のコマンドを入力しましょう。

“`bash:VSCodeのターミナル
# npm
npm install react-hook-form

# yarn
yarn add react-hook-form
“`
これでもう使えるようになります。Typescr

Vue + WordPress + Heroku + S3でポートフォリオを構築する

# 1. はじめに
こんにちは。ツダと申します。私はカメラが趣味で、自分の写真のポートフォリオサイトを作成したいと思い、Vue.jsとWordpressを使って作成しました。

[Tsuda Work](https://tsudawork.com/)

この記事では、私がポートフォリオを作るうえで行ったことについて紹介させていただければと思っています。

# 2. 技術スタック

– Vue.js : @vue/cli 4.5.6
– WordPress : 5.5.1
– PHP : 7.3.5
– heroku : heroku/7.44.0 win32-x64 node-v12.16.2
– S3

## 簡単なシーケンス図（トップ画面表示時）

# 3. WordPress環境を整える
## 3.1 概要
今回のポートフォリオでは

動かして理解するasync/await

JavaScriptのasync/awaitを動かしながら理解したい人向けです。
Node.jsで実行できます。

“`javascript:async/await
test()

// awaitを使う時はasyncが必要
async function test() {
try {
const code = await f(true)
console.log(code)
await f(false)
} catch (err) {
console.log(err)
}
}

function f(ok) {
// awaitする関数はPromiseを返す
return new Promise((resolve, reject) => {
setTimeout(() => {
if (ok) {
// 正常終了
resolve(200)
} else {

?【Nuxt.js】Nuxt.jsプロジェクトをnpm run devしたらエラーが出て動かないときの解決法

## 環境
Windows 10
npm 6.14.6
Nuxt.js v2.14.6

## やりたいこと
Nuxt.jsプロジェクトをpullしてきてVSCodeのターミナルで`npm run dev`したら
いきなり大量のエラーが吐かれて実行できない、、、のでこれを解消する

“`powershell
PS C:\hoge\{プロジェクト名}> npm run dev

> {プロジェクト名}@1.0.0 dev C:\hoge\{プロジェクト名}
> nuxt

操作可能なプログラムまたはバッチ ファイルとして認識されていません。
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! {プロジェクト名}@1.0.0 dev: `nuxt`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the {your_project}@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is

jQueryを用いたその場編集機能の実装

#実現したいこと
編集ボタンを配置し、編集ボタンを押すと要素がテキストに切り替わり登録可能になるようにしたい。

# ソースコード
“`index.html

焼肉