発行
Storybookをブラウザ上で見たときに利用できる、いくつかの機能を詳しく見ていきます。さらにカスタマイズする方法も紹介するので、自分の使い方に合った表示にしてみましょう。
Astroでの開発の基礎として、Astroコンポーネントの実装を解説します。基本は素のHTMLとCSSのような書き味で実装を進めることができます。
Webアプリケーションでよく利用される、表示切り替えやライフサイクル、副作用フック、非同期処理の機能を見てみます。
発行
多くの場合、コードに絶対的な「正解」はありません。しかしながら、プロジェクトごとに「最適解」を求めることはできます。この記事では普段、筆者が行っているコードレビューのポイントを紹介します。
ニュースの詳細画面を作ります。今回のニュースサイトのように、記事と同じ数だけの、複数の画面を作りたい場合は、Gatsby Node APIを使います。
オブジェクトを照らす光源となる、ライトオブジェクトを解説します。光源の方向や角度など、照らし方に応じていくつかのクラスが用意されています。
発行
AstroはWebフレームワークのひとつです。Next.jsやGatsbyなどと伍する機能をもち、独自の設計思想があります。今回はAstroの特徴の紹介と、大まかな開発手順を体験してもらうことを目的としています。
Storybookをインストールし、実際にファイルやコードを触りながらStorybookの基本的な使い方を見てみます。複数のストーリーを定義するstoriesファイルを作成しましょう。
アイスクリームショップのアプリで、フレーバーの配列を用意してレンダリングします。続いて、フレーバーやコーンの有無を選んだときのイベント処理を実装してみましょう。
発行
コンポーネントの品質を向上させ、それを保持することを強力にサポートしてくれるツール、Storybookを解説します。まずはどのようなツールなのか、概要と主な機能を見てみましょう。
GatsbyでPrismicのデータを取得する準備ができたら、GraphQL Data Layerから取得してきたデータを使ってニュース一覧画面を作ります。
オブジェクトの反射の材料として利用する、環境マップを解説します。環境マップは光源としても利用されるので、物体の色に強く影響を与えます。