- 1. setTimeoutを使って指定時間後に処理を行う際はスリープに注意
- 2. [Vue.js] ケバブケースとかキャメルケースとかパスカルケースとか
- 3. npm を使用して、誰かが書いたコードをリユースする方法
- 4. JavaScriptでinputのパスワードの黒丸のところを文字で表示させてみた！！
- 5. javascript : 2つの配列を比較して、差分（増分,減分）を取得
- 6. jQueryのバージョンを確認するには$.fn.jquery
- 7. NestJsのDB接続周りでハマった話
- 8. [JavaScript]input要素に入力した場所によって対応した場所に出力をする
- 9. focusイベントがキャンセルできない問題。
- 10. エラー解決 Javascript
- 11. 押すと色が変わるボタンの作り方を教えてください
- 12. 【GAS】YYYY/MM/DD/hh/mm/ssからUNIXタイムスタンプを生成する
- 13. 初心者によるプログラミング学習ログ 211日目
- 14. Rails (with sorcery)+ React でOAuth認証を実装してみた
- 15. 【最短サンプル】ブラウザのJavaScriptで、bitFlyerのAPIにWebSocket接続してビットコイン最新価格を次々と受け取る
- 16. JavaScript関数・引数・戻り値
- 17. React Hooksでインスタンスメソッドを実装する
- 18. ChatWorkのデータをcsvバックアップ．ついでにSlackへ・・・
- 19. stage.mouseXの注意点
- 20. 【Nuxt.js】pagination導入編：まずは大枠を理解しよう！
setTimeoutを使って指定時間後に処理を行う際はスリープに注意
setTimeoutで数秒ではなく数十分など長めに設定した場合に、上手く挙動しなかったことがありました。
##setTimeout
指定時間後にJavaScript関数を実行するsetTimeout。
ページを開いたまま20分経過したら自動で指定ページに遷移させようとしました。“`javascript
setTimeout(function(){
window.location.href = ‘https://xxx.ne.jp/’;
}, 20 * 60 * 1000);
“`普通思い浮かぶであろうこのコードでなんの問題もなく処理が動きそうです。（と思ってました…）
ただ、この**setTimeout**はAndroidやiOSといったスマホ・タブレット端末のWebブラウザでは注意する必要があります。
スマホ・タブレット端末では、アプリがバックグランドに入る**スリープの概念**があり、この状態では**setTimeout**の呼び出し（JavaScriptの実行そのもの）も保留されてしまいます。
スリープ中に止まったタイマーが完了するのは、1分後かもしれな
[Vue.js] ケバブケースとかキャメルケースとかパスカルケースとか
Vueでのケースの書き方って場所によって何がいいか若干悩みますよね。（私だけ？）
なので、まとめてみました。## そもそも○○○ケースって？（復習）
一言で言うと「クラス名や変数名等の名前の付け方の総称」
覚えておくべきケースをざっと説明すると。。## ケバブケース
文字と文字の区切りを`-`で表現するやり方。「チェインケース」とも言う。
ケバブのお肉をぶっさしている感じからきているとか。:meat_on_bone:“`
this-case-is-god
“`## キャメルケース
文字と文字の区切りを大文字で表現するやり方。
よく見るやつです。ラクダのこぶですね。:camel:“`
thisCaseIsGod
“`## パスカルケース
文字と文字の区切りを大文字で表現＋先頭の文字も大文字にする。
それもそのはず、「アッパーキャメルケース」とも呼ばれるのだから。
これもよく見ますね。“`
ThisCaseIsGod
“`## どこにどのケースを書くべきか？
### 基本的に下記の方針でOK– コンポーネントは「パスカルケース」
– Ja
npm を使用して、誰かが書いたコードをリユースする方法
## npmで誰かが書いたコードを使用する
NPM(Node Package Manager)は、誰かが書いたコードを使用できる便利な管理システム。
自分で1から作るんじゃなくて、誰かが書いたコードを使用できるなら、それをリユースして無駄な時間を削減しようっていう考え方を元に作成された管理システム。
https://www.npmjs.com/
## npm を使用するまでの手順
今回は intro-to-node のフォルダ内のindex.jsというファイルでnpmを使用できるようにします。
### npm を初期化する
コマンドラインでちゃんと intro-to-node フォルダに移動しているか確認してください。
JavaScriptでinputのパスワードの黒丸のところを文字で表示させてみた！！
##はじめに
某プログラミングスクールで、メ○○リのコピーサイトを作成しました。
チームメンバーが実装していた、ボタンを押すとパスワードの黒丸を文字として表示させる
実装を今日はやっていきたいと思います！と思ったのですが、
すでに下記の参考記事で簡単に作成できました。
[パスワード表示時にマスキング有無を選択できるようにする方法](https://ajike.github.io/password-masking/)なので、自分のメモ用で記載していきます。
ちなみにこんな感じのものを実装していきます。
##解説
1.まずパスワードを文字として表示していきます。
(1
javascript : 2つの配列を比較して、差分（増分,減分）を取得
proxy で配列の変更を検知したあとの処理で、「変更前の配列」と「変更後の配列」を比較したくなりました。
以下、2つの配列を受け取って、増分値と減分値の配列をオブジェクトで返す関数です。
“`javascript
// 配列の差異を取得する処理
const get_difference = ( _old_arr, _next_arr ) => {const additions = _next_arr.filter(
_next => _old_arr.every(
_old => _old !== _next
)
);const subtractions = _old_arr.filter(
_old => _next_arr.every(
_next => _old !== _next
)
);return {
additions : additions, // 増えた分
subtractions : subtractions // 減った分
jQueryのバージョンを確認するには$.fn.jquery
# コンソールに貼る
“`javascript:コンソール
$.fn.jquery
“`# このように表示される
“`javascript:コンソール
$.fn.jquery
“1.12.4”
“`
NestJsのDB接続周りでハマった話
# 何を作成する？
Nest.jsで環境ごとにデータベースの接続先を分けるために，接続情報を実行環境の環境変数から非同期で取得し作成する．
# 環境
– Node.js v12.14.1
– Nest.js v6.7.2
– TypeORM v0.2.22
– Postgresql v11.6# 実装ログ
### 必要最小限の実装
参考）[Nest.js Document > TECHNIQUES >Database](https://docs.nestjs.com/techniques/database)
##### ライブラリインストール
TypeORM, Database Driver (Postgresql)をインストールする．
“`
$ npm install @nestjs/typeorm typeorm pg
“`##### DB接続情報を定義
**app.module.ts**にデータベースの接続情報を定義する．
“`typescript
import { Module } from ‘@nestjs/common’;
im
[JavaScript]input要素に入力した場所によって対応した場所に出力をする
## メモ
開発メモ“`html:index.html
練習
```1.bitFlyerにWebSocket接続して
2.価格のチャンネルを購読(subscribe)す
JavaScript関数・引数・戻り値
## 関数
```main.js
const kansu = function(){
console.log("関数がうごいた！");
}
kansu();
``````console
関数がうごいた！
```##アロー関数
```main.js
const arrawKansu = () =>{
console.log('アロー関数が動いた!');
}arrawKansu();
``````console
アロー関数が動いた!
```## 引数
```main.js
'use strict';
const eat = (name) =>{
console.log(`飯の名前${name}`);
}eat('カレー');
eat('チャーハン');
eat('白飯');
``````console
飯の名前カレー
飯の名前チャーハン
飯の名前白飯
```##複数の引数
```main.js
const person = (firstName,lastName) =>{
console.log(`「姓」:${firs
React Hooksでインスタンスメソッドを実装する
コンポーネントの特定の動作を外部から呼び出すための方法です。関数コンポーネントでも実装できました。もはやクラスではないのでインスタンスメソッドと呼ぶのは正確ではないかもしれませんが…。
propsの値変更で多くのことは実現できるので出番は限られてくると思いますが、入力フィールドにフォーカスする、CSSアニメーションを再生するといった場合には有効だと思います。クラスを使わずに実装する際の備忘録としてまとめました。
## メソッドの実装（子コンポーネント）
[useImperativeHandle](https://ja.reactjs.org/docs/hooks-reference.html#useimperativehandle)フックとforwardRefを組み合わせて実装します。この例の場合、`インスタンス.doSomething()`が呼ばれたタイミングでログが出力されます。```jsx
import React, { useImperativeHandle, forwardRef } from 'react';function MyComponent(props,
ChatWorkのデータをcsvバックアップ．ついでにSlackへ・・・
先に謝罪しておきます．
Qiita初投稿です．
読みづらい点あると思います．
ごめんなさい．## Chatworkのデータをcsvでバックアップしておきたい！
なんらかの事情があって，ChatWorkのデータをcsvで手元に置いたり印刷したい！
そんな人もいるのではないでしょうか？**まぁ，だいたいエクスポート機能あるやろ．．．．**
と思っているあなた．公式ページのよくある質問
https://help.chatwork.com/hc/ja/articles/203352770-%E3%83%81%E3%83%A3%E3%83%83%E3%83%88%E3%81%AE%E3%83%AD%E3%82%B0%E3%82%92%E4%BF%9D%E5%AD%98%E3%81%A7%E3%81%8D%E3%81%BE%E3%81%99%E3%81%8B-%E5%8D%B0%E5%88%B7%E3%81%AA%E3%81%A9->恐れ入りますが、現時点ではチャットのログの保存機能や印刷機能はありません。
>なお、エンタープライズプラン、およびKDDI Chatworkにはチャ
stage.mouseXの注意点
#概要
createJSでのcanvasを使ったゲームを作成する際に```
canvas = document.getElementById("canvas");
// stage作成
stage = new createjs.Stage(canvas);
createjs.Ticker.addEventListener("tick", stage);
```
上記のようにステージを作成することが一般的
このような状況で画面上のタップした座標を取得したい場合に```
touchPosX = stage.mouseX / stage.scaleX;
touchPosY = stage.mouseY / stage.scaleY;
```
上記コードで取得できる。
PC上では問題ないが、
実機対応のためにタッチ操作を有効にした状態で```
// タッチ操作を有効にする
createjs.Touch.enable(stage);
```
画面に配置したcanvasの上下左右の領域の端をタップすると
stage.mouseX, stage.mouseYの値が最後にタップした座標に固
【Nuxt.js】pagination導入編：まずは大枠を理解しよう！
# 前置き
ページネーションをやっていきます。
いくつかに分けて書いていきます。
今回は導入編として
どんな形でつくるかの大枠を説明?いつも通り
超簡潔に説明できれば良いので
まずはこれだけ作りましょう??
…
は？これだけ？…
そうです?笑表示はこれだけですが、
導入としてこちらをやります。
**・ページ遷移のmethods
・現在いるペ
