11月27日、第19回目の勉強会が開催されました。
今回のテーマは、「NestJsについて」と、「CSSでIconを作る」です。どちらも大変勉強になりました。

NestJsについて

　NestJsとは、NodeJsにおける、サーバーサイドでAngularライクなアーキテクチャを実装するためのフレームワークです。そもそも、NodeJsはウェブアプリケーションを作るためのサーバーサイドJavaScript環境ですから、NestJsも当然ウェブアプリケーションを作るためのフレームワークだということになります。
　ウェブアプリケーションを作るためのフロントエンドフレームワークとしては、最近では、React、Vue、Angularがよく使われているようです。今回紹介するNestJsは、このうちAngularのアーキテクチャに強く影響されているフレームワークです。

NestJsの特徴、採用されている技術

　NestJsには以下の特徴があります。

• 依存性の注入(DI)
• OOP (Object Oriented Programming)
• FP (Functional Programming)
• FRP (Functional Reactive Programming)

　また、採用されている技術は以下の通りです。

• Typescript
• Node.js
• Babel

NestJsのアーキテクチャ

　軸は、Module,Controller,Providerの3つの要素です。
　まず、フロントから投げられたリクエストに対する処理をcontrollerに書きます。 　そして、具体的な処理をproviderに落とし込みます。moduleは、それらの依存関係を取りまとめるイメージです。 　URLについて、それぞれのコントローラにワイルドカードが指定されており、それによって管轄が決まります。こうしてリクエストの処理をcontrollerに行わせ、細かい処理についてはprovider(service等)に担わせるようなアーキテクチャが推奨されています。providerには、Middleware、Exception filters、Pipesといった、処理するタイミングや対象などに応じた様々な種類が用意されています。

便利機能その他

依存性の注入

class宣言の直前に@Injectable()のデコレータを付けることで、外部挿入可能なオブジェクトを生成できます。これにより、moduleに別で生成したmoduleやprovider(service等)やcontrollerをimportでき、依存関係を望ましい状態に保つことができます。
　こうして、利用したいproviderを持つmoduleをimportすることで、サーバー全体でproviderのsingletonを保証することができます。

CLI

　コマンドから簡単にプロジェクト、controllerやservice等を生成することが出来ます。
例) test/test.module.tsの生成
nest g mo test 例) nest プロジェクトの生成
nest new project-name

テスト

　標準でjestが搭載されています。

データベース

　NestJSでは、データベースとの連携について、標準で以下のインターフェースを提供しています。

• mogoose(mongoDB)
• typeORM

　流行りのTypeScriptが使えるフレームワークということで、ウェブアプリケーションを作る機会があればぜひ試してみたいと思いました。

CSSでIconを作る

　htmlでアイコンを入れる場合は、普通は、画像を用意して挿入する、という方法をとるかと思いますが、CSSでアイコンを作ることもできます。
　メリットとしては、以下の２つが挙げられます。

1. CSSコードをPageの中身に挿入して、文字だけで保存できます。ファイルとしての管理が不要になります。
2. サイズ、方向、色の調整することが便利です。

 

擬似要素「:before」 / 「:after」を使ってアイコンを作る

　簡単にいうとCSSでお絵かきをするわけですが、単一の要素ではなかなかアイコンにふさわしい表現ができません。そこで、擬似要素「:before」 / 「:after」を使うことで、合計３つの要素を使って描画していきます。

 

 

　早速、実例を見てみましょう。

 

See the Pen printIcon by sotaro ozaki (@sohoos) on CodePen.

　プリンターのアイコンですね。一見複雑そうですが、よく見ると３つの長方形の辺をうまく使って全体を構成していることがわかります。試しにbefore要素を青色に、after要素を赤色に色付けしてみました。

 

See the Pen printIconColored by sotaro ozaki (@sohoos) on CodePen.

　直線だけではなく、曲線を使って描画することもできます。これはcorner-radiusの指定によって可能になります。

 

See the Pen LYRYBJv by sotaro ozaki (@sohoos) on CodePen.

　なかなか絵心が必要になりそうですね……。

 

　自分で作るのはなかなか難しそうだ、という方のために、CSSアイコンのサンプルサイトがあるようです。気になった方はぜひチェックしてみてくださいね。