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

north-memo

数学できない方の数学科のブログ、一応デザイナー…なのか…?

Reactを勉強した(?) 3日目

creator.dwango.co.jp クリエイターズブログで記事を執筆しました。思った以上の反響で驚いております…!!読んでいただいた方、感想を頂いた方、githubにstarを下さった方など…、本当に有難うございます。これを励みに、これからも精進してまいります。

さて、タイトルはさておいてAngularJSのチュートリアルで学んでいます。

今日やったこと

環境構築

  • angular-phonecatをclone
  • npm install
    package.jsonに依存パッケージを書いておけば npm install で全てインストールしてくれるということを知った。便利
    • bowser
    • http-server
    • karma
    • karma-chrome-launcher
    • karma-firefox-kauncher
    • karma-jasmine
    • protractor
    • shalljs
  • npm startで完成品を見てみる
    • npm start は何を読み込んで何を実行しているんだろうか?
  • npm test でunitテストが出来る
    • 何を読み込んでいるのか調べておく
    • 「テスト」というものについては貸していただいた本で勉強しておく
  • npm run update-webdriver
  • npm protractor
    • なんかいろいろテストしてくれるやつらしいけど、意味がよくわからなかったので、後から調べる

STEP0 : bootstrapping

  • git checkout -f step-0
    ブランチを切り替えることでチュートリアルを成立させるの頭いい使い方だなと思った
  • もっかいnpm install
    ここではチュートリアルようにvalidetorとかいろいろインストールしてくれてるみたい
  • コードを見てみる
<!doctype html>
<html lang="en" ng-app>
  <head>
    <meta charset="utf-8">
    <title>My HTML File</title>
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <script src="bower_components/angular/angular.js"></script>
  </head>
  <body>

    <p>Nothing here {{'yet' + '!'}}</p>

  </body>
</html>
  • ng-app 属性 : これがangularJSのルートのHTML要素だよというflag
  • <script src="bower_components/angular/angular.js"></script> : HTMLを全て読み込むまで待ってから実行するcallbackが起動する感じになってる
  • <p>Nothing here {{'yet' + '!'}}</p>: {{}}で書くとモデルを参照できたりJSっぽことが出来るよ
  • bootstrappingでやっている重要な3つのこと
    • injectorによるmoduleの依存関係の解決
    • root scopeができて、applicationのModelのContextになる。
      • 後半何を言っているのかよくわからないので、そのうち分かるようになるのを待つか、調べる。
    • ngappのあるrootのHTML要素から順にDOMを「コンパイル(単純なDOMのれんラヂング+JSっぽいこと)」していく。

今日は一旦ここまで。明日はStatic Templeteをする予定。

そういえば、会社の優しいフロントエンドエンジニアの方がReactやNode.js、JSでのテストの手法などの本をおすすめ&貸して頂きました。ありがたい…!!頑張って勉強します〜〜。