2017年11月2日木曜日

公式ブログを移転しました

Angularチーム公式ブログのMedium移転に伴い、翻訳記事の作成コストや記事管理などを鑑みて、Angular日本ユーザー会の公式ブログもこちらのMediumに移行することにしました。

移転先は https://medium.com/angular-japan-user-group です。
Bloggerからは順次記事を移行していきます。
投稿者 時刻: 0 件のコメント:

2017年9月24日日曜日

ng-japan Meetup 2017 Autumnを開催します

すでに公式Twitterやconnpassで告知しているとおり、2017年10月10日にng-japan Meetup 2017 Autumnを開催します。


イベントページ: https://ngjapan.connpass.com/event/65841/

イベントの詳細やスケジュールについては上記URLを参照してください。

全国のサテライトミートアップについて


今回、ng-kyotoとng-fukuokaの協力のもと、京都と福岡でミートアップのリモート開催を行うことが決まりました！



それぞれの会場では東京会場の映像を中継するだけでなく、各地とビデオ通話を繋いでの質疑応答なども予定しています。
ng-japanとしては初めての試みなので、京都と福岡の近辺に住んでいる方はぜひ参加してください！



投稿者 時刻: 0 件のコメント:

2017年8月30日水曜日

Angularを正しく学習するためのガイドライン

Angular 2.0のリリースからまもなく一年が経過し、今はAngularのバージョン5がリリースされようとしています。Angularを学習するための資料も去年と比べ大幅に増えました。さらにAngular CLIの普及もあり、これからAngularをはじめる人にとって良い環境が整ってきています。

ただし、すべての資料が常に正しく、最新の情報であるとは限りません。むしろ多くの資料はメジャーアップデートやマイナーアップデートに追従できておらず、最新のAngularとなんらかの差分があるでしょう。また、間違った情報を掲載しているものもゼロではありません。

そこで本記事ではAngularを学習する上で、その資料を参考にすべきかどうかを判断するいくつかのポイントを紹介します。このポイントを満たしているからといって常に良い資料であるとは言えませんが、ひとつの基準として参考にしてください。

避けたほうが良い資料の特徴


  • 最後に更新された時期や、その時点のAngularのバージョンが明記されていないもの
  • AngularJS2やAngular2など、間違った名称が使われているもの
  • AngularJSのロゴ(灰色の縁取り)が使われているもの
  • 廃止となった機能を使うためにあえて古いバージョンのAngularを使っているもの
  • 非推奨となった機能を使っているのに注意書きがされていないもの

Angularはバージョニングとリリースのポリシーに示すとおり、廃止されるAPIは基本的に必ず非推奨期間を置きます。1年以内の記事であれば真似をしても動かないということはないでしょう。そのため、記事や書籍を参考にするときにはその資料がいつ、どのバージョンを元に書かれたものなのかを把握しておきましょう。

また、ブランド名については公式のアナウンスのとおり、AngularJSとは別のAngularという名前に統一され、ブランド名にバージョン番号は含まれません。パッケージのバージョンとしての2.0や4.3などではなく、Angular 4などの名称で呼ぶのは間違いです。ロゴについてもAngularJSとAngularの違いをはっきりさせるために、古いロゴは使うべきではありません。

公式ドキュメントを活用しましょう


angular.ioで公開されている公式ドキュメントは常に最新で正しい教材です。知りたいことについて、まずは公式ドキュメントがないかどうかを確認しましょう。

コミュニティを活用しましょう


Angular日本ユーザー会ではユーザー同士で雑談や技術的な質問など、コミュニケーションを行うための誰でも参加できるSlackチームを運営しています。slack-invite.ngjapan.orgから参加できますので、英語のドキュメントを読むのが難しく日本語で尋ねたいときにはぜひ活用してください。


投稿者 時刻: 1 件のコメント:

2017年7月18日火曜日

Angular 4.3がリリースされました

この記事はAngular公式ブログ Angular 4.3 Now Availableを元に翻訳、加筆したものです。

Angularバージョン4.3がリリースされました。このマイナーリリースは告知済みのSemantic Versioningにしたがっています。すなわち破壊的変更を含まず、バージョン4.x.xとして単純に置換可能です。

