Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

「AngularJSではじめるJavaScriptフレームワーク開発スタイル」連載一覧

1~14件(全14件)
  • 2015/10/26

    AngularJSと組み合わせて便利なライブラリ、RequireJSを使ってコード管理を簡単にしよう

     前回は、簡単なシングルページアプリケーション(以下、SPA)の作成を紹介しました。しかし、比較的規模が大きくなると、開発する人も複数になり、それに併せてプログラム同士が依存し合わないようにする必要が生じてきます。また、同時にSPAでは1つのHTMLで処理を行う為に初回の画面表示が遅くなる傾向があります。このため、JavaScriptのミニマイズ処理なども必須になってきます。それらの解決方法としてRequireJSなどのモジュール管理ライブラリが利用できます。今回は前回作成したSPAサンプルを用...

  • 2015/10/14

    AngularJSのngRouteを使ってシングルページアプリケーション(SPA)を作ってみよう

     今までで一通りの機能が作れるような各機能の紹介や、本格的なアプリケーションを作成するためのカスタムディレクティブなどを含めて少々深い部分まで紹介してきました。今回は、ngRouteモジュールを使ってシングルページアプリケーション(以下、SPA)を作成します。

  • 2015/09/18

    AngularJSとBootstrapを組み合わせてUIコンポーネントを作ってみよう

     今回は、前回紹介したディレクティブ機能と、UIフレームワークであるBootstrapを使ってより実践的なコンポーネントを作成します。部品の共有化など、他の人に使ってもらうための部品作りで必要となるAngularJSのディレクティブのノウハウなどを紹介します。

  • 2015/07/31

    AngularJSでカスタムディレクティブを作ってみよう

     前回と前々回は、AngularJS 1.4や新しい機能のトピックスを解説し、多少話題がそれてしまいましたが、これまでビルトインディレクティブの使い方などを紹介してきました。今回は、カスタムディレクティブの作り方を紹介していきます。AngularJSではコントローラやサービスなどでは直接DOM操作を行うことが推奨されていません。従って、複雑なDOM操作をしようとするとカスタムディレクティブを作成する必要が出てくるケースがあります。カスタムディレクティブというと少々難しい感じがありますが、今回、簡...

  • 8744_t.gif
    2015/06/23

    AngularJSのリリース前の新しいルーター機能(ngNewRouter)を触ってみよう

     先日、いよいよAngularJS 1.4がリリースされました。今回は、そのリリースからはもれてしまいましたが、もともと1.4と同時にリリースされる予定であった新しいルーター機能について、開発中のソースをもとに紹介します。この新しいルーター機能の開発は少々遅れているようで、現時点では1.5へのリリースターゲットに変更されています。従って、リリース時には異なっている機能等もあるかもしれませんのでご注意下さい。

  • 8698_t.gif
    2015/05/27

    もうすぐリリースされるAngularJS 1.4の機能を先取りチェックしよう

     AngularJSではもうすぐバージョン1.4がリリースされます。1.4へのバージョンアップでは新しい機能が追加されると共に、便利な機能アップはもちろん、パフォーマンスの向上や、そして残念ながら、これまで通りの利用方法が使えなくなってしまう部分も少々あります。今回は、AngularJSの利用者向けに、新機能や注意すべきポイントなどを紹介します。

  • 8624_thumb.gif
    2015/05/07

    AngularJSのDOMイベント処理と注意すべきディレクティブを知り、HTMLテンプレートを使いこなそう

     本連載は、JavaScriptのMVCフレームワークである、AngularJSを使った開発の解説記事です。今回はHTMLのDOMイベントとこれまでのディレクティブ紹介から紹介しきれなかった、知っておくと便利なディレクティブや注意したいディレクティブを紹介します。DOMイベントにはよく利用するイベントが、あらかじめAngularJSでも用意されています。また、AngularJSを使っているとちょっと困ってしまうケースや、AngularJSが自動で行っているがゆえに不思議に思ってしまう動作などもあ...

  • 8569_thumb.gif
    2015/04/09

    AngularJSで、入力フォームを簡単にチェックできるディレクティブを使う

     本連載は、JavaScriptのMVCフレームワークである、AngularJSを使った開発の解説記事です。前回は、AngularJSでの基本的な表示に関わるディレクティブ機能を紹介しました。今回は双方向バインディング機能を実現するディレクティブを中心に紹介します。画面からの入力を行うので主にForm機能を使いますが、AngularJSでは独自機能で拡張されています。また、HTML5からのバリデーションを行うための機能とも連携しているために、より高度なことができるようになっています。

  • 8486_thumb.gif
    2015/03/17

    AngularJSのディレクティブ機能でHTMLテンプレートを使いこなそう

     本連載は、JavaScriptのMVCフレームワークである、AngularJSを使った開発の解説記事です。今回は、ディレクティブ機能を使ってHTMLテンプレートを記述するために、基本的なディレクティブ機能と制御に関わるディレクティブ機能をご紹介します。

  • 8424_thumb.gif
    2015/02/06

    AngularJSのサービス開発とユニットテスト ~テストの流れを把握して保守性の高いコードにしよう

     本連載は、JavaScriptのMVCフレームワークである、AngularJSを使った開発の解説記事です。前回で完成したタスク管理をするサンプルアプリを使って、データ管理をサーバ(PHPで実装)で行うように変更します。そして、後半はユニットテストの方法を紹介します。AngularJSのDI機能はテストを行いやすい構造にすることができますので、テストの流れを把握した上でコードを記述するとよりメンテナンスが高いコードが記述できます。

  • 8377_thumb.gif
    2015/01/23

    ビジネスロジック記述の必須知識、AngularJSの「サービス機能」を理解しよう

     本連載は、JavaScriptのMVCフレームワークである、AngularJSを使った開発の解説記事です。今回は、AngularJSのサービス機能を使ってのデータ管理について説明します。

  • 8311_thumb.gif
    2014/12/22

    AngularJSの強力なデータバインディングの肝となる! スコープを理解して、独特な開発スタイルを自分のものにしよう

     本連載は、JavaScriptのMVCフレームワークである、AngularJSを使った開発の解説記事です。前回に引き続き、AngularJSを使ってタスク管理をする1つのサンプルアプリケーションを通じて、その構造の理解や開発の流れなどを紹介します。今回は、コントローラ間のデータ連携を中心に説明します。

  • 8207_thumb.gif
    2014/10/27

    AngularJSでMVCプログラミングをはじめよう

     前回は、JavaScriptのトレンドなどをふまえながら、AngularJS以外のJavaScriptのフレームワークも含めて紹介しました。今回からはAngularJSの使い方を含めて説明していきます。まずは1つのサンプルアプリケーションを通じて、その構造の理解や開発の流れなどがわかるように今回を含めて複数回で紹介します。十分な理解ができない部分もあると思いますが、リファレンスとしての説明はその後に紹介していきますので、細かい部分はあまり深く気にせずに、フレームワークを使った開発の流れを感じて...

  • 8149_t.gif
    2014/10/10

    はじめてのJavaScriptフレームワーク選び

     JavaScript MVCフレームワークというものを知っているでしょうか? 実際に使ったことがなくても、言葉だけは聞いたことがある方が増えてきているのではないかと思います。最近はJavaScriptにもMVCフレームワークを使った開発スタイルが普及しつつあり、ちょっと勉強したいと思った方や、どうしてそのようなものを使う必要があるのか疑問に思っている方などに、MVCフレームワークを使った開発スタイルのメリットを伝えられればと思います。

1~14件(全14件)
All contents copyright © 2006-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5