k01ken’s b10g

He110 W0r1d!

ES2020(ES11)に関する私的メモ

Null合体演算子(??)

左辺がnullかundefinedであれば、右の値を返し、そうでなければ、左の値を返します。
[使いどころ]
変数がnullやundefinedだった時に初期値を入れることができる。

const a = null ?? 'nullかundefinedです';
const b = undefined ?? 'nullかundefinedです';
const c = (void 0) ?? 'nullかundefinedです';
const d = false ?? 'nullかundefinedです';
console.log(a); // nullかundefinedです
console.log(b); // nullかundefinedです
console.log(c); // nullかundefinedです
console.log(d); // false

■参考リンク
Null 合体 (??)


オプショナルチェイニング演算子

チェーン先がnullish(nullかundefined)であれば、undefinedを返すというもの。エラーにはならず、そこでストップしない。
存在しないルートオブジェクトには使用できません。

// 正規の形
const book_obj = {
  title: 'Hello World',
  price: 1200,
  author_infomation: {
    name: 'JavaScript Taro',
    age: 41
  }
};

// author_infomationプロパティが抜けている不完全な形
const imcomplete_book_obj = {
  title: 'Hello World',
  price: 1200,
}

console.log(book.author_infomation.name);  // Uncaught TypeError: book.author_infomation is undefined
console.log(book.author_infomation?.name); // undefined

//もしオプショナルチェイニング演算子がなければ以下のように、いちいちチェックしないといけなかった。
console.log(book.author_infomation && book.author_infomation.name); // undefined

// 存在しないルートオブジェクトなのでUncaught ReferenceErrorになる
console.log(zock?.author); // Uncaught ReferenceError: zock is not defined

■参考リンク
Optional chaining (?.)

ES2018(ES9)に関する私的メモ

テンプレートリテラル

テンプレートリテラルはダブルクォートやシングルクォートではなくて、`~`(バックティック)で文字列を囲みます。

console.log(`${3 * 3 * 3}`); // 27

let name = "Taro";
console.log(`Hello ${name}!`); // Hello Taro!

■参考リンク
テンプレートリテラル (テンプレート文字列)

スプレッド構文

...変数名』を指定して、リストなどに組み入れることで、中身をそのまま展開できます。

const arr = ['apple', 'orange', 'grape'];
const arr2 = [...arr, 'banana', 'strawberry']; // Array(5) [ "apple", "orange", "grape", "banana", "strawberry" ]

■参考リンク
スプレッド構文

ES2015(ES6)に関する私的メモ

アロー関数

従来の関数式の省略構文だが、従来の関数と違う部分もある。

従来の関数

function add(a, b){
  return a + b;
}

function greeting(name){
  return "Hello" + name + "!";
}

アロー関数

let add = (a,b) => {
  return a + b;
}

// 中括弧を削除するとreturnを省略可能
add = (a,b) => a + b;

// アロー関数内が複数行になる場合は、中括弧をつけて、returnを書く
add = (a,b) => {
  let c = 10;
  return a + b + c;
}

// 引数が1つであれば、引数部分の括弧を省略可能。
// 逆に、引数がなかったり、複数あった場合は、()で括らないといけない。
let greeting = name => "Hello" + name + "!";

オブジェクトリテラルを返したい場合は、括弧をつけること

let obj = name => ({name: name});

thisが何を指すのかが違う

var obj = {
  allow_function: () => console.log(this),
  traditional_function: function(){
    console.log(this)
  }
}
obj.allow_function(); // thisはグローバルを指す(アロー関数自身はthisを持たない)
obj.traditional_function(); // thisは変数obj自体を指す。


■参考リンク

アロー関数式

求めるゴールから逆算して考える

できるだけムダなことを避けて、必要最小限の労力で、求めることを達成したいと思ったときは、求めるゴールから、現在の自分まで、逆算して、その過程を計画して、実行するのが、ベストです。

ただ、これを行うためには、2つやることがあって、まず、求めるゴールを、できるだけ明確に具体的にすることと、2つ目に、現在の自分の現状を具体的にすることです。この2つを具体的にできないで、曖昧なままだと、何をするのかも、曖昧なままなので、ムダなことがどんどん増えて、精神的につらくなり、ほとんどが徒労に終わり、嫌になって、途中で頓挫します。

逆に、ゴールをできるだけ具体的にすればするほど、インプット、やるべきこと、ムダはどんどん少なくなっていきます。これは、ゴール達成に関する法則の1つになります。インプットを、不足分だけ必要最小限行い、後は、具体的な行動計画を作り、行動して、ゴールに一歩近づくだけです。それ以外は余計なことになります。

インプットは、ゴールベースで考えると、基本的に、

  1. ゴールを設定するインプット
  2. ゴールを達成するインプット

の2つしかありません。

また、ゴール達成に向けて、よくありがちなこととして、たくさんゴールを設定して、ゴールが多すぎて、どれにも取り組めなかったり、インプットばかりして、全然、行動してなかったり、そもそも、ゴールを設定すること自体をしていなかったりというのがあるんですが、これらはゴールを達成することを避けるために、自分が無意識のうちに行ってしまっている先延ばし行為(最優先でやるべきことほど避けがち)になります。こういう状態にもしなっていたら、まず、小さいすぐに達成できるゴールを1つ選んで、現在の自分まで逆算して、具体的な過程を書いて、すぐに行動して、達成する経験を何度も積んで習慣化して、ゴールを達成する小さな成功体験を積んでから、今度は、優先順位をつけて、最優先で、達成すべきゴールを選び取って、回避せずに、行動するようにします。