主な変更点


  • HTTPリクエストを作成するための、より軽量で使いやすくパワフルなライブラリでHttpClientを導入しました。詳しくはドキュメンテーションを参考にしてください。
  • GuardとResolverのための新しいルーターライフサイクルイベントが追加されました。GuardsCheckStart、GuardsCheckEnd、ResolveStart、そしてResolveEnd の4つのイベントがNavigationStartのようなイベントの中に加わりました。
  • 条件によってアニメーションを無効にする新しい属性 [@.disabled] が追加されました。
  • エミュレートされた/deep/ CSSセレクタ(>>>としても知られるShadow-Piercing子孫コンビネータ)のサポートは多くのブラウザで非推奨であり、Chromeでも削除されます。この機能を現在使っている開発者のために一時的なワークアラウンドとして::ng-deepを追加しました。

新機能やバグフィックスの一覧は チェンジログ を参照してください。
投稿者 時刻: 0 件のコメント:

2017年7月8日土曜日

Angular Materialのステータスアップデート


この記事はAngular公式ブログ Angular Material Status Updateを元に翻訳、加筆したものです。

Angular Materialについての最後の投稿から6ヶ月の間、開発チームは熱心にクールな新しいコンポーネントの実装や改善に取り組んできました。いくつか代表的なものを挙げます:

  • Datepickerやexpansion panel、accordionなどのコンポーネント 
  • @angular/platform-serverサポートの改善 
  • Overlayの調整可能なスクロールストラテジー 
  • 厳密なnullチェックやno-unused-paramsへの対応 
  • テーマのためのTypography拡張機能 
  • material.angular.io上にtheme-pickerの設置 
  • たくさんのバグ修正 

今日、新しいComponent Dev Kitのリリースと、Angular Material beta.8と共にdate-tableコンポーネントの初期バージョンを発表しました。

Component Dev Kit


Angular Materialの作業中、重要な目標は、コンポーネントを構築するための一般的な再利用可能な基盤を作成することでした。私たちは今、この基盤をスタンドアロンのパッケージとして誰にでも共有したいというところに行き着きました。それがAngular CDKです。

CDKの目的は、Webのための素晴らしいコンポーネントを開発するためのツールを開発者に提供することです。これは、Material Designビジュアル言語を採用せずにAngular Materialの機能を利用したいプロジェクトに特に役立ちます。

CDKの最初のベータ版は@angular/cdkとしてnpm上で利用可能になりました。この初期リリースに含まれる機能は、アクセシビリティ、テキストの方向（LTR, RTL）、プラットフォームの検出、動的コンポーネントのインスタンス化です。今後のリリースで、Angular MaterialのコードをCDKに引き続き移動します。

CDKを使ったコンポーネントの開発を始めるには、npmからインストールし、GitHub上のドキュメンテーションを参考にしてください。

Data-table




Angular Materialに最もリクエストされていた機能であったdata-tableがついにデビューしました。@angular/materialの一部として<md-table>と、@angular/cdkの一部として<cdk-table>、2つのテーブル実装をリリースします。Material Designにスタイルされた<md-table>の実装は新しいCDKの<cdk-table>コンポーネントから提供される機能をベースにしています。

<cdk-table>は、完全にテンプレート化されたAPIと動的な列、アクセシブルなDOM構造を備えた、カスタマイズ可能なデータテーブルで、目的化されていません。このコンポーネントは誰でも独自のdata-tableエクスペリエンスを構築できるコアとして機能します。

また、@angular/materialはデータテーブル機能をベースにして、<md-paginator>およびmdSortディレクティブを提供しています。これらはページネーションと並べ替えのためのUIをdata-table自身とは疎結合に、Material Designのガイドラインにそって提供します。

data-tableの使い方についてもっと詳しくしりたい場合はガイドを読むか、material.angular.io上のドキュメンテーションをチェックしてください。

これは私たちがdata-tableのために用意したものの味見にすぎません。固定ヘッダーや固定列、行の差分レンダリング、colspanなど、実装中の機能の開発はGitHub Pulseを通じてウォッチできます！ GitHub上でチームの作業計画を見ることもできます。




新しい機能を楽しんでもらい、GitHubやTwitter上でコミュニティのフィードバックがもらえることを楽しみにしています！
投稿者 時刻: 0 件のコメント:

2017年6月19日月曜日

ng-japan 2017を開催しました


6月17日に ng-japan 2017を開催しました。17人のスピーカーと5社のスポンサー、そして200人以上の参加者のみなさんのおかげで、今年も素晴らしいイベントにすることができました。本当にありがとうございました。

コンセプト


 今年のng-japanは「Webのお祭り」というコンセプトで準備を進めました。AngularだけではなくAngularを取り巻く周辺技術についてのセッションを多く採用して、Angular Wayではなく、Webの一員としてのAngularという視点を重視しましたが、いかがだったでしょうか？

 また、今年は第3回目のng-japanで、2年ぶりにAngularコアチームのメンバーを招いての開催になりました。さらに海外からもスピーカーを迎えたことで、いままでよりも国際色を強めたng-japanになりました。
