Promiseの基本

JavaScript Vue.js

Promiseとは


非同期処理を抽象化したオブジェクトとそれを操作する仕組みのことを指す。

Javascriptの概念ではなく、プログラミング言語におけるデザインの一種。


JSにおける非同期処理にはコールバック関数を利用するものもあるが、Promiseは非同期に対してオブジェクトとルールが仕様化され統一的な書き方をするようになっている。

続きを読む

並列処理/並行処理とか同期処理/非同期処理について

JavaScript

プロセス

プログラムの実行単位のこと。リソースを共有しない固有のメモリ空間を持つ。

スレッド

プロセスの実行単位のこと。リソースを共有する共通のメモリ空間を持つ。

シングルスレッド

処理の流れが一つのみ

マルチスレッド

二つ以上の処理が同時に実行される

続きを読む

Mixed Content（混合コンテンツ）エラー

Vue.js 自作webアプリ4 ツイッター風投稿サイト



ユーザ情報登録ページで、

郵便番号入力→「住所を取得」ボタンクリック→住所欄に取得したデータを表示

を実装しました。

続きを読む

create→ROLLBACKの原因を知りたい

Rails 自作webアプリ4 ツイッター風投稿サイト



Herokuにデプロイしたあと、UserのCreateがロールバックされてしまい、その理由がログに出ないので困り果てていました。


  def create
    @user = User.new(user_params)
    @user.save!
  end

save!で例外を発生させるようにすると、ログにエラー内容が出るようになります。


ちなみに内容はcounter_culture用のマイグレーションファイルが一つ抜け落ちていて、count用のカラムが存在しないという理由でした。
関連付けを変えたりカラム名を変更したりしているうちに削除してしまったようです。

development環境ではなぜか上手く動いてたのでherokuでイチからマイグレーションするまで現象が出なかったんですね。

schemaファイルからロードするdb:resetとマイグレーションからやり直すdb:migrate:resetがあるので注意。
ちなみに前者はseedも実行する。



v-bind:classとcomputed

Vue.js 自作webアプリ4 ツイッター風投稿サイト



v-bind:classにオブジェクトを渡すことで、クラスを動的に切り替えることが可能です。

<div v-bind:class="{ active : loggedIn }">
  <p>投稿する</P>
</div>



渡すオブジェクトを算出プロパティとして作成すると、より複雑な処理が可能になります。

<div v-bind:class="classObject">
  <p>投稿する</P>
</div>

vueファイル

data: {
  loggedIn: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.loggedIn && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}



もちろんstoreの値を参照することも可能。


参考リンク

クラスとスタイルのバインディング — Vue.js

JavaScriptで今週の月曜日と日曜日の年月日+曜日 を取得するメソッド

JavaScript 自作webアプリ4 ツイッター風投稿サイト



アクセスした時点での週の始まりと終わりを返すメソッドです。

2018年12月31日 (月) ～ 2019年1月6日 (日) という形になります。

続きを読む