Next.jsにGoogleフォントを適用する

こんにちは、なかにしです。今回は、Next.jsのアプリにGoogleフォントを適用してみます！参考のドキュメントはこちらです。事前準備Next.jsのひな型を作成します。npx create-next-app [プロジェクト名]

hostsの設定をしよう！

こんにちは、なかにしです。今回は、「業務で使用するが、個人開発で使用しないランキング」上位の「hosts設定」について書いていこうと思います！hostsとはざっくり言うと、DNSのような機能をPCに持たせることができるファイルです。DNSと

Nextのレンダリング色々

こんにちは、なかにしです。ふらっとNextについての記事を漁っていたら、面白い記事を見つけました。【完全版】Next.jsのSSG、SSR、ISR、CSRを図とコードでスッキリ理解する今まではなんとなーく使用していましたが、きちんと理解する

Reactでメールを送る(EmailJS)

こんにちは、なかにしです。前回はNodeでメールを送りましたが、ついでにフロント側のみでメールを送っちゃおうという記事です。ライブラリとしてはreact-email や React Email あたりが有名どころっぽいですが、最近耳にした

Next.jsでメールを送る

こんにちは、なかにしです。今回は、Next.jsでメールを送ろうと思います。SMTPサーバはもちろん持っていないので、外部SMTPサーバを使用します。今回は、外部SMTPサーバ提供サービスの中でも利用者が多い、Gmailを使用してメール送信

Prismaを使ってみる

こんにちは、なかにしです。今回はNode.jsのORM、Prismaをいじってみようと思います！とりあえずCRUDだけ押さえてみます。Prismaとはオープンソースの ORMです。公式は こちら謳い文句は 次世代のNode.jsおよびTyp

Google Calenderに登録する

こんにちは、なかにしです。最近、「Google Calendarに登録」というボタンを含んだアプリをよく見かけます。便利だなーと思ったので、作成してみようと思います！今回は、CRUDを実装していきます。1. Google Calendarか

jenkinsでパイプラインを作ろう！

こんにちは、なかにしです。最近は CI/CD を使用したサイクルが当たり前になってきていますね。うちのプロジェクトでも使用しているのですが、便利です。自動でガーっと進んでいく感じが爽快ですね。使い始めた最初は、実行途中でコケちゃうことが多か

【PR】最新のトレンドを扱う「Ainova」

こんにちは、なかにしです。ChatGPT、使ってますか？私は業務使用が認められているチームに所属しているので、毎日使用しています。業務外でも、ちょっとした質問などは全部ChatGPTに聞いちゃっています。感情がない のが良いところですよね。

React-hook-formでフォームを作るヨ

こんにちは、なかにしです。フロントエンジニアをしていたら、フォーム系の作成はほぼ必須ですよね。最近はReact-hook-formをよく使用するので、基礎的な部分をまとめます。react-hook-formとはReactのライブラリです。簡

Webサーバであそぶ

こんにちは、なかにしです。今回は、ちょっとインフラ寄りになります。最近はインフラまわりも触ることが多く、自分の知識不足を痛感してます😂趣味の範疇ですが、「自宅にWebサーバとアプリケーションサーバを立てて一般公開する」というエンジニアとして

PWAなアプリを作成するヨ

こんにちは、なかにしです。今回はWebアプリをPWA化していこうと思います！PWAとはProgressive Web Appsの略です。ざっくり言うと、Webアプリをネイティブ（スマホ）アプリみたいに動かせちゃうぜ！な技術です。ネイティブア

Github ActionsでSlackに通知を送ろう

こんにちは、なかにしです。今回は、GithubにpushをしたときにSlackへ通知を送ってみようと思います！いってみよう！処理の流れSlackのWebhookを使用します。Webhookはざっくり言うと、「このエンドポイントに、こんな感じ

chatGPTを気軽に試そう✌️

こんにちは、なかにしです。chatGPTを気軽に試せるアプリを作成しました。ソースコードはこちらです。お金がかかるので一般公開はできませんが、身内には公開してchatGPTの販促をしようと思います🙌今回は、どのあたりに苦労したかを主に書こう

音声入力アプリを作成しよう！

