AliasAttributes: !Ref aliasAttributes を消して UsernameAttributes: - email に変更した上で amplify push するとemailとパスワードのみでサインアップできるようになる UsernameAttributes: !Ref aliasAttributes でもいけるかもしれません。 ※メモ用なので雑ですみません
はじめに 前回は、todoタスクの表示、追加をおこないました。今回は部分削除、一括削除、タスクがない場合のコメントの表示の実施を行います。 作成 タスクの削除機能 index.html <table> <thead > <tr> <th>タイトル </th> <th>状態 </th> <th></th> </tr> </thead> <tbody> <tr v-for="(item, index) in todos" > <td v-bind:class="{done: item.status} ">{{ item.title }} </td> <td><input type="checkbox" v-model="item.status"></td> <td><button @click="Deleteitem(index)">削除</button></td> </tr> </tbody> </table> v-on:clickの省略は＠clickです。Deleteitemでindexを付けずに実行したらうまくいかなくて、悩みました。 js/main.js methods: { Addtodo: function() { var item = { title: this.newitem, status: false } this.todos.push(item); this.newitem = ""; }, Deleteitem: function(index){ if(confirm("本当に削除しますか？")){ this.todos.splice(index, 1); } } } 選択したタスクだけ削除するために、indexでわけています。confirmで削除するか確認の通知を表示します。splice(index, 1)で削除を実装しました。 一括削除の作成 index.html <h2>ToDoリスト</h2> <button v-on:click="Alldelete">一括削除</button> v-onでクリック時にAlldeleteが働き、状態がtrueのタスクすべて削除します。 js/main.js Alldelete: function(){ if(confirm("完了している全てのタスクを削除しますか？")){ this.todos = this.todos.filter(function(todo){ return !todo.status; }); } } filterでstatusがfalseなタスクのみを表示させます。 タスクがない場合 index.html <tbody> <tr v-for="(item, index) in todos" > <td v-bind:class="{done: item.status} ">{{ item.title }} </td> <td><input type="checkbox" v-model="item.status"></td> <td><button @click="Deleteitem(index)">削除</button></td> </tr> <td v-show="!todos.length">タスクがありません。</td> </tbody> v-showでタスクが存在しない場合のみ表示します。 感想 簡単なVue.jsのコーディングができるようになってきたと実感しています。より複雑なコーディングができるように学習に励みたいと思います。
タイトルそのままです。 「文章の読みにくい部分」に色を付けて指摘してくれるウェブアプリを作りました。 …読みやすい文章を書くのって大変と思うんですよ。 ついつい「という」とか「こと」とか使っちゃうし、細かくチェックするのも面倒だし。 だから、以前から「読みにくい部分をチェックしてくれるアプリがあったら便利なのにな…」と思っていました。 そして、最近「あれ？今なら自分で作れるかも」と感じてやってみたら…、できました。笑 個人的にはかなり重宝しているので、よかったら使ってみてください。 ちなみに、おまけで「読みやすい文章の書き方紹介」や「採点機能」もあります。 (採点機能はエンタメ要素なので、あまり真に受けないでください。)
タイトルそのままです。 「文章の読みにくい部分」に色を付けて指摘してくれるウェブアプリを作りました。 作った動機 …読みやすい文章を書くのって大変だと思うんですよ。 ついつい「という」とか「こと」とか使っちゃうし、細かくチェックするのも面倒だし。 だから、以前から「読みにくい部分をチェックしてくれるアプリがあったら便利なのにな…」と思っていました。 そして、最近「あれ？今なら自分で作れるかも」と感じてやってみたら…、できました。笑 おまけで「読みやすい文章の書き方紹介」や「採点機能」もあります。 (採点機能はエンタメ要素なので、あまり真に受けないでください。) 個人的にはかなり重宝しているので、よかったら使ってみてください。(๑˃̵ᴗ˂̵)و ちなみに… 法律の条文を入れてみたら-2532点とかになりました笑
タイトルそのままです。 「文章の読みにくい部分」に色を付けて指摘してくれるウェブアプリを作りました。 …読みやすい文章を書くのって大変だと思うんですよ。 ついつい「という」とか「こと」とか使っちゃうし、細かくチェックするのも面倒だし。 だから、以前から「読みにくい部分をチェックしてくれるアプリがあったら便利なのにな…」と思っていました。 そして、最近「あれ？今なら自分で作れるかも」と感じてやってみたら…、できました。笑 個人的にはかなり重宝しているので、よかったら使ってみてください。 ちなみに、おまけで「読みやすい文章の書き方紹介」や「採点機能」もあります。 (採点機能はエンタメ要素なので、あまり真に受けないでください。)
amplify vue の フォームから電話番号を消したいと思い、フォームのカスタマイズを公式ドキュメント通りに実装しようとしたら動作せずとても困った。 <amplify-sign-up slot="sign-up" username-alias="email" :form-fields.prop="formFields" ></amplify-sign-up> 引用元: https://docs.amplify.aws/ui/auth/authenticator/q/framework/vue#customization 公式だと:form-fields.prop="formFields"のように記述してあるのだが:formFields="formFields"と書くと動く。 <amplify-sign-up slot="sign-up" username-alias="email" :formFields="formFields" ></amplify-sign-up> 以下の質問を見つけて解決できた。 https://www.gitmemory.com/issue/aws-amplify/amplify-js/5363/811567032 armenさん、ありがとう。
はじめに 現在Vue.jsの学習をドットインストールを利用して、学習しています。 今回、ドットインストールで学習した内容をより深く理解するためにtodoリストを自分で考え作成していきたいと思います。 作成 初期設定 index.html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ToDo</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="js/main.js"></script> </body> </html> js/main.js (function(){ 'use strict'; })(); 今回は、Vue.jsの学習なのでcssは簡単にします。 todoリスト一覧の表示 index.html <div id="app"> <h2>ToDoリスト</h2> <table> <thead > <tr> <th>タイトル </th> <th>状態 </th> </tr> </thead> <tbody> <tr v-for="item in todos" > <td >{{ item.title }} </td> <td>{{item.status}} </td> </tr> </tbody> </table> <form> <input type="text"> <input type="submit"> </form> </div> todoリストをテーブルで作成。v-forで繰り返し処理を行います。 js.main.js (function(){ 'use strict'; var vm = new Vue({ el: "#app", data: { todos: [{ title:"Vueの学習", status: false },{ title:"筋トレ", status: false }] } }); })(); データをいれます。 現在はこのような状態です。 タスク管理の修正 todoのタスクの状態を管理するために、チェックボックスを利用します。タスクが完了した場合には、v-bindでclassが追加され、テキストのレイアウトが変わるようにしました。v-modelでタスクの状態の情報を入手します。 index.html <tbody> <tr v-for="item in todos" > <td v-bind:class="{done: item.status} ">{{ item.title }} </td> <td><input type="checkbox" v-model="item.status"></td> </tr> </tbody> css/styles.css td.done { text-decoration: line-through; color: #bbb; } タスクが完了した場合このようになります。 タスクの追加 タスクを追加するためにv-onを利用します。v-on:submitでsubmitされた場合、Addtodoが働き、リストに追加されます。 index.html <form v-on:submit.prevent="Addtodo"> <input type="text" v-model="newitem"> <input type="submit"> </form> js/main.js data: { newitem :"", todos: [{ title:"Vueの学習", status: false },{ title:"筋トレ", status: false }] }, methods: { Addtodo: function() { var item = { title: this.newitem, status: false } this.todos.push(item); this.newitem = ""; } } 反省 今回学習内容をまとめてみて、自分で理解していても説明するとなると難しいと思いました。また、もっと専門的に説明できるように勉強していく必要があると思いました。これからも何がわからないか知るためにもQiitaでアウトプットをしていきたいと思います。
はじめに Reactを触っているとついついslotを忘れていたので、軽くまとめてみました。 初めての投稿なので、お手柔らかに。 1. 前提 コンポーネントとは ( 分かる方は、2. Slot まで読み飛ばしてください。) まず、Slotはコンポーネント間でのやりとりに使われるので、コンポーネントを軽く復習 開発していると、あるファイルにパーツを付け足したい時がある。 例えば、 ボタンが欲しいとか、 メニューバーが欲しいとか とかとか。 そんな時に、普通のhtmlの様に、一つのファイルに付け足していく事も出来るが、Vue、Reactなどは別のファイルに部品として分ける事が出来る。その部品の総称をコンポーネントという。 ※ コンポーネントを使うと、読みやすくなるし、その部品を使い回す事も出来るから色々便利！? ここで、覚えるべきキーワード！！ コンポーネント(部品のファイル)を呼び出すファイルが、親。 呼び出される側、つまり、コンポーネント側が、子。 さて、本題にもどり、Slotの説明。 2. Slot まず、子つまり、呼び出される側から定義していく。 component/child.vue <template> <div class="child"> <p>xxx<slot>yyy</slot>zzz</p> </div> </template> 次に、親側。 App.vue <template> <div id="app"> <p>aaaいってらっしゃい。</p> <child>aaa</child> </div> </template> <script> import child from "./components/child"; //component/child.vueをインポート export default { name: "App", components: { //ここで、ChildをApp.vueファイル内でコンポーネントとして使える様にしている。 child } }; </script> 親に注目してみると、Childのタグの中に、aaaという文字列が指定されている。これがスロットマシーンのコインの役割を果たし、Childコンポーネントの<slot></slot>の中に挿入される。ここで、元々あったyyyがaaaに変更される。(Childの中身が何もなかったら、yyyのまま) なので、出力は aaaいってらっしゃい。 xxxaaazzz となる。 この考え方さえ理解出来れば、名前付きスロット、スコープ付きスロットなどもスムーズに理解できるはず！
問題 クラウドフロントで下記のようなエラーが表示されてページが閲覧できない <Error> <Code>AccessDenied</Code> <Message>Access Denied</Message> <RequestId>BASD5JKLZQBI8</RequestId> <HostId>X9Slmr75bLv4sfgCm5Y3Fx+qys/MEk+8NfsdfbMy0t5Qc19oaV4XFea3vsB/A0nmWzdfgkRoq4tk=</HostId> </Error> 対処法1 エラーページで 404の時と403の時、ステータスコード ２００で/index.htmlを開くようにする。 なぜかというとSPAは基本的に一つのhtmlファイルでパスごとに表示を切り替えているので、Vue.jsなどで /page /create などを定義していたとしてもS3からファイルを見つけられることができないので403が帰ってしまう。 それを防ぐために403でも200で一度/index.htmlにリダイレクトさせて作成したVue.jsのrouterなどに開くページを制御してもらう必要がある。 対処法２ S3のBucket policy を CloudFront から参照できるように更新する origins -> 対象を選択 -> edit で画像のような画面に遷移できる。 OAIをなければ作成あれば選択して update の方を選択して保存をする。 最後に Youtubeチャンネルはじめてます！ エンジニアの姿は十人十色。 今後も色んなエンジニア像を捉えて、それを目指す人たちの参考になる動画を作っています。 あと、プログラミングもメンタで教えているので興味があったらみてください。
初心者がVue.jsを勉強して理解したことを更新していきます。 HTML,CSS,Javasciptの基本構文は一通り理解していて、過去にReact、Node.jsを勉強してアプリを作った経験があります。 vue-cli生成ファイル構造 ├── node_modules ├── public │ ├── favicon.ico: Webのシンボルマーク │ └── index.html: HTMLのエントリーポイント ├── src │ ├── assets: 静的ファイルの保管フォルダ │ │ └── logo.png │ │── component: コンポーネントの保管フォルダ │ │ └── HelloWorld.vue │ │── App.vue: アプリケーションの親玉 │ │── main.js: Vue全体の初期化をしているJSファイル ├── .gitignore: gitで管理したくないファイルとフォルダーの設定ファイル ├── babel.config.js: babelの設定ファイル ├── package.json: プロジェクトのパッケージ管理 ├── README.md: プロジェクトの説明文 ├── package-lock.json： パッケージのバージョン管理 vueのビルドの違いについて 公式サイト vue.jsとvue.runtime.xxx.jsの違い： vue.jsは完全版のvue。templateを解析するためのコンパイラとランタイムの両方が含まれたビルド vue.runtime.xxx.jsはVueのコアな機能だけを残して、templateを解析するコンパイラーが入ってないVueのランタイムビルド vue.runtime.xxx.jsはtemplateを解析する能力がないので、new Vue({ ... })の時はtemplateオプションが使えず、render関数に手伝ってもらう必要がある。 vue-cliで生成されたmain.jsの中でインポートしているVueは裏でランタイムビルドを参照しているので、new Vueの時はrender関数の中でcreateElement関数でtemplate内容/コンポーネントをレンダリングしている。vue-cliの中でcreateElementは略してhって名付けている main.js import Vue from "vue"; //ランタイムビルドをインポートしている import App from "./App.vue"; Vue.config.productionTip = false; new Vue({ render: (h) => h(App), // render: (h) => h(App)と同じ // render(createElement) { // return createElement(App); // }, // template: `<h1>Hello</h1>` これはエラー }).$mount("#app"); ランタイムビルドは完全ビルドに比べおよそ30%軽量なため、利用できるときにはこれを利用したほうが良い vue.config.js 設定ファイル vue inspect > output.jsでvue-cliのデフォルト設定を確認できる vue-cliのデフォルト設定をOverrideしたい場合はvue.config.jsファイルを作成してカスタマイズする 詳細はこちら ref属性 HTMLタグ、もしくは子コンポーネントを後で取得できるように名前を登録するときに利用する。idの代替。 使い方 登録：<h1 ref="xxx">.....</h1> または <School ref="xxx"></School> 取得：this.$refs.xxx HTMLタグにrefをつけた場合、this.$refsで取得できるのはDOM要素。コンポーネントにrefをつけた場合に取得できるのはコンポーネントのインスタンス props コンポーネントが外部からデータをもらうためのもの コンポーネントにデータを渡す場合：<School name="xxx" / > コンポーネントがデータを受け取る場合： やり方１ （宣言して受け取る）： props:['name'] やり方２ （データ型を制限して受け取る）： props:{name:String} やり方３ （データ型、必須、デフォルト値を指定して受け取る）： props:{ name:{ type:String, //型 required:true, //値が必須 default:'Sample' //デフォルト値 } } propsで受け取ったデータはコンポーネントインスタントに関連付けられるので、thisで取得できる propsで受け取ると宣言したものの、渡してもらえなかったデータはundefinedになる propsは読み取り専用です。Vueは裏でpropsへの変更を監視していて、変更が見つかったら、ワーニングが出るようになっている。もしpropsのデータを修正する必要があれば、propsの中身をdata()にコピーしてからデータの修正を行う <script> export default { name: "App", data() { return { myAge: this.age, //propsのデータをmyAgeにコピー }; }, props: ["age"], //propでageを受け取る }; </script> mixin コンポーネント間で共通利用できるdata(), methods:{}などを切り出して定義する機能。 mixin.jsの定義 mixin.js export const mixin = { methods: { showName() { alert(this.name); }, }, mounted() { console.log("Hello"); }, }; export const mixin2 = { data() { return { x: 100, y: 200, }; }, }; mixinの利用 グローバル利用： Vue.mixin(xxx) ローカルで利用: <template> </template> <script> //mixinのインポート import { mixin } from "../mixin"; export default { name: "Sample", data() { return { }; }, //コンポーネント内で利用するmixinを定義 mixins: [mixin], }; </script> plugin Vueのグローバルレベルの機能追加に使う pluginの本質はinstallメソッドを含めたJSオブジェクト。installメソッドは最初にVueを引数に取り,2個目以降の引き数optionsの利用は任意で、一般的にpluginを呼び出す方から受け取るデータを入れる。 plugin.js const myPlugin = { install(Vue, options){ // 1. グローバルフィルター Vue.filter(....) // 2. カスタムなdirective Vue.directive(....) // 3. グローバルミックスインを配置 Vue.mixin({ data() { return { x: 100, y: 200, }; }, }); // 4. インスタンスメソッドを追加 Vue.prototype.$myMethod = function () {...} Vue.prototype.$myProperty = xxxx } } export default myPlugin; pluginの利用 main.js import myPlugin from "./plugins"; Vue.use(myPlugin) new Vue({ // ... オプション }) scoped スタイル コンポーネントに適用するスタイルの範囲を現在のコンポーネントでのみ有効にして、他のコンポーネントとスタイルの衝突を防ぐ。 書き方 <style scoped > </style>
