Tambourine作業メモ

主にスキル習得のためにやった作業のメモ。他人には基本的に無用のものです。

ANGULAR QuickStartをやってみる

プロジェクトの切れ目ってこともあり、新しいものを勉強する。

なので、買って1年ぐらいほったらかしのAngularの本をやる。 まず、githubにあるquickstartを取ってこいと書いてあるので観に行くと、 quickstartはCLIツールをインストールしてそこから取るように変わったと言っている(ようだ。エゲレス語はよくわからんけども)

https://angular.io/guide/quickstartを見ながら作業する。まずは、npm installだ。

・・・と思ったら、Macを新しくしてからnpmをまだインストールしてなかった。そこからか。 brew updateをした上で、まずはnodebrewをインストールする

> brew install nodebrew
Updating Homebrew...
==> Downloading https://github.com/hokaccha/nodebrew/archive/v1.0.0.tar.gz
==> Downloading from https://codeload.github.com/hokaccha/nodebrew/tar.gz/v1.0.0
######################################################################## 100.0%
==> Caveats
You need to manually run setup_dirs to create directories required by nodebrew:
  /usr/local/opt/nodebrew/bin/nodebrew setup_dirs

Add path:
  export PATH=$HOME/.nodebrew/current/bin:$PATH

To use Homebrew's directories rather than ~/.nodebrew add to your profile:
  export NODEBREW_ROOT=/usr/local/var/nodebrew

Bash completion has been installed to:
  /usr/local/etc/bash_completion.d

zsh completions have been installed to:
  /usr/local/share/zsh/site-functions
==> Summary
🍺  /usr/local/Cellar/nodebrew/1.0.0: 8 files, 38.4KB, built in 11 seconds

マニュアルでセットアップ動かせと書いているので、やってみよう

> /usr/local/opt/nodebrew/bin/nodebrew setup_dirs

特に何も表示されない。うむ?

PATHの設定もしておく。fishを使っているので以下

> set -U fish_user_paths $HOME/.nodebrew/current/bin $fish_user_paths
set: Warning: $PATH entry "/Users/tambara/.nodebrew/current/bin" is not valid (No such file or directory)

確かにディレクトリないっすね。いいのかな。ま、いいか。

nodeをいれよう。最新版でいいよね?

> nodebrew install latest
Fetching: https://nodejs.org/dist/v10.11.0/node-v10.11.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully

使うバージョンを指定する

> nodebrew ls
v10.11.0

current: none
> nodebrew use v10.11.0
use v10.11.0
> nodebrew ls
v10.11.0

current: v10.11.0
> ls .nodebrew/current/
CHANGELOG.md README.md    include      share
LICENSE      bin          lib

お、パス設定したディレクトリはこのタイミングで出来るんですね。

> node -v
v10.11.0
> npm -v
6.4.1

やっとAngularに取りかかれる。まずは、CLIツールを入れる。

> npm install -g @angular/cli
/Users/tambara/.nodebrew/node/v10.11.0/bin/ng -> /Users/tambara/.nodebrew/node/v10.11.0/lib/node_modules/@angular/cli/bin/ng

> fsevents@1.2.4 install /Users/tambara/.nodebrew/node/v10.11.0/lib/node_modules/@angular/cli/node_modules/fsevents
> node install

[fsevents] Success: "/Users/tambara/.nodebrew/node/v10.11.0/lib/node_modules/@angular/cli/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
+ @angular/cli@6.2.3
added 310 packages from 209 contributors in 17.074s

新規プロジェクトを作る。ngってのが追加されたコマンドなのね。ビルドツールなのかなあ?

> mkdir anglar_study
> cd anglar_study/
> ng new my-app
CREATE my-app/README.md (1022 bytes)
CREATE my-app/angular.json (3548 bytes)
CREATE my-app/package.json (1312 bytes)
CREATE my-app/tsconfig.json (408 bytes)
CREATE my-app/tslint.json (2837 bytes)
CREATE my-app/.editorconfig (245 bytes)
CREATE my-app/.gitignore (503 bytes)
CREATE my-app/src/favicon.ico (5430 bytes)
CREATE my-app/src/index.html (292 bytes)
CREATE my-app/src/main.ts (373 bytes)
CREATE my-app/src/polyfills.ts (3194 bytes)
CREATE my-app/src/test.ts (642 bytes)
CREATE my-app/src/styles.css (80 bytes)
CREATE my-app/src/browserslist (388 bytes)
CREATE my-app/src/karma.conf.js (964 bytes)
CREATE my-app/src/tsconfig.app.json (166 bytes)
CREATE my-app/src/tsconfig.spec.json (256 bytes)
CREATE my-app/src/tslint.json (314 bytes)
CREATE my-app/src/assets/.gitkeep (0 bytes)
CREATE my-app/src/environments/environment.prod.ts (51 bytes)
CREATE my-app/src/environments/environment.ts (662 bytes)
CREATE my-app/src/app/app.module.ts (314 bytes)
CREATE my-app/src/app/app.component.css (0 bytes)
CREATE my-app/src/app/app.component.html (1141 bytes)
CREATE my-app/src/app/app.component.spec.ts (995 bytes)
CREATE my-app/src/app/app.component.ts (210 bytes)
CREATE my-app/e2e/protractor.conf.js (752 bytes)
CREATE my-app/e2e/tsconfig.e2e.json (213 bytes)
CREATE my-app/e2e/src/app.e2e-spec.ts (302 bytes)
CREATE my-app/e2e/src/app.po.ts (208 bytes)

> fsevents@1.2.4 install /Users/tambara/anglar_study/my-app/node_modules/fsevents
> node install

[fsevents] Success: "/Users/tambara/anglar_study/my-app/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> node-sass@4.9.3 install /Users/tambara/anglar_study/my-app/node_modules/node-sass
> node scripts/install.js

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.9.3/darwin-x64-64_binding.node
Download complete  ⸩ ⠋ :
Binary saved to /Users/tambara/anglar_study/my-app/node_modules/node-sass/vendor/darwin-x64-64/binding.node
Caching binary to /Users/tambara/.npm/node-sass/4.9.3/darwin-x64-64_binding.node

> circular-json@0.5.7 postinstall /Users/tambara/anglar_study/my-app/node_modules/circular-json
> echo ''; echo "\x1B[1mCircularJSON\x1B[0m is in \x1B[4mmaintenance only\x1B[0m, \x1B[1mflatted\x1B[0m is its successor."; echo ''


CircularJSON is in maintenance only, flatted is its successor.


> node-sass@4.9.3 postinstall /Users/tambara/anglar_study/my-app/node_modules/node-sass
> node scripts/build.js

Binary found at /Users/tambara/anglar_study/my-app/node_modules/node-sass/vendor/darwin-x64-64/binding.node
Testing binary
Binary is fine
added 1154 packages from 1334 contributors and audited 39031 packages in 46.422s
found 0 vulnerabilities

    Successfully initialized git.

動かしてみる

> cd my-app/
> ng serve --open
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
                                                                              u Date: 2018-09-22T08:22:40.117Z
Hash: d9011fea4ab02afe01be
Time: 7549ms
chunk {main} main.js, main.js.map (main) 10.7 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 227 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.22 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 15.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.28 MB [initial] [rendered]
ℹ 「wdm」: Compiled successfully.

--openオプションをつけると、勝手にブラウザのウィンドウまで上がる。お節介な。