【雑記】Vue.js学習時の思考パターンに関するメモ

最近はKindleの「速習Vue.js 速習シリーズ」書籍を利用して、Vue.jsの学習を行っていました。

速習Vue.js 速習シリーズ

ふと、自分自身が学習時にどんなことを考えているのか（思考パターン）が気になってしまい、 その時点の思考についてまとめてみることにしました。

「テンプレート側でデータオブジェクトにアクセスするには、{{ ... }}（Mustache）構文を利用します」という文章を読んだ時の思考

• 確かマスタッシュって名前の式構文だったなー。口ひげみたいな形だから、そう呼ばれているんだったか。
  • Angularでも同じ書き方するよな。
  • Django Templateもコンテキスト変数を表示するときにマスタッシュ記号使うし、Vue.jsやAngularをDjangoTemplateと一緒に利用しようとする競合するね
• あれ、Django Template以外にもJinja2ってあったような気がする。それもマスタッシュ構文使うんだっけ？
• 調査後、同じ記号利用することが判明
• Angularでいうところのパイプとか、Djangoでいうフィルターみたいに、テンプレートの変数に対して加工を行うこともできそうな気がする。
  • 調べたら出てくるだろうけど、本で取り上げてない内容を先に確認するのはなんか気が引ける→とりあえず保留で。

{{ ... }}（Mustache）式の中でJavaScript組み込みオブジェクトが利用できるという文章を読んだときの思考

• ということは、自作オブジェクトも登録するって方法もあるんだろうか？
  • なんなくあまりやらない方が良さそうな気がするけど方法は気になる。
• きちんとした方法が後のページど出てくるかもしれないから、その時に振り返ればいいか
  • Vue.jsで定義されている何らかのグローバル変数に対して、追加したいオブジェクトを指定してあげる感じなんだろうか
• それにしても、JavaScript組み込みオブジェクトといえば・・・サイ本購入したのは良いけど、最後まで読めてない気がする。何度も読み直すくらいしなきゃいけないな

JavaScript 第6版

コンポーネントに関する文章を読んだ時の思考

Vue.component('my-hello', {
  template: '<div>こんにちは、コンポーネント</div>'
});

• Vue.component関数にコンポーネント名とオブジェクトを指定するのか
  • templateプロパティで、HTMLタグを指定しているなー
  • ちょっと前に書いたJSXを思い出す気がする
  • Angularの@Componentデコレータの中身に雰囲気が似ている気がする
  • こんな感じのやつ

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

• コンポーネントの利用方法は、指定したIDをHTMLのコードの中に記載すれば良いとのこと
  • コンポーネントの利用方法については、AngularやReactと同じような感じに見える
  • ということは、コンポーネントに親子関係も発生しそうだし、なんとなくReactのpropsやstateみたいな、値の定義とその値を親子間で受け渡す方法がほぼほぼ提供されてそうな気がする

vue-cliに関する説明文章を読んだときの思考

• Vueにもcliがあるのか
• Angularだと、ng newで雛形が作成されていたけど、vueの場合はどんな感じなんだろう
  • vueの場合も同じように雛形が作成されるけど、最初に色々と設定を聞かれるのね
  • .vueファイルってのができてるけど、これは・・・？
    • テンプレートとスクリプト、スタイルをまとめて記載したものらしい
    • style scopedって感じで、styleタグにscopedが追加されているけど、これはいったい何を示しているのか？
      • スコープって名前から推測すると、まずAngularのコンポーネントにおけるスタイルの適用範囲を思い出す
      • Angularの場合、そのコンポーネントで指定したスタイルはそのコンポーネント（と配下も？）のみに適用されたような気がする
      • ということは、Vue.jsも同じような感じで、適用範囲が現在のコンポーネントに絞られるのかもしれない

まとめ

今回学習しているVue.jsは、今までに書いたコードがある既存のフレームワークと似通っている部分が多かったため、 「比較」と「推測」が主な思考パターンになっているようでした。

基本的には、今までに体験・経験したことがあるかどうかを考えているようです。 該当するものがなければ、"そういうものだ"と、一時的に認識しておき、あとで整理するような感じになってそうです。

今まで見たことも経験したこともないものを学習する場合、 いったいどんな思考パターンになるのか、今後機会があれば試してみようと思います。