- 1. 【Nuxt 3とLambdaでTypeScriptの型を共有】:🔰エンジニアが感じたモノレポ構造の威力
- 2. 【TypeScript初学者向け】Generics型におけるArray についての豆知識
- 3. 電話番号に – を入れたい(Apps Script/Javascript 対応)…
- 4. 【Stripe決済】laravel + JavaScriptでStripeクレジットカード決済をやってみた
- 5. CSVを表示する簡易htmlツール
- 6. JavaScript|importの書き方が多いのでまとめてみた
- 7. 新たな計算の形。 48ビット(6バイト)のメモリを持つ256基の計算機群。そのメモリ状態を視覚化するゲームです。
- 8. もっともっとダイナミック ジュリア集合 が描かれた空間内を飛び回るゲーム。
- 9. 複雑でカオス的な動きを持つ4重振り子のアニメーションのゲーム。
- 10. 【JavaScript】ABC368まとめ(A~D)
- 11. [JavaScript] Array(配列)のpush()メソッドのサンプルコード50個
- 12. 村人の友好関係 (paizaランク S 相当) を何故かObserverパターンで解く(JavaScript)
- 13. GASでコメントを取得
- 14. 【React】公式ページの"Reactの流儀"を勉強
- 15. 【React】公式チュートリアル(三目並べ)の中で学んだことの備忘録
- 16. p^4+14は素数なのか?
- 17. JavaScriptでマウスカーソル位置の単語を取得する方法が難しかった
- 18. 英単語帳の要件定義
- 19. Could not find gozip for packaging. Using DotNetZip to package. のエラーを表示しないようにしたメモ
- 20. 映像作品を評価して記録できる拡張機能「Streaming video tracker」
【Nuxt 3とLambdaでTypeScriptの型を共有】:🔰エンジニアが感じたモノレポ構造の威力
## はじめに
こんにちは。入社2年目、実務経験約半年の駆け出しフロントエンドエンジニアです。日々の業務では主にNuxt、Vue、AWS、TypeScriptを使って開発を行っています。今回は、最近の開発で採用した「モノレポ構造」を通じて、型の共有がどのように役立つかについてお話しします。駆け出しのエンジニアの方にとって、少しでも参考になる情報をお届けできれば嬉しいです。
## 現在の開発環境
私の現在の開発環境は以下の通りです:– フロントエンド: Nuxt 3
– バックエンド: AWS Lambda (Node.js)
– 共通言語: TypeScript## 直面していた悩み
フロントとバックで別々のリポジトリに分かれていると、同じ型を使いたいのに、変更があるたびに手作業で同期しなければならず、とても面倒だなあと思っていました。
結果として、型の不一致が原因でエラーが発生したりして、開発スピードが落ちることもありました。## 型共有の課題とモノレポ構造との出会い
フロントエンドとバックエンドで型を共有する一般的な方法としては、以下のようなものがあります:1
【TypeScript初学者向け】Generics型におけるArray についての豆知識
# はじめに
OREILLYの「初めてのTypeScript」をパラパラとめくっていて、ジェネリクス型の章でちょっとおもしろい豆知識があったので紹介します:point_up:TypeScript初学者には是非おススメしたい書籍なので、これから始めてみようという方はコレ一択なやつです。
https://amzn.to/4cHAesO
![image_6487327 (4).JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3492127/d2278b47-d246-076f-79d5-9d3bd2767775.jpeg)
# 概要
TypeScript の `Array` インターフェースは、配列操作のための様々なメソッドを定義しています。ここでは`pop()` と `push()` メソッドについての使い方とTypeScriptでの挙動を解説してきます。 まず下記をリーディングしてみましょう。
“`typescript
interface Array{
pop():
電話番号に – を入れたい(Apps Script/Javascript 対応)…
## 電話番号に – を入れたい(Apps Script/Javascript 対応)…
電話番号をフォームなどで入力された際に、いろいろなフォーマットで電話番号を入力されてくることがあり、それをノーマライズしたくなりコードを考えてみました。
電話番号には、固定電話、携帯電話、サービス電話などがあり、桁数も 10桁あり、11桁ありとややこしい上、市外局番の桁数も地域によって変わるのでちょっと悩ましい。さらには、国際電話もあるのでどうするかちょっと悩みました。### 国番号
指定された電話番号が、+で始まる場合に、先頭の 1-5 桁を国番号と考え、国番号の一覧にマッチさせて、国番号とそれ以外に分割します。国番号が 81(日本)の場合は、市街局番、市内局番と下4桁の分割を行います。
81(日本)以外の場合は、国番号以下はそのまま返します。
国番号一覧は、 下記URL から取得したものを利用しています。
https://countrycode.org/### 市外局番で場合分け
指定された電話番号が 0 で始まらない場合は、先頭に 0 を追加してから、下記のように場合分けしてい
【Stripe決済】laravel + JavaScriptでStripeクレジットカード決済をやってみた
## はじめに
決済機能を実装するにあたり、StripeAPIを使用して実装することになった。今回の記事はstripeAPIに関しての決済備忘録になる。
忘れないようにメモしとく。## ざっくりな環境
+ Docker
+ Laravel11
+ php8.3
+ MySQL8.0
+ JQuery
+ HTML
+ CSS
+ Bootstrap## 流れ
まず流れから把握しておく。+ **フロント側でPaymentMethodIDを作成する**
Stripe(多分他の決済機能も一緒)はクレジットカード情報を送信したり、取得したりするのはセキュリティ的に良くないため、カード情報を直接保存せず、トークン化された情報を使って、セキュリティを確保するらしい。これにより、PCI DSS(Payment Card Industry Data Security Standard)に準拠した安全な方法でカード情報を管理ができるようになるみたいやな。
ここでまあまあハマった。
+ **フロント側で作成したPaymentMethodIDを使用してサーバー側が決済**
上記記
CSVを表示する簡易htmlツール
# 0.はじめに
CSVを参照したいけどエクセルがないし、入れられない。あってもインストールが手間。などという時があったので、htmlで参照できるように作ってみました。# 1.作り方
– メモ帳で新規テキストを作成し、以下のコードを張り付けます。
“`html
CSVReader