blog @arfyasu

プログラミングとか趣味のこととか

毎日日記を書くことが出来るようになった理由を考えてみた

雑記

はじめに

昨年の10月の後半から、ほぼ毎朝日記をつけています。

以前から、日記をつけることの大切さについては直接お話しを聞いたり本を読んだりで何となく理解していました。 しかし、何回か試みたものの、1ヶ月ともたずに終了することばかりで、まともに続いたことがありませんでした。

そんな私が、約150日間日記を下記続けてこれた理由は何なのか。
この理由が分かれば、今まで続けようと思ってできなかった英語の勉強にも応用できるのではないか？

そんな淡い期待をしつつ、振り返ってみることにしました。

ポイントは、以下の5つです。

  • 毎日続けるためのルールは低めに設定すること
  • それをするための時間を作ること
  • 報酬と罰を上手く使うこと
  • 出来ない日があっても歩みを止めないこと
  • それを続けることで得られるメリットを感じること

低めのルールを設定すること

日記をやめてしまった一番の原因は、日記の更新が苦痛でしかたなかったことです。
苦痛になってしまった原因は、高いハードルを設定してしまったことかなと思います。
それは、この2つ。 * 日記をブログに更新すること * ブログの更新ルールを作ったこと

今回、この2つを取り払ったことが良かったと思います。

日記を公開しない

ブログで更新するということは、誰でも見ることができる場所に文章を公開するということです。

いつ、誰に見られるか分からないので、それなりに気を遣って文章を書いていました。
（アクセスはほとんどありませんでしたけど、、、）
自分をよく見せるために、偽りの自分を演じていることさえありました。

これが、自分にとっては相当なストレスでした。

日記を非公開にすることで、自分の思ったことを好き勝手に書くことができるようになりました。
また、自分を偽る必要もなく、素直に自分と向き合うことが出来るようになりました。

厳しいルールを作らない

以前は、テーマを絞ったり、最低書く文章量を決めていましたが、今回はそれも排除しました。
テーマを絞るとだんだんと書くネタがなくなってきますし、書かないと行けない文章量が決められると変なプレッシャーになって文章が書けないことが多々ありました。

そこで、今回決めたルールは以下の3つにしました。

  • 前日を振り返って良かったことや悪かったことがあればそれについて考える
  • 自分の思ったことや感じたことを、素直に書く
  • 最悪、1行で終わっても良い

日記の質は置いておいて、まずは毎日日記を書くことを習慣化することを優先したのが良かったと思います。
ちなみに、1行で日記を終えた日は今のところありませんｗ

時間の確保

次に大切なのが、日記を書く時間を確保することです。
日記を書く時間がとれなかったことが、以前に日記をやめてしまった原因の1つでもあります。

その時は、日記を書くのに1時間以上かかることもあったのでかなり辛かったです。
（ルールを厳しくしすぎたことが原因）
今は緩めのルールにしたので、20分もあれば書けてしまえるのでかなり楽になりました。

とはいえ、毎日決まった時間を確保し続けることは、意外と難しいです。
仕事が忙しくなれば日記を書く時間は仕事や睡眠に充てたいと考えるのは自然ですからね。

今回、昨年の10月の転職を機に仕事が落ち着いたこと。
毎日決まった時間に日記を書く時間を確保できたことが良かったと思っています。

決まった時間に時間を確保する

何かを習慣化したい時、毎日決まった時間に行う事が良いとされています。

私の場合、朝起きてから30分以内に日記を書くことにしています。
朝は、少し早起きすればその分自由な時間を増やすことができます。
なので、自分で時間をコントロールしやすい朝を選びました。

夜は、残業で遅くなってしまったり、付き合いの飲み会や会食などで、意図せず時間がなくなるケースが有り、日記を決めた時間に書くのはなかなか難しいです。

とはいえ、朝も寝坊すると時間がなくなってしまうリスクもあるので、どれが良いかはその人次第ということになるかもしれませんｗ

報酬と罰ゲーム

日記を書かない日は、1,000 円の罰金を課しました。
月末に、書かなかった日×1,000円分を小遣いから差し引いて自宅に入れるようにしています。

今でこそ罰金はなくなりましたが、罰金を払いたくないことを理由に早起きして書くこともあったので、一定の効果はあったと思います。

ですが、「罰ゲームが嫌だから日記を書く」という苦痛から逃れるための行動は、短期的には効果があっても長期的にはマイナスに作用するケースが多いようです。
逆に日記を1ヶ月休むことなく書けたら何か報酬を貰えるようにすることは、行動科学的にも効果があるようですね。

