目的 Web アプリケーションのあるある機能なのですが、管理者が静的コンテンツを管理画面からアップロードしてユーザーに配信したい場合があります。このようなニーズに対しては、Azure Storage や AWS S3 などのストレージサービスに対して Web アプリケーション経由でファイルをアップロードして、ユーザーに対しては Amazon CloudFront や Azure CDN などを組み込むのが一般的な手段かと思います。 この記事では静的コンテンツをWeb アプリケーションのサーバーサイドで処理せず、直接 Azure Blob Storage にアップロードして、Web アプリケーションのランニングコストがほとんどかからない SPA で実現しようというものです。 　この方法でなく：管理者 ⇒ ブラウザ ⇒ Webサーバー ⇒ Azure Blob Storage ⇒ CDN ⇒ ユーザー 　この方法で実現：管理者 ⇒ ブラウザ ⇒ Azure Blob Storage ⇒ CDN ⇒ ユーザー 本記事の要約 Azure Storage に CORS の設定をします Azure Storage の Blob コンテナーの SAS URL を発行します Azure Blob Storage Client Library (@azure/storage-blob) を使って SPA をつくります ブラウザから直接 Azure Blob Storage にアップロードできます 参考記事 クイック スタート:ブラウザーで JavaScript v12 SDK を使用して BLOB を管理する 。 CORS（Cross-Origin Resource Sharing）について 今回の方法では、ブラウザから Azure Blob Storage に対して直接 Web API をリクエストしますので、SPA を配信するオリジンとは異なるオリジンにアクセスが行われます。この設定をしておかないと、リクエストが失敗してしまいます。 詳細は オリジン間リソース共有 (CORS) を参照 Azure Storage の SAS URL について Azure Storage の Blob、Queue、Table、File といった各種サービスに対して、アクセス許可を与えることができる仕組みです。 SAS URL は「有効期限」と「IPアドレス制限」が可能で、プログラムによって動的に発行することもできるのでセキュリティ面も安心です。 詳細は Shared Access Signatures (SAS) を使用して Azure Storage リソースへの制限付きアクセスを許可する を参照 Azure Storage の CORS を設定する まずは Azure Portal でストレージアカウントを作成します。 ストレージアカウントを作成したあと[設定]...[リソースの共有 (CORS)]のメニューにアクセスします。 ここでは [Blob service] のタブを選択して SPA が配置されるオリジンの情報を設定します。アスタリスク（*）を設定した項目は任意の値を許可することになりますので、本番環境においてはしかるべき値を設定しましょう。 Azure Storage の Blob コンテナーの SAS URL を発行する Azure Blob Storage では SAS URL は以下の単位で発行することができます。 コンテナー Blob Blob バージョン Blob スナップショット ディレクトリ（階層名前空間が有効になっているストレージアカウントのみ） コンテナーに対して SAS URL を発行する場合は、該当コンテナーの外側（別のコンテナーや別のコンテナー内のBlob）にはアクセスできないので、操作できる範囲を限定しやすくわかりやすいので、ここではコンテナーに対して SAS URL を発行します。 コンテナーを作成したあと[設定]...[共有アクセス トークン]のメニューにアクセスします。 [アクセス許可]の入力項目では、必要なアクセス許可を設定します。（ひとまず全部チェックします） [有効期限]と[使用できるIPアドレス]を設定します。IPアドレスは、自分のPCのグローバルIPを調べて設定してください。 [SAS トークンおよび URL を生成]ボタンをクリックすることで、BLOB SAS URL が発行されます。 Vue CLI で SPA アプリケーションを作成 Vue CLI で 新しい SPA アプリケーションをつくります。 Node.js および Vue CLI がインストールされていない場合はインストールしてください。 お好きなオプションで作っていただいて良いのですが、ここでは TypeScript を選択して以下のオプションで作成しました。 > vue create blob-sas Vue CLI v4.5.13 ? Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, TS, Router, Linter ? Choose a version of Vue.js that you want to start the project with 3.x ? Use class-style component syntax? No ? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a linter / formatter config: Prettier ? Pick additional lint features: Lint on save ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? No Vue の準備ができたら以下のコマンドを実行します。 > cd blob-sas > npm install --save @azure/storage-blob Home.vueファイルにアップロード機能を追加していきます。 以下は、ファイルを入力したタイミングで Blob コンテナーにファイルをアップロードするコードです。 BlobServiceClient のコンストラクタで SAS URL を指定していますので、発行した SAS URL に置き換えてください。 Home.vue <template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png" /> <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" /> <input ref="fileUploadInputRef" type="file" name="file" id="fileUploadInput" @change="onChangeFileUploadInput" multiple /> </div> </template> <script lang="ts"> import { defineComponent, ref } from "vue"; import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src import { BlobServiceClient, ContainerClient } from '@azure/storage-blob'; export default defineComponent({ name: "Home", components: { HelloWorld, }, setup() { const fileUploadInputRef = ref<HTMLInputElement>(); const onChangeFileUploadInput = async () => { if (!fileUploadInputRef.value) { return; } if (!fileUploadInputRef.value.files) { return; } const blobServiceClient = new BlobServiceClient('https://XXXXXXXXXX.blob.core.windows.net/XXXX?sp=racwdl&st=2021-10-01T00:00:00Z&se=2021-10-31T23:59:59Z&spr=https&sv=2020-08-04&sr=c&sig=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'); const containerName = '.'; const containerClient = blobServiceClient.getContainerClient(containerName); try { const promises = []; for (const file of fileUploadInputRef.value.files) { const blockBlobClient = containerClient.getBlockBlobClient(file.name); promises.push( blockBlobClient.uploadData(file) ); } await Promise.all(promises); } catch (error) { console.log(error.message); } fileUploadInputRef.value.value = ''; }; return { fileUploadInputRef, onChangeFileUploadInput, }; } }); </script> それでは実行しましょう。 > npm run serve [ファイルを選択]ボタンをクリックして、無事にアップロードできていることを確認できました。 他にも機能を追加する ファイルをアップロードするだけではなく、いろいろと機能を追加したエクスプローラー風のアプリケーションをつくってみました。 ツリー構造で閲覧できる アップロード中にプログレスバーを表示する フォルダごとアップロードする ZIPファイルを解凍してアップロードする GitHub に上げてありますので参考にしてください。ソースコードはこちらです。 SPA なので GitHub Pages にも上げてあります。デモアプリケーションはこちらです。（CORS 設定が済ませてあれば SAS URL を入力して実行可能です） 注意事項 IE での利用は想定していません。 SAS URL はアップロード可能なファイルのサイズ制限をかけることができません。 SAS URL の取り扱いには注意しましょう。GitHub にうっかり SAS URL をコミットしてしまうと自由にファイルを置かれてしまいます。 SAS URL は発行時の署名につかったアクセスキーを交換（再発行）することで無効化できます。

