【Angular12対応】Angular12でWebpack5をサクッと使ってみよう


2021/08/09
蛸壺の技術ブログ|Angular12でWebpack5をサクッと使ってみよう

Angular12が
2021年5月に正式にリリースされました。

個人的な一番の注目点はAngularで始めて
Webpack5がサポートされたことです。

とはいえ普通にAngularを使っている分には、
@angular-builders内にwebpackがひっそり裏方として働いているので、バージョンが4から5に変わったことが目に見えて実感できるほどのことはありませんが、webpack5単体で遊べるようなAngularプロジェクトの作成方法を解説してみます。


Angular12で変わったこと

公式のツイッターでアナウンスされていたAngular12のアップデート項目は以下のようになっています。

            
            🌿 レンダリングエンジンはIvyが推奨
🔐 TypeScriptでもProdモード&strictモードがデフォルト
🧨 Webpack5をサポート
🚀 インラインSassが利用可能
💫 インラインクリティカルCSSも利用可能
        
この大きな仕様変更としてRenderer3の位置づけであったIvyがそのまま名前を残し、事実上の標準レンダリングエンジンとして標準化されました。そして従来のレンダラー・View Engineが非推奨となったことが大きな変更です。現時点で旧レンダラーはまだAngular12で利用可能ですが、将来的に廃止される予定です。

そしてこのブログで取り上げる話題のWebpack5が正式サポートになりました。これまで色々とWebpack4で縛られてきたビルド周りの環境が一気に解消されることが期待されます。

また対応するTypescriptのバージョンが4.2以降で利用可能になりました。

この他、ブラウザ方面の話題はInternetExplorer11が非推奨となり、次のAngular13でサポート終了もアナウンスされています。

ここ数年ではAngular12で色々と大きな仕様変更であるように思います。


Angularのwebpack.config.jsはどこ問題

古いAngularを使っていた方は当時から悪名高きng ejectコマンドで、不可逆で破壊的なやり方でwebpack.config.jsを取り出していたことと思います。

すでに現在のAngular CLIからはng-ejectコマンドは廃止されているので、Angularプロジェクト内部からwebpack.config.jsを取り出して独自に実装する手法は不可になっています。

そこでカスタマイズしたwebpack.config.jsを
@angular-builders/custom-webpackというモジュールからangular.jsonへカスタマイズビルドを仕込むことで、Angular内部のwebpack環境を壊すこと無く、webpackを利用することが可能になっています。

参考サイト|Angular + カスタマイズWebpack 開発環境構築

このようなAngular2+の「中のwebpackは極力見せたくない...」という歴史的な経緯もあり、webpackでバリバリとカスタマイズしたかったフロントエンドユーザーが、webpackと連携しやすいVueやReactへ流出する一因ではなかったのか、と今更ながら思います。

では以降で、Webpack5が簡単に試せる、Angularプロジェクトの最小構成を構築手順を説明していきます。


Angular12の動作可能な最小プロジェクトを作る

まず適当なフォルダでnpm initしてもらうか、以下のpackage.jsonを作成しましょう。

            
            {
    "name": "micro-angular",
    "version": "0.0.1",
    "private": true,
    "license": "UNLICENSED"
}
        
で必要最低限のパッケージをインストールします。

            
            $ yarn add webpack webpack-cli ts-loader typescript -D
$ yarn add \
    @angular/core \
    @angular/common \
    @angular/compiler \
    @angular/platform-browser-dynamic \
    @angular/platform-browser \
    zone.js -S
        
なおここでの最小構成とはrxjsのようなAngularらしい非同期処理ライブラリは含めていないのでご注意ください。

webpackビルド

プロジェクトを通してwebpackを使えるようにするためにpackage.jsonにスクリプトタグを準備します。

            
            {
    ...
    "scripts": {
        "build": "webpack"
    },
    ...
}
        
これでwebpackビルドが使えるようになりました。

ローカルにインストールしたwebpackを確認するため以下のコマンドを叩いて反応を見てみますと、

            
            $ yarn webpack --version
webpack 5.49.0
webpack-cli 4.7.2
        
ということでWebpack5対応になっています。

このブログ内ではWebpack5についてじっくり解説することはできませんが、もっとも簡単な
webpack.config.jsでwebpackコンパイルできることを確認するために、以下の内容でひとまず新規作成してみます。

            
            module.exports = {
    entry: {
        main: './src/main.ts',
    },
    resolve: {
        extensions: [".ts", ".js"],
    },
    module: {
        rules: [
            {
                test: /\.ts$/i,
                use: ["ts-loader"],
            },
        ],
    }
};
        
またtypescriptのトランスパイルにはtsconfig.jsonも必要です。

            
            {
    "include": ["src/**/*"],
    "compilerOptions": {
        "experimentalDecorators": true
    }
}
        
