ケヴィンのなんかいろいろ

ハースストーンとかその他色々なことについて話すブログです

MENU

あんぎゅぎゅぎゅんぎゅんらでポートフォリオサイトを作りたい話 1

バーチャル高専2年生のまふゆちゃんにAngularの技術書を買ってもらったので、それを使ったり使わなかったりしながらポートフォリオサイトを作りたいね。タイトルが凄いことになってるのは検索避けです。

今回の目標

Win機で環境作ってちょっと触る

環境構築

TypeScriptはおろかJavaScriptにすら触れたことがないけど、まずは本機上に開発環境を整えよう。

angular windowsでぐぐって一番上に出てきたやつをやります。

qiita.com

バージョン確認

>nodist ls
  (x64)
> 7.2.1  (global: v7.2.1)
>npm -v
3.10.10

この記事には書かれてないけどAngular自体のも確認。バージョン確認は大切。

>ng version
You are running version v7.2.1 of Node.js, which is not supported by Angular CLI v6.
The official Node.js version that is supported is 8.9 and greater.

Please visit https://nodejs.org/en/ to find instructions on how to update Node.js.

ンンンンンンンンンンンンンンンンンンンンちょっとまてnot supportedとか書いてるぞGoogle先生!!!

Angular CLI v6ではサポートされていないNode.jsのバージョンv7.2.1を実行しています。 サポートされている公式のNode.jsのバージョンは8.9以上です。

Node.jsのアップデート方法についてはhttps://nodejs.org/ja/をご覧ください。

はえーーーーーーーーーーーー

あ、さっきのサイトのタイトルAngular5じゃん。失礼しました。

Node.jsのアップデート

ぐぐったら10.14.1が安定板らしい。

nodejs.org

Angular 6がサポートしてるのが8.9以降らしいですけど、まあjs自体に後方互換性とかあるでしょ。

ということで追加。

>nodist add 10.14.1
 10.14.1 [===============] 24283/24283 KiB 100% 0.0s
10.14.1
>nodist 10.14.1
10.14.1
Default global pacakge update dsuccessful.

よしじゃあnpmもやろう。

>nodist npm match
npm match
stream.js:74
      throw er; // Unhandled stream error in pipe.
      ^

Error: Failed to read response from https://codeload.github.com/npm/npm/tar.gz/v6.4.1
    at Request.<anonymous> (C:\Program Files (x86)\Nodist\lib\build.js:110:25)
    at emitOne (events.js:96:13)
    at Request.emit (events.js:188:7)
    at Request.onRequestResponse (C:\Program Files (x86)\Nodist\node_modules\request\request.js:954:10)
    at emitOne (events.js:96:13)
    at ClientRequest.emit (events.js:188:7)
    at HTTPParser.parserOnIncomingClient [as onIncoming] (_http_client.js:473:21)
    at HTTPParser.parserOnHeadersComplete (_http_common.js:99:23)
    at TLSSocket.socketOnData (_http_client.js:362:20)
    at emitOne (events.js:96:13)
    at TLSSocket.emit (events.js:188:7)
    at readableAddChunk (_stream_readable.js:176:18)
    at TLSSocket.Readable.push (_stream_readable.js:134:10)
    at TLSWrap.onread (net.js:551:20)

?????????????????????????????????????????????????

なにこの・・・なに?エラー読むの面倒くさいのでおもむろにangularをアンインストールしようとする。

>npm uninstall -g @angular/cli
internal/modules/cjs/loader.js:582
    throw err;
    ^

Error: Cannot find module 'C:\Program Files (x86)\Nodist\npmv\6.4.1\bin\npm-cli.js'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)
    at Function.Module._load (internal/modules/cjs/loader.js:506:25)
    at Function.Module.runMain (internal/modules/cjs/loader.js:741:12)
    at startup (internal/bootstrap/node.js:285:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:739:3)

