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

Vueのデータバインディングを理解する

## どんな記事？

Vue.jsでの**データバインディング**を理解しよう！

## データバインディングとは

データバインディングとは、**データと描画を同期**する仕組み。

## テキストのバインディング

“Mustache”構文（二重中かっこ）を利用した形が基本です。

“`vuejs
Message: {{ msg }}
“`

こうすると`{{ msg }}`の部分が、対応するオブジェクトの`msg`プロパティの値に置き換えられます。

## HTMLのバインディング

`v-html`ディレクティブを使用すると、HTML文をバインディングできます。

(**ディレクティブ**とは、DOM要素に対して何かを実行することをライブラリに伝達する、マークアップ中の特別なトークン）

“`vuejs

“`

“`vuejs
data: function() {
retrun {
text: ‘Hello!’
}
}
“`

“`:出力
Hello!
“`

`p`のコンテ

React Native でいろんなメニューを持ったアプリを作る

# 最終形

– タブメニューで画面が切り替わる
– どの画面からでもアクセスできるスライドタイプのメニューを持つ
– イベントトリガーでポップアップ画面が差し込まれる

以下の動画のようになります。

このような複数の画面パターンを持ったアプリを実装していきます。

# ナビゲーターの構成

今回の実装では、 [React Navigation](https://reactnavigation.org/) を使っています。
バージョンは v5 です。

スライドメニュー（Drawer）、ポップアップ画面はタブメニューに覆いかぶさる形で実装したいので、
DrawerNavigator > StackNavigator > TabNavigator となる構成で実装します。

それぞれの中身を見ていきます。

### DrawerNavigator

Class Component + TypeScript の Vue アプリケーションを Composition API で作り直したので思ったことを書く

# はじめに

少し前に作って、更新が滞っていたアプリケーションに機能を追加したかった。
ちょうどよかったので Vue + Class Decorator + TypeScript の構成だったが、 Vue + CompositionAPI + TypeScript に作り直した。
この記事では、その過程で思ったことや考えたことを共有したい。

作成しているアプリケーションは以下。

– ソース: https://github.com/sterashima78/vue-webpage-builder
– アプリケーション: https://sterashima78.github.io/vue-webpage-builder
– 使い方はソースについている [README](https://github.com/sterashima78/vue-webpage-builder/blob/master/README.md) を見てください

# 作り直す前

– コンポーネント定義はクラススタイル
– vue-class-componentでやってた
– Vuex もクラス

【JS/Vue】VueXの浅い理解

## 注意
VueXについては、下記の記事を読むのが一番です。
[vuexをまだ理解していない全人類に捧ぐvuexを利用したコードの図解 – Qiita](https://qiita.com/fruitriin/items/42b0ebc5f8a524a0ae17)

## VueX
### VueXの構成
– Actions
– Mutations
– State

**以下全体図**
>
[Vuex とは何か？ \| Vuex](https://vuex.vuejs.org/ja/)より引用

### 全体の流れ
1. stateを確認
2. actionを呼び出し
3. mutationsへcommit
4. stateを更新

>this.$store.dispatch(‘xxx’) でコンポーネント内でアクションをディスパッチできます。あ

Pay.jpを用いた購入機能の実装

##概要
Pay.jpを用いた購入機能の実装を備忘録としてまとめます。
修正点ありましたらご指摘お願いいたします。
Transaction（取り引き）テーブルおよびProduct（商品）テーブルをもとに作っていきます。

##前提
* Pay.jpのアカウント作成済み
* Pay.jpにてクレジットカード登録機能は実装済み
* ビューはHamlで記載
* deviseにてログイン済み

##手順

1. Transactionテーブルを作成（購入済みの場合SOLD OUTを表示させるため）
2. アソシエーションの設定
3. Transactionコントローラーを作成
4. 環境変数の設定
5. ルーティングの設定
6. マークアップ：購入内容確認画面
7. マークアップ：購入完了画面
8. マークアップ：購入済みの場合SOLD OUTを表示
9. 購入データの確認

##Transactionテーブルを作成
今回は購入済みの場合SOLD OUTを表示させるためにTransactionテーブルを作成します。

“`
$ rails g model Transaction
“`

`

【JS/Vue】ライフサイクル

主に下記のUdemyのコースをベースに書きました。
[Vue.js + Firebaseで作るシングルページアプリケーション \| Udemy](https://www.udemy.com/course/vuejs-firebase/)

## Vueライフサイクル
ドキュメントに書かれているライフサイクルの図は下記の通りです。

>
[Vue インスタンス — Vue.js](https://jp.vuejs.org/v2/guide/instance.html)より引用

大まかに定義すると,下記の流れのようになっており、それぞれに作成前、後が存在しています。

1. Vueインタンス作成
2. マウント
3. DOM アップデート
4. Vueインタンス削除

またこのライフサイクルでは、**ライフサイクルフックで処理を追加できるようになっ

JavaScriptでカジュアルに日付操作する

JSでちょっとしたDate操作をしたのでメモ。

### YYYYMMDD文字列を取得

> toISOString() メソッドは、簡潔な拡張表記の ISO 形式 (ISO 8601) の文字列を返します。これは、常に 24 文字または 27 文字の長さになります (それぞれ、YYYY-MM-DDTHH:mm:ss.sssZ または ±YYYYYY-MM-DDTHH:mm:ss.sssZ)。タイムゾーンは常に 0 UTC オフセットになり、接尾辞 “Z” で表記されます。

“` javascript
const date = new Date()
date.toISOString().split(‘T’)[0] // 2020-03-04
date.toISOString().split(‘T’)[0].replace(/-/g, ”) // 20200304
“`

### 日付の操作

#### 1日足す

“` javascript
const date = new Date()
date.setDate(date.getDate() + 1)
new

JavaScriptにおけるthisの挙動について

# 対象読者
– JavaScriptのオブジェクトについて理解している初学者
– thisの挙動がいまいちわからないJavaScript初学者

# そもそもJavaScriptにおけるthisって何？
JavaScriptにおけるthisとは、自分自身を表すオブジェクトのことを挿します。重要なポイントは**呼び出し元によって変わる**点です。どういうことか以下に記載していきます。

## グローバルオブジェクトを指すthis
“`sayFoo.js
const sayFoo = function () {
console.log(this[“foo”]);
}
foo = “foo”;// 予約後であるconst,letをつけない場合はグローバルオブジェクトとして定義される
sayFoo();
“`
`sayFoo.js`では、sayFoo()を呼び出した場合、グローバルオブジェクト（`window`オブジェクト）として変数fooを宣言しています。よって、thisの対象はグローバルオブジェクトをさす挙動になっています。
※`this[“foo”]`の[]で書く方法は**ブラ

[Javascript] 要素の外側をクリックした時にremoveする

#概要
例えばモーダルウインドウには×で閉じるボタンがレイアウトされている事が一般的ですが、
ユーザビリティを考えると、ボタン以外でも閉じられるようにしている事が望ましいですよね。
だからといって、どこでもクリックすれば閉じられるような処理では、
そもそも閉じるボタンの意味がなくなってしまいます。

今回はクリックイベントで付与したクラスを、
反応させたくない要素の外側かを判定して取り除く処理になります。
あくまで私が調べた結果ですので、もっとスマートな書き方があるかもしれません。

##制御部分のコード

“`Javascript:Javascript
const docOpen = document.getElementById(‘クラスを付与した要素’);
const elemBody = document.querySelector(‘body’);

elemBody.addEventListener(‘click’, e => {
if(e.target !== docOpen) {
docOpen.classList.remove(‘active’);