自作ブログを作っています。 yushi-dev.hatenablog.com 技術スタック TypeScript React Next.js Styled Components GitHub Pages 今回からデザイン調整を行います。 まずはResponsive対応を行います。 Responsive対応 Responsive対応、すなわち表示端末の画…

引き続きComponentライブラリを作っていきます。 yushi-dev.hatenablog.com 技術スタックは下記の通りです。 TypeScript React Bulma vite Bulma Storybook ESLint Prettier asdf Buttonコンポーネントを作る HTMLの <button /> に対してBulmaでデザイン装飾をしたり、</button>…

引き続きComponentライブラリを作っていきます。 yushi-dev.hatenablog.com 技術スタックは下記の通りです。 TypeScript React Bulma vite Bulma Storybook ESLint Prettier asdf Prettier・CIの導入 プロジェクトを作ったらとりあえずPrettierを入れておき…

引き続きComponentライブラリを作っていきます。 yushi-dev.hatenablog.com TypeScriptとReactベースで、CSSはBulmaを利用します。 下記のツール等を利用します。 TypeScript React Bulma vite Storybook ESLint Prettier asdf Storybookの導入 下記のコマン…

今回よりComponentライブラリを作っていきます。 TypeScriptとReactベースで、CSSはBulmaを利用します。 その他には下記のツール等を利用します。 vite Storybook ESLint Prettier asdf 初期準備 まずasdfでnode.jsのバージョンを固定します。 node.jsのバー…

自作ブログを作っています。 yushi-dev.hatenablog.com 技術スタック TypeScript React Next.js Styled Components GitHub Pages 今回はGitHub Pagesでの公開のための修正などをしていきます。 画像が表示されない問題 前回も言及した通りですが、GitHub Pag…

自作ブログを作っています。 yushi-dev.hatenablog.com 技術スタック TypeScript React Next.js Styled Components GitHub Pages 今回はGitHub Pagesで公開します。 設定 GItHub上での設定が必要です。 Settings > Pagesが設定ページです。 今回は Source = …

自作ブログを作っています。 yushi-dev.hatenablog.com 技術スタック TypeScript React Next.js Styled Components GitHub Pages 今回は記事一覧ページをいい感じにします。 今回は後半です。 画面表示 分解してそれぞれにCSS適用します。 タイトルは大きく…

自作ブログを作っています。 yushi-dev.hatenablog.com 技術スタック TypeScript React Next.js Styled Components GitHub Pages 今回は記事一覧ページをいい感じにします。 今回は前半です。 作りたいもの 現状の記事一覧ページは単にファイル名で並べてい…

テトリスの続きを作っています。 テトリス カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 TypeScript React SCSS Create React App 今回は、前回作ったGameOver画面のロジック作成や、Memo化をしていきます。 ロ…

久しぶりにテトリスの続きを作っています。 テトリス カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 TypeScript React SCSS Create React App 今回は、GameOver画面を作ります。 GameOver画面 完成形はこのイメー…

自作ブログを作っています。 yushi-dev.hatenablog.com 技術スタック TypeScript React Next.js Styled Components GitHub Pages 今回は検索機能を作ります。 今回作るもの 今回は下記の2つを実装します。 サイドメニューの検索フォーム 検索画面 原則全画面…

自作ブログを作っています。 yushi-dev.hatenablog.com 技術スタック TypeScript React Next.js Styled Components GitHub Pages 今回はサイドメニューの中身を実装していきます。 サイドメニューの中身 前回は、サイドメニューのレイアウトだけを実装し、レ…

自作ブログを作っています。 yushi-dev.hatenablog.com 技術スタック TypeScript React Next.js Styled Components GitHub Pages 引き続きLayout Componentを作成していきます。 今回は、メインコンポーネント・サイドメニュー、それらのレスポンシブ対応を…

自作ブログを作っています。 yushi-dev.hatenablog.com 技術スタック TypeScript React Next.js Styled Components GitHub Pages 今回はLayout Componentを作成していきます。 目的 今後複数のページを追加していくわけですが、それらに共通する土台が存在し…

自作ブログを作っています。 yushi-dev.hatenablog.com 技術スタック TypeScript React Next.js Styled Components GitHub Pages 今回は、Styled Componentsを導入します。 Styled Components Scoped CSS の代表例の1つとして、Styled Componentsを導入して…

自作ブログを作っています。 yushi-dev.hatenablog.com 技術スタック TypeScript React Next.js Styled Components GitHub Pages 今回は、CSS適用を行います。 CSS Modules Next.jsで推奨されているCSS適用方法の1つは、CSS Modulesです。 Styling: CSS Modu…

自作ブログを作っています。 yushi-dev.hatenablog.com 技術スタック TypeScript React Next.js Styled Components GitHub Pages 今回は、Component分割を行います。 Component分割とは Reactのチュートリアルには下記のような記述があります。 React はユー…

自作ブログを作っています。 yushi-dev.hatenablog.com 技術スタック TypeScript React Next.js Styled Components GitHub Pages 今回は、Markdownファイルにメタ情報を登録できるようにします。 メタ情報とは メタ情報とは、Markdownファイルに下記のtitle…

自作ブログを作っています。 yushi-dev.hatenablog.com 技術スタック TypeScript React Next.js Styled Components GitHub Pages 今回は、Markdownで用意した記事を、対応したURLで表示できるようにします。 ページURL ファイル名を[slug].md、ページURLを/p…

自作ブログを作っています。 yushi-dev.hatenablog.com 技術スタック TypeScript React Next.js Styled Components GitHub Pages remarkの導入 Next.jsの公式ドキュメントでは、Markdownをrenderする仕組みとしてremarkを紹介しています。 Next.jsの公式ドキ…

現在はこちらのはてなブログで記事を書いていますが、ブログを自作してみたいなとも思いました。 実際に移設するかどうかは置いておいて、とりあえず作ってみます。 方針を考える フロントエンドについては、最近のトレンドに倣って下記を採用します。 TypeS…

テトリスを作っています。 テトリス カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 TypeScript React SCSS Create React App 今回は、下記の2つの対応を行います。 説明パネルの作成 GitHub Actionsの追加 説明パ…

テトリスを作っています。 テトリス カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 TypeScript React SCSS Create React App 今回は、ブロックを最下層まで落とす機能などを作ります。 ブロックを落とすロジック …

テトリスを作っています。 テトリス カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 TypeScript React SCSS Create React App 今回は、揃った行を削除します。 データ構造の修正 最初にデータ構造を修正します。 …

テトリスを作っています。 テトリス カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 TypeScript React SCSS Create React App 今回はタイマーでブロックを落とすようにします。 方針 前回まではキー操作でブロック…

テトリスを作っています。 テトリス カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 TypeScript React SCSS Create React App 今回はブロックを積み上げます。 方針 前回までの実装では、落ちてきたブロックは地面…

テトリスを作っています。 テトリス カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 TypeScript React SCSS Create React App 今回はブロックを動かします。 キーハンドラ まずはキーハンドラを更新します。 左右…

テトリスを作っています。 テトリス カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 TypeScript React SCSS Create React App 今回は、ESLintの導入やテストコードの記述をしてみます。 ESLintの導入 ESLintを導入…

テトリスを作っています。 テトリス カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 TypeScript React SCSS Create React App 今回は、ブロックを上から下に落とすロジックを作っていきます。 ブロック形状情報の…