自作ブログを作っています。 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 今回は記事一覧ページをいい感じにします。 今回は前半です。 作りたいもの 現状の記事一覧ページは単にファイル名で並べてい…

プロフィールページを作成していきます。 現在はNuxtのバージョンを2から3に移行しています。 プロフィールページ カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 Nuxt.js SCSS Tailwind CSS 今回はファイル移行し…

プロフィールページを作成していきます。 プロフィールページ カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 Nuxt.js SCSS Tailwind CSS 今回はライブラリの導入をします。 Tailwind CSS 本プロフィールページはT…

プロフィールページを作成していきます。 プロフィールページ カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 Nuxt.js SCSS Tailwind CSS 今回のNuxt3のprojectを作成します。 asdf node.jsのバージョン管理はasdf…

久しぶりに、プロフィールページを作成していきます。 プロフィールページ カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 nuxt.js SCSS Tailwind CSS 今回から、Nuxt3への移行を進めていきます。 Nuxt3 Vue3のリ…

テトリスの続きを作っています。 テトリス カテゴリーの記事一覧 - スマレジエンジニア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つを実装します。 サイドメニューの検索フォーム 検索画面 原則全画面…

Developer Roadmapは、文字通りエンジニアのロードマップとして有名かと思います。 普段は業務に直接関連しない技術に触れる機会がないため、こういうものでキャッチアップしていきたいです。 今回は、2023年版のFrontend Developer Roadmapを、過去の版と見…

自作ブログを作っています。 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を作成していきます。 目的 今後複数のページを追加していくわけですが、それらに共通する土台が存在し…

知人から、「Excelファイルに特定の操作をするアプリ」を作ってほしいという依頼を受けました。 こういう機会は珍しいので対応してみました。 詳しい開発内容については公開できませんが、技術選定周りで調べたこと・考えたことを記録しようと思います。 技…

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

久しぶりに、プロフィールページを作成していきます。 プロフィールページ カテゴリーの記事一覧 - スマレジエンジニアyushiのブログ 技術スタックは下記の通りです。 nuxt.js SCSS Tailwind CSS 今回は、画像表示時に左右移動できるようにします。 方針 前…

自作ブログを作っています。 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のブログ 技術スタックは下記の通りです。 nuxt.js SCSS Tailwind CSS 今回は、写真セクションを追加します。 写真 最近ミラーレス…

給与計算実務能力検定2級を受験してきました。 実務に近い給与計算（割増賃金、社会保険、税の計算など）の資格としては最も有名なものかなと思います。 1級・2級とありますが、初級者向けの2級を受験しました。 受験した理由 私は普段タイムカードという勤…

自作ブログを作っています。 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…

昨年末にTOEICを受けて来ました。 今回はそれについて簡単に記録したいと思います。 経緯 エンジニアとして、情報収集・調査・実装などのために英語力はある程よい。 いずれは英語の本や映画などを英語のまま楽しんでみたい。 といった理由で、英語を勉強し…

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