海外のスピーカーを5人も迎えることになり、通訳を用意するかどうかの議論はもちろん行いましたが、最終的に英語のセッションはそのまま英語で聞いてもらうことに決めました。参加者の中には英語が聞き取れずに苦労した方もいたかもしれませんが、限られた時間を通訳に割くよりも、充実したセッションの提供を優先したことをご理解ください。

Youtubeアーカイブ


ng-japanの各トラックの様子はYoutubeチャンネルでアーカイブ動画が公開されています。

講演スライド


公開されているスライドは以下のリンクからアクセスできます



ng-japan 2018+


ng-japanは年に1回のペースで開催しており、もちろん2018年にも4回目のng-japanを計画中です。今年は300人の参加募集に対して500人以上の応募がありました。多くの方が定員を超えて参加できなかったことについては、今後改善していくつもりです。今後のng-japanをよりよいイベントにしていくために、みなさんからのフィードバックをお待ちしています。


それではまた来年、ng-japanでお会いしましょう！
投稿者 時刻: 0 件のコメント:

2017年6月13日火曜日

Angular 4.2がリリースされました

この記事はAngular公式ブログ Angular 4.2 Now Availableを元に翻訳、加筆したものです。
Angular バージョン 4.2 がリリースされました。 このマイナーリリースは告知済みのSemantic Versioningにしたがっています。すなわち破壊的変更を含まず、バージョン4.x.xとして単純に置換可能です。

主な変更点

  • Angular Formsは新たにmin/max属性に対するバリデータを含むようになりました
  • ApplicationRef のboostrapメソッドに任意の要素への参照を渡すことで、コンポーネントを起動できるようになりました
  • MissingTranslationStrategyやxliff2ファイル中のロケーションノートを含む、i18nツールの改善
  • 将来的にAoTコンパイルしたコンポーネントをテストできるようにするための基盤を導入しました
  • オプトインのフラグとして alwaysCompileGeneratedCode が使用可能になりました。これは将来的にデフォルトで有効になる予定です

新機能やバグフィックスの一覧は チェンジログ を参照してください。

Angular Animations

アニメーションを簡単に、そしてさらに強力にする多くの新機能が追加されました。いくつかは ng-conf 2017 において発表されたものです。
  • アニメーション内部に変数を用意し、オプションで設定する
  • animation()を使って再利用可能なアニメーションを定義する
  • query()を使ってアニメーション内で子要素をクエリする
  • stagger()を使ってアニメーション内で複数の要素を動かす
  • クエリされた要素が自身のアニメーションを開始できるようにする
  • ルートの変更時に完全なアニメーションを行う
  • AnimationBuilder を使ってプログラマティックにアニメーションを組み立ててコントロールする

詳細は the thinking behind these features を参考にしてください

新しくなったangular.io

本日、新しい angular.io ウェブサイトをリリースしました！ ウェブサイトのインフラ、アーキテクチャ、そしてデザインをAngularを使って再構築しました。サイトのコンテンツは以前と変わりませんが、コードとコンテンツは angular/angularリポジトリのaioディレクトリ に存在しています。

このウェブサイトは2つの目的のための第一歩です。ひとつめは、将来にわたってドキュメンテーションへのコントリビューションを受け入れやすくしたいというものです。現在は多くのドキュメンテーションのリファクタリング作業中であり、その後にはみなさんのフィードバックや改善をお待ちしています。今後、すべてのページに "improve this doc" へのリンクを追加して、直接GitHubで変更を提案できるようにする予定です。

ふたつめは、このウェブサイトを将来にわたってAngularアプリケーションの構築におけるベストプラクティスの例として提供することです。現時点のウェブサイトはプログレッシブウェブアプリケーションであり、Service Workerによるロード性能の改善をおこなっています。
投稿者 時刻: 0 件のコメント:

2017年4月27日木曜日

Angular 4.1.0がリリースされました

この記事はAngular公式ブログ Angular 4.1.0 Now Availableを元に翻訳、加筆したものです。

Angular バージョン 4.1.0 がリリースされました。 このマイナーリリースは告知済みのSemantic Versioningにしたがっています。すなわち破壊的変更を含まず、バージョン4.x.xとして単純に置換可能です。