どちらも、やり過ぎないように気をつける必要があるかもしれません。

日記を書けない日があってもOK

毎日日記を書くと言っても、毎日書けるとは限りません。
体調不良の時などは難しいですし、周囲の状況（家族や仕事）が原因で書けない日もあります。

私も、体調不良で書けない日がありました。
でも、その翌日から何もなかったかのように、また日記を書き始めました。

これが、良かったと思います。

宣言したことができないと、自分を責めて歩みをとめてしまいがちです。
でも、失敗してもまた挑戦すればいいだけのことです。

失敗しても、歩みを止めずに進むことが大事ではないかと思うのです。

日記を書くことのメリット

日記を書くことのメリットは何かと聞かれたら、以下の4つと答えます。

  • 前日を振り返り、反省すべきことやその改善策を考える時間をとることが出来ます。
    改善した実感を得られればしめたものです。

  • イラッとしたことがあっても文字に書きだしてみると意外とすっきりしたりします。
    誰かに話を聞いてもらうのと似た効果があると、個人的には思いました。

  • 日記を書くことで、自分の深い部分に潜っていく感覚になることがあります。
    自分ってこんなことを思っていたのか、ということに気づくこともあります。

  • 以前の自分が考えていたことを記録に残せます。
    例えば、1ヶ月前にあったことや、その時考えていたことを振り返ることができるのは貴重な資料です。

こういうメリットを感じることができることも、何かを続ける上で大切な要素になると思います。

まとめ

だらだらと長文を書いてしまいました。
改めてまとめると、大事な点は以下の5つですね。

  • 毎日続けるためのルールは低めに設定すること
  • それをするための時間を作ること
  • 報酬と罰を上手く使うこと
  • 出来ない日があっても歩みを止めないこと
  • それを続けることで得られるメリットを感じること

これを元に、英語の勉強など毎日続けると良いことを習慣化していきたいと思います。

以前、毎日ブログ更新宣言をしましたが、断念した時の条件にぴったり当てはまるので無理だなと納得です。
条件変更しようｗ

それでは、また。

「続ける」技術

「続ける」技術

JavaScript の this って分かりにくいけど ES2015 で何か変わったの？

JavaScript java

はじめに

JavaScript の勉強のために、開眼！JavaScript を読んだ。

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質

JavaScriptの理解があやふやだった自分にとって、知らないことがたくさんあり勉強になることが多かった。
その中でも、this についての理解があやふやだったので、復習もかねて内容をまとめておこうと思う。

一般的な使い方

var User = function(name) {
    this.name = name;
}
var bob = new User('bob');
console.log(bob.name);    // 出力: bob

この this は、生成されたインスタンス自身を指します。
このの使い方が、最も一般的でしっくりくる使い方だと思う。

入れ子関数内で使われる場合

var myNumber = {
  elements: [1, 2, 3],
  multiple: 3,
  multiply: function() {
    console.log(this.elements);    //  出力: [1, 2, 3]
    var multipleElements = this.elements.map(function(element) {
      return element * this.multiple;
    });
    console.log(multipleElements);  //  出力: [NaN, NaN, NaN]
  }
};

myNumber.multiply();

multiply は、elements の各要素に multiple の値を乗算した結果を出力するメソッドです。

実行すると、[3, 6, 9] が出力されることを期待しますが残念。
[NaN, NaN, NaN]と出力されます。

これ、私が最もよくやってしまう間違いでした。
最初の頃は、ほんと何が間違っているのかさっぱり分かりませんでした。

入れ子関数内の this はグローバルオブジェクトを参照

先ほどのコードの乗算処理中に this を出力してみます。

    var multipleElements = this.elements.map(function(element) {
      console.log(this);  // 出力: Window /_display/
      return element * this.multiple;
    });

っと、このようにグローバルオブジェクトである window を参照してしまいます。
なんとも不思議です。

グローバルオブジェクトに multiple は未定義なので、NaN が返ってきていたということですね、はい。

解決方法

これもお決まりで、スコープチェーンを使って解決します。
親関数内に自身を参照できる変数を用意し、入れ子関数からはその変数を経由して参照します。

以下が修正版です。

var myNumber = {
  elements: [1, 2, 3],
  multiple: 3,
  multiply: function() {
    console.log(this.elements);  //  出力: [1, 2, 3]
    var self = this;  // myNumber への参照をセット
    var multipleElements = this.elements.map(function(element) {
      return element * self.multiple;
    });
    console.log(multipleElements);  //  出力: [3, 6, 9]
  }
};

