TerraformとCognitoとVue.jsで認証機能付きサーバレスWebアプリを構築する - Qiita
はじめに 記事タイトルの通り、CognitoはWebアプリ等の認証機能をサーバレスでお手軽に作ることができる。 では、実際どれくらいお手軽に作れるかを試してみよう。 なお、Cognito自体はお手軽なものの、Webアプリの基本の部分は結構使うことになる。 過去、記事でまとめた基本要素は、記事中に都度リンクを貼るので、今回は詳しくは説明しない。 前提となる基本知識としては以下だ。 Vue.jsの基本 API GatewayにおけるCORSの対応 S3の静的コンテンツのウェブサイトホスティングの基本 やりたいこと＆構成図 今回はシンプルに作るため、未認証時にはログイン画面を表示し、あらかじめCognitoに登録しているユーザIDで認証をしたら、該当ユーザの情報をDynamoDBから取得して画面に表示するといった簡単なアプリにする。 これを、以下のような構成で作っていく。 ①静的コンテンツ 静的
VueにAWS Cognitoのログインをamplifyを使わないで作り込む
最近ではちょっとしたwebアプリなら、サーバーサイドを使わずに、Node環境でReactやVueなどを使った開発が多くなってきました。 しかし、SPAではなく、ちゃんとしたショッピングサイト的なものを作ろうと思うと、どうしてもログイン機能などが必要になって来ると思います。 せっかくならクライアントサイドだけの開発でサーバーサイドはクラウドサービスにお任せしたくなってきましたので、ログインも便利なCognitoにおまかせして実装してみようということで、やってみました。 Amplifyは？ 最近良く耳にしたり、記事を目にしたりすることが多いですが、個人的には、まだまだ怖いので、使いたくない印象です。というのも、勝手に作成されるIAMに、ルートのスーパーユーザーの権限を与えたり、見えないところで勝手に色々設定をされるので、ちょっと嫌だなーという印象を受けたので、まだ実サービスでは、使うのはやめて
【Cognito】Vue.jsとCognitoを用いたログイン機能を実装する - BFT名古屋 TECH BLOG
初めに こんにちは、株式会社BFT名古屋支店新人エンジニアのないとうです。 今回はAmazon CognitoとVue.jsを用いてログイン機能をAmazon Lightsail上で実装する方法について紹介したいと思います。 ログイン機能の概要としては、以下の画像のようになっておりユーザーネーム（メールアドレス）とパスワードを入力することで認証を行い認証が完了するとほかの画面に遷移するようになっています。 前提条件 ・Cognitoユーザープールで有効化されたユーザーが存在する （ユーザーの作成と認証についてはこちら→【AWS】【Cognito】アカウントステータスがFORCE_CHANGE_PASSWORDになる問題を解決する - BFT名古屋 TECH BLOG) ・Node.jsをインストールしたLightsailのインスタンスを作成済み 実装環境 ・Node.js : 12.22.
2020年後半版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips - Qiita
2020年後半版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTipsJavaScriptTypeScriptVue.jsフロントエンドvue-cli はじめに 最近iCAREさんの所でVue.jsを一緒にやらせていただいているのですが、フロントの技術スタックがGraphQL + Vue.js + TypeScriptで開発しており、そこでのVue.jsの開発体験がかなり良く、iCareさんの詳細なノウハウを公開しても良いと言っていただけたので、言語化し、整理して、共有出来たらと思います. ※ いつも通り記事の内容に意見がありましたら直接編集リクエストをください 前置き 今回のサンプルは@vue/cliを利用し、プリセットはTypeScriptだけいれときました. versionは2020年7月16日
Vueの秘密のパフォーマンステク9選紹介 - Qiita
VueConf USでのさまざまな発表 今年の3月に VueConf US が開催されました。最近になってビデオが公開されて初めて知ったこともあるので本記事ではその紹介をします。 いろいろ面白いトピックがあるのですが、特にVueコアチームのGuillaume Chauさんによるパフォーマンス改善テクニックはまじかーという感じだったのでここにまとめたいと思います。 "9 Performance Secrets Revealed with Guillaume Chau" プレゼン動画: http://www.youtube.com/watch?v=5B66qer8cZo スライド: https://slides.com/akryum/vueconfus-2019#/ デモサイト: https://vue-9-perf-secrets.netlify.com ソース: https://githu
Vue開発者のためのVue.jsベストプラクティス集15選 - Qiita
はじめに みなさん、Vue使ってますかー！・・・・・・・（へんじがない。ただのしかばねのようだ。） 私は毎日使ってます。が、正しい使い方というのがいまいちわかっていません。ということで、ネットで拾ってきた情報を元にVueで開発する上でのベストプラクティス集15選をまとめてみました。 「ふんふんそうだよね〜」といったものから「えー！？そうなのー！？」となるものまで集めています。皆さんの開発の手助けになる情報が入っていると幸いです。 また、間違っている内容やさらに良い方法等あれば、コメント欄にて（優しく）ご指摘いただけるととても嬉しいです。 1. v-for内では必ず:keyを使う v-forディレクティブでkey属性を使うと、データを操作するのに役立ちます。さらに、Vueがコンポーネントの状態を追跡し、それぞれのエレメントに対し継続的に参照ができるようになります。 特に、アニメーションやVu
最新のVue3.0でウェブ開発はどう変わるか？ - Qiita
こちらの記事は、2019年1月に公開された『 What Does Vue 3.0 Mean for Web Development? 』の和訳になります。 本投稿は転載であり、本記事はこちらになります。 補足: Vue3.0は2019年内もしくは2020年の初めにリリースされると予測されています。 2019年9月時点ではまだv2.6.10であること、ご留意ください。 はじめに 昨年11月、VueのクリエーターであるEvan Youは、Javascriptフレームワークの最新版となるVue 3.0の主要アップデートを紹介しました。 今回のアップデートによってVueはより効率的で、モジュール化され、さらに使いやすくなりました。 これらの変更と、Vue 3.0のリリースによる影響について説明します。 Vueの現在の状況は？ 彼らによると、Vueは「ユーザーアプリケーションを構築するためのプログレ
Vue.jsベースのオープンソースな管理画面テンプレート・「Vuestic Admin」
Vuestic AdminはVue.jsベースのオープンソースな管理画面テンプレートです。40以上のUIコンポーネントも同梱されています。 コンポーネントを含むレイアウトは完全なレスポンシブ対応となっています。管理画面系のコンテンツによく必要とされるコンポーネントは概ね揃えられているので、1から作るよりはかなり工数を減らせそうです。 細かい部分のサポートの充実 更にVuestic AdminはJSONファイルによる他言語化対応、MEDIUMライクなテキストエディターの搭載など、ユーザーフレンドリーな設計となっています。 細かい部分もサポートしてくれているのは嬉しいですね。これだけ揃っても完全にOSSなのは貴重かもです。 ライセンスはMITとの事です。 Vuestic AdminOn Github
Vue.js × Atomic Design - コンポーネント分割の指針 / Vue.js and Atomic Design - Guideline for components division
Vue.js 講演用資料です。 # 概要 コンポーネントをどのような粒度で分割し、どのように実装するべきかというのは難しいテーマです。 一概に正解があるとも言い切れないテーマですが、この指針を疎かにすることはチームを混乱に陥れることと同義です。 それが SPA 未経験のチームであればなおさらです。 直近のプロジェクトはまさにそんなプロジェクトでした。 本セッションではアトミックデザインのエッセンスを用いてコンポーネント分割の指針を示し、 またコンポーネント実装時に注意すべき事柄についてお話します # URL HomePage: https://nrslib.com Twitter: https://twitter.com/nrslib
ReactとVueを改善したSvelteというライブラリーについて - Qiita
海外のフロントエンド界隈で話題になっているSvelte 最近海外のフロントエンド界隈でSvelteが少し話題になっています。 この記事では、なんでSvelteが話題になってるのか、そしてReactやVueの代わりに、Svelteを使うメリットについて私が感じたことを共有していけたらと思います。 My talk from @YGLF_IL, 'Rethinking Reactivity', went online yesterday — https://t.co/eoGiBBAkKI. You probably don't have time to watch a 35 minute video though, so I'm going to pull out a few key slides into a quick tweet thread: — Rich Harris (@Rich_H
Vue.js＋Vuex＋TypeScriptのWebフロントエンド開発現場を前向きに改善した話 - ZOZO TECH BLOG
こんにちは。Webフロントエンドエンジニアの松井菜穂子です。 ZOZOテクノロジーズに入社して一年ほど経ちます。 あるサービスの立ち上げから運用まで、Webフロントエンドのチームリーダー・開発メンバーとして関わってきました。 当記事では、当社のWebフロントエンド開発現場にあった問題と、それぞれの課題に対して堅実に積み重ねた技術的な改善方法についてご紹介します。 はじめに モダンな技術でも負債は生まれる 負債を何故改善するのか 要因 その1: Vueコンポーネントを綺麗に分割する テンプレート コンポーネントクラス 使用例 解決策 テンプレート コンポーネントクラス 使用例テンプレート 使用例コンポーネントクラス コンポーネントカタログで汎用化を促す コード テンプレート（atoms.vue） コンポーネントクラス（atoms.vue） サンプル その2: Vuexをシンプルにする Sta
TypeScriptではじめるVueコンポーネント（vue-class-component） - Qiita
こんな人向け Vue.jsを使っているうちに以下のような考えになった人 TypeScriptでコンポーネントを書きたい .vueファイルに抵抗がある（フォーマッタ、補完がそのままじゃ効かないし、色々設定するのは疲れる） scoped cssはなくても大丈夫 前提知識 Vue.js、TypeScriptがなんとなくわかる やること コンポーネントをTypeScriptで書く。 （ついでに）テンプレート部分はhtmlファイルに分ける。 使うもの vue vue-class-component vue-property-decorator webpack vue-class-componentってなに？ TypeScript（.tsファイル）でコンポーネントが書けるようになる。 Componentデコレータをつけて、Vueを継承したクラスとして書く。 例えば、空のコンポーネントはこう。
Vuejsのちょっと便利なコンポーネント機能 - Qiita
はじめに vuejsはとっつきやすく完成度の高いJSフレームワークだと思っていますし、日本語のドキュメントも充実しています、実際に下記の機能も全て公式ドキュメントに記載されている内容です。 しかしながら、実際にやりたいことと機能名の間に乖離があったりして、いざ使用する時に意外に実装方法などを見つけにくい場合も当然ながら存在するため、自分用に Vuejs のちょっと便利なコンポーネントの機能をメモっておきます。 お品書き 共通した親要素を使いまわしたい（スロット配信） パラメーターによって使用するコンポーネントを変えたい（動的コンポーネント） 複数のコンポーネントで、同じ処理を使いまわしたい（ミックスイン） 出力するタグを動的に指定したい 共通した親要素を使いまわしたい いわゆるラッパーコンポーネント、例えば10個のコンポーネントを作る必要があるとして、その全てが共通したヘッダやフッタを持っ
2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips - Qiita
2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTipsアーキテクチャVue.jsElmReactAngular2 はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 もちろん、Vue.jsのコンポーネントシステムをフル活用し、Vuexを入れていないプロジェクトの経験もあります。 現在は構築したシステムを保守・運用しています。 また、勉強の為にReact、 Angular、 最近はElm等にも少し触れています。 その際に得られたノウハウ、Vue.jsが他のライバルフレームワークと比べた際に現時点で本当に勝っている利点やノウハウを言語化し、共有
Vue.js 2.6がリリースされた - Qiita
2019/02/05にVue.js 2.6 "Macross"がリリースされました。 そのうちもっと適切な日本語訳が出ると思いますが、まだ無いので紹介してみます。 以下はVueの作者Evan Youによる記事、Vue 2.6 releasedの日本語訳です。 Vue 2.6 released Vueは昨日、5歳の誕生日(Vueniversary)を迎えました。 そして本日、素晴らしいことにVue 2.6 "Macross"の発表を行うことができました。 この一年、我々は新しいCLIと3.0のプロトタイピングに多大な時間を費やしました。 その結果、Vue2.xはしばらくメジャーアップデートを行えませんでした。 しかし今こそ、その時です。 このリリースには、以下に解説する多数の大幅な改善、内部構造の変更、そして新機能が含まれています。 詳細についてはGitHubのリリースノートも参照してくださ
Vue.jsとAWSでつくる、シングルページの家計簿アプリ - Qiita
概要 作ったもの 最近お金が減るのが早くなった気がしたので、家計簿をつけようと思い立ちました。アプリをダウンロードしてきてもよいのですが、せっかくなので自分で作ることにしました。 タブレット、スマホ、パソコンのどれでも見れるようレスポンシブ対応を行ったのですが、タブレット(iPad)からみると以下の画像のようなものになっています。 チャート画面 記入画面 取引一覧画面 構成 静的ファイルはAWSのS3にホスティングし、お金のやり取りに関する情報はRDSに貯め、情報の追加・削除・修正にはLambdaとAPI Gatewayを用いて作ったAPIを通して行います。LambdaのコードはPythonで書いています。 簡単な図にすると、以下の画像のようになります。 共通部分 フロントエンド フロントはVue.jsを使って実装します。以下の画像の赤枠で囲った部分に表示するコンポーネントを切り替えます（
Webアプリ無料運営のススメ：FirebaseとNuxt(Vue)なら最強！ - Qiita
まだサーバーで消耗してるの？Firebase（サーバーレス）とNuxt.js（Vue系）ならWebアプリ運営は最強でしょ！？ この記事は、 サーバー費用をなるべくかけたくないけどショボいのはNO Firebaseの活用法をあまり理解していない Nuxt/Vueを使ってアプリ作ってみたい（Next/Reactと悩んでたり） アプリ構想はあるけどアイデアの落とし込みスピードが遅くて毎回挫折する という人向けに、「こんな感じで構築すれば効率良く開発できそうよ」というのを、勉強になった記事や技術的トピック・躓いた点なども合わせて紹介させていただきます。初心者向け＆技術トピック気になる方向けです！ 今回作ったアプリ「Moji → Pic」 Moji → Picは、文字だけだとなかなか目につく投稿ができないなぁ…とお困りの時にインパクトある画像が即座に出来るアプリ。目立ったツイートで友達に差をつけろ！
2018年Vue.jsとVuexを使ってる人には必ず知っていてほしいドキュメントに書かれていないコンポーネントやストア、メンテナンスの際に役立つTips - Qiita
2018年Vue.jsとVuexを使ってる人には必ず知っていてほしいドキュメントに書かれていないコンポーネントやストア、メンテナンスの際に役立つTipsTypeScriptes6DesignPatternsVue.jsVuex はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 現在は構築したシステムを保守・運用しており、その際に得られたノウハウを言語化し、共有出来たらと思います。 ※ 記事の内容に意見がありましたら直接編集リクエストをください。 ※ パフォーマンスの話はしません。 ゴール 役立つTipsを身につけコード品質を向上させる コンポーネントのバグを減らせるTips ほとんどのバグは変数から来ます。 もし全ての値が定数なら状態から
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue.js & Nuxt.js から React & Next.js へ移行した理由 | fwywd（フュード）powered by キカガク
VeeValidate を使って、vue.jsで簡単にバリデートしてみた - Qiita