主な変更点
  • バージョン 4.1 ではTypeScript 2.2および2.3を完全にサポートしました。開発者たちはすでにTypeScript 2.2あるいは2.3を使った体験を報告してくれていますが、今回Angular自身がTypeScript 2.3によってビルドされるようになりました。この変更は4.0リリース時点のTypeScript 2.1に対するサポートには影響しません。
  • TypeScriptの StrictNullChecks に準拠しました。開発者はそれぞれのプロジェクトでStrictNullChecksのフラグを有効にできるようになりました。

新機能やバグフィックスの一覧は チェンジログ を参照してください。
投稿者 時刻: 0 件のコメント:

2017年4月11日火曜日

Googleにおける標準言語


この記事はAngular公式ブログ Official languages at Googleを元に翻訳、加筆したものです。


 TypeScriptがGoogleの標準言語になったことを発表したng-conf 2017での私の基調講演をうけて、GoogleにおけるDartの状況について多くの質問が寄せられました。


 DartとTypeScriptの両方は同じカテゴリにいることを明確にしておきたいと思います。これらはどちらもクライアントサイドの開発に使うことを許可されています。しかし、JavaScript/ClosureやJavaのような確立した言語とは同じカテゴリにありません。これらはさらにコードの行数が多く、ツールも整備されています。

Dartはこの4年間Googleにおいて無制限にクライアント開発に使われています。DartとAngularDartはAdWordsやAdSense、Shoppingのような大規模な製品、そしてGoogle CRMのような重要な内部ツールに使われます。さらに、クロスプラットフォームのモバイルアプリケーションフレームワーク Flutter はDartを使用しており、Google CRMやShopping  Expressを含む複数のチームで使われています。Googleのコードベースには膨大な量のDartのコードが含まれています。

 TypeScriptは2017年3月からクライアント開発のための無制限の使用が認められました。TypeScriptとAngularはGoogle AnalyticsやFirebase、Google Cloud Platform（訳注: 各サービスの管理コンソールの実装に使われる）、そしてバグトラッキングや従業員管理、製品承認、起動ツールなどの重要な内部ツールに使われます。

 Googleがクライアントサイドの言語の選択肢を得て、ニーズに応じた最適なものを選べるようになったことを発表できて光栄です。
投稿者 時刻: 0 件のコメント:

2017年4月1日土曜日

Angular 4.0.0がリリースされました

この記事はAngular公式ブログ Angular: Angular 4.0.0 Now Available を元に翻訳、加筆したものです。

 Angularバージョン4.0.0 - invisible-makeover - が公開されました。これはわたしたちが発表したSemantic Versioningの採用に従ったメジャーリリースであり、ほとんどのアプリケーションにとって2.x.xとの後方互換性を保っています。

 わたしたちはこの3ヶ月間の成果であるいくつかの大きな改善と機能を含んだこのリリースを、コミュニティに共有できることをとても嬉しく思います。わたしたちはこのリリースへのアップデートが開発者にとって簡単になるように一生懸命取り組みました。

変更点


より軽量に、より高速に


このリリースで、わたしたちはAngularアプリケーションをより小さく高速にすることを約束します。これはまだ完了したわけではなく、今後数ヶ月はわたしたちがさらなる改善に注力していることが見られるでしょう。

ビューエンジン


 わたしたちはAOTコンパイルにより生成されるコードがどのようになるか、そのフードの内側に変更を加えました。この変更により、多くの場合でコンポーネントから生成されるコードのサイズは約60%に削減されます。複雑なテンプレートであればあるほど、より大きく削減されます。

 RCバージョンの期間で、わたしたちは多くの開発者から、バージョン4に切り替えた後に彼らのプロダクションバンドルが数百KB減ったことを聞きました。

 ビューエンジンについてさらに知りたい方はこちらのデザインドキュメントをご覧ください。

Animation Package


わたしたちはアニメーション機能を@angular/coreパッケージから個別のパッケージに抜き出しました。アニメーションを使わない場合、余計なコードはプロダクションバンドルに含まれません。

この変更はドキュメンテーションの検索を簡単にし、さらに入力の自動補完の助けにもなります。アニメーション機能を使うにはメインのNgModuleに、@angular/platform-browser/animationsからインポートしたBrowserAnimationsModuleを追加します。

新機能


*ngIfと*ngForの改善

テンプレートバインディング構文は新たにふたつの便利な機能をサポートします。if/else形式の構文と、observableを展開するときなどのローカル変数の宣言が可能になります。

<div *ngIf="userList | async as users; else loading">
 <user-profile *ngFor="let user of users; count as count" [user]="user">
 </user-profile>
<div>{{count}} total users</div>
</div>
<ng-template #loading>Loading...</ng-template>


Angular Universal