こんにちは、なかにしです。一時期、「声」で操作できるゲームが話題になりましたね。ブラウザ上にも音声を認識する仕組みがあるので、それを使用して音声操作ができるようなミニアプリを作ってみようと思います。音声入力の仕組み今回は、ブラウザに入ってい

DiscordでBotを作ろう！

こんにちは、なかにしです。今回は、DiscordでBotを作っていこうと思います！最近、勉強会グループをLineからDiscordに移しまして、折角なので何か面白いものを作れればなーというのがきっかけです。Discordは昔からゲームのボイ

資料をnpmで管理してみた！

こんにちは、なかにしです。今回は雑談チックな内容です。定期開催している勉強会で、自分の今やっている業務に絡めたプレゼンをする機会があったのですが、インパクトを出したくて、どうしよっかなーと思ったときの話です。資料を自動で開いたらスゴくね？？

情報セキュリティマネジメント試験（SG）を受けて来ました！

こんにちは、なかにしです。今回は、情報セキュリティマネジメント試験（SG）を受験したので、情報を共有します！情報セキュリティマネジメント試験（SG）とは情報技術関連の国家試験で、経済産業省が管轄しています。ITの国家資格はレベルが1～4の4

基本情報技術者（FE）を取ってきたよ

こんにちは、なかにしです。今回はエンジニアの登竜門、基本情報技術者（FE）を受験してきたので共有します！基本情報技術者試験とは情報技術関連の国家試験で、経済産業省が管轄しています。ITの国家資格はレベルが1～4の4段階で定義されており、基本

Cookie × Nextでログイン管理

こんにちは、なかにしです。今回は、ログイン管理をCookieを使用して頑張ろうぜのコーナーです。やりたかったことざっくり言うと、Cookieを使用したログイン管理です。ログイン時にSession-IDをブラウザのCookieに保存させ、ブラ

DockerでNext環境を作る

こんにちは、なかにしです。今回はDockerでNext.jsが動かせるようにしたいと思います。個人的に何か作るときはWindowsのローカルがほとんどで、dockerをわざわざ立ち上げることはしてませんでした。が、最近はコンテナ開発がトレン

[Linux]標準〇〇について

こんにちは、なかにしです。今回はLinuxで出てくる、標準〇〇について解説します！標準〇〇の説明Linuxでは、「標準入力」「標準出力」「標準エラー出力」の3種類を使用して通信をしています。これが結構分かりづらいので、図で説明します。まず、

[Linux].bashrcと.bash_profile

こんにちは、なかにしです。今回は、.bashrcと.bash_profileについて理解を深めたので、共有します！いってみよう！Linuxの挙動bash起動～ログインまでの、Linuxの挙動は以下になります。※細かいディストリビューションの

[Linux]個人的に大事なコマンドまとめ

こんにちは、なかにしです。最近はLinuxを復習しているのですが、意外と忘れている所や、知らなかったオプションがあったので備忘録的にまとめます。ユーザー関係・ユーザー追加sudo adduser [ユーザー名]・パスワード設定su

Firebaseのススメ

こんにちは、なかにしです。最近はNoSQL型のDBを選択される方が増えているように思います。小規模アプリを早く、沢山出そうぜ！みたいな流れが来てるんですかね。僕の今やってる案件でも、モノリスなものをマイクロサービス化しているチームがいて、大

雑談 対話型のCLIを拡張したよ

こんにちは、なかにしです。最近はまた暑くなってきましたね。熱中症には充分ご注意ください。今回は雑談回です。一応、先日作成した対話型CLIを拡張し、使いやすくしたものを作成したのでその紹介もしときます。対話型CLI（拡張版）拡張したものはこち

対話型のCLIを作成したよ

こんにちは、なかにしです。今回は対話型のCLIを作成したので、やり方などを記します。CLIはnpmパッケージにして、こちらに公開してます。作ったもの「これは必要ですか？」みたいなのを対話で聞き取り、回答に応じてパッケージをインストールしたり

リモートでいたずら

こんにちは、なかにしです。今回はリモート接続を使用し、いたずらをしようと思います。現在、自宅にWindowsとMacがあるので、WindowsのPCからMacのPCをいじります。やり方をざっくり説明基本的には、Windowsの「sshコマン

HerokuへReactアプリをデプロイするよ

