プログラミング教育の情報サイト

プログラミング教育の情報サイト

Nuxt3 (vite)にAmplifyを導入するまでにやったこと

Nuxt3 & Vuetify3 を利用してWebアプリケーションを作成する

Amplifyを導入する為に必要な @aws-amplify/cli をインストール後、必要な設定を行います。 プラグインの設置 Amplifyの設定を読み込む為のpluginsファイルを追加します。 src/plugi […]

Next.js & Nest.js & Prisma を利用してGraphQLを使ったアプリケーションを作成する

Next.js & Nest.js & Prisma を利用してGraphQLを使ったアプリケーションを作成する

作成したアプリケーション GraphQLの学習用のサンプルアプリケーションです。 フロントエンドは Next.js & Apollo Client 、サーバーサイドは Nest.js & Prisma を利用して […]

Next.js で Web-RTC を利用したZoomのようなビデオ通話アプリを作成する

Next.js で Web-RTC を利用したZoomのようなビデオ通話アプリを作成する

作成したアプリケーション https://nextjs-webrtc-firebase.web.app Next.js & Web-RTC を利用したビデオ通話アプリのサンプルです。ビデオ通話、画面共有、チャット機能、録 […]

Nuxt3 & Vuetify3 を利用してWebアプリケーションを作成する

Nuxt3 & Vuetify3 を利用してWebアプリケーションを作成する

作成したアプリケーション デモ Nuxt3 & Vuetify で作成しており、TailwindCSS も利用しています。インフラは、Amplify (Cognito/AppSync/DynamoDB) で構築し […]

日本で今話題になっているTwitterのトレンドワードをお知らせするAlexaアプリを作成した

AWS Lambda を利用して Alexa でTwitterのトレンドをお知らせするスキルを作成した

作成したアプリケーション インストール https://www.amazon.co.jp/dp/B09MRFPFFC 主な機能 「アレクサ、日本のトレンドワードを開いて」というと、Twitterのトレンドから、日本で話題 […]

Firebase を利用して Next.js でWebアプリケーションを作成する

Firebase を利用して Next.js でWebアプリケーションを作成する

作成したアプリケーション Next.js & Firebase を利用した学習用のサンプルアプリケーションです。 Firebase Auth を利用したログイン/ログアウト、会員登録機能 に対応しています。 また、投稿デ […]

Nuxt3・MicroCMS・Github Pagesを利用してJamStackなWebアプリケーションを作成する

MicroCMS と Nuxt.js を利用してJamStackな Webアプリケーション を作成する

JamStack とは? JamstackのJamはJavaScript/APIs/Markupの頭文字です。JavaScriptでAPIをたたいてMarkupを配信することを意味しています。 通常のWebアプリケーショ […]

Vue.jsで親子のデータを同期するならsyncを使え

Vue.jsで親子のデータを同期するならsyncを使え

Vue.js で親コンポーネントと子コンポーネントのデータを同期する手法として、v-model や sync を利用する方法がありますが、それぞれのサンプルコードを作成して比較してみました。 まず、Vue.jsで親コンポ […]

画像アップロードVue.js用コンポーネント(ドラッグ&ドロップ対応)− vuejs-image-base64

画像アップロードVue.js用コンポーネント(ドラッグ&ドロップ対応)− vuejs-image-base64

vuejs-image-base64 とは vuejs-image-base64 は、NPMで公開 されている画像アップロード用のVue.jsコンポーネントです。 特徴 Base64にエンコードされた画像データを取得する […]

React Hooksの使い方を学ぼう~関数コンポーネントの状態管理を行う

React Hooksの使い方を学ぼう

基本のフック useState useState とは、関数コンポーネントでstateを管理( state の保持と更新)するためのReactフックであり、最も利用されるフックです。 state とはコンポーネントが内部 […]