なんか変わった。えーと、Error: Cannot find module 'C:\Program Files (x86)\Nodist\npmv\6.4.1\bin\npm-cli.js'ね。なるほどね。

f:id:kvin_MisterD:20181203150926p:plain

いやなにもないが・・・・・・・・・・・・・・・・・。

エラーをちゃんと読んだらDL失敗してるっぽい。ぐぐったら開発者が忙しくて対応しきれてないとかなんとか。なるほどね。

qiita.com

修正して再挑戦。

>nodist npm match
npm match
https://codeload.github.com/npm/cli/tar.gz/v6.4.1 [============== ] 4809/5150 KiB 93% 0.4s

・・・なんか93%で止まってませんか。

>npm -v
6.4.1

・・・まあいっか!

Angularの再インストール

普通にコマンド実行。

>npm install -g @angular/cli
C:\Program Files (x86)\Nodist\bin\ng -> C:\Program Files (x86)\Nodist\bin\node_modules\@angular\cli\bin\ng
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\@angular\cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @angular/cli@7.1.0
updated 1 package in 16.938s

すかさずバージョン確認。

>ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.1.0
Node: 10.14.1
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.11.0
@angular-devkit/core         7.1.0
@angular-devkit/schematics   7.1.0
@schematics/angular          7.1.0
@schematics/update           0.11.0
rxjs                         6.3.3
typescript                   3.1.6

Angular CLI: 7.1.0'よさげですね。公式見たらstableがv7.1.1なんですけど!ダメじゃん!

アンインストールして最新版をインストールするも・・・

あんすと

>npm uninstall -g @angular/cli
removed 292 packages in 4.422s

いんすと

>npm install -g @angular/cli@latest
C:\Program Files (x86)\Nodist\bin\ng -> C:\Program Files (x86)\Nodist\bin\node_modules\@angular\cli\bin\ng
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\@angular\cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @angular/cli@7.1.0
added 292 packages from 177 contributors in 25.231s

うーん、npm使うと7.1.0までしか落とせないんですかね。しゃあないこれでやるぞ。

Angularのアプリケーションを作成する

作ります。名前は入力速度を考慮してhomoにします。

ng new homo
? Would you like to add Angular routing? (y/N)

なんかでてきた。Googleせんせー!

角度ルーティングを追加しますか? (y / N)

・・・。ぐぐってでてきたの。たぶんこれかな。とりあえずyにしとこう。

Angular 日本語ドキュメンテーション

ng new homo
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS
  SCSS   [ http://sass-lang.com   ]
  SASS   [ http://sass-lang.com   ]
  LESS   [ http://lesscss.org     ]
  Stylus [ http://stylus-lang.com ]

えーとこれはスタイルシートどうやって書くかっていうのだな。折角だしCSS以外で名前を聞いたことがあるSASSにしとこう。どうせこんな名前のプロジェクトで開発継続はせんやろ。Successfully initialized git.って出たので作り終えましたね。やったー。

ビルドして見る

>>ng serve --open
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Date: 2018-12-03T07:00:30.931Z
Hash: 
Time: 5338ms
chunk {main} main.js, main.js.map (main) 11.5 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 223 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.6 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.67 MB [initial] [rendered]
i 「wdm」: Compiled successfully.

f:id:kvin_MisterD:20181203160126p:plain
Welcome to homo!

Welcome to Homo!

今日の目標は達成したので終わりにしても良いですが、ちょっとだけ表示されるものを変えてみます。

折角だし表示内容をちょっとだけ変えてみる

今表示されてる画面は[プロジェクト名]/src/app/app.component.htmlらしい。じゃあこれちょっと書き換えてみる。

<h1>Welcome to { title }</h1>

<h1>Welcome to Angular!</h1>

にして保存したら自動的にリロードされた。えらい!

かわった!

f:id:kvin_MisterD:20181203162252p:plain
Welcome to Angular!

ということで終わりです。次は表示内容をもうちょっと考えるところかなー。