Angularとは

Angular（アンギュラー）は、GoogleのAngularチームと個人や企業のコミュニティによって開発されているTypeScriptベースのオープンソースのフロントエンドWebアプリケーションフレームワークである。(←Wiki参照)

↑この文章でTypeScriptと、フレームワークという単語が出てきた。この2つの単語についてまとめ、Angularを紐解く。

TypeScriptってどんなもの?

Typescriptは、Javascriptが大規模開発向けではないため、その補完として誕生したプログラミング言語、いわばJavascriptを大規模開発向けに拡張したものである。その特徴的な仕組みとして、TypeScriptはJavaScriptのスーパーセットとして設計されており、JavaScriptはTypeScript上でそのまま動作する。

• Typescriptで補完される内容

  • モジュール性
    functionの前に、exportを付与することで、別ファイルから使用できる。

    sample_ts.ts

    type User = {
            name: string; // 型を明確に指定
        };
        //exportをつけて別ファイルから利用可能
        export function greetUser(user: User): string { 
            return `Hello, ${user.name.toUpperCase()}!`;
        }
    
        console.log(greetUser({ name: "Alice" })); // "Hello, ALICE!"
    

    　　

  • 型定義
    Javascriptの場合、動的型付けが採用されているので、コンパイルの段階でエラーが気づけない。

    sample_js.ts

    function greetUser(user) {
        return `Hello, ${user.name.toUpperCase()}!`;
    }
    
    console.log(greetUser({ name: "Alice" })); // "Hello, ALICE!"
    

    Typescriptでは、型を明示的に定義。

    sample_ts.ts

    type User = {
        name: string; // 型を明確に指定
    };
    
    function greetUser(user: User): string {
        return `Hello, ${user.name.toUpperCase()}!`;
    }
    
    console.log(greetUser({ name: "Alice" })); // "Hello, ALICE!"
    

フレームワークとは

フレームワークは、ソフトウェア開発において、共通の問題を解決するための再利用可能な枠組みやライブラリを指す。特定のルールや構造があらかじめ定義されており、開発者はその枠組みに従ってコードを書くことで効率よくアプリケーションを開発できる。たとえば、Angularは以下を提供する。

• データと画面をつなぐ双方向データバインディング
• コンポーネントベースの設計
• 依存性注入（DI）による効率的なモジュール管理
• テストのための仕組み

フレームワークを「料理キット」にたとえるとわかりやすい。

ライブラリは、必要な材料（食材）や道具（包丁、鍋など）が個別に提供される状態である。自分でレシピを考え、材料を選び、作り方を組み立てる必要があるが、フレームワークは、それらを示したレシピというイメージ。

フレームワークのメリット↓

• レシピ（設計のルール）があるので迷うことなく作業を進められる
• 必要な材料（機能やモジュール）はすべてそろっている
• 工程が決まっているので、効率よく作業できる

まとめ

Angularは、GoogleのAngularチームとコミュニティが開発した、TypeScriptをベースにしたフロントエンドWebアプリケーションフレームワークである。これにより、効率的にWebアプリケーションの開発が可能になる。

TypeScriptは、JavaScriptのスーパーセットで、特に大規模な開発に適した特徴を持っていて、型定義を明示的に行うことで、エラーを早期に発見でき、モジュール性を高めることで、コードの再利用性や保守性が向上させることが可能。

フレームワークは、アプリケーション開発を効率化するための再利用可能な枠組みであり、Angularは、双方向データバインディング、コンポーネントベースの設計、依存性注入（DI）などの強力な機能を提供する。これにより、開発者は効率よく、かつ品質の高いコードを書くことができる。

例えて言うなら、フレームワークは「料理キット」のようなもので、必要な材料やレシピが整っているため、開発者は迷うことなく効率的に作業を進めることができる。