howdylikes

Google Developersってわかりづらいよね

【書評】Angularデベロッパーズガイド 高速かつ堅牢に動作するフロントエンドフレームワーク Chapter09 アプリケーションの構築 をやってみた

次の本を買ったのだが、一通り読んだ後に Chapter09 アプリケーションの構築 を実際にやってみたところ、そのままだと動かなかったところが結構あったのでメモがてら書いておく。

TL;DR

すごく勉強にはなったけど、Chapter09 アプリケーションの構築 に関しては、確認しなさすぎ & 間違い多すぎ。
「執筆時から時間がたって動かなくなってしまった」。ならわかるけど、発売して2週間もたってないのにこれは酷い。

ただ、Angularの全体的な知識を得られる、という点でみるととても良い本だと思う。

前提

筆者の Angular CLI のバージョン

% ng --version

Angular CLI: 1.6.1
Node: 7.7.2
OS: darwin x64
Angular: 5.1.3
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.0.3
@angular/cli: 1.6.1
@angular/material: 5.0.3
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.1
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.10.0

HttpClientModule を使う

HttpClient は Deprecated になってる模様。(これはエラーにはならなかったけど警告がでる。)

P300 コードL4
誤
import { HttpClient } from '@angular/http';
正
import { HttpClientModule } from '@angular/common/http';

表記ミス

P304 コードL10
誤
"/edit"
正
"/area/edit"

あと、ファイル名が間違ってたり、キャプチャがおかしかったりは大量にあったので記載しない(進める上ではそんなに重要じゃない部分なので)

Pipeのロケール指定

Angular 5だとそのままだと動かない模様。

issueが立ってた。

Angular - Internationalization (i18n)

Angular - DatePipe

起動時にLocaleを指定する必要があるみたい。

誤
ng serve
正
ng serve --locale ja

あと longDate を指定する。(yyyyMMddだと20180104となってしまった)

P320 コードL1
誤
{{weather.dt | unixTimeDate : 'yyyyMMdd'}}
正
{{weather.dt | unixTimeDate : 'longDate'}}

OpenWheatherMap の daily forecast は使えない(有料)

本には無料で使えると書いてあったが、実際には無料では使えなくてエラーになる。 最近有料になったのかなーと思ったけど Web archive を見る限り結構前から有料だったみたい。 著者は有料プランのAPI KEYを使ってたのかなーと予想。(というかこれは酷いと思う。一度でも読者になりきって確認すれば分かる内容のはず。)

zone.js:2975 GET http://api.openweathermap.org/data/2.5/forecast/daily?appid={{自分のID}}&units=metric&lang=jp&cnt=7&q=tokyo 401 (Unauthorized)

f:id:howdy39:20180104221435p:plain

Angularデベロッパーズガイド  高速かつ堅牢に動作するフロントエンドフレームワーク

Angularデベロッパーズガイド 高速かつ堅牢に動作するフロントエンドフレームワーク

2017年の振り返り

転職

 5年間フリーランスをやっていたけど終止符を打って 株式会社TOPGATE に入った。 フリーランス時代の仕事としては某会社の G Suite 絡みの情シスみたいなことをずっとしていた。運用もしてたけど開発系がほとんどって感じ。G Suite の規模としては日本でもトップクラスだったので、G Suite や Google API が絡んだスキルは相当ついたと思う。

やめた理由

 新しい技術のスキルが身につきにくい環境だった、というのが一番大きい。特に AWSGCP などのクラウド環境が使えずにオンプレだったので、ここにいつまでもいたら時代に取り残されるだろうなぁと思った。フリーランスはいつ切られてもおかしくないのに、クラウド周りのスキルが身につかないならこれ以上居ても・・・みたいな。

 同僚はいい人しかいなかったし、残業はまったくと言っていいほどなかったし、いつでも休めたし、お金もそれなりにもらってた。スキルアップ問題がなければとても良い職場だったし、今でも続けてたと思う。

転職先

 G Suite のスキルを活かしつつクラウドGCP)の知識を身に着けたかった。なので G Suite と GCP を両方やっている会社から選定した。まぁいくつか思いついたけど TG社 を選んだのは今でも妥当だと思っている。

