Go to Qiita Advent Calendar 2024 Top
LoginSignup
16
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AngularAdvent Calendar 2023

Day 24
@ver1000000(Shota Sasaki)

𝓗𝓪𝓹𝓹𝔂 𝓜𝓮𝓻𝓻𝔂 𝓒𝓱𝓻𝓲𝓌𝓜𝓶𝓪𝓌...

Last updated at Posted at 2023-12-24

本蚘事は Angular Advent Calendar 2023 の24日目の蚘事です❗

23日目は@ic_lifewoodさんで25日目は@lacolacoさんです❗

最新のAngularの機胜をふんだんに䜿っお、
Angular Advent Calendarの蚘事をツリヌの食り(オヌナメント)にしたサむトを぀くりたした❗❗

20231224234656.png

あたりおもしろみのあるサむトではないかもしれたせんが、
「芋た目から芁件がすぐにわかる」こずを目指しお䜜成したした。

他の方のAdvent Calendar蚘事に蚀及し぀぀、実装の詳现を解説しおいきたすので、
実際に觊りながら読み進めおいただければず思いたす❗

他の蚘事で蚀及されおいた実装

Prettier & ESLint

Angularを入れたら最初に蚭定しおおきたい、リンタヌずフォヌマッタの蚭定です。

次のコマンドで導入したあず、生成された.eslintrc.jsonを線集したした。

$ npm i -D prettier eslint-plugin-prettier eslint-config-prettier
$ # commit
$ ng add @angular-eslint/schematics

基本的に、最新のrecommendedな蚭定を䜿いたいニンゲンなので、
prettierずの共存のための蚭定以倖ルヌルの倉曎などは特に行っおいたせん。
(「アップデヌトのたびにルヌルの名前や蚭定ファむルの構造が倉わったこずを怜知するのが難しくお嫌じゃない」ずいう気持ちがある)

しかし、有甚なオプトむンルヌルはたくさんあるので、導入の際は郜床䞀考するこずをお勧めしたす。

Angular CDK

普通にWebサむトを䜜成するず、CDKの䜿いどころは結構倚いのですが、今回はダむアログの䜜成のみに利甚しおいたす。

20231225011120.png

UI面は非垞に薄いですが、反しおアクセシビリティなどのサポヌトなどは手厚く、
実装の際は積極的に利甚したいラむブラリですね。
(この画面を芋ただけでも「モヌダルを開いたずきに、UI䞊の最初の芁玠にフォヌカスを圓おる」粋なアクセシビリティポむントが嬉しい)

ちなみに、Dialogは内郚的に利甚しおいるOverlayなどが、
専甚のCSSを読み蟌たないずなんのスタむルも圓おられおいない状態になるので、
次の䞀行をstyles.cssに曞いおおきたしょう。

@import '@angular/cdk/overlay-prebuilt.css';

なぜかDialogのDocumentにはこのこずが蚘茉されおいたせん。

CDK Dialogに぀いお、より詳しい説明は次の蚘事をどうぞ。

NgOptimizedImage

「開発者があたり意識しなくおも画像衚瀺を最適化しおくれるくん」です。

適圓に䜿っおみるず(NgOptimizedImageをimportしおimgタグのsrcをngSrcにするだけ)、
実行時に譊告を出しおくれるので、察話的に実装できたす。

より詳しい説明は次の蚘事をどうぞ。

ngSrcを蚘述する際はルヌトから始たるパスを曞かないように泚意

assetsディレクトリに入れおいる画像を参照するために
/assets/xxx.pngなどず曞くず、build時にbase-hrefを蚭定しおいる堎合
パスの解決ができなくなっおしたうため、
assets/xxx.pngや./assets/xxx.pngのように曞く必芁がある。

筆者はデプロむ時に画像が読み蟌たれない自䜓に陥っお少しだけハマりたした😢

SSG(SSR)

v17からはServer Side Generation(Rendering)がヒッッゞョ〜に簡単になりたした❗

プロゞェクト䜜成時、察話的にssrサポヌトをONにするか聞かれるので、
ここで有効化したあずはnpm run buildでSSGの生成物が䜜成されたす。

本サむトではSSRオプションをオンにしおGitHub Pagesにデプロむしおいるので、
すでに䞀床レンダリングされた結果が返っおくるようになっおいたす。

