メインカテゴリーを選択しなおす
【Node.js】Socket.IO / Express / TypeScriptでソケットサーバー構築【Room接続 / メッセージ投稿】
Node.js, Socket.IO, Express, TypeScriptを使って、ターミナル上で利用できる簡単なチャットアプリを作ります! 本格的なアプリを作る前に各種パッケージの使い勝手を理解するのに最適なサンプルですので、ぜひ参考にしてください
JavaScriptとTypeScriptの違いについて(サンプルコードあり)
JavaScript と TypeScript は、主にWeb開発において使われるプログラミング言語ですが、似ているようでいくつかの点で異なります。今回は、JavaScript と TypeScript の言語仕様の違いや互換性について、簡
【TypeScript】Graph API を使って Instagram の投稿を取得する【2022年6月版(v14.0)】
React x TypeScriptでInstagramの投稿をサイト上に表示したかったときの備忘録 使用したGraph APIはv14.0だけど12.x, 13.xあたりも同じっぽい(多分)(未検証) 全体的な流れのうち、1, 2は書くのめんどいので割愛 Instagramをプロアカウントに変更する facebookとInstagramをリンクさせる facebook developerアカウントでアプリの作成 Graph APIで使用するアクセストークンの有効期限の延長 instagram business idの取得 instagramの投稿の取得してサイトに表示する 1. facebo…
必要なパッケージのinstall $ npm install --save-dev @babel/preset-typescript ts-jest @types/jest babel.config.js に追記 module.exports = { presets: [ ["@babel/preset-env", { targets: { node: "current" } }], "@babel/preset-typescript" // 追加 ], }; テストの実施 $ npm run test > xxxxxx@1.0.0 test > jest PASS __tests__/sam…
TypeScript x axios で配列を非同期で処理する方法
やりたいこと 会員情報を複数取得したい 会員情報を複数取得できるAPIが存在しない 実装 APIへアクセスするファイル export default class Sample { public async fetchUsers(): Promise<{username: string, /* ... 適当な型定義 */}[]> { return Promise.all( [1, 2, 3].map(async row => axios.get(`http://example.jp/api/member/${row}`), ), ).then((results: AxiosResponse<{ …
Google Analytics Data API (GA4) を使ってNextjs上に人気記事を表示する
Google Analytics Data API (GA4) + Nextjsで人気記事の表示機能を実装します。 ユーザーのアクセス数によって表示される記事が動的に変わります。
[React+Tailwind] Carousel を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Carousel コンポーネントです。 JavaScript ベースの Carousel.js です。 import { forwardRef }...
kintoneを使用していて、Twitterのハッシュタグのような機能を使用したいと思ったことはありませんか?ただ、フリーワードでユーザーがタグを登録するとなると、サブテーブルなどを活用しなければうまく実装することができません。
[React+Tailwind] Card を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Card コンポーネントです。 JavaScript ベースの Card.js です。 import { forwardRef } from 'r...
[React+Tailwind] ButtonGroup を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Button コンポーネントです。 JavaScript ベースの Button.js です。 import { forwardRef } fro...
[React+Tailwind] Button を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Button コンポーネントです。 JavaScript ベースの Button.js です。 import { forwardRef } fro...
[React+Tailwind] Breadcrumb を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Breadcrumb コンポーネントです。 JavaScript ベースの Breadcrumb.js です。 import { forwardR...
[React+Tailwind] Badge を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Badge コンポーネントです。 JavaScript ベースの Badge.js です。 import { forwardRef } from ...
[React+Tailwind] Avatar を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Avatar コンポーネントです。 JavaScript ベースの Avatar.js です。 import { forwardRef } fro...
[React+Tailwind] Accordion を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Accordion コンポーネントです。 JavaScript ベースの Accordion.js です。 import { forwardRef...
[React+Tailwind] Alert を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Alert コンポーネントです。 JavaScript ベースの Alert.js です。 import { forwardRef } from ...
[React+Tailwind] Alert を TypeScript に書き直してみた 心を無にして始める React
準備 書き直すベースはこちらの Alert コンポーネントです。 JavaScript ベースの Alert.js です。 import { forwardRef } from ...
サンプルを例に、React Queryの使い方を解説します。入門レベルですが、参考になればと思います。今回作成するサンプルReact Queryとaxiosを使って、GETとPOSTのHTTP通信を行うサンプルを作成しました。GET:取得し
VSCodeにESLintとPrettierを設定してReact+TypeScriptのコードを自動整形
チーム開発をしていると、コーディングスタイルがバラバラで困ることがあります。インデントがずれているスペースの開け方が違う改行の位置がそろっていないということで、コードを自動整形してしまおうという試みです。エディターはVSCode、プロジェク
Object.entries()で厳格に型定義された結果を受け取りたい【typescript】
typescriptの標準設定では、Object.entries()の型は以下のように定義されています。つまり、Record<string, number string>のような型が存在する場合、返り値の型は[string, number string…
表示するフィールドを制御するタブを実装するプラグインを開発しました【無料公開】
アプリのフィールド数が増えてくると、目的のフィールドがどこにあるのか見つけるのが難しくなります。今回はスクロールに追従し、フィールドの表示・非表示を制御するタブを実装するプラグインを開発しましたのでご紹介します。
FirebaseのSparkプランを使い倒すために、Realtime-Databaseのデータをスプレッドシートにキャッシュして、Next.jsからアクセスするという処理を別のウェブサイト作成時に実装しました。需要があるか分かりませんが、その中で使用したGAS・Next.js…
React + TypeScriptのプロジェクトをパパっと簡単に作成する方法!
どうやってReactでTypeScript使うのかな?って思うことがあったので、ローカルで環境構築してみました。新規プロジェクトで作成する場合はコマンド一発で出来るので簡単です。React + TypeScriptのプロジェクト新規作成次の