仕事関連

 一人でやる規模の新規開発案件があって、Chrome 拡張機能やら Web 画面からサーバーサイドからマネジメントから納品まですべてやった。これをやりきったことでレベルが格段に上がったと思う。

 他の案件も含めてやった技術としては、フロントがAngular CLI, Angular, Angular Material, TypeScript。サーバーが GAE/Go, Datastore/goon, gin, GCS, dep とか。Goolge API 周りだと、Sheets API, Natural Language API, Translation API, Gmail API らへん。転職理由だったクラウドGCP)の知識を身に着けたい、というのは余裕でクリアできているので概ね満足。

App Maker

 会社に慣れてきた頃から App Maker を使い始めた。 App Maker に関しては日本で一番詳しくなったと思う。App Maker 関連は次の記事でまとめてあるのでここではあまり触れない。 App Maker 2017年の個人的な総括 - Qiita

OSS

 q-accelerator という拡張機能を作ってリリースした。この前Qiitaの画面が変わったせいで動かなくなった機能が多いのでこれから直していく。

Qiita

 去年はフロントエンド周りの記事を結構書いてたのだけれど、今年は App Maker, GASなどの G Suite 関連が多かった。去年ほどは力を入れなかった気はする。来年は App Maker と GCP 周りを中心に書いていくと思う。

英語

 4月から iKnow! を始めた。英語はいつもすぐ飽きてやめてしまっていたのだけれど iknow は続いているのですごい。通勤電車でスマホでやる感じ。これは来年も続けていく。 いま合計が2100単語ぐらい。来年は4000単語まで増やしたい。

セキュリティホールの発見

 年の瀬に、某 Web サイトのやばいセキュリティホールを発見して報告した(すぐ対応された)。名前や住所より重要な個人情報が誰でも見れる状態かつ会員数も数十万人は余裕で超えているサイトだったので、漏れてたら騒ぎになったと思う。(というか漏れてないかはまだわからんのだけど・・・)

買い物

 今年は電子書籍閲覧用に iPad Pro、開発用に Macbook Pro 15、あとキーボードを HHKB を使い始めた。スマホXperia x Compact のシムフリー版に変えた。やっぱりこのサイズが一番いいね。

API error 4 (datastore_v3: NEED_INDEX): no matching index found error

GAEでindex.yamlがある状態でdeployした際に表題のエラーが発生

WEB-INF直下にindex.yamlをおいて以下のコマンドを実行してからデプロイすればdatastoreにINDEXが作られた

gcloud datastore create-indexes WEB-INF/index.yaml

参考

https://cloud.google.com/appengine/docs/standard/go/getting-started/deploying-to-app-engine?hl=ja

https://cloud.google.com/datastore/docs/tools/indexconfig?hl=ja

API error 1 (datastore_v3: BAD_REQUEST): Property Body is too long. Maximum length is 1500

DatastoreのEntityの最大文字列長は1500文字

stringで渡さずに普通に[]byteを使えばよさそう。

https://groups.google.com/forum/#!topic/golang-nuts/Zlz04UfME-A

Failed to mount component: template or render function not defined. (found in root instance)

Vue.jsを使っていてエラーが出たのでメモ

[Vue warn]: Failed to mount component: template or render function not defined. (found in root instance)

このページに書いてあるようにwebpackの設定でresolveを追加 vuejs.org

上記エラーを解決したら以下のエラーが発生

[Vue warn]: It seems you are using the standalone build of Vue.js in an environment with Content Security Policy that prohibits unsafe-eval. The template compiler cannot work in this environment. Consider relaxing the policy to allow unsafe-eval or pre-compiling your templates into render functions.

Chrome Extension開発なのでCSP対応が必要になる

npm i vue@csp

で入れ直して解決

Parsing error: 'import' and 'export' may appear only with 'sourceType: module'

ESLint使っているときに表題のエラーが発生

.eslintrcに以下の設定を追加で解決

  "parserOptions": {
    "sourceType": "module"
  },

参考

https://github.com/AtomLinter/linter-eslint/issues/462

Please configure your git user name and e-mail

Visual Studio Codeでコミットする際に件名のエラーが。 以下のように設定すれば出なくなった。理由はちゃんとみてない。。

git config --global user.name yourname
git config --global user.email youremail@address.com