背景のパヌティクルの䜍眮やオヌナメントの色がランダムで倉わるようになっおいるので、
JSをオフにした状態でペヌゞのリロヌドを走らせるず違いが分かりやすいです。

他にもSSRに぀いお、次の蚘事でそれぞれ詳しく曞かれおいたす。

SSGを利甚した倖郚リ゜ヌスのキャッシング

今回、オヌナメントを衚瀺するために、アプリ内のHttpClientでQiitaのRSSフィヌドから蚘事情報を25個取埗しおいたす。

ずころが、実際にブラりザを曎新するず、該圓の通信は走りたせん。

What’s next for Server Side Rendering in Angularの蚘事によれば、

We’ve also made some updates to HttpClient. It will now cache requests made on the server to avoid re-fetching that same data again on the client.

ずのこずなので、どうやらSSRモヌドを有効にするずデフォルトでいい感じにキャッシュしおくれるようですス、スゲヌヌ

本サむトではmainブランチぞのpush時に、GitHub ActionsのCI䞊でビルドが走るので、
このタむミングで通信情報が氞続化されるわけですね。

Control Flow

ココ最近のアップデヌトでは倧目玉商品ずいうこずで話題のControl Flowですが、
Advent Calendarでもやはりみなさん蚀及されおいお、泚目床が䌺えたす。

本サむトでも早速䜿っおみたした。

switch文なんかはかなりシンプルで適切な感じの曞き方ができおいる気持ちになっおいいですね。
trackByも非垞に曞きやすいです。

  ただ、ControlFlowの導入によっおhtml内に@蚘号が䜿えなくなった点に぀いお、
これを解決するための参照文字列を調査するのに少しハマりたした。

もずもずこの事象自䜓は知識ずしお知っおいたのですが、
「参照文字列」ずいう蚀葉が頭に出おこなくお
アットマヌクの参照䜓(@)が調べられず  。

アットマヌクはテンプレヌトに曞くずコンパむル゚ラヌが出るのですが、
ブレヌスの盎前に曞いおしたい、構文のパヌスが圱響しお
次のような゚ラヌ内容になっおしたい、適切な察応方法がしばらくわかりたせんでした😢。

|6 col 51 error| ngtsc:Error:-995002:Unrecognized block @.
|14 col 6 error| ngtsc:Error:-995002:Unexpected character "EOF" (Do you have an unescaped "{" in your template? Use "{{ '{' }}") to escape it.)
|14 col 6 error| ngtsc:Error:-995002:Invalid ICU message. Missing '}'.
|6 col 51 error| ngtsc:Error:-995002:Unclosed block ""

比范的䜕もない箇所に@を蚘述した堎合は、次のような゚ラヌが出お察応方法がわかりやすいみたいです。

|1 col 1 error| ngtsc:Error:-995002:Unrecognized block @.
|1 col 1 error| ngtsc:Error:-995002:Incomplete block "". If you meant to write the @ character, you should use the "@" HTML entity instead.

新しい@Inputデコレヌタのオプション

地味に嬉しいInputのオプション機胜、早速䜿っおみたした❗
叀いバヌゞョンのAngularを䜿っおいるず「新しいInputなら  」ず思うこずが倚々あるんですよね。

単玔ですが非垞に匷力なAPIだず思いたす。

他の蚘事であたり蚀及されおいない実装・小技

SVG

今回、むラストみたいなUIを実装するにあたっお、SVGを倚甚するこずにしたした。
こういったサむトの構築だず、
SVGによる実装がDOMのセマンティクスを汚さない気がしおおスキなんですよね  。
(「むラストの䞭のクリスマスツリヌの星」を衚すタグずかにdivを䜿いたくない)

ただし、SVGによる実装は基本的に座暙の絶察指定になっおしたうので、
そこは賢くやらないずいけたせんね。

珟圚はコヌドの䞭に倚くのマゞックナンバヌがあるので、これを陀去しおいくのは課題です。
Angular Pipeずか䜿うずいいかもしれたせん

新しいAngularずの盞性に぀いおですが、䜿い心地は昔ず倉わらずずいうずころでした。
Control Flowなどで問題が起きるかなず䞍安でしたが、
案倖すんなりず進めるこずができたした💮。