こんにちは、なかにしです。今回は、ReactアプリをHerokuにデプロイするやり方をサクッと解説します。意外なところでめっちゃ苦戦したので、ぜひご覧ください！※この記事は2023/07/22にHerokuにデプロイした経験談です。Hero

それ非同期じゃなくていいよね？

こんにちは、なかにしです。最近は本業も忙しいのですが、引っ越しをしたのでさらに忙しくなっています。引っ越し業者は高いですし、気分転換も兼ねて家具を一新することにしたので、最終的に段ボール10個くらいに収まりました。やったね。今回は非同期処理

WordPressを学ぶ

こんにちは、なかにしです。久々の投稿です！最近は本業に加え、副業や個人開発のアプリにも本腰を入れています。じばらくはそちらに注力するので、更新頻度は落ちます。すみません🙇‍♂️今回は、WordPressについてです！HPやLPをWordPr

RESTfulなAPIへの理解

こんにちは、なかにしです。RESTfulAPIって、どこもかしこも言われてますよね。結構ふわっとしていて、ズバリこれです！といった説明が難しい概念だと思います。私も正直ちゃんと理解しているとは言い難いです。今回はそんなRESTfulなAPI

VSCodeでデバッグ(React)

こんにちは、なかにしです。Reactで開発する際、デバッガはあまり使用してこず、基本的にconsole.logでごり押ししてきました。(すみません…)現在はバックエンドのお仕事をしているのですが、ちゃんとデバッガを使って開発をしています。こ

VScodeの拡張機能を作ってみる！

こんにちは、なかにしです。前々から興味があった、vscodeのプラグイン開発をやってみようと思います！vscodeで開発～一般公開までやります。手順①「generator-code」をインストールし、ひな形を作る②JS or TSで挙動をコ

Java Silver取得

こんにちは、なかにしです。前回のLpicで資格熱が再燃し、ちょうど実務でJava触ってたので取っておこうという話です。いつも通り、勉強法とかざっくりまとめます🙌▽証明書Java SilverとはJava言語の基礎が問われる資格です。現在は2

Github上で作成したブランチをリモートに反映する

こんにちは、なかにしです。今回はGithubです。ローカルで新規作成したブランチをリモートに公開することはありますが、リモートで新規作成したブランチをローカルに反映させるのはあまりやってなかったので備忘録です。準備Github上で適当にリポ

Java基礎 ポリモーフィズム

こんにちは、なかにしです。今回はJavaのポリモーフィズムについてまとめます。便利な考え方なので、ぜひご覧ください🙌ポリモーフィズムとは言語化が難しすぎるので、実際のコードをベースに説明します。文章の説明としてはこちらが分かりやすいと思いま

Java × React × Dockerで簡易アプリ作るよ②

こんにちは、なかにしです。前回のおまけとして、前回作成したjarファイルをAWS上で動かしてみようと思います。前提OS：Windows使用ツール：Tera Term手元にSpring bootとReactで作成し、jar化されたアプリケーシ

Java × React × Dockerで簡易アプリ作るよ

こんにちは、なかにしです。現在は業務でJavaとDockerを触ってるので、前案件のReactを併せて簡易アプリ作ってみようのコーナーです。リポジトリフロントとバックでリポジトリを分けたので、それぞれ乗せときます。最近はREADMEをちゃん

LPIC-1取ってきたヨ

こんにちは、なかにしです。久々の資格です。半年ぶり？ですね多分。最近はLinuxをいじることが多かったので、ついでに取っちゃお～って感じです。いつも通り、勉強法とかざっくりまとめます🙌▽証明書です。色合いが良い感じですね。黄色がいいアクセン

第10回勉強会

複数会社合同で駆け出しエンジニアによる勉強会を行いました。各々がカリキュラムを進めたり、趣味で作っているプログラムを書いたりしています。不明点があれば理解度が高いメンバーに聞くこともできます。同じ駆け出しだからこそ、悩んでいる点や解決方法など、親身になって相談することができる環境です！

Dockerって楽じゃね？

こんにちは、なかにしです。よく分かっていなかったので敬遠していたdocker。実務で何回かdocker触っていく内に、あれ？dockerってもしかして楽？って思ったのでまとめます。いつ使う？何かを作りたい。でも環境構築めんどくさい。「誰かが

実務寄り Gitコマンドまとめ

