JavaScript関連のことを調べてみた2023年07月19日

【Node.js / Express】JWTを使用した認証機能を実装

## ゴール

– ログインAPI実行時にJWTを生成する。
– ローカルストレージに生成したトークンを保存し、リクエスト時には保存したトークンをヘッダー`Authorization`に自動で付与されるようにする。
– ヘッダーに付与されたトークンを元に認証チェックを行うミドルウェアを作成する。
– Axiosのインターセプターで、401エラー発生時にログイン画面に遷移するようにする。

## 前提
– [こちらのリポジトリ](https://github.com/whopper1962/vue-express-base-js)のフォルダ構成/アーキテクチャに基づいて実装しています。
– 今回の認証機能を実装したサンプルコードは[こちらのブランチ](https://github.com/whopper1962/vue-express-base-js/tree/feature/auth)を参照してください。

## CL(Vue)側実装

### ログイン画面の実装
シンプルなログイン画面を実装しておきます。
~~~vue:src/views/LoginView.vue

あなたのモニターに窓をつけよう！

# 「モニターに窓をつける」とは
この記事を読む方は、普段業務中にオフィスにいて、PCと向き合っている方が多いでしょう。
そして作業に追われて出る一言。
*「うわぁ、もうこんな時間だ！」*

そんな少し悲しい瞬間を無くすために、
**「時間に対応して（空の）画像が切り替わるページ」**
を作っておきました。
名付けて **「窓」** です。

## 使い方
1.フォルダを用意します。
2.お好みの朝、昼、夜の空の写真を用意します。
3.それぞれ`morning.jpg`、`afternoon.jpg`、`night.jpg`とでもしておきましょう。
4.用意したフォルダに画像を入れます
5.後述の`index.html`、`script.js`、`styles.js`を同じフォルダに作りましょう
6.`index.html`をブラウザで開けば、モニターに窓が出ます

:::note info
画像の名称について、コードが書き換えられる人は`index.html`を書き換えてもOK
:::

## コード一覧

“`html:index.html

React + TypeScript: Framer MotionのvariantsでDOMツリーに調和したアニメーションを加える

[Framer Motion](https://www.framer.com/motion/)は、本番環境に対応したReact用のモーションライブラリです。構文は宣言的で、複雑なアニメーションのコードも簡潔に書けます。つまり、コードベースが読みやすく、保守しやすいということです。

ライブラリの基本的な使い方については「[React + TypeScript: Framer Motionでアニメーションを加える](https://qiita.com/FumioNonaka/items/ccadd4261522aafe51f5)」をお読みください。本稿は、公式サイト「Animation」の「[Variants](https://www.framer.com/motion/animation/#variants)」について解説します。つぎのサンプル001が、公式作例を参考にしたプルダウンメニューです。

**サンプル001■React + TypeScript: Framer Motion Variants 01**
https://codesandbox.io/s/react-types

【CSS】CSSだけでTooltipを自動で画面内に表示できるようになるらしい

## はじめに

みなさんは、[CSS Anchor Positioning](https://drafts.csswg.org/css-anchor-position-1/)をご存知ですか？

[CSS Anchor Positioning](https://drafts.csswg.org/css-anchor-position-1/)は、まだ実験中の機能ですが、CSS Anchor Positioningを使うと、
特定の要素をAnchor（アンカー）として、tooltipなどの要素の位置を決めることができます。

この記事では、そんな[CSS Anchor Positioning](https://drafts.csswg.org/css-anchor-position-1/)を紹介しようと思います。

## CSS Anchor Pos

【JavaScript】データ型

### データ型とは

データの種類のこと。
例えば、「データのかた」、「dataType」は文字列、1、-1、3.14は数値型、true (真) / false (偽) は論理型に分類される。

### データ型の分類

データ型は、大きく基本型と参照型とに分類できる。
両者の違いは値を変数に格納する方法。

– 基本型の変数
値そのものが直接に格納される
– 参照型の変数
その参照値が (値を実際に格納しているメモリ上のアドレスのようなもの) を格納する

データ型一覧

分類	データ型	概要
基本型	数値型 (number)	$\pm5\times10^{-324}$ 〜 $1.7976931348623157\times10^{308}$ ( 元記事を表示 現場で使えるRuby on Rails5速習実践ガイドを読んで感じたこと Railsの学習に際し、インプット教材にRuby on Rails5速習ガイドを選び今回読み終えたので全体の感想をまとめていきます。 # 初の実践には持ってこいの辞書 一通り読み終えて感じたのは、これは参考書であると同時に辞書引きができるようになっているものであると感じました。 どうしてそう思ったのかは以下の点を感じたからです。 – 開発の全体像を掴むことができる – アプリケーションの作成から機能追加や削除を一通り学べる – Rspecでのテスト技法が記載されている – 概念への理解 – JSへの理解度の追求 – チーム開発の流れ – バージョンアップへの対応の姿勢 Railsアプリケーションを作るのは簡単ではありませんし、今後ECサイトをHCの課題で制作していくわけですが、根本的な部分の理解度がないとそもそもアプリケーションを作れないでしょう。 どういう手段を用いて開発へ取り組むべきなのか、 またどういったステップで次へ行っているのかを明確にする時、 本書は開発経験がヒヨコな私のような駆け出しには必要な書籍であると感じました。 わからない 元記事を表示 高校生エンジニアがオススメするNuxt.jsの入門書3選 # はじめに みなさん、Nuxt.js使ってますか？ – Nuxt.js勉強したいけどどの本が良いか分からない – Nuxt.jsに興味がある こんな方達の為に、今回の記事では**高校生エンジニアがオススメするNuxt.jsのおすすめ入門書3選**をまとめました。 ご興味ある方は、是非最後までご覧ください? ↓高校生でIT企業のエンジニアになった筆者の話はこちらから↓ https://qiita.com/Raio14f/items/ef0fb67685b36298bcb0 ## 技術書を無料で読む方法 KindleUnlimitedを使うことで、**沢山の技術書を無料で何冊でも読むことが可能です**? – 200万冊以上の書籍が何冊でも読み放題 – 月額980円が今なら1ヶ月無料 – 場所に囚われず、様々な端末で使用可能 勿論、技術書以外にもビジネス書や漫画など種類豊富です！ **↓入会したい方は画像をクリック↓** [のエンジニアインターンをさせて頂いております。 この記事では、**完全独学・費用を一切かけずにエンジニアになりたい**という方向けに書きました。「**プログラミングってよく聞くけど、何から始めればいいの？**」という気持ちを少しでも解決する手立てになれればと思っております。 # どのプログラミング言語を学ぶのが最適か プログラミング言語を選定することが一番難しく感じる方も多いと思います。Python, JavaScript, Ruby, C++…挙げていけばマイナーな言語も含めてキリがないと思います。ではどの言語を勉強すればいいのか… 完全に私の主観ですが、結論**どれでもいい**です。理由は、一つでも言語をマスターすることができれば、他の言語でもほとんど融通が効くことが多いからです。大事なことは一つの言語を完璧に身につけることが大切だと思います。 どれでもいいと申したのですが、記事を書く上で一つの言語に絞ってロードマップ的なことを書いていきたいので、今回は**JavaScrip 元記事を表示 テンプレートから作成したviteプロジェクトの開発サーバーをlocalhost:3000に変える vite のバージョン 3 以降を使う場合、開発サーバーを起動させると、デフォルトで `http://127.0.0.1:5173` に開発サーバーが立ち上がります。 https://v3.vitejs.dev/guide/migration.html#dev-server-changes これ自体は vite がそうしていることなので、なんの問題もありません。 もし、いままで慣れ親しんだ `http://localhost:3000` を使いたい場合や、その他の理由があってポート番号を変えたい場合などは、以下の手順で変更できます。 ## 実行環境 – node: 18.14.X ## 実行手順 “example” という名前で vite プロジェクトを作成します。 `$ yarn create vite example –template react-ts` フレームワークに react　を使う設定でプロジェクトを初期化します。 作業ディレクトリに移動し、ライブラリをインストールします。 “` $ cd ./example $ yarn install “` 元記事を表示 【make it easy】Rest API サービスを作りましょう Rest APIを言われると大抵どう接続するかどう利用するかの話です。今回サービスを作ってみましょう。 # Restイベント efwのrestイベントはwebイベントと同じくtomcat/WEB-INF/efw/eventフォルダに格納します。相違点は書き方が違うことです。 https://github.com/efwGrp/efw4.X/blob/master/help/api_restevent.md # テストのイメージ jspからサーバに送信します。jsイベントからRestAPIのイベントに転送して、RestAPIをDB処理して結果を戻します。token正しいかどうかの軽いセキュリティチェックを設けます。  # JSP “`jsp <%@ page language="java" contentType="text/html; c 元記事を表示 Minecraftで進捗共有するデータパックを作る # はじめに Minecraftの全進捗解除をサバイバルで目指す有名実況者を見て、これを「自分でもしてみたい！」と思う方はたくさんいるでしょう。けれど1人でするのは辛いので、マルチプレイで、全進捗解除を目指したいと考えている方も居るでしょう。私もその1人でした。 そこで今回は、マルチプレイ中に、「誰か1人でも進捗を達成したら、その進捗は全員が達成したことにする」データパックを作っていこうと思います。 # 単一の進捗用の共有コマンドを作る Minecraftのコマンドで一番良く使うコマンドは何でしょうか？正解は`execute`コマンドです（異論は認めない）。ということで、**「ある進捗を達成した人が居たら、未達成の全員にコマンドでその進捗を達成させる」** というコマンドを作成（例は進捗`minecraft:story/iron_tools`）すると、以下のようになります。 “` /execute if entity @a[advancements={story/iron_tools=true}] run advancement grant @a[advancements={st 元記事を表示 Stripeで、料金と商品のデータをまとめて取得する方法 StripeのAPIを利用して、商品情報や料金情報をサイトに表示する場合、通常Product / Priceの２APIを利用します。 “`js const stripe = new Stripe(env.STRIPE_SECRET_API_KEY, { apiVersion: ‘2022-11-15’ }); const products = await stripe.products.list(); const productWithPrice = [] for await (const product of products.data) { const prices = await stripe.prices.list({ product: product.id }) productWithPrice.push({ …product, prices }) } return productWithPrice; “` 今回は別解として、Price APIだけを利用して取得する方法を紹介します。 ## Stripe APIは、`expand`パラメタで 元記事を表示 【周りに流されるな！?】人気なReactよりも初心者にVueがおすすめな理由 4選 ? # 1. はじめに :writing_hand: フロントエンドのJavaScriptフレームワークは，`React`, `Vue`, `Angular`, `jQuery`など様々ありますが, 今現在(2023/07/18)においては, `React`と`Vue`が人気を占めています． しかし，Reactは学習コストが高く，フロントエンド初心者には挫折してしまう原因になりかねません(筆者も一度Reactで挫折しました:sob:)．そのため，この記事では**初心者になぜVueがおすすめかということを，Reactと比較しながら**述べていきたいと思います！:clap: ## 1-1. 比較する対象について “`plaintext ==== React ===== React 17.0.1 ==== Vue ==== Vue 3.3.4 “` 今回比較していくのは以下2つです – Reactは人気が上昇した大きな要因である，**関数コンポーネント** – Vueは 一番書きやすいとされる，**Options API** – (Composition APIは賛否両論ある 元記事を表示 npmライブラリを使うだけではなく、作れる側となるためのスタート # 概要と対象読者 `npm install XXXXX` Javascriptである程度開発を積まれた方々は、一度は目にしているコマンドでしょう。 これまでは利用するだけで、作る方法すら知らない身分でした。 すぐに何かライブラリを公開する、といった予定はないですが、最近色々実装する機会があり、いずれ公開するときがくる、、、ような気もしています。 **今回の記事では、作成から公開して使用してみるまでの流れ、これを理解するところから取り組んでみました。** :::note **以下のような方々に向けた記事です！** – Javascriptの基本的な文法を理解している方 – 普段使っている`npm install XXX`の反対側（作る側）がどんなことをするのか気になる方 – npmのライブラリ公開に興味がある方 ::: ## npmのアカウント登録 https://www.npmjs.com/ まずは、ライブラリを公開するためにnpmに自分の情報を登録するところから始めます。 ユーザ名・メールアドレス・パスワードを入力して アカウントを作成してみました。（作成後の画面） 元記事を表示 ニコ生ゲー作る時に詰まったことを集めてみた # 初めに 先日初めてニコ生ゲームを制作し、公開することができました! その名も **「ギャンブルクッキークリッカー」** というゲームです。 Twitchの**チャンネルポイント**と皆さんお馴染みの **「クッキークリッカー」** にインスパイアされたゲームです。 簡単に説明すると、  画面左上に表示される **クッキー** をクリックして  増やしたクッキーを使ってアイテムを購入して生産性を向上しつつ、ひたすら連打してクッキーを増やすという **「クッキークリッカー」** 要素に、 主が選択肢を提示し 元記事を表示 MongoDB のデータベース作成からデータ挿入まで(Docker) MongDBをdockerで触ったときのメモです。 初心者向けで、DB構築からデータ挿入をとりあえず出来るくらいです。 “`docker-compose.yaml version: ‘3’ services: mongo: image: mongo ports: – 27017:27017 volumes: – ./db/data:/data/db – ./docker-entrypoint-initdb.d:/docker-entrypoint-initdb.d:ro environment: MONGO_INITDB_ROOT_USERNAME: “root” MONGO_INITDB_ROOT_PASSWORD: “password” command: [“mongod”, “–bind_ip”,0.0.0.0] container_name: “mongo” “` [MONGO_INITDB_ROOT_USERNAME]と[MONGO_INITDB_ROO 元記事を表示 地図上で検索するコードをChatGPTとCodePenで書いてみた # はじめに 初心者の方でも簡単に試すことができる、地図表示と位置情報検索のサンプルコードを紹介します。 HERE Maps APIを使用して地図上にマーカーやポイントを表示する簡単なデモを作成したいと考えていましたが、私は開発経験がなかったため、どのように学ぶのが良いか分かりませんでした。 そんな時に、今話題のChatGPTに相談してみたところ、必要なHTML、JavaScriptコードを生成してくれ、CodePenにコピペで動作確認を繰り返し行うことで、Webブラウザーだけで開発することができました。 HEREとCodePenアカウントがあればどなたでもお試しできますので、お気軽にご活用、フィードバックください。 # 事前に必要なもの – CodePen　アカウント　https://codepen.io/　 ブラウザ上 元記事を表示 ESモジュールとCommonJSと対応したTypeScriptパッケージの（たぶん）正しい作り方 先日、[JTC-utils](https://www.npmjs.com/package/jtc-utils) という CommonJS と ESM に対応したデュアルパッケージを公開したのですが、**とてつもなく**苦労したのでここにメモを残しておくことにします。 https://www.npmjs.com/package/jtc-utils デュアルパッケージに対応するという記事はいくつかありますが、この記事は次の条件の時に役に立つと思います。 1. ソースコードは TypeScript で作りたい。 2. CommonJS と ESモジュールの両方に対応したい。 3. サブモジュール[^1]を作りたい。（←**ここ重要**） [^1]: `import * from “main/sub”` 形式の階層型モジュール構成 :::note warn 2023/07/18 コメントを受け、一部訂正をいれています。 ::: ## 何がそんなに難しいのか TypeScript で作成したソースコードを CommonJS と ESモジュールにトランスパイルするため、ひとつのプロジ 元記事を表示 Todoアプリを作成してNest.jsのキャッチアップをしてみた ## はじめに 後述の記事を参考にNest.jsのキャッチアップを行いました。 ワンポイント追加として、DockerでDB（Postgres）を構築し、そこに接続するように設定してみました。 私が普段使っているバックエンドフレームワークはLaravelですが、そもそもの設計思想の違いなのかすんなりと理解が進まなかったので備忘録として記載します。 この記事の内容はほとんど下記２記事の内容をなぞったものです。 下記の記事に従って動かないとか、どんなふうに読んでいるんだろう的な時の参考になれば幸いです。 ## リポジトリ [https://github.com/ryosuke-horie/nest-todo-app/](https://github.com/ryosuke-horie/nest-todo-app/) ## 参考記事 以下の2記事を参考に進めています。 ### Next.js [NestJSを触りながら学ぶ(TodoAPI作成)](https://zenn.dev/kobayashiyabako/articles/nestjs-first) ### Docker 元記事を表示 【Multiple Select】の multipleWidth をautoにする方法 jQueryのプラグインであるMultiple Selectの選択肢の幅をautoにする方法を書きます。 ただソースを書き換えるので、もしかするとあまり良くないのかもしれません。 使用したmultiple-selectはv1.6.0です。 単刀直入にいうと、multiple-selectのリポジトリでissueしてくれた方が、書いていた方法を使います。 https://github.com/wenzhixin/multiple-select/issues/576 書いてある通りですが、僕の場合はCDN先のソースをローカルに取ってきて、下のように書き換えて、 “`javascript:multiple_select.js – this.$drop.find(‘.multiple’).css(‘width’, “”.concat(this.options.multipleWidth, “px”)); + this.$drop.find(‘.multiple’).css(‘width’, this.options.multipleWidth); “` 使用する際に、下のオプションを 元記事を表示 OTHERカテゴリの最新記事 2024.09.19 JavaScript関連のことを調べてみた 2024.09.19 JAVA関連のことを調べてみた 2024.09.19 iOS関連のことを調べてみた 2024.09.19 Rails関連のことを調べてみた 2024.09.19 Lambda関連のことを調べてみた 2024.09.19 Python関連のことを調べてみた