Angularをサーバー上で実行可能にするためのプロジェクト、Angular Universalがふたたび最新のAngularと足並みをそろえ、コミュニティによるプロジェクトからAngularチームに引き取られてからの初めてのリリースとなりました。このリリースはUniversalチームが数ヶ月かけて内部的、表面的に取り組んだ成果です。Universalのコードの大部分は今@angular/platform-serverパッケージに取り込まれています。

Angular Universalを利用する方法についてさらに知るには、renderModuleFactoryメソッドを読むか、あるいはRob Wormaldによるデモリポジトリを見てください。詳細なドキュメンテーションやコードサンプルは今後追加されます。

TypeScript 2.1と 2.2 への対応

 わたしたちはAngularをTypeScriptの新しいバージョンに合わせるために更新しました。ngcのスピードが改善され、さらにアプリケーション全体を通した型チェックも改善されました。

テンプレートのソースマップ

テンプレートの中でエラーが起こったとき、わたしたちは元々のテンプレートの文脈を提供するためのソースマップを生成するようにしました。

パッケージの変更


Flat ES Modules (Flat ESM / FESM)

わたしたちはモジュールのフラットバージョン(ECMA Scriptモジュール形式のコードを"ロールアップ"したバージョン。サンプルファイルを参照してください)を提供するようにしました。この形式はTree-Shakingを助け、生成されるバンドルのサイズを削減し、そしてビルドとトランスパイル、ブラウザでのロード時間を短縮できます。

Flat ES Modulesの重要性については "The cost of small modules" をご覧ください。

実験的なES2015ビルド

わたしたちはES2015 Flat ESM形式のパッケージも提供するようにしました。この選択肢は実験的で、オプトインです。このパッケージをRollupを使って結合すると、バンドルサイズを最大7%削減できたと報告されています。この新しいパッケージを試すには、package.jsonの "module" プロパティの代わりに "es2015" プロパティを使うように、ビルドツールチェインを設定してください。

実験的なClosure互換性

わたしたちはすべてのコードにClosureアノテーションを付与しました。これはClosure CompilerによるAdvansed Optimizationを有効にし、より効果的なTree-Shakingとバンドルサイズの軽減をもたらします。

4.0.0へのアップデート


バージョン4へのアップデートはただAngularの依存関係を最新に更新する程度の簡単さで、もしアニメーションを使う場合はダブルチェックが必要です。ほとんどのユースケースではこれで動作します。

Linux/Mac:

npm install @angular/{common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router,animations}@latest typescript@latest --save

Windows:

npm install @angular/common@latest @angular/compiler@latest @angular/compiler-cli@latest @angular/core@latest @angular/forms@latest @angular/http@latest @angular/platform-browser@latest @angular/platform-browser-dynamic@latest @angular/platform-server@latest @angular/router@latest @angular/animations@latest typescript@latest --save

通常どおりng serveあるいはnpm startコマンドを実行すると、すべてが動作するはずです。

もしアニメーション機能に依存しているなら、新たにBrowserAnimationsModuleを@angular/platform-browser/animationsからルートモジュールにインポートしてください。これを行わない場合、コードのコンパイルを実行は行われますが、アニメーションがエラーを起こします。また、@angular/coreからのインポートは非推奨となったので、新しいパッケージからのimport { trigger, state, style, transition, animate } from '@angular/animations';を使ってください。

わたしたちはアプリケーションに必要な変更についてもっと知りたいときに使えるインタラクティブなAngularアップデートガイドを作成しています。

既知の問題


バージョン4における目標のひとつは、より限定的な型のサブセットを強制できるTypeScriptのstrictNullChecksにAngularを対応させることでした。わたしたちはこれをすべてのユースケースで正しく動作させるためには多くの課題が残っていることにRC期間で気づきました。4.1にて正しいサポートが入ったときに熱心に対応していたアプリケーションを壊すことを避けるため、あえて4.0をstrictNullCheckに対応させないことにしました。(トラッキングイシュー #15432)

今後の計画


わたちたちは2.xのために発表したリリーススケジュールと同じ調子に従って、次の6ヶ月のロードマップを設定する作業中です。4.0.0へのパッチアップデートと、さらに4.1もすでに始まっています。わたちたちはAngularを小さく高速にし続ける予定であり、さらに@angular/httpや@angular/service-worker、@angular/language-serviceを実験的でなくすために進化させるつもりです。

ぜひドキュメンテーションの更新やCLIの安定版リリース、そしてライブラリ作者に向けたパッケージングのガイダンスをお待ち下さい。

投稿者 時刻: 1 件のコメント:
登録: 投稿 (Atom)