そしてsrcフォルダを作ってからmain.tsというリソースをビルドターゲットにします。

            
            import 'zone.js/dist/zone';
import { NgModule, Component } from "@angular/core";
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
import { BrowserModule } from "@angular/platform-browser";

@Component({
    selector: "app-component",
    template: "<div>最小構成!</div>",
})
export class AppComponent {
    constructor() {}
}

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    bootstrap: [AppComponent]
})
export class AppModule {
    constructor() {}
}

platformBrowserDynamic().bootstrapModule(AppModule);
        
これを使うためのindex.htmlも必要になります。

            
            <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>Micro Angular12</title>
        <link rel="shortcut icon" href="#" />
    </head>
    <body>
        <app-component></app-component>
        <script type="text/javascript" src="dist/main.js"></script>
    </body>
</html>
        
必要なリソースを全て配置したらyarn buildコマンドでwebpackビルドできることを確かめましょう。エラー無くビルドできたらdist/main.jsにビルド済みのスクリプトが出力されているはずです。


起動テスト

ローカルサーバーにはwebpack-dev-serverやhttp-serverなどのユーティリティで使う必要があります。

ウェブ検索すると色々とヒットするので開発環境への導入利用手順はここでは説明しませんが、例えばhttp-serverから先程のindex.htmlを起動すると、

            
            $ http-server -p [Webサーバーのポート番号]
        

合同会社タコスキングダム|蛸壺の技術ブログ

というようにブラウザから動作させるのに最低限のAngularプロジェクトになっていることが分かります。

Nullish Coalescingオペレータ

おまけでAngular12から利用出来るようになった??(Nullish Coalescingオペレータ;ヌル類癒合演算子)を使ってみましょう。

これまでは以下のように
nullundefinedかで区別しなくてはいけないところ、

            
            {{age !== null && age !== undefined ? age : calculateAge() }}
        
これからは

            
            {{ age ?? calculateAge() }}
        
とすることができます。

試しに先程のmain.tsのコンポーネント部分を少し変えてみましょう。

            
            ...
@Component({
    selector: "app-component",
    template: `<div>{{ title ?? sayHello() }}</div>`
})
export class AppComponent {
    title: string;
    constructor() {}
    sayHello(): string {
        return 'Angular12、こんにちは!';
    }
}
...
        
この場合再ビルドすると、title変数がヌルですので、sayHello()関数が呼び出されるようになります。

合同会社タコスキングダム|蛸壺の技術ブログ

きちんと動いていることで間違いなくAngular12が動作していることが分かります。


まとめ

今回は、Webpackビルドを使って最小のAngular12プロジェクトの生成方法を考えてみました。

お遊び程度の気持ちで見ていただいた感じですが、フロントエンドでWebpackを使いこなすとAngular/Vue/ReactなどのJSフレームワークに共通したバックエンドの技術の勉強になるかと思います。

この辺の旬なフロントエンドの流行り廃りの著しい技術も、Webpackという共通のユーティリティを利用することで、柔軟に取り扱うことができます。時間があれば一度じっくり学習してみてください。


参考サイト

How to build minimal angular 12 application with webpack

Angular/TypeScriptプロジェクトのコンパイルの仕組み


Angularの学び方

主要なJavascriptのフレームワークの一角であるAngularは、現在Google主導で開発が進められている玄人フロントエンジニア向けのフレームワークです。

Angularを使えばかなり高度なWebアプリも自由に作成できるのですが、やはり初心者が独学で勉強しようとおもうとかなりの知識が必要でAngularは挫折しやすいと言われています。

特にAngularを使う上で注意が必要なのは半年に一回のペースでプログラムのメジャーバージョンが繰り上がるので、他のフレームワークと比べても格段に技術を追っかけるスピードが早いことも躓く人が多い一因になっているとも思います。

本ブログでは結構Angularの応用的な話を躊躇なく唐突にぶっこんで参りますので、初学者の方からするといきなり出現するテクニックに戸惑われるかも知れません。

Angular&Typescriptの学習を書籍から初めても良いのですが、フレームワークで使われる“旬”のテクニックの移り変わりが激しいので、勉強している書籍の内容が古いと最悪アプリのビルドに失敗してしまうことにもなりかねません。

それでいうと、Udemyの動画講座では、十分に最新といえるAngularバージョンに対応しているため、“旬”のテクニックをベースにした基礎からじっくり学べるためより実践的なスキルを身につけることが可能です。

以下の講座ではAngular初心者向けに簡単なプロジェクトの作成まで学ぶことができます。

より実践的にフロントエンジニアとして重宝されるためにはSPA(シングルページアプリケーション)をある程度作成できるスキルが必要になりますので、さらに学びたい方は以下のような講座も用意されています。

他にもAngularプログラミングの習得度に応じた講座も多数用意されているので、必要に応じて試されてはいかがでしょうか。
記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。