Webフロントエンドの開発で近年、最も人気が高いフレームワークといえば「Angular」だろう。Angularは当初、「AngularJS」と呼ばれ、SPA(Single Page Application)の開発に必要なあらゆる機能を詰め込んだフルスタックなフレームワークとして登場した。

 正式リリースから5年近く経過し、愛好者が多いのが特徴だ。2016年に「Angular2」が登場したが、前版との互換性はなく、2017年3月には「3」を飛ばして、Angular2との互換性を持った「Angular4」が登場。以下では、「4」を前提に話を進める。

一見、ハードルが高い「Angular」

 Angularはフルスタックゆえに、初めて触ると、ハードルが高いと感じる。「JavaScriptファイルをダウンロードして、HTMLにscriptタグで組み込む」といった使い方をしないためだ。またTypeScriptを前提としているため、部分的に見慣れないコードを書くこともある。

 Angularの開発環境の構築にはNode.jsが必要だ。以下のコマンドを実行することで、アプリケーション開発の環境が整う。Windows10の「PowerShell」でも動作する。

> git clone https://github.com/angular/
quickstart.git quickstart
> cd quickstart
> npm install
> npm start

 以上のコードは「quickstart」という名前でプロジェクトを作成したところだが、これだけでローカルにWebサーバーが起動し、さらに、ブラウザーも自動的に立ち上がり、サンプルのWebアプリケーションが表示される。

[画像のクリックで拡大表示]

この先は会員の登録が必要です。今なら有料会員(月額プラン)は12月末まで無料!

日経 xTECHには有料記事(有料会員向けまたは定期購読者向け)、無料記事(登録会員向け)、フリー記事(誰でも閲覧可能)があります。有料記事でも、登録会員向け配信期間は登録会員への登録が必要な場合があります。有料会員と登録会員に関するFAQはこちら