こんにちは、なかにしです。今回はほぼ備忘録です。すみません。実務(副業)でCLI上でGitコマンド打ちまくってるのでアウトプットしたくて書きます。【初期設定】リモートブランチからローカルブランチに内容をクローン。その際にリモートリポジトリは

JESTでテスト

こんにちは、なかにしです。今回はJESTでTESTをしていきます！言いたかっただけです！！すみません！！JestとはJavaScriptの「ユニットテスト(単体テスト)ツール」です。Facebookがオープンソースで作成しているので、安心

Expressをちゃんと学ぶ -ミニアプリ編-

こんにちは、なかにしです。Expressをのまとめとしてミニアプリ作ったので晒します。概要ちゃんとCRUD作ろうかなーと思ったのですが、Next.jsやりたすぎてミニアプリに留めました。基本的なMVC＋ミドルウェアでログイン機能をつけました

Nodeをちゃんと学ぶ -Express編③-

こんにちは、なかにしです。引き続きExpressやてくよ～IDによって遷移先を変更するID:0→ようこそ田中さん！ID:1→ようこそ中西さん！的なことをやっていきます。const express = require("expres

Nodeをちゃんと学ぶ -Express編②-

こんにちは、なかにしです。前回に続き、Expressで遊んでいきます。テンプレートエンジンを選ぶテンプレートエンジンを選びます。今はPug(元Jade)、EJSの2強っぽい。Pug- const text = "テキスト&quot

RDB と NoSQL

こんにちは、なかにしです。Expressの勉強にあたり「MongoDB」というNoSQL型のDBを使っていくので、その辺をまとめようと思います。いってみよう！それぞれの代表例RDBOracle, MySQL, Access, Postgre

Nodeをちゃんと学ぶ -Express編①-

こんにちは、なかにしです。さぁついに来ました！今回はExpressを使います！これが使いたくて最近Nodeの勉強してたんですよね～早速やっていきます！ExpressとはNode.jsのフレームワークです。特急ですよ、特急。かっこいいっすね～

Nodeをちゃんと学ぶ -フォーム編-

こんにちは、なかにしです。今回はフォームについてやっていきます。前回はGetのみだったので、Postもガンガン使ってくよ～POSTの受け取り方簡単です。「request.method」にリクエスト情報が入るので、それがGETかPOSTかで処

Nodeをちゃんと学ぶ -ルーティング編-

こんにちは、なかにしです。シングルページの表示はできるようになったので、今度はルーティングを組んでいきまっせ～ざっくり仕組みを解説今回は同じテンプレートを使用し、ルーティングによって表示されるものが変わる、というのをやります。<!DO

第9回勉強会

複数会社合同で駆け出しエンジニアによる勉強会を行いました。各々がカリキュラムを進めたり、趣味で作っているプログラムを書いたりしています。不明点があれば理解度が高いメンバーに聞くこともできます。同じ駆け出しだからこそ、悩んでいる点や解決方法など、親身になって相談することができる環境です！

第8回勉強会

複数会社合同で駆け出しエンジニアによる勉強会を行いました。各々がカリキュラムを進めたり、趣味で作っているプログラムを書いたりしています。不明点があれば理解度が高いメンバーに聞くこともできます。同じ駆け出しだからこそ、悩んでいる点や解決方法など、親身になって相談することができる環境です！

Nodeをちゃんと学ぶ -ejs編-

こんにちは、なかにしです。前回に続き、今回は「EJS」をやっていきます！頑張っていこう🤺ざっくり解説 -EJS-テンプレートエンジンです。変数とかをHTMLにぶち込めるぜ！ってやつですね。フレームワークでよく使われます。PHPのフレームワー

Nodeをちゃんと学ぶ -HTML表示編-

こんにちは、なかにしです。前回はサーバーを立てて簡単なテキストを表示させてみました。今回は事前に書いたHTMLを表示させてみようと思います！いざ行かん！HTML作成事前にHTMLを作成します。中身は適当で大丈夫です。今回はこんな感じ↓&lt

Nodeをちゃんと学ぶ -server立てる編-

こんにちは、なかにしです。Node.js、サーバー立てて色々できるってことは知っているのですが、実務ではFWを使用することが多く、npm installするときしか使っていない状況です。ということで今回は、1からNode.js を使って便利

[React] Axios vs Fetch

こんにちは。なかにしです。久々のReact記事です。業務で同じチームの方と話しているとき、「Axios」は初めて使います～という方が見えて逆に何使ってるんですか？と聞いたのがきっかけです。現案件の技術選定を担当させていただいた際、「非同期と

JSでチェーンする

こんにちは、なかにしです。先日社内の勉強会があったのですが、そこでチェーンの紹介があったので、今回はJSのチェーンで遊んでいきたいと思います🙌ReactのAxiosとかでチェーンすることは多いのですが、バニラJSでのチェーンはあまりやってな

モバイルアプリ作ったよ

こんにちは、なかにしです。最近はFlutterとReactに熱中しすぎなのでインフラ系もやっとこーと思い、LPICの勉強始めました。LinuxはマジでPC好きな人が使うやつって感じがします。コマンドだらけで暗記ゲーだなぁと思いながら頑張って

近況報告

こんにちは、なかにしです。近況報告をしていきます！最近は投稿のペースが落ちてしまっています。理由はただ一つ…モバイルアプリ開発にお熱だからです！！！すみません！！！Flutterというフレームワークを使って開発してるんですが、これがめっちゃ

年末年始とか

こんにちは、なかにしです。今年ももう終わりですね。みなさんは今年1年、いかがでしたでしょうか。私はとにかくプログラム漬けの1年でした。(いい意味で)趣味では旅行に行ったり、勉強会を開いたりして沢山の出会いがありました。オーシャンビューを見な

久々にSassを使うヨ②

vscodeの拡張機能を使ってSassの環境構築と文法の確認をします！

久々にSassを使うヨ①

vscodeの拡張機能を使ってSassの環境構築をします！

[MySQL]UTF-8の罠

MySQLのUTF-8と一般的なUTF-8の違いについてまとめました！

[Laravel]便利メソッド-pluckとvalue-

Laravelの便利メソッド、pluckとvalueについて解説します！

[Laravel]便利メソッド-findOrFail-

便利メソッドfindOrFailについて画像を見せながら解説します！

第7回勉強会

複数会社合同で駆け出しエンジニアによる勉強会を行いました。各々がカリキュラムを進めたり、趣味で作っているプログラムを書いたりしています。不明点があれば理解度が高いメンバーに聞くこともできます。同じ駆け出しだからこそ、悩んでいる点や解決方法など、親身になって相談することができる環境です！

[React]パフォーマンスチューニング

Reactを書くのに慣れてきたので、少しレベルアップして、 useMemo、useCallbackを使用したパフォーマンスチューニングを行いました！

React.Memo でメモ化

React.Memoでメモ化を実装しました。

React.Memo でメモ化

React.Memoでメモ化を実装しました。

MBTI診断テスト-技術編-

はMBTI診断アプリ作成において起こったバグや、工夫した実装をざっくり紹介しました。

MBTI性格診断テストを作りました！

韓国を中心に流行っているMBTI診断。 そのアプリを作って欲しいという依頼を受け、友人のエンジニアと作成しました！

現在地を取得するよ

Geolocation APIで現在地を取得し、Google Mapに表示するやり方を解説します。

自動スクロールを実装②

JS、Jqueryを使ってスクロール系のイベントを色々やってみました。 一定スクロールで広告を出したり、自動スクロールを実装したりしています。

自動スクロールを実装①

JS、Jqueryを使ってスクロール系のイベントを色々やってみました。 一定スクロールで広告を出したり、自動スクロールを実装したりしています。

第6回勉強会

複数会社合同で駆け出しエンジニアによる勉強会を行いました。各々がカリキュラムを進めたり、趣味で作っているプログラムを書いたりしています。不明点があれば理解度が高いメンバーに聞くこともできます。同じ駆け出しだからこそ、悩んでいる点や解決方法など、親身になって相談することができる環境です！

Googleでログインを実装

Googleのログインボタンを実装しました。 公式のマニュアルに沿って実装していきます。

簡易注文システムを作ったヨ

QRコードで注文するお店が増えているので、自宅でも導入したいと思い、作りました。

シェアボタンをつくろう！2

前回に続き、シェアボタンを作成します。 OGP設定をし、画像添付した状況でツイートや共有ができるようにしました。 Twitter、LINE、Facebookに対応しています。

シェアボタンをつくろう！

SNSでシェアできるボタンを作成したので、やり方を解説します！ 公式のシェアボタン作成機能を使って作成していきます。

グラフ書きたいね。

こんにちは、なかにしです。どうしようもなくグラフを書きたい時期ってありますよね。ちょうど今その時期なので、1分以内でReactを使用したグラフを書きます。前提・React ^18・TypeScript ^4サクッと作るよ！グラフと言えば C

ブログをぶっ壊しそうになった話

All-in-One WP Migrationを使ってバックアップと復元をしました。 最大アップロードサイズの上げ方も解説しています。

Reactで作ったアプリをデプロイするよ！

沢山アプリは作れど、実際にサーバーにデプロイはしたことがなかったので、チャレンジしてみました！ Reactで作ったアプリをレンタルサーバーにデプロイして動かしてみるところまでやっていきます。

ローディング画面を実装しよう！

こんにちは、なかにしです。今回は意外とやったことがなかったローディング画面を実装していこうと思います。準備HTML + JavaScript で実装していきます。バニラJSを書くのは面倒なので、古の技術「Jquery」を使用します。適当な場

ローカルのフォルダをGit管理下に追加するよ！

デスクトップのフォルダ整理にあたり、ローカルのフォルダをリモートリポジトリに移動することにしました。 Git管理外のフォルダをGit管理下に置き、リモートリポジトリにプッシュするやり方を解説します。

フロント処理 VS バック処理

バック+フロントで非同期処理をするか、バックのみでrouteを使用して処理するか。どちらがいいのか迷ったので、両方実装して検証してみました！

ブログを掲載していただきました！

「しごとFunクラブ」様にてCocoonを使用したブログ例として、当ブログを掲載していただきました！ そのお礼に加え、今後ワードプレスを始めようと思っている方に向けて講座を始めます！

React × DB 【動作編】

json-serverを使用し、ReactからDB操作をするテストをしました。 そのときの様子をまとめましたので、よろしければご覧下さい！

React × DB

json-serverを使用し、ReactからDB操作をするテストをしました。そのときの様子をまとめましたので、よろしければご覧下さい！

QRコードで遊ぶよ！

身近な存在となったQRコード。 種類も増えてきているので、無料でどんなことができるのか試してみました。

郵便番号の自動入力を実装してみた！

フォームとかでよく見かけるアレ。どうやるのか気になったので実装してみました。

郵便番号の自動入力を実装してみた！

フォームとかでよく見かけるアレ。どうやるのか気になったので実装してみました。

多言語対応でイキろう！

Reactを使用して、10分程度で多言語化までやります！ 英語への翻訳はChromeだと標準で搭載されていますので、今回はフランス語やアラビア語まで対応しようと思います！

ゴミコードからの軌跡 ~Trash Revision~

Reactを触り初めて早1ヶ月。そろそろちゃんと勉強しなきゃな～と思い、今まで書いてきたゴミコードを改正しました。

Googleの広告審査に落ちました！

この度、無事にGoogle Adsenseに落ちましたので、何が悪かったのか、どう改善していくかをまとめました。

Googleの広告審査に落ちました :-)

この度、無事にGoogle Adsenseに落ちましたので、何が悪かったのか、どう改善していくかをまとめました。

React-router-domでルーティング設定をするよ！

React-router-domを使用すると簡単にルーティングを組むことができるらしく、挑戦してみました。

ReactのMaterial-UIを使ってみる！

Material-UIとはmaterial-uiとは、マテリアルデザインを簡単に実現することができるReactのデザインライブラリです。マテリアルデザインとは、Google社が自社のサービスに統一的なデザインを与えるために作成したデザインの

第5回勉強会

複数会社合同で駆け出しエンジニアによる勉強会を行いました。各々がカリキュラムを進めたり、趣味で作っているプログラムを書いたりしています。不明点があれば理解度が高いメンバーに聞くこともできます。同じ駆け出しだからこそ、悩んでいる点や解決方法など、親身になって相談することができる環境です！

AWSの資格を取りました！

2022年にAWS クラウドプロテクショナーの資格を取得しました。 勉強方法や試験会場の体験談などをお話します。 AWSの資格をこれから取ろうと思っている方はぜひご覧ください！