メインカテゴリーを選択しなおす
【Azure】FunctionsからKeyValutに登録した値を参照する
こんにちは、しきゆらです。Azure関連のメモシリーズになります。今回は、タイトルの通りKeyVaultに登録したクレデンシャル情報をAzure Functions/関数アプリか...
【Functions】GraphAPIを使ってSharePointへファイルアップロードする
こんにちは、しきゆらです。今回は、Azure FunctionsからGraph APIを使ってSharePointへファイルをアップロードさせる方法をメモしておきます。 これまで...
【Functions】Graph APIの参照範囲を特定のSharePointサイトのみに制限する
こんにちは、しきゆらです。今回は、前回まとめたSharePointへのファイルアップロードに関連して、特定のサイトにのみ制限する方法を知ったのでメモしておきます。 前回のAzur...
【Functions】HTTPトリガーのFunctionsへデータを渡す方法
こんにちは、しきゆらです。今回は、タイトル通りHTTPトリガーへリクエスト時にデータを渡し、Functions側で受け取る方法をまとめます。参考となるドキュメントは以下あたり。 ...
【Power Automate】クラウドフローでShift_JISをUTF-8に変換する方法
Power Automateのクラウドフローでは、文字列の文字コードはUTF-8しか扱うことができません。 Shift_JISのファイルをPower Automateで何の工夫もせずに読み込むと文字化けしてしまいます。 UTF-8はほとんど
【Vue.js＋TypeScript】デジタル時計を作ってみた
こんにちはです。あっちのそららです。最近勉強しているTypeScriptのアウトプットとして、デジタル時計を作ってみました。 デモページ acchinosorara.github.io「Vue.js」というフレームワークを使用。ディスプレイの文字がリアルタイムで更新される、ありきたりな時計です。 文字のデザイン カクカクしたデジタル時計らしさを出すため、文字はCSSでデザインしました。 参考記事 ja.wikipedia.org HTMLで各セグメントを生成し、A～Gの連番を振って配置しました。数字に応じて個々の表示・非表示が切り替わる仕組みです。例えば、 「2」→ C、Fを非表示 「4」→ …
こんにちはです。あっちのそららです。近年注目されている「TypeScript」というプログラミング言語を触り始めました。JavaScriptの上位互換で文法も似ているので、今のところは順調に吸収できている実感。JavaScriptよりルールが厳格で、おかしな記述は未然にエラーにしてくれます。この気づかないミスを実行前に可視化してくれるのが、便利で面倒で安全なところ。少し前までは興味のなかったTypeScriptですが、作りたいものがあると学ぶのが楽しい。 それでも完璧とはいかず、タチの悪いバグは出る。 ランキング参加中写真・カメラ
Windowsのローカル環境にNext.jsの開発環境を構築するメモ【備忘録】
お疲れ様です。 業務でNext.jsを使うことになり環境構築から対応が必要になったので試しに個人PCに環境構築したメモです。（自分用） もともとNext.jsを使った開発は経験があるのですが、Dockerでdevcontainerを作成して開発をしていました。 今回作成する環境はDockerを使用せずにWindowsのローカルに構築します。 Node.jsのインストール yarnのインストール Next.jsのインストール Node.jsのインストール 公式サイトからインストーラをダウンロードし、インストールします。 nodejs.org こんな感じのインストーラが立ち上がります。基本的にデフ…
![[Next.js] Supabase カレンダーメモアプリ チュートリアル (後編)](https://img.blogmura.com/sites/1282896/post-images/71142497.webp/crop/435x435)
[Next.js] Supabase カレンダーメモアプリ チュートリアル (後編)
Next.jsの初学者向けチュートリアルコンテンツ、カレンダーメモアプリ チュートリアルの後編です。カレンダー…
[Next.js] Supabase カレンダーメモアプリ チュートリアル (前編)
Next.jsの初学者向けチュートリアルコンテンツです。カレンダー形式のメモアプリをNext.js及びType…
![[Next.js] 学習記録アプリ Firebase認証・DB実装 Zennで書籍化してみました](https://img.blogmura.com/sites/1282896/post-images/70343477.webp/crop/435x435)
[Next.js] 学習記録アプリ Firebase認証・DB実装 Zennで書籍化してみました
以前、お送りしてきた、以下の、Next.jsとFirebaseの認証・DBを利用した、学習記録アプリのチュート…
![[React] 学習記録アプリ with Firebase、Zennで書籍化してみました](https://img.blogmura.com/sites/1282896/post-images/70082622.webp/crop/435x435)
[React] 学習記録アプリ with Firebase、Zennで書籍化してみました
これまで、ブログ記事としてお届けしていた、ReactとFirebaseによる学習記録アプリのチュートリアルです…
![[Next.js] 学習記録アプリ Firebase認証・DB実装 （Admin SDK編）](https://img.blogmura.com/sites/1282896/post-images/68740706.webp/crop/435x435)
[Next.js] 学習記録アプリ Firebase認証・DB実装 （Admin SDK編）
前編・後編に渡ってお送りしてきた、Next.jsとFirebaseによる、学習記録アプリ、今回は番外編として、…
[Next.js] 学習記録アプリ Firebase認証・DB実装 （後編）
Next.jsによる学習記録アプリ、Firebase認証・DB実装 の後編です。前編に続き、後編では、DBデー…
[Next.js] 学習記録アプリ Firebase認証・DB実装 （前編）
Reactのチュートリアルとして、これまで、SupabaseやFirebase連携等、色々なパターンで紹介して…
![[React] チュートリアル 学習記録アプリ Firebaseで認証・DB実装してみた （後編）](https://img.blogmura.com/sites/1282896/post-images/67842423.webp/crop/435x435)
[React] チュートリアル 学習記録アプリ Firebaseで認証・DB実装してみた （後編）
Reactのチュートリアル、学習記録アプリ Firebase認証・DB実装の後編となります。前編では、Reac…
[React] チュートリアル 学習記録アプリ Firebaseで認証・DB実装してみた （前編）
これまで、Supabaseの活用を中心に、色々と試行してきた、学習記録アプリのチュートリアルですが、今回は、ホ…
![[React] チュートリアル 名刺アプリ Supabase連携 （拡張編）](https://img.blogmura.com/sites/1282896/post-images/66499457.webp/crop/435x435)
[React] チュートリアル 名刺アプリ Supabase連携 （拡張編）
Reactのチュートリアル記事です。Supabase連携や、カスタムフック、useContextなど
[React] チュートリアル 名刺アプリ Supabase連携 （後編）
Reactのチュートリアル記事です。名刺アプリ Supabase連携 （後編）です。本記事は、以下の記事をモチ…
[React] チュートリアル 名刺アプリ Supabase連携 （前編）
Reactのチュートリアル記事です。今回の記事も、以下の記事をモチーフに作成した名刺アプリのチュートリアルです…
【TypeScript入門シリーズ】第2章：TypeScriptの開発環境を整える
TypeScriptを始めるための開発環境を初心者向けに解説。TypeScriptのインストール方法、プロジェクトのセットアップ、Visual Studio Codeなどのエディタ設定、tsconfig.jsonの基本設定について詳しく説明します。
【TypeScript入門シリーズ】第1章：TypeScriptとは？
TypeScriptとは何か、JavaScriptとの違い、そしてTypeScriptを学ぶべき理由について、初心者にもわかりやすく解説。静的型付けの利点、開発効率の向上、TypeScriptの基本的な機能について学びます。
[React] チュートリアル 学習記録アプリ 3 ユーザー認証実装 （後編）
Reactチュートリアル、学習記録アプリのユーザー認証実装、後編です。Supabaseの認証機能を利用したユー…
[React] チュートリアル 学習記録アプリ 3 ユーザー認証実装 （前編）
チュートリアル 学習記録アプリ、3回目です。前回まででSupabaseを活用したDBデータの読み込み・編集・削…
![[React]チュートリアル 学習記録アプリ 2 Supabase編](https://img.blogmura.com/sites/1282896/post-images/65912939.webp/crop/435x435)
[React]チュートリアル 学習記録アプリ 2 Supabase編
前回に続き、学習記録アプリのチュートリアルの2回目です。今回は、学習記録データの格納に、BaaS（Backen…
少し前からReactの勉強をしてます。本日ご紹介するのは、よくある、Todoリストの作成です。こちらの記事を参…
[React]Todoリストの作成 – 初学者向け、その2です。前回は基本的に元の参考記事に準じた内容でしたが…
今回の記事は、以下の記事をモチーフに作成した学習記録アプリのチュートリアルです。 こちらの3-3. 課題3をベ…
【Hello World】TypeScript + React Native for Web + React Navigation + Webpack
今度はTypeScript + React Native for Web + React Navigation + webpack + github pages templateを作ってみました。
【Hello World】TypeScript + React Native for Web + Webpack
今度はTypeScript + React Native for Web + webpack + github pages templateを作ってみました。
【簡単】TypeScript + webpack で GitHub pages にホストする
自分の作ったものを簡単に誰でも触れるよう、github pagesにホストしたい。。ポートフォリオ作りのために、github pagesに作品を載せたい。。というわけで、typescript + webpackを使ってgithub pagesにホストした流れをシェアできればと思います。
【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 ...
![[VSCode] 自動補完機能が効かなくなった](https://img.blogmura.com/sites/1282896/post-images/67463299.webp/crop/435x435)