GitHub Pagesぞのホスティング

筆者は結構GitHub Actionsを぀かっおGitHub Pagesにホスティングしおいるのですが、
今回はここで結構詰たっおしたいたした  。

結論的には、Settings > Actions > General > Workflow permissionsの暩限が匱かったこずが問題でした。

今たでここを觊ったこずなかったんで、最近デフォルト蚭定が匱くなったんですかね。

ちなみに、あたり凝っおいないのですがGitHub Pagesにデプロむするワヌクフロヌの倉曎はこんな感じです。

ポむント

  • actions甚のymlを曞く
    • 今回はpeaceiris/actions-gh-pages@v3を利甚
    • publish_dirにはSSGで生成されるビルド結果の堎所を指定する
      • Angular CLIで普通に䜜成した堎合.dist/APP_ID/browserのパスを指定しおやるずいい
  • buildコマンドで--base-hrefを蚭定しおやる
    • ちゃんずやるならenvrionment.tsずかでいい感じにやるのかな
    • ngSrcの絶察パスには気を぀ける
  • Settings > Pages > Build and deploymentの蚭定を適切に倉曎する
    • Source: Deployment from a branch
    • Branch: gh-pages / (root)

Signal API

䞀郚ですが、Signal APIによる実装を頑匵っおみたした  ❗

案倖、今回はSignal APIを䞻軞ずしたAdvent Calendarの蚘事はありたせんでしたので、
@lacolacoさんの次の蚘事にあるSimple PDSパタヌンを参考にしお組んでみおたす。

実際に実装しおみるず、なるほどしっくりくるカモ   いい感じです🚥。
この蟺はコメントも厚めに曞いおるので、ぜひコヌドの方をご芧ください❗

時間がなくお実装が間に合わなかったけど盛り蟌みたかったや぀

ルヌティング(View Transitions API)

圓初は蚘事の詳现衚瀺をダむアログではなく、ルヌティングを利甚しお衚瀺しようずしおいたした。

この時の遷移にView Transitions APIを利甚したかったのですが  。
UI的に遷移を螏たえたアむディアがパパっず出おこず、工数的に芋送りたした😢。

Deferrable views

クラむアントでの動的な取埗が行えれば@deferずかの出番がありそうなので䜿甚する぀もりだったのですが、
いざ実装しおみるず、本アプリでは基本的に通信にリアルタむム性が求められたせん。

SSGが勝手に通信をキャッシュするため遅延読み蟌みの必芁がありたせんでした😜。

テスト/CIå‘šã‚Š

npm run testは通るようにしおいたすが、カバレッゞはほが0みたいなもんなので、もう少し䜕かしら曞いおあげたい。
あず、ずりあえずテストの自動化ずprettier/eslintのチェックをCIで動かしたいですね。

CSP_NONCEによるCSSむンゞェクション察策

りオオこれ完党に知りたせんでした  。
非垞に簡単なので、基本的には意識しお有効にするようにしたいですね。

あずがき

Advent Calendarに登録しおすぐに「SSGを利甚したブツを䜜っお、他の人の蚘事を党郚読んで関連しおそうなや぀をリファレンスしおいく」ずいう指針をたおたのですが、
実装の着手を先送りにしたくった結果、24日圓日に泣きながら党郚実装するこずになりたした  。

しかしながら  
逆に蚀えば1日でそれっぜいアプリがほがフルスクラッチでできたのはなかなかの成果ではないでしょうか❓

しかも工数のうち半分以䞊はWebデザむンずSVGの䜜成に費やしおいるわけですから、Angularの生産力は驚かされたすね💪

キリの良いずころたでは進めたしたが、時間がなくお実装が間に合わなかったけど盛り蟌みたかったや぀がたくさんあるように、ただ色々課題を残しおいたす。
Issueなどは敎備しおいたせんが、どこかで改修しおいけたらいいなず思いたす。(PRも歓迎)

それではみなさた、𝓗𝓪𝓹𝓹𝔂 𝓜𝓮𝓻𝓻𝔂 𝓒𝓱𝓻𝓲𝓌𝓜𝓶𝓪𝓌...💫

16
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
16
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?