1日の中心に『ゴールを達成するために今日やるべき、ギリギリ頑張れば達成できる難易度の重要な行動(今日のスモールゴール)』を前日に書いて設定しておいて、それを毎日続けるような状態にします。疲れてから行うよりも、目覚めてから、すぐに行った方が、新しい行動をしようとする確率が高い。こうすると、毎日、人生が充実してきて、精神的に肉体的にも良いです。

最終的なゴールは、良いのですが、過程の中のスモールゴールに、設定すべきことは、相手ありきな確率的なものではなくて、自分が行動を起こせば、100%達成できるものを設定することがポイントになります。例えば、最終ゴールが誰か、意中の人と付き合うことであれば、これは、相手ありきなので、確率的なものであるんですが、それに対してスモールゴールとして設定したものが、相手に対して、告白をするというのであれば、これは、付き合うことになろうが、振られようが、100%自分の行動でコントロールできます。後は、より詳細に、どういう状況で、どういう服装で、どういう髪型で、どういう語り方で、など、成功確率を上げる要因を、詳細に、計画を詰めてから、行動するだけです。こうすることで、失敗した時の恐怖や恥を恐れて、そもそも行動しないということは、ある程度は、防げると思います。このように、ゴール達成の途中で、ゴールしないために自分に対する言い訳を瞬時に作り、逃げようとする穴を、自分でどんどん防ぐ工夫が必要になります。

[具体例]偶然、ネットの記事やブログや動画からインプットして、新たなゴールとして設定した場合

具体的な行動につながる少数の部分だけを素早く読んで、それ以外の大部分は、読み飛ばして、やることだけを抜き出して、整理し、すぐに行動をするだけ

快/不快リストを作る

自分の人生をちょっとでもマシにしようと思ったときに、自分がやっている方法を紹介します。
まず、快リストと不快リストという2つのリストを作ります。そして、ちょっとでも、快に思ったら、快リストに、具体的に、どういうことを快に思ったのかを書く。逆に、ちょっとでも、不快に思ったら、不快リストに具体的に不快に思った内容を書く。同じ内容であれば、カウントしていく。こうして、1日の中で、快に思う時間をできるだけ増やし、逆に、不快に思う時間をできるだけ減らすことで、自分の1日を調節していくことで幸福度を高めるという方法。

具体例を書いてみます。

快リストの例

  • 自分にとって美味しい食べ物を食べること
  • 歯を磨く
  • 顔を洗う
  • コーヒーを飲んだ、1杯目
  • 風呂に入った瞬間
  • 散歩をする
  • 睡魔に襲われると同時に寝ること
  • 面白い漫画を読んだこと
  • 面白い映画を見たこと
  • 面白いネット記事を読んだこと

不快リストの例

  • 突然、誰かが訪問してくること
  • 突然、電話がかかってくる
  • 家の中に虫が出現すること
  • 服が生乾きになる
  • 嫌いな人と接しないといけないこと
  • 寝不足で眠くて仕方がないけれど眠れる状況じゃないこと
  • 暇で仕方がないこと
  • 検索エンジンの検索結果が的外れなこと
  • パソコンのソフトがフリーズすること
  • 外でバイク音がうるさいこと
  • 外で野良猫がうるさいこと


リストを書いたら、次に、不快な時間を減らす方法を考えます。例えば、寝不足であれば、睡眠時間を増やす、服が生乾きになるならば、洗剤や洗濯方法、乾燥方法を調べて、改善するなどです。そうやって、自分にとって、不快なことを1個1個潰していきます。ここで重要なのが、自分は一体何が不快なのかをできるだけ具体的に詳細に書いていくことです。そうすることによって、改善すべきポイントが小さくなり、改善しやすくなります。しかし、ここが曖昧だと、改善すべきポイントが大きくなり、改善しづらくなります。

VeeValidateを利用してフォームのバリデーションを行う

開発環境は、Windows 10 Pro(64bit) + Vue 2.6.12。

フォームのバリデーションはわざわざ自分で実装するのも面倒なので、フレームワークを活用することにしました。

今、使っているのはVue 2なので、VeeValidateのバージョンは最新は現時点で4なのですが、3を用います。

1.npmでインストールします。

npm i vee-validate

■参考リンク

VeeValidate

Vueでテキストフォームの値に応じて、ボタンを有効/無効にする

開発環境は、Windows 10 Pro(64bit) + Vue 2.6.12。

現在のテキストフォームの値は、watchを使って監視をします。watchの中に、v-modelで紐づけているdataのオブジェクトのキー名を指定して、そのオブジェクトに変化があれば、watchがそれに応じて変化します。

今回は、簡易的なバリデーションとして、ユーザー名が8文字以上、パスワードが8文字以上であれば、ボタンを有効にするというプログラムを作ってみます。

<template>
  <div>
    <form>
      <input type="text" v-model="username" />
      <input type="password" v-model="password" />
      <input type="button" value="登録" v-bind:disabled=button_flug />
    </form>
  </div>
</template>

<script>
import Vue from 'vue'

export default Vue.extends({
  data: () => ({
    username: '',
    password: '',
    username_flug: false,
    password_flug: false,
    button_flug: false
  }),
  watch: {
    username: function(newValue){
      this.username_flug = newValue.length >= 8 ? true : false
      this.button_flug = this.username_flug && this.password_flug ? true : false 
    },
    password: function(newValue){
      this.password_flug = newValue.length  >= 8 ? true : false
      this.button_flug = this.username_flug && this.password_flug ? true : false 
    }
  }
})
</script>