2021.09/23
Next.js,GraphCMSでブログの作成（個別ページ編）
Next.js,
frontend,
React.js,
Vercel,
TypeScript,
GraphQL,
GraphCMSから取得したそれぞれの記事の個別ページを、Next.jsのGetStaticPathsを用いて作っていきます。
search
article
2021.09/15
PDFファイルをURL化し、API経由で表示させる方法(Next.js)
Next.js,
frontend,
React.js,
TypeScript,
GraphQL,
今回はページの遷移先に、pdfファイルを指定して表示させる方法についてまとめました。 URL化したpdfファイルを直接コードに貼り付けるのは、セキュリティ上良くないようです。 そこで今回はgraphCMSにデータを保存し、クエリを投げてファイルを取得します。
2021.09/04
Next.jsでGraphCMSを使ったブログの作成
Next.js,
frontend,
React.js,
TypeScript,
GraphQL,
今回は、graphCMS を使って Next.js アプリにブログを導入する方法を書いていきます。GraphCMSは名前の通り、graphQLクエリを使えるHeadlessCMSになります。見た目の UI が綺麗で使いやすいです。この記事では、ブログの一覧を表示するページを作っていきます。
2021.08/10
react-slickの矢印をカスタマイズしてオリジナリティを出す
React.js,
Library,
frontend,
ライブラリのスライダーは便利ですが、矢印ボタンがデフォルトのままでは、オリジナリティを出せないですよね。 そこで今回は、react-slickのデフォルトでもつ矢印をスタイル変更していきたいと思います。nextArrow、prevArrowにコンポーネントを指定することによって、矢印のボタンをカスタマイズすることができます。
2021.07/15
react-scrollでTopに戻るための自動スクロールを実装
Library,
frontend,
React.js,
Next.js,
作成過程でreact-scrollを使用した自動スクロールを実装したので、その時のまとめです。react-scrollは、スムーズなスクロールを簡単に実装することができるライブラリです。ページのTopに戻りたい,ボタンを押した時に自動である位置まで移動して欲しいと行った時に便利です。
2021.07/10
ポートフォリオサイトを大幅に改良しました
Next.js,
React.js,
portfolio,
TypeScript,
Tailwind.css,
かかった期間としては、大体2週間ほど。平日は朝、休日は半日以上を費やしていました。自分の作品のアップデートなので全く苦にならずに黙々と作業していました。 作業はdevelopのブランチを切って行いました。GitHubの草はmergeするまで反映されないのですね。知らずに作業していたので、二週間分の緑が急に増えてびっくりしました。一気に緑が増えるのは、達成感を感じハマりそうです笑。
2021.01/30
Next.js,TypeScriptを使ったポートフォリオサイト
Next.js,
React.js,
TypeScript,
portfolio,
Tailwind.css,
これまで作ってきた作品を載せたポートフォリオサイトです。今まで作った作品はどれもお気に入りで、少しでもアピールしたいと思い作成しました。また、学習したNext.jsをアウトプットしたい意味もありました。まだ、機能が少ないですが、これから増やしていきます。今後は、ブログとしても活動させる予定です。デプロイはVercelで行いました。
2021.01/28
実際に職場で使用しているシフト管理ツール(Collects-Shift)
firebase,
React.js,
portfolio,
Redux,
一週間ごとのシフトを管理できるツールです。前職では、シフトの集め方がバラバラで非効率であったため、それを改善させたい思いで作りました。退職した今でも、職場で使用してもらっています。曜日ごとに時間数を表示することによって、計算せずに不足してる曜日がわかるようになっています。デプロイはfirebaseを使用しました。モバイルファーストのレスポンシブデザインです。
search
category
React.js
Next.js
TypeScript
Tailwind.css
GraphQL
Vercel
firebase
Supabase
AWS
recommended
2022-05-23AWS資格 SAPとSOAを取得したので、対策や受験時の感想について
2022-03-15実務経験一年の転職活動(エンジニア生活：2月)
2022-02-072022年は、フルスタックエンジニアに(エンジニア生活：1月）
2022-01-29「AWSエンジニア入門講座――学習ロードマップで体系的に学ぶ」を読んだ感想
2022-01-04エンジニア転職した一年の振り返り
2021-12-02Remixと朝活(エンジニア生活：11月)
・・・