初学者が Next.js tailwindcss JavaScript を使用してポートフォリを作成して学んだこと

# はじめに
初めてQiitaへ投稿いたします。

今回、ポートフォリオを作成する機会がありました。作成を通じて、私がつまずいたところ、学んだことをアウトプットしていきます。

同じように苦戦している初学者の方の参考になれば幸いです。

どのようなポートフォリオを作成したかは、こちらのリンク先からご確認ください。
リンク先➣➣[**ポートフォリオ**](https://shinsuke.vercel.app/)

# 導入方法
導入方法すらわからない状況でしたので、こちらの[**リンク先**](https://fwywd.com/tech/next-tailwind)を見ながら導入していきました。
Vs Code を使用していましたら、便利な拡張機能も紹介していましたので、是非ご参考にしてください。

# tailwindcss
css は少し触れたことがあるので、なんとなくは理解していました。それもあり、tailwindcss の使用に関して大きな抵抗はそこまでありませんでした。
もしcss も触ったことが無い方がいきなりtailwindcss で実装すると、使用イメージがあまりつか

npm install エラー「npm ERR! g++: error: unrecognized command line option」解決法

# 環境
Mac OS：Monterey 12.0.1
Node.js：16.3.0
npm：7.15.1

# エラー内容
npm install した際、以下のようなビルドエラーが発生する。

“`
MacBook-Air:××× $ npm install
（省略）
npm ERR! command failed
npm ERR! command sh -c node ./build.js
npm ERR! make: Entering directory ‘×××/node_modules/deasync/build’
npm ERR! CXX(target) Release/obj.target/deasync/src/deasync.o
npm ERR! make: Leaving directory ‘×××/node_modules/deasync/build’
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp info using node-gyp@7.1.2
npm ERR! gyp inf

TypeScript +NestJSをプロジェクトで導入したら素晴らしかった件

# 概要

[タイムリープTypeScript 〜TypeScript始めたてのあの頃に知っておきたかったこと〜](https://qiita.com/advent-calendar/2021/timeleap-typescript)
アドベントカレンダー11日目の記事になります。
空きスケジュールになっていたので急遽記事を書かせていただきました!
今回はTypescript製のバックエンドフレームワーク「NestJS」について紹介させていただきます

私が導入した時にお世話になった記事?‍♂️
[NestJSのススメ ～Expressを超えてゆけ～](https://qiita.com/elipmoc101/items/9b1e6b3efa62f3c2a166)

# 記事のゴール
1.NestJSの概要を説明
2.NestJSを使用したREST APIをハンズオンで構築する
3.構築したAPIにリクエストを投げる

ここまでをゴールとします

# NestJSとは？

[公式](https://nestjs.com/)
[リポジトリ](https://github.com/ne

【Next.js】Hunter×Hunterの休載期間をリアルタイム表示するWebアプリ【Vercel】

# なにこれ
[こんなの](https://how-long-h-h-suspned.vercel.app/)
ソースコード : https://github.com/nishiurahiroki/how_long_H-H_suspned

# なぜ作った
Hunter×Hunterが好きすぎるから(全漫画で一番)
~~愛故のイジり~~

# なぜNext.js
とにかくNext.js触ってみたかった。

# 気付き
主にNext.jsに関して、

– 環境構築が生のReact.jsより(create-react-appを使わない)遥かに簡単
– モジュールバンドラーの用意とかがほとんど必要無い
– Vercelへのデプロイ、CIの設定がとにかく楽

等

何気に初SSRフレームワークだったが、とにかく直感的に使えるフレームワークだと感じた。
これを期にNuxt等もぜひ触ってみたいと思った。

# こだわった所
・現在時刻に関して、端末時間ではなく、Rest APIを用いてサーバー側の正確な時間を`getServerSideProps`内で取得する様にした。

“`jsx
i

[Conoha VPS]　ReactからNode経由でオブジェクトストレージへ画像保存する方法

#はじめに
Webアプリを作る際にConohaのオブジェクトストレージに画像をアップロードするのが大変でしたので記事に書きました。
[回覧板アプリ](https://www.seazech.com)
サーバーサイドのNodeを経由した理由は、データベースでユーザー情報と画像ファイル名を紐付けして管理したいからです。

#画像アップロードの流れ
私が作成したWebアプリ内で画像アップロード方法は以下のようにしています。
1.ReactからNodeに画像を送信
2.NodeのMulterを使って、VPS内のフォルダに画像データを一時保存
3.オブジェクトストレージのトークン取得
4.NodeでVPSで一時保存している画像データをオブジェクトストレージへ送信
5.VPS内の一時保存している画像データを削除

#Conohaのオブジェクトストレージとは
Conohaが提供しているオブジェクトストレージで、特徴としては以下の通りです。
[Conohaオブジェクトストレージ](https://www.conoha.jp/objectstorage/)
1.データ転送料金無料
2.容量無制限
3.三

Postman(WebAPI テスト)で画像をアップロードできなかった時の対処

##　1.エラー発生
　APIテストでPostmanを利用して画像をアップロードしようとしてエラー発生。

→ワーキングディレクトリの中にあるファイルなら読み込むことができますよとのこと。

##　2.対処方法(参考：[Setting Up Postman](https://learning.postman.com/docs/getting-started/settings/))

### 公式より
> You cannot change the working directory in Postman for Web. When you upload a file, Postman for Web creates a new folder with a random name in the ~/

Vue.js(Nuxt.js)におけるv-ifとv-showの違い

## 概要
Vue.jsやNuxt.jsで様々なディレクティブを使用する機会があると思います。
今回はその中で`v-if`と`v-show`ディレクティブについて学習したのでアウトプットします。

##ディレクティブとは
公式ドキュメントにディレクティブについて記載を一部抜粋します。
>ディレクティブは v- から始まる特別な属性です。ディレクティブ属性値は、単一の JavaScript 式を期待します（・・・一部省略・・・）。ディレクティブの仕事は、属性値の式が変化したときに、リアクティブに副作用を DOM に適用することです。

[Vue.js公式ドキュメント](https://v3.ja.vuejs.org/guide/template-syntax.html#%E3%83%86%E3%82%99%E3%82%A3%E3%83%AC%E3%82%AF%E3%83%86%E3%82%A3%E3%83%95%E3%82%99)

つまりJavaScriptの式を使って、DOMを操作することができるものです。

### 具体例

“`

hello

MVC の構成をアレンジしてみた

# MVC に救いの手を

## 一般的な MVC 構成

“`
app
├── controllers
│   ├── accountController.js
│   ├── apiController.js
│   ├── authController.js
│   ├── controller.js
│   ├── templateController.js
│   ├── topController.js
│   └── userController.js
├── index.js
├── models
│   ├── auth.js
│   └── user.js
├── routes
│   ├── accountRoute.js
│   ├── apiRoute.js
│   ├── authRoute.js
│   ├── route.js
│   ├── templateRoute.js
│   ├── topRoute.js
│   └── userRoute.js
├── services
│   ├── accountService.js
│   ├── a

【Firebase】サーバーレスWebアプリを作った

インターシップに落ちて時間が空いたので学習も兼ねて夏くらいから作りました。
この記事は制作で学んだものをまとめたものです。
間違い等あればコメントでご指摘お願いします

# 成果物
+ [z-umon 記事例](https://z-umon.net/space/id/2AUDRZZOxvZyUExSnS9P)
+ [書き方](https://z-umon.net/space/id/t3r1pXea4Ahn5SMpr5fW)

マークダウン形式で書けるブログみたいなやつです。(Apple StoreボタンとかDiscordリンクを追加できる)
稼働費用は月300円くらいです。(コールドインスタンスを許容するなら0円)

#### 制作動機
Node.js・サーバーレスで何か作ってみたい。

React NativeでSocket通信しよう

（１）はじめに

普段はソーシャルワーカーとして障がいをお持ちの方の支援をしています。Advent Calendarに合わせてバージョンアップさせているReact Nativeでの3D表示について、続きを書いていきたいと思います。前回はReact Nativeで3Dキャラクターを動かしてみようで3Dキャラクターをバーチャルスティックで動かすコードを紹介しました。今回はチャットやマルチプレイで利用するSocket通信の機能を追加したいと思います。


赤色のキャラクターは自身の端末、青色のキャラクターは別の端末で操作しています。

（２）Socket

ESP32をAlexaでLチカする(2)：Alexa Smart Homeを実装する

前回の投稿で、ESP32をAlexaでLチカする準備が整いました。
　[ESP32をAlexaでLチカする(1)：これから作るものと環境セットアップ](https://qiita.com/poruruba/items/31fc27696d8d4220d8d0)

今回は、肝心のAlexa Smart HomeをNode.jsサーバに実装していきます。

詳細は以下を参照してください。

https://developer.amazon.com/ja-JP/docs/alexa/device-apis/alexa-interface.html

今回実装したソースコードもろもろはGitHubに上げておきました。

poruruba/AlexaSmartHome_Test

https://github.com/poruruba/AlexaSmartHome_Test

#前提

前回の投稿で、AWS Lambdaから、ローカルに立ち上げたNode.jsサーバに転送しました。
Node.jsサーバは、Lambdaを模擬した環境にしてあるので、Lambdaと思って実装すればよいです。
さらに

【Node.js】ExpressとFirebase Admin SDKとJWTを使ってログイン機能を実装する

#はじめに
メインはフロントですが、趣味でExpressを触っている者です。以前Passport.jsを使って認証機能を実装したのですが今回はtokenを使ってログイン機能を実装していきたいと思います。個人開発ということもあるのでDBには慣れているFirebaseからFirestoreを使用しています。

###解説①(authMiddleware.js)
ログインユーザーでなければアプリを使えないという仕様になっています。
requestAuthとcheckUserという関数でtokenを確認（verify）して問題がなければnuxtし次のmiddlewareに進みます。もしtokenが違ければloginページへリダイレクトするようになっています。

“`javascript:authMiddleware.js
const jwt = require(“jsonwebtoken”);
const admin = require(“../plugins/firebase”);
const db = admin.firestore();

const requestAuth = (re

SVGアイコンをGitHubで管理し、フォントを自動ビルドして使いたい

この記事は [ミライトデザイン Advent Calendar 2021](https://qiita.com/advent-calendar/2021/miraito-inc) 17日目の記事です。

## やりたかったこと

某サイトでは古からの経緯でサイト内で使うアイコンファイルはPNGで書かれていた。
しかし、細切れ画像で辛い、小さくて汚い、画像の表示がめんどくさい。
（スプライト画像にするとか、画像大きくするとか、手法はいろいろあるけど割愛）

– 大きくしてもきれいに表示したい
– ファイルロードを効率化したい
– CSSクラスあてただけで簡単に呼び出したい
– アイコンファイルはせっかくだから独立したリポジトリで管理したい

SVGアイコンをまとめてフォントファイル化したら解決じゃん！
ということで表題のことを全自動でできるように整備してみた奇跡です。

今回もろもろはNode.js使ってます。

## アイコン用のリポジトリを準備

### パッケージ設定ファイル

ということでさっくりとリポジトリを作成して `package.json` を準備しよう。

“`jso

google-home-notifierの代替となりそうなgoogle-home-playerを試してみる

# はじめに

Google Home発売当初、Google HomeハックのHello Worldとも言える「Google Homeを喋らせてみた」ハックで誰もが使用したであろう「google-home-notifier」ですが、動かなくなったりメンテされなくなったりで、もはや多くの方がGoogle Homeを喋らせることをやめてしまったのではないでしょうか。

https://github.com/noelportugal/google-home-notifier

そんな折ふとnpmを眺めていたら「google-home-player」というパッケージがあり、READMEでもgoogle-home-notifierの代替とあったので試してみました。

# google-home-player

https://github.com/mihyaeru21/google-home-player

google-home-notifierはcallback形式の書き方でしたが、google-home-playerはPromiseで書けます。もちろんasync/awaitでも。
その

Symbolネットワークを介して安全にサーバーを操作する

みなさま、こんにちは。ヴィーと申します。

この記事では、Symbolブロックチェーンでのメッセージングやモザイクを利用して、外部から安全にサーバーを操作する仕組みについて考察・実験した結果を書きます。

## 目的
『私が運用しているLinuxマシンのアップデートや再起動を、見ず知らずの信頼できる第三者(自分を含むステークホルダー)にお願いしたい』
というのが動機と目的です。

これを達成するには、第三者にマシンにログイン(※)してもらうなどのセキュリティリスクの高い運用をせず、かつ確実に機能する仕組みが必要ですが、ブロックチェーン上でのメッセージングを利用することである程度は手軽に実現することができそうです。

(※ログイン) VPN構築、リモートデスクトップ、SSHキーの持出・貸出など

## 登場人物紹介
誰が何をどうしたいのか？
#### ヴィー(私)
24時間稼働のLinuxマシン君を1人で運用しているが、364泊365日の温泉旅行に行きたいと思っている。
誰かにサーバーをメンテしてほしいな、と思っているが、他人のログインとか怖いからしてほしくない。インターネット怖い。

ベクトルタイルとAzure AD認証（nodejsでサーバーを作る）

## はじめに
自分のベクトルタイルを配信するときに、データにどんな認証をつけているでしょうか。

ここでは、私がベクトルタイルにAzure AD認証 をつけてみた経験を書きたいと思います。作業自体は少し前にやっていたのですが、作業記録として覚えていることを共有したいと思います。詳細を記録するというよりは方針や、参考になるコードの場所を記録するという感じになると思います。フィードバック、改善提案、ご助言があればお願いします！

なお、この作業は開発環境でやったものなので、まだ本物のインターネット上で公開しているサーバーには適用していません。

###なぜ認証が必要なのか
自分の作ったベクトルタイルをオープンに公開する場合には認証は必要ないと思います。一方で、不特定多数に公開したくないデータを含んでいたり、料金をとってサービスを提供したい場合などは、アクセスしてくる人を認証することが必要になります。私が扱っていたデータでも、同僚がデータの利用の際にはユーザーの認証が必要と考えていたので、ベクトルタイルの認証を試しました。

###既存サービスにおけるベクトルタイルのアクセス制限など

Expressアプリを無料のホスティングサービスRenderにデプロイする

## 概要
– [Express](http://expressjs.com/)とは
– Node.jsで利用できるWebアプリケーションフレームワーク
– 今回はHTTPサーバーとして利用
– [Express/Node のイントロダクション \- ウェブ開発を学ぶ \| MDN](https://developer.mozilla.org/ja/docs/Learn/Server-side/Express_Nodejs/Introduction)
– [Render](https://render.com/)とは
– コードを簡単にデプロイできるホスティングサービス。[次世代Heroku](https://zenn.dev/katsumanarisawa/articles/c9da48652f399d)とも噂されていてHerokuよりもコストが低い
– Renderに[HerokuとRenderを比較したページ](https://render.com/render-vs-heroku-comparison)が用意されているのでそれを見ると分か

モダンな（ES6以降で実装した）Node.jsでJestを実行する　ESLintの設定も

## はじめに
Node.jsの方でもフロントエンド（React・Vue・Angularなど）と同じようにimport/export, async/awaitなどを使った書き方（ES6以降の書き方）をする事があると思う。しかし、その場合どうやってJestを実行するの？という疑問が出てくると思う。

今回はモダン化したNode.jsでJestを実行できるようにする方法についてまとめてみたい。また、ESLintを入れていると以下のようにJestの構文で`no-undef`のエラーが出てしまうのでその警告が表示されないようにする方法も見ていく。

GitHubのコードは以下（Step4の章の部分がこの記事でやった内容になっている）。

https://github.com/yuta-katayama-23/node-express/commit/ed

stripe API 使い方 (List all customers)

API の仕様はこちら
[List all customers](https://stripe.com/docs/api/customers/list)

Ubuntu 21.10 で確認しました。
#データの準備#

CLI のインストール

“`bash
wget https://github.com/stripe/stripe-cli/releases/download/v1.7.9/stripe_1.7.9_linux_amd64.deb
sudo dpkg -i stripe_1.7.9_linux_amd64.deb
“`

インストールの確認

“`text
$ stripe –version
stripe version 1.7.9
“`

カスタマーの作成

“`bash
stripe customers create
“`

Secret Key の取得
https://dashboard.stripe.com/test/dashboard
![stripe_aa.png](https://qiita-image-store.s3.ap-northea

Wi-Fi接続先アクセスポイントのMACアドレスをcurlでAPIサーバーに送信する

## はじめに
事務所をフリーアドレス化した際に有線LANからWi-Fiの無線LANに移行しました。
100人規模の事務所ですが、誰がどこにいるのか探すのが面倒なので、PCがどのアクセスポイントに繋がっているかで大まかな座席位置がわかるシステムを構築しました。

## 仕様
Windows10の netsh コマンドで取得したMACアドレス情報をcurlコマンドでAPIサーバーに送信し、受信したデータをMySQLデータベースにインサートします。
なお、集めたMACアドレスの利用方法についてはこの記事に記述していません。
PC利用者とWi-FiアダプタのMACアドレスを紐付けるテーブル、および、アクセスポイントのMACアドレスのテーブルが別途必要になります。

## 動作した環境
|項目|内容|
|—|—|
|APサーバー|node.js + Express|
|DBサーバー|MySQL|
|クライアント|Windows10|

## サーバーのディレクトリ構成
.
├── app.js
└── routes
　　　 └── v1
　　　　　　 ├── index.js