フロントサイド

CloudflareのPages, Workers, D1の環境構築メモ

2024/3/18  

どうも、シローです。 今夏も前回に続いてCloudflareでフロントをPages、APIをWorkersに立ち上げてD1からデータを取得する環境を構築したのでそれをまとめました 環境イメージ図 ちょ ...

Cloudflare PagesにNext.jsをデプロイしてみた

2024/3/17  

どうも、シローです なんかCloudflareがアツいらしいですね(よくわかっていないけど とりあえず、今回はPagesにNext.jsをデプロイする手順をまとめようと思います。 Cloudflare ...

VercelからNetlifyへの移行が思ったより簡単だった件

2024/1/1  

どうも、シローです。 普段はフロントサイドやサーバサイドの開発をしております。 今回は、個人開発しているE-Neta-HoukoのフロントサイドをVercelからNetfilyに移行したのでその経緯と ...

EmotionをReactで使ってみた

2023/4/19  

本記事ではReactとEmotionを組み合わせてReactアプリケーションのコンポーネントのスタイリング方法を解説します。 Emotionとは EmotionはCSS in JSのフレームワークで、 ...

React Hooksの一覧や用途をまとめてみた:その3

2023/3/29  

今回もReact Hooksの紹介をしていきます。 useMemo useMemoはuseCallbackと同じくパフォーマンスの最適化に使われるHookです。 例えば、APIや複雑な計算の結果をレン ...

React Hooksの一覧や用途をまとめてみた:その2

2023/3/28  

前回に続いて、React Hooksについてまとめていきます。 useReducer useReducerは状態を管理するためのReact Hookで状態を操作する複数のアクションに基づいて状態を更新 ...

React Hooksの一覧や用途をまとめてみた:その1

2023/3/28  

この記事では、React Hooksの一覧と用途を紹介します。 React Hooksは、Reactコンポーネントの開発をよりシンプルにするための強力な機能です。 Hook一覧 知っておいた方がいいリ ...

ReactのContextを使ってコンポーネント間でデータを共有する方法

2023/3/24  

ReactのContextは、コンポーネント間でデータを共有するための仕組みです。Contextを使うことで、プロパティを親から子に渡す必要がなくなり、コンポーネントのネストを浅くすることができます。 ...

Reactで認証機能を簡単に実装する方法 - Auth0の導入手順

2023/3/23  

ReactにAuth0を導入する方法について説明します。 Auth0とは Auth0は認証・認可のサービスです。以下のような特徴を持っています。 ユーザー認証の構築が簡単 認証機能の実装を簡単かつ高速 ...

huskyでコミット前にeslintを実行させる方法

2022/11/3  

どうもシローです。久しぶりの投稿となりますが、相変わらずエンジニアとして開発ライフを送っております。 最近はフロントエンドの開発に携わることが多く、多くの現場でコミット前にeslintでコードチェック ...

Next.js : ログイン済みユーザの取得をcustom hooksで実装した

2022/7/6  

どうも、シローです。 アプリケーションではユーザの認証機能が必要になることが多いです。 認証にはサーバサイドとフロントサイドのそれぞれの担当があり、主にフロントサイドでは 認証済みのユーザを取得したり ...

LaravelをAPIサーバとして運用するならSanctumにすべし

2022/6/28  

どうも、シローです。 今回はフロントサイドをNext.jsで実装し、LaravelをAPIサーバのみとして利用する場合、 認証部分はLaravel Sanctumを使うと良いよという内容です。 Lar ...

Next.js + Ant Designでデフォルトテーマをカスタマイズできるようにしてみた

2022/4/23  

ご無沙汰してます、シローです。 最近はフロントサイドの開発がメインになってます。 今回は、Next.jsにAnt Designを導入し、デフォルトテーマのカスタマイズが可能な環境の構築手順について紹介 ...

Next.jsのバージョン12をNginxでプロキシしてるならやるべきこと

2022/1/6  

シローです。 今回はNext.jsのバージョン12を立ち上げてNginx経由のリバースプロキシでアクセスを振り分けているときに 気をつけるようにしたポイントをお話しします。 何が起きたか・・hot r ...

[React,Express] GoogleMapAPIとTwitterAPIで場所に紐づくツイートを探すアプリを作ってみた

2021/4/15  

どうも、シローです。 GoogleMapAPIでは「場所を入力すれば、緯度経度が取れる」 TwitterAPIでは「緯度経度があれば、周辺の投稿を取得できる」 (僕)「あれ?二つを組み合わせれば、場所 ...

[React.js] Reactアプリのimportのディレクトリを絶対パスにする一番シンプルな方法

2021/4/15  

どうも、シローです。 最近、Reactの勉強が捗ってます。 今までサーバサイドの実装がメインでしたが、React.jsはコンポーネントをクラス化して組み合わせていく感覚が楽しいですw それで今回はim ...

[React.js] 手っ取り早くGeocodingAPIをReactアプリに組み込む方法

2021/4/15  

今回は、React.jsのアプリにGoogleMapのGeocodingAPIを組み込む手順を紹介します。 前提 Reactアプリはnpx create-react-appで作成したものとする。&nb ...

React.jsでタイムアラームを作ってみた

2021/2/13  

現在React.jsを勉強中でして、今回はこのような物を作成しました。 https://shiro-secret-base.com/wp-content/uploads/2021/02/0ba4h-3 ...

HerokuでNuxt.jsを立ち上げる手順

2021/8/27    ,

最近はheroku+nuxt.jsで個人サービスを作ってました。 サービス構成図 HerokuでNuxtをホスティングする OAuth、DB、ファイルストレージはFirebaseにする Nuxt.js ...

様々なアニメーションを簡単に実現可能なAnimate.cssを使ってみた

2020/5/26    ,

今回はいろんなアニメーションを簡単に実現するAnimate.cssを使って見ようと思います。 Animate.cssとは Animate.cssはフェードインやスライドインといったCSSのアニメーショ ...

© 2024 Shiro's secret base