【新刊紹介】『Angularアプリケーションプログラミング』8月4日発売、定番JavaScriptのフレームワークを徹底解説
本書は、JavaScriptフレームワーク「Angular」の解説書です。データバインディング、コンポーネント、依存性注入などの基本から、ディレクティブ／パイプ／サービスの自作やテスト、さらに、Angular CLIやngx-bootstrapなど関連ツール、ライブラリといった応用分野まで網羅しています。 最新Angular 4に対応し、今後のアップグレードも考慮した内容になっており、これまでになく広い領域をカバーしています。これから始める方も、新しくなったAngularが気になる方も、必見の一冊です。 担当編集者からのコメント Google開発のJavaScriptアプリケーションフレームワーク「AngularJS」は、バージョン2で「Angular」と名称変更し、さらに高機能なフルスタックフレームワークへと生まれ変わりました。本書は、その「Angular」を初めて利用する入門者向けの書
JavaScriptフレームワーク「Angular」新バージョン4の変更点と今後の展望
本連載では、Webアプリケーションフレームワーク「Angular」の活用方法をサンプルとともに紹介しています。前回は、Angularが提供するアニメーション機能について解説しました。今回は、2017年3月にリリースされたAngularバージョン4の変更点や新機能と、今後のバージョンアップの見通しを紹介します。 はじめに Angularは、Googleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。AngularJSと呼ばれていたバージョン1（AngularJS 1）から、バージョン2で大きく変更されて、以降はAngularと呼ばれています。バージョン2時点では「Angular 2」と呼ばれることもありましたが、現在はAngularが正式名称です。 Angularは2017年3月にバージョンアップされて、バージョン4になりました。Angularは今後、おお
「Angular 2」コンポーネントのライフサイクルを知って使いこなす
はじめに Angular 2はGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークで、従来のAngularJS（AngularJS 1）の次期バージョンです。 Angular 2で作成したWebページを構成するコンポーネントは、表示時に生成され、画面の入力や表示などで状態が変更されて、非表示時に破棄されるといったライフサイクルが定義されています。開発者は、ライフサイクルの変化ごとに呼び出されるメソッド（ライフサイクルフック）を実装して、ライフサイクルに対応した処理を実行できます。 本記事では、Angular 2のライフサイクルとライフサイクルフックについて、サンプルを使って説明していきます。 対象読者 Angular 2をより深く使いこなしていきたい方 最新のフレームワークを活用したい方 Angular 2が裏でどう動いているか気になる方 必要な環境
JavaScriptフレームワーク「Angular 4.0.0」がリリース
JavaScriptフレームワークAngularJSの最新メジャーリリースとなる「Angular 4.0.0」が、GoogleをはじめとするAngularJS開発チームによって、3月23日（現地時間）に公開された。同バージョンは、バージョン2.x.xとの後方互換性を備えている。 「Angular 4.0.0」では、AOTコンパイラの改良によって生成されるコードのサイズを60％程度削減するとともに、アニメーション関連機能をコアパッケージから分離したため、アニメーション機能を利用しない場合はさらなるサイズ削減が期待できる。 新機能としては、*ngIfおよび*ngForが改良され、if／else形式の記述とローカル変数の使用が可能になった。さらに、これまではコミュニティベースのプロジェクトだった、サーバサイドでの実行環境であるUniversalとの統合や、TypeScript 2.1／2.2との
「Angular 2」のHTTPクライアント機能で非同期HTTP通信を使いこなす
はじめに Angular 2はGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークで、従来のAngularJS（AngularJS 1）の次期バージョンです。 最近のWebページでは、画面の内容を動的に更新するなどの目的で、JavaScriptの処理で非同期にWebサーバーとHTTP通信する処理が多用されます。Angular 2では、この非同期HTTP通信の実装をより簡単に行うためのライブラリが提供されます。 本記事では、HTTP通信を提供するAngular 2のHTTPクライアント機能について、サンプルとともに説明していきます。 対象読者 Angular 2をより深く使いこなしていきたい方 最新のフレームワークを活用したい方 WebAPIと連携してこそモダンなWebサイトだと思う方 必要な環境 Angular 2はJavaScriptのフレームワーク
最新フレームワーク「Angular 2」と組み合わせて「Wijmo（ウィジモ） 5」を使おう
はじめに Wijmo（ウィジモ）は、グレープシティがHTML/JavaScript環境に向けて提供しているJavaScriptライブラリで、WebサイトやWebアプリケーションで活用できるUI部品を利用者に提供します。現行版はECMAScript 5に対応した「Wijmo 5」です。 一方、Angular 2は、Googleとオープンソースコミュニティが開発しているJavaScriptフレームワーク「AngularJS」の新バージョンです。Wijmo 5はもともと、AngularJSの従来バージョン（AngularJS 1）での利用をサポートしていましたが、Wijmo 5の現行バージョン「2016J v2」に対するアップデート（5.20162.231）で、Angular 2（2.0.0）での利用をサポートしました。 本記事では、Wijmo 5をAngular 2と組み合わせて利用する設定や
JSフレームワークを使ったHTMLテンプレート利用のススメ
前回、Webシステムの運用現場では「HTMLの文言、デザインの修正がすぐにできない」「サーバサイドの技術がわからないとHTMLが修正できない」といった問題が生じていることを紹介しました。そして、それらの問題の原因の一つに、PHPでのSmartyやRubyのERBといったサーバサイドテンプレートがある、これらの問題はクライアントサイドでのHTMLテンプレートを使うと解決しやすくなることを説明しました。もっとも、現在フロントエンドエンジニアがチーム内にいない場合には、具体的にはどのような方法がとれるのかがイメージつきにくいと思います。今回は、クライアントサイドでのHTMLテンプレートを使って具体的な方法を紹介します。 対象読者 サーバサイド開発者 フロントエンド開発者 Webアプリ・システム開発に参加する方全般 クライアント側でのHTML生成することの懸念点について 前回、サーバサイドHTML
ロジックを画面から分離できる「Angular 2」のサービスと依存性注入
はじめに Angular 2はGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークで、従来のAngularJS（AngularJS 1）の次期バージョンです。2016年9月に正式版がリリースされ、本格的に利用できる環境が整いました。Angular 2はAngularJS 1に対して多くの変更点があり、コードの記述法も基本的に異なります。 前回記事では、Angular 2のWebページを構成する要素である、コンポーネントやモジュールについて説明しました。これらを利用すると、実装を分割して互いの影響範囲を限定することができます。 しかし、ログ出力のようにさまざまな箇所で使われる処理や、ビジネスロジックのような画面から独立した処理は、独立して実装した処理を、後から追加できれば便利です。Angular 2ではこのような機能として、独立した処理を実装する「サービ
Google、Webアプリケーション用のフレームワーク「Angular 2」正式版をリリース
「Angular 2」は、Router、FormsをはじめとするコアAPIをより使いやすくしたほか、Angular CLIおよびstyleguideの生産性を高めるなど、さまざまな機能向上を果たしている。 なお、これまで開発者に混乱を生じさせてきた、バージョン表記における「RC」ラベルは、安定リリースにおける依存性の管理を目的としていたが、「Angular 2.0.0」からはセマンティックバージョニングに移行する。 新たに導入したバージョンルールでは、非互換APIが導入される場合がメジャーアップデート、後方互換性を維持した機能追加がマイナーアップデート、後方互換性を維持したバグフィックスがパッチとなる。 今後は、APIのバグフィックスおよび互換性を維持した機能追加が行われるほか、ガイドや例示機能の拡充、アニメーション機能の向上、「Angular Material」のアップデート、「WebW
「Angular 2」の構成単位「コンポーネント」「モジュール」を使いこなそう
はじめに Angular 2はGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークで、現行AngularJS（AngularJS 1)の次期バージョンです。リリース候補版の状態が長く続いていましたが、2016年9月時点に正式版（2.0.0）がリリースされました。Angular 2はAngularJS 1に対して多くの変更点があり、コードの記述法も基本的に異なります。 Angular 2はコンポーネントやモジュールと呼ばれる、Webサイトの実装を分割する仕組みを備えており、Angular 2自体も複数のモジュールから構成されています。これらの仕組みを活用して、実装を分割して見通しの良いソースコードを書いたり、ソフトウェア部品として別のWebサイトに移植したりできます。 本記事では、Angular 2のコンポーネントやモジュールについて紹介します。まずコン
AngularJSアプリに役立つ小粒なライブラリ ～ 可変パネル／CSV生成／カウントダウン機能
なお、本連載ではAngularJSそのものに関しては解説しませんので、専門書として『AngularJSアプリケーションプログラミング』、姉妹連載「AngularJSではじめるJavaScriptフレームワーク開発スタイル」などを併せて参照してください。 はじめに 本稿は、第10回に続いての小ネタ編。これまでの回で取りこぼした小粒なライブラリとして、以下のものを紹介します。 UI Layout：マウスドラッグでサイズ変更できる可変パネルを実装 ngCSV：オブジェクト配列をCSV形式のファイルに変換 Angular Count-to：カウントダウン／アップ機能を実装 対象読者 AngularJSについて基本的な概念を理解している方 AngularJSで利用できる拡張モジュールに興味がある方 検証環境 この記事では、以下の環境でサンプルの動作を確認しています。 AngularJS 1.5.7
「Angular 2」のデータバインディングとディレクティブ記述法
はじめに Angular 2はGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークで、現行AngularJS（AngularJS 1)の次期バージョンです。2016年8月時点のバージョンは2.0.0-rc.5で、まもなく正式リリースという状況になっています。Angular 2はAngularJS 1に対して多くの変更点があり、コードの記述法も基本的に異なります。 AngularJS 1ではビューとデータモデルを関連付けるデータバインディングや、ディレクティブと呼ばれる独自のHTML記述が利用できました。これらはAngularJSの特徴として真っ先に言及される機能で、Angular 2でももちろん利用できます。しかし記述方法が微妙に異なっており、最初は違和感を感じるかもしれません。 そこで本記事では、Angular 2でデータバインディングやディレクティ
AngularJSアプリの入力生産性を向上する3種のライブラリ
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8" /> <title>AngularJS</title> <!-- （1）Angular Wizard本体とスタイルシートをインポート --> <link rel="stylesheet" href="bower_components/angular-wizard/dist/angular-wizard.css" /> <script src="bower_components/angular/angular.min.js"></script> <script src="bower_components/angular-wizard/dist/angular-wizard.min.js"></script> <script src="scripts/wizar
最新トレンドを取り込んで進化する次世代AngularJS「Angular 2」最初の一歩
はじめに AngularJSはGoogleとオープンソースコミュニティで開発されているJavaScriptフレームワークです。データバインディング機能によるビューとモデルの分離や、ディレクティブ（独自タグ）によるシンプルな記述など、HTML／JavaScriptでWebページを構築するための様々な機能を提供しています。 バージョン1といえる現行AngularJS（以降「AngularJS 1」と記述）に対して、次世代版のAngularである「Angular 2」が開発中です。2016年6月時点のバージョンは2.0.0-rc2で、正式リリースが間近に迫っています。 図1 次世代版のAngular 2が開発中（公式Webページより） Angular 2はデータバインディングやディレクティブといったAngularJS 1の特徴を引き継ぎつつ、最新JavaScript規格への対応などの進歩を果たし
Apache Cordova＋AngularJSでローカルファイルにアクセスするプラグインを使おう
ただし、AngularJSについてもよく知りたいという方は、筆者の連載もあるので、そちらをご参照していただけると幸いです。 対象読者 スマホアプリに挑戦したいと思っているWEB開発者 アプリ開発をもっと楽にしたいと思っている方 業務スマホアプリを作る開発者 モダンブラウザでのデータの保存方法 Cordovaでローカルにデータを保存する方法を説明する前に、モダンブラウザでデータをどのように保存できるかを説明します。 ブラウザが用意している機能で、目的の機能が実現できるのであれば、プラグインを無理に利用する必要はありません。AndroidやiOSなどの組込で利用されているモダンブラウザでは、以下に示すようにデータを保存するためのAPIが既に存在しています。したがって、特別なプラグインを用いなくてもデータの保存が可能です。 Web SQL IndexedDB Local Storage Sess
AngularJSアプリでイベントカレンダーを実装する - UI Bootstrap／UI Calendar
なお、本連載ではAngularJSそのものに関しては解説しませんので、専門書として『AngularJSアプリケーションプログラミング』、姉妹連載「AngularJSではじめるJavaScriptフレームワーク開発スタイル」などを合わせて参照してください。 はじめに 前回はUI BootstrapのDatepicker／Timepickerディレクティブを利用して、日付／時刻入力ボックスを実装しました。 今回も引き続き、日付の話題。日付に紐づいた情報をカレンダー上に表示してみます。利用するのは、以下のライブラリです。 UI Bootstrap（Datepicker） UI Calendar 対象読者 AngularJSについて基本的な概念を理解している方 AngularJSで利用できる拡張モジュールに興味がある方 AngularJSアプリ上でカレンダーにアプリ固有の情報を埋め込みたい方 検証
AngularJSアプリに地図を導入する - Angular Google Maps
なお、本連載ではAngularJSそのものに関しては解説しませんので、専門書として『AngularJSアプリケーションプログラミング』、姉妹連載「AngularJSではじめるJavaScriptフレームワーク開発スタイル」などを併せて参照してください。 はじめに Googleマップと言えば、おそらくこの記事を読む人であれば知らない人はいないだろうと思われる、地図アプリの定番中の定番です。Google Maps APIと呼ばれるJavaScriptベースのAPIも用意されており、自作のアプリから地図を操作したり、挙動を自在にカスタマイズできる点も重宝される要因のひとつです。 Angular Google Mapsは、このGoogle Maps APIのラッパーで、AngularJSのディレクティブ構文でGoogleマップを自前のアプリに組み込むことを可能にします。 対象読者 AngularJ
Markdownテキストを整形するAngular Markedとコードをハイライト整形するAngular Highlightjs
なお、本連載ではAngularJSそのものに関しては解説しませんので、専門書として『AngularJSアプリケーションプログラミング』、姉妹連載「AngularJSではじめるJavaScriptフレームワーク開発スタイル」などを併せて参照してください。 はじめに 本連載も早いもので、第11回です。今回は、テキストを整形するためによく利用する、以下のライブラリについて解説します。 Angular Marked：Markdown形式のテキストをHTML形式に変換 Angular Highlightjs：ソースコードに構文ハイライトを付与 対象読者 AngularJSについて基本的な概念を理解している方 AngularJSで利用できる拡張モジュールに興味がある方 AngularJSアプリでMarkdown形式のテキストを扱いたい方 AngularJSアプリでソースコードを見やすく表示したい方 検
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AngularJSではじめるJavaScriptフレームワーク開発スタイル一覧
AngularJSアプリで日付／時刻を入力するライブラリ - UI Bootstrap（Datepicker／Timepicker）