データバインディング データを更新した時、その更新をDOMに反映する仕組みのことです。 また、データバインディングには種類があります。 単方向バインディング 親→子 親が更新されたら子、子が更新されたら親のように一方方向に更新されます。 propsを利用して値を渡せます。 ちなみに、親は呼び出し元のファイルで、子は呼ばれた側のファイルです。 parent.vue <template> <div> 　　　　　　　　<!-- 子に送るもの「:msg」> <Child :message="msg"></Child> </div> </template> <script> import child from './component/child.vue' export default { data() { return { msg: 'World' } }, components: { Child: child, }, } </script> child.vue <template> <div> <p>Hello,{{ message }}</p> </div> </template> <script> export default { //親から受け取ったものは「props」で受け取る props: ['message'] } </script> 【出力】 Hello,Wold 子→親 $emitで子から親にイベントを渡すことができます。 parent.vue <template> <div> <p>text: {{ parent_text }}</p> <Child @child-click='parent_text = $event'/> </div> </template> <script> import child2 from './component/child2.vue' export default { data: function() { return { parent_text: '親コンポーネントのテキスト' } }, components: { Child: child2 } } </script> child.vue <template> <div> <button @click='sendParent'>値を渡す</button> </div> </template> <script> export default { data: function() { return { child_text: '子コンポーネントのテキスト' }; }, methods: { sendParent() { // $emit('イベント名',渡したい値) this.$emit("child-click", this.child_text); } } }; </script> 【出力】 子コンポーネントのテキスト 双方向バインディング データオブジェクトの値を動的に変化させたい場合は双方向にバインディングさせてあげます。 スクリプトとブラウザのどちらからでも自動反映されます。 双方向バインディングにはv-modelディレクティブを使用します。 <template> <div> 入力：{{ data }} <input v-model="data"> </div> </template> <script> export default { data() { return { data:'', } } } </script> ブラウザからの入力がリアルタイムで反映されます。 属性のバインディング HTMLタグの属性にも値をバインディングできます。 v-bindディレクティブを使用します。 属性の名前や真偽値で idの名前を渡す <template> <div> <div v-bind:id="dynamicId">text</div> </div> </template> <script> export default { data() { return{ dynamicId: "textId" } } } </script> 真偽値で出し分ける <template> <div> <div v-bind:class="{ active: isActive }">text2</div> </div> </template> <script> export default { data() { return{ isActive: true } } } </script> HTMLのバインディング v-htmlディレクティブでHTMLを渡す事ができます。 Mustache構文({{ }}二重括弧)でもデータを描画できますが、テキストとして扱われます。 v-htmlはhtmlとして描画できます。 <template> <div> Using mustaches: <p>{{ rawHtml }}</p> Using v-html directive: <p v-html="rawHtml"></p> </div> </template> <script> export default { data() { return{ rawHtml:'<span>テキストです</span>' } } } </script> 以下のように表示されます。 Mustache構文を使用した方は文字列、v-htmlを使用した方はHtmlとなります。 【出力】

初めに 皆さんこんにちは！ 今回はVue3でシステムを実装時に新しくemitsオプションに出会ったのでこちらを記事にしたいと思います。 emitsオプションとは まずはemitsオプションの概要から紹介させていただきます。 vue3アップデート時の新機能として追加されたオプションになります。 emit実行時にpropsと同じような形で、 受け取る際にバリデーションの実行や型の指定が可能になりました。 公式より Vue 3 では emits オプションが、既存の props オプションと同様に提供されるようになりました。このオプションを使用して、コンポーネントが親に発行できるイベントを定義することができます。 Vue3 リファレンス emitsの使い方 emitsはpropsのように構文設定することが可能になりました。 設定方法としては、2通りあって 1.配列での設定 2.オブジェクトでの設定 になります。 まずは公式の記述例を見ていきましょう。 const app = createApp({}) // 配列の構文 app.component('todo-item', { emits: ['check'], created() { this.$emit('check') } }) // オブジェクトの構文 app.component('reply-form', { emits: { // バリデーションなし click: null, // バリデーションあり submit: payload => { if (payload.email && payload.password) { return true } else { console.warn(`Invalid submit event payload!`) return false } } } }) いかがでしょうか。 まさしくpropsのような書き方なのでVue2を利用されていた方であれば理解が早いと思います。 オブジェクト構文で記述することで、 型指定やバリデーションの実装も可能になっております。 最後に 良いVue3ライフを！！ 参考にさせていただいたサイト

10/12にNuxtのV3（ベータ版）が出たので試してみます 実行環境 WSL2＋Ubuntuにて試してます。 Nuxt V3プロジェクトの作成 参考：https://v3.nuxtjs.org/getting-started/installation $ npx nuxi init nuxt3-app VSCodeで開きます $ code -r nuxt3-app ファイルが↓しかありません。 ファイルを確認 app.vue <template> <div> <!-- Remove this component to get started! --> <NuxtWelcome /> </div> </template> ⇒NuxtWelcomeコンポーネントはどこにあるのか．．．？ nuxt.config.ts import { defineNuxtConfig } from 'nuxt3' export default defineNuxtConfig({ }) ⇒ベータ版だからなのか、何も設定がありません tsconfig.json { "compilerOptions": { "target": "ESNext", "module": "ESNext", "moduleResolution": "Node", "strict": false, "allowJs": true, "resolveJsonModule": true, "types": [ "node" ] } } package.json { "private": true, "scripts": { "dev": "nuxt dev", "build": "nuxt build", "start": "node .output/server/index.mjs" }, "devDependencies": { "nuxt3": "latest" } } プロジェクト起動 $ cd nuxt3-app $ npm install $ npm run dev -- -o ↓のような感じで起動します。 Nuxt CLI v3.0.0-27234503.d5127e9 07:26:58 07:26:58 > Local: http://localhost:3000/ > Network: http://172.30.162.254:3000/ ℹ Vite warmed up in 622ms ✔ Generated nuxt.d.ts ✔ Vite server built in 907ms ✔ Nitro built in 166 ms NuxtV2だとビルドで結構時間かかってましたが、Nuxt V3だと2秒以下で完了してます。 ビルドが完了すると自動でhttp://localhost:3000/がブラウザで開きます。 ただ、Nuxt V2と違ってそのままだとlocalhostでアクセスできないようなので、Networkの方でアクセスしてみます （ベータ版でnuxt.config.tsに何も定義されてないせい？）

経緯 先ほどNuxt3がbetaではあるが公開され、どんなものか早速プロジェクトを作成してみたので、そのやり方と感想を記載します。 Nuxt3? NuxtはVue.jsのフレームワークです。サーバーサイドレンダリング、静的なHTMLの出力などの機能など、Vue.jsで開発をスムーズに行うことが出来る機能が備わっています。 これまではVue2しか対応していませんでしたが、このNuxt3でVue3に対応しました。 Nuxt3の機能、何が変わったのか？ ざっくりとサイトに目を通して、個人的に興味を持ったところを抜粋して紹介します。 Vue3の対応 もちろんVue3への対応が一番大きいと思います。Vue3のコードから大幅に書きなおすことなく、Vue3の機能を使用できるようです。 Nuxt Bridge 既存のnuxt2で作成されたプロジェクトをアップグレードするNuxt Bridgeがあるみたいです。 また、現状ではNuxt3で新しくプロジェクトを作成するよりかは安定しているそうです。 Viteのサポート サーバーの起動など(npm run dev)が一瞬になります。 パフォーマンスの向上 どれくらい変わったかは未検証ですが、パフォーマンス的にはNuxt3 > Nuxt Bridge > Nuxt2になるみたいです。 プロジェクトを作成してみる 公式ドキュメントのとおりに進めてみます。 npx nuxi init nuxt3-app cd nuxt3-app npm install 上記のあと、次のコマンドを実行してサーバーを起動させます。 npm run dev 起動はたった1~2秒で終わりました。ブラウザhttp://localhost:3000にアクセスします。 このようなページが表示されました。 ディレクトリ構造 上記で作成したプロジェクトのディレクトリ構造は以下のとおりになっていました。 第一印象としては、標準がTypeScriptとなっているのと、とても構造がコンパクトになっていると感じます。 現段階では、components、pages、layoutなどの様々なディレクトリは自分で作成する必要があるようです。用意できる各ディレクトリはこちらに記載されています。 まとめ まだベータ版なので、今後どのようにアップデートがされるか楽しみです。ドキュメントも作成途中だと思いますが、まだ読み切れていないのでこれから読んでみようかなと思います。 情報の更新があれば、記事も更新するかもしれません。