myNumber.multiply();

ローカル変数 self を用意し、そこに myNumber への参照をセットします。
入れ子関数から multiple の値を取得する際、この self を参照して取得します。

ちなみにこの仕様は、ECMAScript 5 で解決するということが記載されていました。

ES2015(ES6) の Arrow functions

最近、React の勉強がてら ES2015 でコードを意識して書いています。
その中で、上記の this が解決されているのか確認してみました。

結論を先に書くと、Arrow function 記法で書けば解決です！

Arrow functions 記法は、

list.map(function(i) { return i * i; });

を、以下のように書くことができます。

list.map((i) => i * i);

この Arrow functions 書き方も簡略化されていて見やすいですね。
その上、this の参照先がグローバルオブジェクトにならないので便利です。

ということで、最初のコードはスコープチェーンを使わなくても良くなります。

var myNumber = {
  elements: [1, 2, 3],
  multiple: 3,
  multiply: function() {
    console.log(this.elements);  //  出力: [1, 2, 3]
    var multipleElements = this.elements.map((element) => element * this.multiple);
    console.log(multipleElements);  //  出力: [3, 6, 9]
  }
};

myNumber.multiply();

Arrow functions については、以下のページに色々説明があります。
英語が分からなくても、コードが読めれば大丈夫ｗ

developer.mozilla.org

まとめ

ということで、this の内容のまとめでした。

Arrow functions で解決されたのが分かった時には「おぉ」ってなりましたｗ
今後は、こっちを使っていきます！

ES3 とか使わないといけないプロジェクトにアサインされた場合は、気をつけよう、うん。

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質

React でストップウォッチを作ったよ

React JavaScript

はじめに

前回のクリックカウンタと起動時間を組み合わせて何か作れないかと考えた所、ストップウォッチを思いついた。
ということで、React でストップウォッチを作ってみました。

ストップウォッチ

デザインやストップウォッチの表記は別として、、、
動きは iOS 標準のストップウォッチに似せたつもりです。

開始や終了については、そんなにハマることなく出来ました。
setIntervel と clearInterval を使うだけです。

それだけだとつまらないとと思ってつけたラップの機能が結構めんどかった。
理由は配列の処理です（はいれつはすきくありません）

躓いたところをメモしておきます。

配列の追加

this.state を使って値を変更する必要があるため、pushメソッドは使用出来ません。
concat メソッドを使って新しい値を追加した配列をセットするようにします。

this.setState({
  values: [newValue].concat(this.state.values)
});
配列の表示

下記のように、mapメソッドを使うコードをよく見かけました。

    var lapList = this.state.lapTimes.map(function(lapTime) {
      return <li>Lap{_this.state.lapTimes.length - i} {_this.getSeconds(lapTime)}</li>;
    });

っが、上記のコードだと、以下の警告が表示されます。

Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `StopWatch`. See https://fb.me/react-warning-keys for more information.

配列やイテレータのようなリストの子要素にはユニークなキーを持つべきだという警告です。

内容と対策については、以下に詳しく載っています。
qiita.com

大事な部分をページ内から引用させて頂くと、

このkeyはVirtualDOMのdiffから実際のDOMに反映させるときに最小限の変更にするために使われます。

とうことです。

下記のようにユニークなキーを指定してあげれば解消します。

var lapList = this.state.lapTimes.map(function(lapTime, i) {
  return <li key={i}>Lap{_this.state.lapTimes.length - i} {_this.getSeconds(lapTime)}</li>;
});
コンストラクタ

最後までよくわからなかったのがコンストラクタで、this.lastLapTime = 0; のように初期化したかったのですが、やり方がわからず断念。
とりあえず以下のコードで逃げたけど、ここだけちょっと嫌な感じです。

if (this.lastLapTime == undefined) {
  this.lastLapTime = 0;
}

まとめ

イベント駆動でゴリゴリ書いてきた、今までのコードより大分すっきりした感じがします。

リセットボタンの処理で値を初期化しただけで、画面がリセットされた時には、すごい気持ちがよかったです。
綺麗に処理が流れると気持ちがいいですね。
これが綺麗なコードかどうかは別としてｗ

ここ直したほうが良いとかあればご指摘頂けると嬉しいです。

次は親子関係の部分をやってみようと思ってます。

参考

https://www.sitepoint.com/premium/screencasts/building-a-stopwatch-in-react-conditional-rendering