読者です 読者をやめる 読者になる 読者になる

スズキ学習ノート

覚え書き走り書き@s12bt

Vue.js

npm install & npm run dev

vuejs.org

$ npm install --global vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

f:id:s12bt:20161120221616p:plain

index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>mirror</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

jsどこで呼んでるんだろう?と思ったら、Webpackが色々やってくれているらしい。

localhost:8080

f:id:s12bt:20161120222009p:plain

app.jsが差し込まれている。 app.js開くと、webpackBootstrapってコメントが見えるので、そういうものだとしてとりあえず置いておきたい。

app.js
/******/ (function(modules) { // webpackBootstrap
/******/    var parentHotUpdateCallback = this["webpackHotUpdate"];

main.js

projectDir/src/以下にjsファイルがmain.jsしかなかったので、これだろうと思って読む。

import Vue from 'vue'
import App from './App'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
})
  • Vue本体を呼ぶ
  • 使用するコンポーネント?(App)を呼ぶ
  • Vueするよ!
    • #appの場所に(index.html内)
    • template: (importした名前)
    • components: (importした名前)

templateとcomponentよくわからないけど、とりあえずそういうものだとしておいとく

なぜAngular2を学びたいのか

そもそも

  • 今やってる仕事で採用しているのがたまたまAngular2だった
  • Angular2噛まないところをやっていたのだけれど、だんだん触る必要がでてきた
  • Angular1はビューのところの仕事やったことあるし、いけるだろうと思った
    • 全然いけなかった
  • 自分の手持ちチケットが1人で解決できないのがすごく悔しい
  • やるしかない

後づけ的な

  • 生きてるコード読めて触れるチャンス
  • 詳しい人がいる
    • 手がかりなしに1人でやっていくのはしんどい
  • jsはjQueryでなんとか書いてたレベルなので、ここでモダンと言われてるものを学んでいかないと生き残っていけないのでは
  • コミュニティ楽しそうだなと思った

がんばろう。とりあえず1000時間。

Angular2 細かい言葉とかの意味を知りたい




読めばわかるよね。ということらしい。なるほど。



細かいところが気になりだす。



調べるべき単語がわかると少し進める!助かる!
そしてAngular1, 2気をつける。






NgModuleがRC.5から導入されたもの。RC.5は2016/8/10に出てたものなので、元々見てたスライド2016/3の情報でもう古いということがわかった。

その他

ReactとAngular2ってどう違うのって聞いて、そもそも比べるものじゃないと伝えられた。
ReactはViewのフレームワーク、対してAngular2はフルスタックなフレームワーク



そう言われればわかる。

Angular2 コンポーネントをつくる

15ページ目からだった。

ちょっと整理。

コンポーネントの作り方



alert-button.component.ts

import {Component} from 'angular2/core';

@Component({
  selector: 'my-alert-button',
  templateUrl: '/src/components/alert-button.component.html'
})
export class AlertButtonComponent {
}


alert-button.component.html

<button>click me</button>

コンポーネントを表示する

app.components.ts

import {Component} from 'angular2/core';
import {AlertButtonComponent} from "./alert-button.component";

@Component({
  selector: 'me-app',
  templateUrl: '/src/components/app.component.html',
  directives: [AlertButtonComponent]
})
export class AppComponent {
}

1. 表示したいコンポーネントをimportする
2. コンポーネント定義のdirectivesで、表示したいコンポーネント名を指定


って言ってたけど、現段階では、どういう名前で他のところから呼び出すかを、export class で指定してあげているという認識。あっているかはまだよくわからない。

表示できなかったのはimportしてなかったのが原因だった



買ってよかったWebStorm.

疑問




なるほど。

DevToolsのエラーだけじゃなくて、ターミナルのエラーを見よう




xhr_impl.jsさんが何者なのかはわかってないけど、ググッた結果まだわからなくて大丈夫そう。

今日はここまで



総括


railsチュートリアルちょっとやったときにも思ったけど、ドキュメント読んで1から書くよりも、実際に動いているものを手加えて動く/動かない試しながらやったほうが楽しい。

Angular2 HelloWorld

一応動かせたけど全然わからないので、日本語資料を探した。

読んだだけじゃだめだと思って手を動かすことに。

`npm start`して、VALIDって出てきてどっちだっけって悩んだ。字面似てるよね。

`npm start`でなにしてるのか`package.json`の中身ちゃんと読んだ。

railsだとディレクトリ構造もう指定されてたよなぁとか。

これ。雰囲気で流し見してた。


Angular 2 Complete Course - Sections 1 & 2