とあるプログラムを開発していました。masterブランチで、です。これにbootstrapを導入することになったため、bootstrapというブランチを自分のサーバ作成してそこで作業していました。もちろん、bootstrapはリモートにpushしています。 さて、bootstrapブラ…

Tour of heroesのチュートリアルをやっていて次のコードを書いてみました： <li *ngFor="let hero of heroes" (click)="onSelect(hero)" [class.selected]="hero === selectedHero" [routerLink]="['/detail', hero.id]"> これがどういったHTMLとして生成されるか？おそらく、こんな感じだと予想していました： <li onclick="..."><a href="/detail?id=1">ヒーローの名前</a></li> しかし実際に出てきたソースはこんなでした…</li>

Angularのチュートリアルで、このようなコードがあります： getHero(id: number): Promise<Hero> { return this.getHeroes().then( heroes => heroes.find( hero => hero.id === id )); } findに指定しているコールバック関数は、書き直すとこうなります： (hero) </hero>…

ng buildでコンパイル時にエラーが出てもエラーの原因が今ひとつわからない場合があります。 そんなときはtscコマンドで怪しそうなファイルをコンパイルしてみましょう。 tscコマンドのほうが役に立つ情報をはいてくれる場合があります。 例えば、次のソース…

置換する文字列にシングルクオートとドル記号があったため手こずりました： どういう置換をしたいか？ 置換前の文字列： ['align' => $hoge] 置換後の文字列： ['align' => $foo] 僕が書いた正規表現（間違い） perl -pi -e 's/\[\'align\' => \$hoge\]/\[\'…

これはHeroServiceにおいて、getHeroes関数の戻り値をHero[]からPromise<Hero[]>に変更した場合に発生しました。戻り値がPromiseになっているので、呼び出し側も相応に変更する必要があります。 変更前 ngOnInit():void { this.heroes = this.heroService.getHeroes(</hero[]>…

こんな需要があるのかどうかわからないのですが、実験していて出来たので共有です 前提条件 データ 得たい結果 動くケース matchingとextractを使う場合 matchingとselectを使う場合 leftJoinWithとselectを使う場合 動かないケース containでextractもしく…

表題のエラーは、戻り値を指定している関数において何もreturnしなかった場合に発生します。 例： getHero(id: number): Promise<Hero> { this.getHeroes().then( promised_heroes => promised_heroes.find( hero => hero.id === id)); // returnが抜けている }</hero>

Angularのチュートリアルをやっていて見慣れない記述が気になりました： +params.get('id') この+はunary plusといいまして、値を数値に変換してくれるそうです： developer.mozilla.org JSFiddleでテストした結果は以下の通り： console.log(+"3"); // 3 co…

Tour of Heroesのチュートリアルでは、次の2箇所でrouterLinkが使われています。 <a routerLink="/dashboard">ダッシュボードへ</a> <a *ngFor="ler hero of heroes" [routerLink]="[ '/detail', hero.id ]" >{{hero.name}}</a> これはどちらでもいいというわけではありません。上記を逆にしてみます：

Angular4でのプログラミングにちょっぴり慣れてきましたが、エラーメッセージは不可解なものが多いです。 今回の Declaration expected はビルド時に発生しました。原因は、デコレータの終わりにセミコロンをつけていたため： @Component({ }); export class…

Angularのドキュメントを見ていたところ、ngForがdeprecatedとの記載がありました： https://angular.io/api/common/NgFor そこで、次のソースのngForをngForOfに変更したのですが、エラーがでます： <div class="heroes"> <li *ngFor="let hero in heroes"> {{hero.name}} </li> </div> stackoverflowを見たところ、どうやら…

ngForを使っていたところ、コンパイルが通るものの表題のエラーがコンソールに出力されていました。 原因はここでした： <div class="heroes"> <li *ngFor="let hero in heroes"> {{hero.name}} </li> </div> 正しくはlet hero of heroesとあるべきなのです。これはES6のforと合わせるためだそうです： for...of - JavaScript…

コンパイルしたjsファイルを生成するにはng buildをng serveの代わりに実行します。 するとdistフォルダにjsファイルが書き出されます。 これまでnpm start (ng serve)を実行していたのですが、jsファイルが生成されないのを不思議に思っていました。ng serv…

二階で仕事をするのだが、無線LANの電波が弱いためかイライラする。そこで有線LANで接続することにした。ドライバのインストールとかよくわからないのでネットの評価をみて購入したのはAnkerのこいつ、2000円弱だった： Anker アルミニウムユニボディハブ LA…

Tour of Heroesアプリに、新たな要件を加えます： ダッシュボードのビューを追加 ヒーロー一覧とダッシュボードの間を遷移可能にする どちらかのビューでユーザがヒーロー名をクリックすると、そのヒーローの詳細ビューに遷移する メールの中のディープリン…

Scroll Reverser トラックパッドとマウスのスクロール方向を逆にできる。超便利。 Scroll Reverser for macOS iTerm2 ターミナルソフト。右クリックでペーストしたり、色々便利なカスタマイズが可能。 iTerm2 - macOS Terminal Replacement ChomeのAuto Copy…

機種 Mac book pro 13 early 2015 8GB/128GB Macいいなーと思ったところ トラックパッドが便利 ディスプレイが超綺麗 ターミナルが最初から入っている・OSに組み込まれている 起動が速い デザインがかっこいい ctrlキーがいい場所にあるので、vimが使いやす…

サービス Tour of Heroesアプリを進化させていくにつれ、ヒーローのデータをアクセスするコンポーネントを増やすことになります。 同じコードを何度もコピペするのではなく、再利用可能なデータサービスを作り、それを、必要としているコンポーネントに注入…

第3章までに作成したプログラムではAppComponentが全てを担っていました。このペースで機能を追加していくとメンテナンスが難しくなります。 そこで本章では、それぞれが決まったタスクもしくはワークフローをもった複数のコンポーネントに分割していきます…

英語の元のページはこちら 前提条件としてnode.jsがインストールされていることが必要です。 node.jsのインストール cd /tmp curl --silent --location https://rpm.nodesource.com/setup_8.x | sudo bash - sudo yum -y install nodejs sudo yum -y install…

第3章では、複数のヒーローをリスト表示し、ユーザがヒーローを選択すると詳細を表示する仕組みを作ります。 元の記事はこちら ウェブサーバの起動 （既に実施していたら不要です） cd ~/angular-tour-of-heroes ng serve --host=0.0.0.0 --public=グローバ…

元のサイトはこちら。かなり端折っていますが一応日本語版です。 第2章ではアプリを実際に作ります。 チュートリアルでは開発をローカルで進めていますが私はWindowsユーザでローカル開発が苦痛なのでAmazon Linux上で進めます。 アプリの作成 アプリの起動 …

Angularを触ってみるため公式チュートリアルをやってみました。日本語版がないのでここに備忘録を兼ねて纏めていきます。 今回はまず、QuickStartです。私はAmazon Linuxを使っています。 QuickStartの実施 所要時間：約15分 Amazon Linuxのバージョン（参考…

自分がプログラマになる前は、こう想像していた： 仕様が明確である 納期に余裕がある 最先端のツールを使える 椅子と机が使いやすい ディスプレイが何枚もある 実際にプログラムを書いて納品してみてこう感じた： 仕様が明確だがガチガチではない（実装側の…