Vue.jsでフォームバリデーションを作ってみよう！/Let make form validation in vue.js!

▼資料概要
タイトルの勉強の導入資料
Vue.jsに関するざっくり説明

▼ 資料内リンク
# vue.jsの公式サイト
https://jp.vuejs.org/index.html

# ハンズオン資料（Qiita）
https://qiita.com/matsumana07384/items/a8f940f681ad42c39a82

▼勉強会の詳細
# サポーターズCoLab
https://supporterzcolab.com/event/856/

▼登壇者
# Twitter
https://twitter.com/mtmn07384

▼プレゼン資料デザインテンプレート
https://www.slidescarnival.com/

Transcript

1. Vue.jsで フォームバリデーションを 作ってみよう！ 2019.06.20@サポーターズCoLab ManamiMatsuura
2. Hello! まっつん/ManamiMatsuura 2 社会人3年目 フロントエンドエンジニア #HTML #CSS #jQuery #SASS #Nuxt.js #Vue.js #AtomicDesign #サービスデザイン 所属 #ZOZOテクノロジーズ #サポーターズCoLab #Dev Fest Women #PyConJP2019 #GeekWomenJapan
3. この勉強会について ▧ ゴール ◦ Vue.jsをもっと知りたいと思える状態になること ▧ 話すこと ◦ Vue.jsの概要 ◦ ハンズオンで使用するソースコードの説明 ▧ 話さないこと ◦ 各ファイルの役割や機能 ◦ VuexやVueCLIなどのツールの解説 3
4. 目次 4 • Vue.jsとは？ • Let’sハンズオン
5. 1. Vue.js とは？ かんたんに説明します 5
6. “ The Progressive JavaScript Framework 6 vue.js公式サイト （https://jp.vuejs.org/）
7. Vue.jsとは？ ▧ ユーザーインターフェースを構築するための JavaScriptのフレームワーク ▧ Evan You氏によって開発 ▧ 2014年2月にv1がリリース ◦ 2019年6月現在の安定バージョン：2.6.10 7
8. Vue.jsの特徴 ▧ 親しみやすい ◦ HTML、CSS、JavaScriptの基本記法で記述できる ▧ 融通が利く ◦ 他のライブラリや既存プロジェクトに統合しやすい ▧ 高性能 ◦ コンパクトなランタイム ◦ 仮想DOMを採用 8
9. Vue.jsのよさ ▧ 学習効率のよさ ◦ 構造がシンプル ◦ 日本語のドキュメントが豊富 ▧ 開発効率の改善が見込める ◦ コンポーネントによるコードの再利用 ◦ DOM操作ができる「v-」ディレクティブ ▧ 部分的に導入可能 9 And so on...
10. Vue.jsのはじめ方 ▧ Scriptで導入する方法 ▧ CLIをつかって導入する方法 ◦ VueCLI ▪ https://cli.vuejs.org/ 10 <script src="https://cdn.jsdelivr.net/npm/vue"> </script>
11. 2. Let'sハンズオン フォームのバリデーションを作ろう 11
12. 大まかな流れ ▧ 環境構築編 ◦ CLIを使ってVue.jsの開発環境を構築 ▧ 開発編 ◦ コンポーネントを作る ◦ コンポーネントからコンポーネントを使用する ◦ フォーム入力バインディングを作る ◦ バリデーションを設定する 12
13. ここからはQiitaの記事で進めていきます 13 https://qiita.com/matsumana07384/items/a8f940f681ad42c39a82
14. Thanks! Any questions? You can find me at: @matsumana07384（Github/Qitta） @mtmn07384（Twitter） 14
15. Credits Special thanks to all the people who made and released these awesome resources for free: ▧ Presentation template by SlidesCarnival ▧ Photographs by Unsplash ▧ Backgrounds by Pixeden 15