Angularを導入する

Angularを導入する

こんにちは。

COO, CFO下島です。

今回は、弊社がフロントエンド開発でよく使用しているフレームワーク「Angular」の導入についてご紹介します。

私の本職はエンジニアではないですが、弊社では非エンジニアにも技術的な知見を共有していて、本記事を任されました。弊社の良いところだと思います!

本記事は、フロントエンド開発できるがAngularを触ったことのない方が対象です。

Angularとは

Angular(アンギュラー)は、Googleを中心としたコミュニティで開発されている、JavaScriptフレームワークです。

Webアプリケーションなどを、極めて高い生産性でつくることができます。

ReactやVueなどとよく比較されますが、両者とは少し違った特徴があります。

AngularJS

AngularJSは、Angularとは別物です。

AngularはAngularJSの名で誕生しましたが、メジャーバージョン2へのバージョンアップの際に、TypeScriptを採用したこともあって、JSという語を取り除いたAngular2という名前に変えました。

しかしこの名前も、メジャーバージョンが3,4,となるにつれて変わっていきます。

2が外れ、シンプルに「Angular」という呼称になったわけです。

Angularは更新がだいぶ昔から止まっている古い技術だ

との誤解がまれにありますが、それはAngularJSのことを指していると考えられます。

Angularは、現在進行系で改良が進んでいます。

Angularの特徴

フルスタックフレームワーク

Webアプリケーションの開発に必要な機能は、すべてAngular標準ライブラリとして提供されています。

一度習得してしまえば、高い生産性を発揮することができます。

周辺ライブラリとして個々の機能を足すスタイルをとるReactと、大きく異なるポイントとなります。

TypeScript

TypeScriptを採用しています。

http://www.typescriptlang.org/

型情報のおかげで、コンパイル時にエラー検知がしやすかったり、エディタの補完が便利だったりします。

デザインの分離

Angularテンプレート記法ではHTML,CSS,JavaScriptが分離されているため、エンジニアとデザイナーの協業がスムーズに行なえます。

リアクティブプログラミング

RxJSを標準で採用しており、リアクティブプログラミングを完全にサポートしています。

ビューテンプレート記法においても、リアクティブプログラミングがサポートされているほどです。

https://angular.io/guide/rx-library

https://angular.jp/guide/rx-library

環境構築

Git

Angular CLIが内部でgitを使用している仕様上、gitのインストールが必須です。

https://git-scm.com/download

Macでのbrewのように、パッケージマネージャーがある場合はそちらからインストールしてください。

インストールしたら、以下のコマンドで名前とメールアドレスを設定します。

git config --global user.name "[name]"
git config --global user.email "[email]"

Node.JS

Node.JSに含まれるnpm(Node Package Manager)コマンドを使いますので、Node.JSをインストールします。

以下のページより、推奨版をインストールします。

https://nodejs.org/ja/download/

こちらも、パッケージマネージャーがある場合はそちらからインストールしてください。

Angular CLI

ではnpmを使って、Angularプロジェクトを作成したりする機能がある「Angular CLI」をインストールします。

npm i -g @angular/cli

このコマンドを打つだけです。

プロジェクトの操作

作成

$ ng new [project-name] --routing

–routingとつけることによって、Angularプロジェクト内に、SPAの設定に必要となるapp-routing.module.tsが自動生成されます。

CSSやSASSなどどれを使うかなどを聞かれますが、迷ったらとりあえずCSSで大丈夫です。

cd [project-name]
ls

とすると、出力は以下のようになるはずです。

e2e
node_modules
src
.editorconfig
.gitignore
angular.json
package-lock.json
package.json
README.md
tsconfig.json
tslint.json

このようなファイル構成で、プロジェクトが作成されていれば成功です。

Git

先程の

ng new

コマンドでは、上記のファイル構成を作成したあと、内部で

git init
git add *
git commit

を実行しています。

したがって、

git remote add origin [repository]
git push origin master

をするだけで、リモートリポジトリにpushすることができます。

localhostで動かしてみる

ng serve

とすると、localhostにホスティングすることができます。

ブラウザでアクセスしてみると、以下のようなページが表示されます。

その他のパッケージ

Angular Material

Angular Materialは、Googleが提唱するMaterial DesignをAngularで実装するためのコンポーネントライブラリです。

https://material.angular.io/

ng add @angular/material

とすることでインストールできます。

PWA

AngularでつくったWebアプリケーションを、Progressive Web Application化することができます。

ng add @angular/pwa

とすることでインストールできます。

Flex Layout

レスポンシブデザインを実現するライブラリです。

インストールコマンドは

npm i --save @angular/flex-layout

です。

おわりに

弊社ではフロントエンドの開発をしていただけるエンジニアを募集しています!

弊社はブロックチェーン技術を駆使したfintechスタートアップ企業です。

https://lcnem.com

ブロックチェーン業界においては、ユニークなポジションで、知名度を獲得してきています。

弊社では、Angularを使用して開発を行っていますが、 フロントエンド開発ができる方であれば、Angularの既習は問いません。

非エンジニアの私にも技術の共有が浸透していて、Angularを知らない方でもすぐに馴染むことができるとおもいます。

執行役員・最高開発責任者となっていただける方にはストックオプションも考慮しています。

https://lcnem.com/company/recruit

話を聞きに行くだけ、、という方も、お待ちしています!

Angularカテゴリの最新記事