- 1. Postman Pre-request After-request Scripts~UUID作成~Timestamp取得~SHA256変換
- 2. 【Nuxt.js】Nuxt実践編：layout
- 3. Jestでよく使うメソッドたち（主にvue-test-utils）
- 4. ReactWebAppの新規作成
- 5. jsでのDOM要素の追加をjQueryで書き換える
- 6. 世界初！「ラブライブ！」と「ワイルド・スピード」の聖地を教えてくれるLINEbot！
- 7. Cloud Functions for FirebaseでNode.js 12を利用する方法
- 8. vue.jsとaxiosのCDNのみでQiitaAPIを呼び出し自分の投稿を表示させる方法
- 9. Node.jsでGoogle Driveにファイルをアップロードする (Google Drive API v3)
- 10. React + useLatest: 非同期の処理が実行されたとき最新の状態を得る
- 11. Node.jsでGoogle Drive上のファイルをダウンロードする (Google Drive API v3)
- 12. [javascript]要素に対してなぜ[0]を付ける？
- 13. JavaScript初心者が引っかかったthisのスコープ、1+”1″、==と===の違い、undefinedの判定についてまとめる
- 14. 【JavaScript】本日未明、[ async – await ]さんが死体で発見され…
- 15. TECH CAMP 11日目~15日目(8/17~8/21)分
- 16. スコープ-JavaScript-クロージャー
- 17. JSからTSへの移行ツール、ts-migrationを試してみた
- 18. 【DOM操作】setAttribute
- 19. 【ES6】innerHTML【DOM操作】
- 20. use-animate-presenceを使ってReactのマウントとアンマウントのアニメーションを簡単に作る
Postman Pre-request After-request Scripts~UUID作成~Timestamp取得~SHA256変換
#はじめに
Web APIをテストするにはPostmanはよく使われていますよね、前はほとんど簡単なテストなので直接Requestを投げてResponseをもらうだけです。
最近はちょっとだけ複雑なテストをやってRequest前後は簡単なスクリプトを実行する必要があります、唯一なUUIDや、今現在のシステム時間を取得など。またはサーバーのTokenを取得した後に次のRequestでセットする。#Postman画面
❶はPre-requestの書く場所
❷はAfter-requestの書く場所
#Pre-request Scripts
###UUID作成
❶番Pre-requestのタブに下記のスクリプトでvar uuid = require(‘uuid’);
postman.setEnvironmentVariabl
【Nuxt.js】Nuxt実践編：layout
? この記事はWP専用です
https://wp.me/pc9NHC-AQ# 前置き
layoutの実践編です??
基礎は文法編でご確認ください?
https://wp.me/pc9NHC-A4タブレット以下のサイズになったら
ハンバーガーメニューを表示させましょう?
Let’s try!
# 構成を考える
まずは全体の構成をイメージしましょう??
Headerはlayouts/default.vueで固定
タブレット以下でメニューの切り替えをするから…ticktack…
大体のイメージはできましたか？?
それではまずディレクトリ から
まとめてみましょう！⬇️
## ディレクトリ
“`bash:file
assets/
–| scss/
—-| _variables.scss
—-| reset.
Jestでよく使うメソッドたち（主にvue-test-utils）
# はじめに
この１年TDDで開発してきて知識やノウハウが溜まってきたので備忘録として書いていきます。
以降随時更新予定です。（2020/08/26）## 基本的なテスト（htmlのタグが存在するなど）
以下のようなvueファイルがあったとき“`vue:index.vue
“`
以下のようなテストが書ける“`javascript:index.spec.js
// テスト対象をインポート(インポートした変数はpascal caseにするらしい)
import Index from ‘index.vue’
// vue-test-utilから必要なプロパティをインポート
import { shallowMoun
ReactWebAppの新規作成
### ReactWebAppの新規作成
初心者の中の初心者向けです。そんなことも知らなかったのかとか言わないでください。
create-react-appを使わず、react-appをどう作ればいいのかについて。これについては他の方がすでに記事にしているが、僕にはいまいちよくわからなかったのでなるべくシンプルにまとめてみました。
この記事がどこかの誰かの役に立つことを願って。
ここで重要なのがWebpackの存在。
Python(import hoge from ‘hoge’)とかprogateのreactなどとかでは、当たり前のように、`import hoge from ‘hoge’`や`const hoge = require(‘hoge’)` と書いてソースコードを分割するが実際には、webブラウザのjsには他のプログラムを読み込む機能はないので、うまく行かない。
そこでWebpackやブラウザリフィルなどを使って`require`や`import`などの単語がソースコード上で出てきたら、それらのソースコードを探してきて、読み込むことによって、`require`
jsでのDOM要素の追加をjQueryで書き換える
jsで書いたあとにjQueryでの書き方を知ったら、非常に見やすくて感動したので。
“`example.js
//親要素
var parentdiv;//jsべた書き
var element = document.createElement(“p”);
var text = document.createTextNode(“TEXT”);
element.appendChild(text);
element.setAttribute(“id”, “identifier”);
parentdiv.appendChild(element);//jQuery
var $element = $(‘‘, {
id: ‘identifier’,
text: ‘TEXT’
});
parentdiv.appendChild($element[0]);
“`“`result.html
TEXT
“`
世界初！「ラブライブ！」と「ワイルド・スピード」の聖地を教えてくれるLINEbot！
「ラブライブ！」大好き！「ワイルド・スピード」も大好き！
そんな欲張りさん向けにLINEbotを作りました。よかったら最後までご覧ください♪#作品の背景
聖地巡礼が好きな私。ロサンゼルスにワイスピの聖地巡礼に行きたいと考えているものの、コロナで旅行も行けず・・・。「ワイルド・スピード」シリーズは、スピンオフも含めて、これまでに9作品上映されているのですが、
3作目となる「ワイルド・スピードX3 TOKYO DRIFT」は、なんと東京が舞台！東京なら巡礼できる！と思い、__ワイスピ聖地巡礼bot東京版を作ることにしました！！__
ところがどっこい！！
意気揚々と調べたものの、CGで作られていたり、すでに取り壊されていたりと、聖地情報が希薄・・・。泣これではbotとして成り立たないので、大好きな「ラブライブ！」と組み合わせ、__世界初のコラボレーション__を実現しました。
#デモ動画
完成したものがコチラです！
位置情報を送ると、最寄りの聖地を教えてくれます。Cloud Functions for FirebaseでNode.js 12を利用する方法
[公式ドキュメント](https://firebase.google.com/docs/functions/manage-functions?hl=ja)の「**ランタイム オプションを設定する**」の項目には Node.js のバージョン 12 が使えることが書かれていますが、その利用方法までは書かれていなかったのでこの記事で説明します。
—
一見、ドキュメントにあるように
“`
“engines”: {“node”: “10”}
“`の箇所を`12`とすれば動きそうですが、ここに書いても動作しません。
Node.js の 12 を利用するためには、[firebase-tools](https://github.com/firebase/firebase-tools)のバージョンを`8.6.0`以上に上げたうえで`firebase.json`に`”runtime”: “nodejs12″`を指定しましょう。
“`
{
“functions”: {
“runtime”: “nodejs12”
}
}
“`参考：[firebase/fir
vue.jsとaxiosのCDNのみでQiitaAPIを呼び出し自分の投稿を表示させる方法
自分が処理を記述するときに「CDNのみで」という明示的な記事がなかった為、作成してみます。
CDNだけで簡単にQiitaから記事を取得できます。
## CDNの読み込み
vue.jsとaxiosを使えるようにHTMLファイル内に下記２つのurlを貼り付けます。“`html
“`## 結果を受けとる場所を作成する
data:に取得したデータを格納する場所を記述します。“`js
data: function() {
return {
infoAll: {}
}
}
“`## axiosでqiitaAPIに接続する
methods:に処理を記述していきます。“`js
methods: {
getAPIs: function() {
Node.jsでGoogle Driveにファイルをアップロードする (Google Drive API v3)
Google Driveへのファイルアップロードも試してみます。
* 参考記事
* [Node.jsでGoogle Drive上のファイルを削除する (Google Drive API v3)](https://qiita.com/n0bisuke/items/a1b39635029242f31713)
* [Node.jsでGoogle Drive上のファイルをリネームする (Google Drive API v3)](https://qiita.com/n0bisuke/items/dcc7be337a555b018b19)
* [Node.jsでGoogle Drive上のファイルを指定フォルダに移動する (Google Drive API v3)](https://qiita.com/n0bisuke/items/8f108408a9e1067b9225)
* [Node.jsでGoogle Drive上のファイルを複製（copy）する (Google Drive API v3)](https://qiita.com/n0bisuke/items/6d73bb6e1
React + useLatest: 非同期の処理が実行されたとき最新の状態を得る
非同期の処理が実行されたとき最新の状態を得るためのフック`useLatest`のご紹介です。
# 関数がつくられたときの状態を保つのがReactの原則
Reactの「コンポーネント内に書かれた関数からは、その関数が作成された時の`props`や `state`が『見え』」ます(「[関数内で古い props や state が見えているのはなぜですか？](https://ja.reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function)」原文:「[Why am I seeing stale props or state inside my function?](https://reactjs.org/docs/hooks-faq.html#why-am-i-seeing-stale-props-or-state-inside-my-function)」)。外から勝手に書き替えられることによるバグが防げるので安心です。もっとも、非同期の処理では、関数が実行されたときの最
Node.jsでGoogle Drive上のファイルをダウンロードする (Google Drive API v3)
1年くらい前にGoogle Drive関連の記事を書いてたけど、久々に触りたくなったので調査再開。
* 参考記事
* [Node.jsでGoogle Drive上のファイルを削除する (Google Drive API v3)](https://qiita.com/n0bisuke/items/a1b39635029242f31713)
* [Node.jsでGoogle Drive上のファイルをリネームする (Google Drive API v3)](https://qiita.com/n0bisuke/items/dcc7be337a555b018b19)
* [Node.jsでGoogle Drive上のファイルを指定フォルダに移動する (Google Drive API v3)](https://qiita.com/n0bisuke/items/8f108408a9e1067b9225)
* [Node.jsでGoogle Drive上のファイルを複製（copy）する (Google Drive API v3)](https://qiita.com/n0bisuk
[javascript]要素に対してなぜ[0]を付ける？
#あらすじ
`javascript`を学ぶ過程で取得した要素に対して`[0]`の表記が出てきて理解できなくて調べた内容です。例えば以下のような記述↓“`
document.getElementsByClassName(“red”)[0].classList.remove(“red”);
“`
内容は`red`クラスを取得し、クラス名から`red`を削除となります。#理由
なぜ必要かというと要素を複数取得するようなメソッドを使用するときは（要素が一個でも）要素番号を指定する必要があるということです！`getElementsByTagName`や`getElementsByName`などは要素が複数返ってくるので添字が必要。
`getElementById` の場合は単要素が返ってくるので添字は不要です！
（※コメントにあるご指摘を引用してます）#ちなみにjQueryでは
`javascript`のライブラリである`jQuery`では要素の指定は`eq()`を用います。“`
$(“p”).eq(2).addClass(“red”);
“`
pタグの中からポジシ
JavaScript初心者が引っかかったthisのスコープ、1+”1″、==と===の違い、undefinedの判定についてまとめる
柔軟性が高いjavascript。
型宣言とか厳しめの言語を書いていると、javasciptの意外のところに引っ掛かりして、、、。# 1+”1″ってどうなるの？
“`javascript
1+1; //2という値が返る
1+”1″; //文字列として連結され、”11″という文字列が返る
“1”+1; //文字列として連結され、”11″という文字列が返る
“1”+”1″; //文字列として連結され、”11″という文字列が返る
“`# 文字列を数値変換しなかったら、ある分岐を通らなかった、、
“`javascript
var a = “1”
if ( 1 === a ){
console.log(“実行されてない”)
}if ( 1 == a ){
console.log(“実行される”)
}“`
## 1 === “1” はfalse、 1 == “1” のtrueの理由
==は、右辺と左辺の値を同じ型に変換する！
つまり、 === は型までみて同じかどうかを判断している“`javascript
1 == 1; //true
1 == “1”; //
【JavaScript】本日未明、[ async – await ]さんが死体で発見され…
“`javascript
// 全てのデータと古いデータを比較して、新しいデータだけを表示する
async function showNewData() {
const allData = await fetchAllData();
const oldData = await fetchOldData();
const showData(allData, oldData);
}
“`
**「な、なんじゃこりゃあああぁあっtっt！！！！」**
・・・
・・・
・・・
# 非同期処理を”ちゃんと”理解して使いたい
『非同期処理なんとなくの理解で書いている…』
『動いてるし、ヨシ！』
**令和プログラマー***1である私自身、なるべく気を付けようと思っていますが、ついついなんとなくで書いてしまいそ
TECH CAMP 11日目~15日目(8/17~8/21)分
8月17日(月)
ブランチ作成
テーブル作り
関連コントローラー作成
中間テーブル作り
referencesとforeign_keyは相棒
selectとoptionも相棒
モデル名.whereについて
Sequel Proの罠
バリデーション
ルートパス変更Sequelで引っかかった?
全体が掴めたらもっと楽しくなりそう☺️8月18日(火)
以下の機能を実装
メッセージ投稿
画像投稿
単体テストコード
結合テストコードアプリの実装、一通り完了✨
最後の方は駆け足だったから、要復習だな?8月19日(水)
デバイス別のレイアウト実装
viewport・メディアクエリRubyを更に深堀り
case文・while文
ループとbreak
クラス継承・オーバーライド
例外処理
オブジェクト指向正規表現
今日も知識量が半端ない?
でも先週より力がついた実感は確かにあった❗️✨8月20日(木)
本日の内容
Rails深堀り
View Helperとモジュール
Controller レンダリングとJSON、サービスクラス
Model Callbacks・valida
スコープ-JavaScript-クロージャー
スコープについて。
では早速“`javascript
let b = ‘Hello’
function sample() {
console.log(b)
}
sample()//Hello
console.log(b)//Hello
b = ‘Bye’
console.log(b)//Bye
sample()//Bye
“`
ブロックの外で変数を宣言した場合はどこからでも参照できるし代入可能になる。“`javascript
function sample() {
let a = ‘Hello’
console.log(a)//Hello
}
sample()
console.log(a)//エラー
“`
ブロック内で変数を宣言した場合スコープがブロック内になるので
外からは参照できない。“`javascript
let c = ‘Hello’
console.log(c)//Hello
function sample() {
c = ‘Bye’
console.log(c)//Bye
}
console.log(c)//Hello
sa
JSからTSへの移行ツール、ts-migrationを試してみた
airbnbからjs→ts移行のツールが出ましたね…！
Learn about how we used codemods to accelerate migration from JavaScript to TypeScript at Airbnb. https://t.co/s1WihkfD1F
— Airbnb Engineering (@AirbnbEng) August 18, 2020
早速使
【DOM操作】setAttribute
# setAttributeとは
– 要素の属性を操作することができる。
# サンプルコード
“`hoge.html
test
“`
“`blue.js
let colour = document.getelementbyid(“colour”)
colour.setAttribute(‘class’, ‘blue’)
“`特にイベントリスナーなどはつけていないので発火する仕組みはありませんが、関数が走るとclass名が変わるため、そこで装飾を変化させたりできそうですね?
【ES6】innerHTML【DOM操作】
# innerHTMLとは
– 取得した要素の**中のHTML**を取得、変更することができます。
## サンプルコード
“`hoge.html
変更前です。
“`
“`hoge.js
//idがhogeの要素を取得する
let test = document.getelementbyid(“hoge”)
console.log(test.innerHTML); //変更前です。
test.innerHTML = `
変更されています！
`
console.log(test.innerHTML); //変更されています！
“`
HTMLを代入するときには、バッククォートなのがポイントですね。
use-animate-presenceを使ってReactのマウントとアンマウントのアニメーションを簡単に作る
# TL;DR
[use-animate-presence](https://github.com/jlkiri/use-animate-presence)をインストールしてデモの通りにすれば、すぐに実装できます。
# レンダーとアニメーションのライフサイクルを同期させる
Reactのマウントとアンマウントのアニメーションでポイントとなるのは、レンダーとアニメーションのライフサイクルの同期。それは、ライブラリを使わなくても簡単にできることだけど、目的が遊び以外だったらほぼ確実にライブラリを使った方が無難だと思います。
# 簡単な実装からはじめる
Reactのマウントとアンマウントのアニメーションは昔からややこしいやり方を必要としていて、[react-transition-group](https://github.com/reactjs/react-transition-group)のようなライブラリが生まれた。マウントなら、フェードインのようなアニメーションはJSを使わなくてもCSSだけで作れるが、アンマウントの場合ややこしくなります。
SvelteとかRiotにあるアン
