2020年12月10日
11月27日、第19回目の勉強会が開催されました。
今回のテーマは、「NestJsについて」と、「CSSでIconを作る」です。どちらも大変勉強になりました。
NestJsとは、NodeJsにおける、サーバーサイドでAngularライクなアーキテクチャを実装するためのフレームワークです。そもそも、NodeJsはウェブアプリケーションを作るためのサーバーサイドJavaScript環境ですから、NestJsも当然ウェブアプリケーションを作るためのフレームワークだということになります。
ウェブアプリケーションを作るためのフロントエンドフレームワークとしては、最近では、React、Vue、Angularがよく使われているようです。今回紹介するNestJsは、このうちAngularのアーキテクチャに強く影響されているフレームワークです。
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を保証することができます。
コマンドから簡単にプロジェクト、controllerやservice等を生成することが出来ます。
例) test/test.module.tsの生成
nest g mo test
例) nest プロジェクトの生成
nest new project-name
標準でjestが搭載されています。
NestJSでは、データベースとの連携について、標準で以下のインターフェースを提供しています。
流行りのTypeScriptが使えるフレームワークということで、ウェブアプリケーションを作る機会があればぜひ試してみたいと思いました。
htmlでアイコンを入れる場合は、普通は、画像を用意して挿入する、という方法をとるかと思いますが、CSSでアイコンを作ることもできます。
メリットとしては、以下の2つが挙げられます。
簡単にいうとCSSでお絵かきをするわけですが、単一の要素ではなかなかアイコンにふさわしい表現ができません。そこで、擬似要素「:before」 / 「:after」を使うことで、合計3つの要素を使って描画していきます。
早速、実例を見てみましょう。
See the Pen printIcon by sotaro ozaki (@sohoos) on CodePen.
プリンターのアイコンですね。一見複雑そうですが、よく見ると3つの長方形の辺をうまく使って全体を構成していることがわかります。試しに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アイコンのサンプルサイトがあるようです。気になった方はぜひチェックしてみてくださいね。