SlideShare a Scribd company logo
フロントエンド初心者がVue.jsを学んでみた
kaliafluorid (カリア)
@UV Study #52 (2024年08月20日)
Copyright ©Unique Vision Company, All Rights Reserved.
自己紹介
名前:kaliafluorido(カリア)
年齢:31歳
所属:株式会社ユニークビジョン (2024/03~)
主要言語・フレームワーク: Vue.js, Rust, Ruby on Rails
前職:車載用運転支援システムの開発
趣味:野球観戦、競技プログラミング
Rustを主要言語として使っているところに惹かれて、今年春にユニークビジョンに転
職
Copyright ©Unique Vision Company, All Rights Reserved.
• Web開発は全くの未経験
• なんなら「 Vue」という単語も知らなかったです
• この半年間、色々と勉強してきた中でこれ分かりやす
かったなという教材を紹介します
• 自分と同じような Vue初心者が勉強するときの参考に
なると幸いです
背景
Copyright ©Unique Vision Company, All Rights Reserved.
一言
公式ドキュメントなので信頼できます
Vue.jsの公式ドキュメントは初心者にも取っ付き安いと思います
チュートリアル
https://ja.vuejs.org/tutorial/#step-1
ガイド
https://ja.vuejs.org/guide/introduction.html
実装サンプル
https://ja.vuejs.org/examples/#hello-world
① 公式ドキュメント
Copyright ©Unique Vision Company, All Rights Reserved.
一言
Composition APIを中心にVue 3が解説さ
れています
全般的に丁寧に解説されていて分かりや
すかったです
出版社:技術評論社 (2022/9/26)
著者:齊藤新三
https://amzn.to/3JQi2kE
② Vue 3 フロントエンド開発の教科書
Copyright ©Unique Vision Company, All Rights Reserved.
一言
コンポーネント周りやOptions APIを中心に
解説されています
Options APIってどんなスタイルなのか気
になって購入しました
出版社:SBクリエイティブ (2022/3/18)
著者:山田祥寛
https://amzn.to/3Qx9WBh
③ これからはじめる Vue.js 3実践入門
Copyright ©Unique Vision Company, All Rights Reserved.
一言
Vueの基本的知識が網羅的に解
説されています
実際の画面を流れを見ながらの
解説は書籍より頭に入ってきやす
い気がします
youtube
https://www.youtube.com/watch
?v=Oyr0sr6l3SQ
続き (Udemy)
https://www.udemy.com/course
/vue-js-complete-guide/
④ 超Vue.js 完全ガイド 2024
Copyright ©Unique Vision Company, All Rights Reserved.
一言
フロントエンド:Vue3、バックエンド
:Laravelという構成でCRMを実際
に作ってみるという講座です
より実践的な使い方が学べます
Udemy
https://www.udemy.com/course/la
ravel-vue3-crm/
⑤ 【Laravel】【Vue.js3】で【CRM(顧客管理システム )】をつくってみよう
Copyright ©Unique Vision Company, All Rights Reserved.
• この半年間で私が勉強して分かりやすかった
なというものを紹介しました
• まだまだ道半ばですが、ど素人から初心者くら
いにはなれた気がします
• これからも引き続き日々精進していければと
思います
• 懇親会では是非、皆さんの色々な経験を聞か
せてください
まとめ
Copyright ©Unique Vision Company, All Rights Reserved.
ありがとうございました。

More Related Content

Recently uploaded (8)

20250327_IoTLT_vol121_______________.pdf
20250327_IoTLT_vol121_______________.pdf20250327_IoTLT_vol121_______________.pdf
20250327_IoTLT_vol121_______________.pdf
Ayachika Kitazaki
 
【STech I USA】2025.3.21 MWC 2025フィードバック ~通信が作る未来のトレンド~(2025.3.21)
【STech I USA】2025.3.21 MWC 2025フィードバック ~通信が作る未来のトレンド~(2025.3.21)【STech I USA】2025.3.21 MWC 2025フィードバック ~通信が作る未来のトレンド~(2025.3.21)
【STech I USA】2025.3.21 MWC 2025フィードバック ~通信が作る未来のトレンド~(2025.3.21)
Sojitz Tech-Innovation USA
 
論理レプリケーションのアーキテクチャ (第52回 PostgreSQLアンカンファレンス@オンライン 発表資料)
論理レプリケーションのアーキテクチャ (第52回 PostgreSQLアンカンファレンス@オンライン 発表資料)論理レプリケーションのアーキテクチャ (第52回 PostgreSQLアンカンファレンス@オンライン 発表資料)
論理レプリケーションのアーキテクチャ (第52回 PostgreSQLアンカンファレンス@オンライン 発表資料)
NTT DATA Technology & Innovation
 
ダイアグラム思考_Yumemi.grow_読書シェア会2025_3_26.pptx
ダイアグラム思考_Yumemi.grow_読書シェア会2025_3_26.pptxダイアグラム思考_Yumemi.grow_読書シェア会2025_3_26.pptx
ダイアグラム思考_Yumemi.grow_読書シェア会2025_3_26.pptx
ssuserfcafd1
 
学会発表資料(2025/3/3):LLMを利用したSNSの投稿内容のインタラクティブマップ表示
学会発表資料(2025/3/3):LLMを利用したSNSの投稿内容のインタラクティブマップ表示学会発表資料(2025/3/3):LLMを利用したSNSの投稿内容のインタラクティブマップ表示
学会発表資料(2025/3/3):LLMを利用したSNSの投稿内容のインタラクティブマップ表示
Toyo University
 
LoRaWAN 5個マルチプッシュボタン – PB05-L  日本語ユーザーマニュアル
LoRaWAN 5個マルチプッシュボタン – PB05-L  日本語ユーザーマニュアルLoRaWAN 5個マルチプッシュボタン – PB05-L  日本語ユーザーマニュアル
LoRaWAN 5個マルチプッシュボタン – PB05-L  日本語ユーザーマニュアル
CRI Japan, Inc.
 
JaSST2025-D5-1開発者手動の自動テスト導入によるバグ早期発見.pdf
JaSST2025-D5-1開発者手動の自動テスト導入によるバグ早期発見.pdfJaSST2025-D5-1開発者手動の自動テスト導入によるバグ早期発見.pdf
JaSST2025-D5-1開発者手動の自動テスト導入によるバグ早期発見.pdf
MaiKaneko4
 
生成AIとビジネス戦略 正しく恐れ正しく活用するために 東海国立大学機構技術発表会 & 岐阜地域産学官連携交流会 2025 講演資料
生成AIとビジネス戦略 正しく恐れ正しく活用するために 東海国立大学機構技術発表会 & 岐阜地域産学官連携交流会 2025 講演資料生成AIとビジネス戦略 正しく恐れ正しく活用するために 東海国立大学機構技術発表会 & 岐阜地域産学官連携交流会 2025 講演資料
生成AIとビジネス戦略 正しく恐れ正しく活用するために 東海国立大学機構技術発表会 & 岐阜地域産学官連携交流会 2025 講演資料
suzukiyu1
 
20250327_IoTLT_vol121_______________.pdf
20250327_IoTLT_vol121_______________.pdf20250327_IoTLT_vol121_______________.pdf
20250327_IoTLT_vol121_______________.pdf
Ayachika Kitazaki
 
【STech I USA】2025.3.21 MWC 2025フィードバック ~通信が作る未来のトレンド~(2025.3.21)
【STech I USA】2025.3.21 MWC 2025フィードバック ~通信が作る未来のトレンド~(2025.3.21)【STech I USA】2025.3.21 MWC 2025フィードバック ~通信が作る未来のトレンド~(2025.3.21)
【STech I USA】2025.3.21 MWC 2025フィードバック ~通信が作る未来のトレンド~(2025.3.21)
Sojitz Tech-Innovation USA
 
論理レプリケーションのアーキテクチャ (第52回 PostgreSQLアンカンファレンス@オンライン 発表資料)
論理レプリケーションのアーキテクチャ (第52回 PostgreSQLアンカンファレンス@オンライン 発表資料)論理レプリケーションのアーキテクチャ (第52回 PostgreSQLアンカンファレンス@オンライン 発表資料)
論理レプリケーションのアーキテクチャ (第52回 PostgreSQLアンカンファレンス@オンライン 発表資料)
NTT DATA Technology & Innovation
 
ダイアグラム思考_Yumemi.grow_読書シェア会2025_3_26.pptx
ダイアグラム思考_Yumemi.grow_読書シェア会2025_3_26.pptxダイアグラム思考_Yumemi.grow_読書シェア会2025_3_26.pptx
ダイアグラム思考_Yumemi.grow_読書シェア会2025_3_26.pptx
ssuserfcafd1
 
学会発表資料(2025/3/3):LLMを利用したSNSの投稿内容のインタラクティブマップ表示
学会発表資料(2025/3/3):LLMを利用したSNSの投稿内容のインタラクティブマップ表示学会発表資料(2025/3/3):LLMを利用したSNSの投稿内容のインタラクティブマップ表示
学会発表資料(2025/3/3):LLMを利用したSNSの投稿内容のインタラクティブマップ表示
Toyo University
 
LoRaWAN 5個マルチプッシュボタン – PB05-L  日本語ユーザーマニュアル
LoRaWAN 5個マルチプッシュボタン – PB05-L  日本語ユーザーマニュアルLoRaWAN 5個マルチプッシュボタン – PB05-L  日本語ユーザーマニュアル
LoRaWAN 5個マルチプッシュボタン – PB05-L  日本語ユーザーマニュアル
CRI Japan, Inc.
 
JaSST2025-D5-1開発者手動の自動テスト導入によるバグ早期発見.pdf
JaSST2025-D5-1開発者手動の自動テスト導入によるバグ早期発見.pdfJaSST2025-D5-1開発者手動の自動テスト導入によるバグ早期発見.pdf
JaSST2025-D5-1開発者手動の自動テスト導入によるバグ早期発見.pdf
MaiKaneko4
 
生成AIとビジネス戦略 正しく恐れ正しく活用するために 東海国立大学機構技術発表会 & 岐阜地域産学官連携交流会 2025 講演資料
生成AIとビジネス戦略 正しく恐れ正しく活用するために 東海国立大学機構技術発表会 & 岐阜地域産学官連携交流会 2025 講演資料生成AIとビジネス戦略 正しく恐れ正しく活用するために 東海国立大学機構技術発表会 & 岐阜地域産学官連携交流会 2025 講演資料
生成AIとビジネス戦略 正しく恐れ正しく活用するために 東海国立大学機構技術発表会 & 岐阜地域産学官連携交流会 2025 講演資料
suzukiyu1
 

Featured (20)

How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
Skeleton Technologies
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
Rajiv Jayarajah, MAppComm, ACC
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
Christy Abraham Joy
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
Vit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
MindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
GetSmarter
 
ChatGPT webinar slides
ChatGPT webinar slidesChatGPT webinar slides
ChatGPT webinar slides
Alireza Esmikhani
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
ThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
marketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
Kurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
SpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Lily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
Vit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
MindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
RachelPearson36
 
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...
Applitools
 
12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work12 Ways to Increase Your Influence at Work
12 Ways to Increase Your Influence at Work
GetSmarter
 

フロントエンド初心者がVue.jsを学んでみた @UV Study : Vue.js LT会 (2024年8月21日)

  • 2. Copyright ©Unique Vision Company, All Rights Reserved. 自己紹介 名前:kaliafluorido(カリア) 年齢:31歳 所属:株式会社ユニークビジョン (2024/03~) 主要言語・フレームワーク: Vue.js, Rust, Ruby on Rails 前職:車載用運転支援システムの開発 趣味:野球観戦、競技プログラミング Rustを主要言語として使っているところに惹かれて、今年春にユニークビジョンに転 職
  • 3. Copyright ©Unique Vision Company, All Rights Reserved. • Web開発は全くの未経験 • なんなら「 Vue」という単語も知らなかったです • この半年間、色々と勉強してきた中でこれ分かりやす かったなという教材を紹介します • 自分と同じような Vue初心者が勉強するときの参考に なると幸いです 背景
  • 4. Copyright ©Unique Vision Company, All Rights Reserved. 一言 公式ドキュメントなので信頼できます Vue.jsの公式ドキュメントは初心者にも取っ付き安いと思います チュートリアル https://ja.vuejs.org/tutorial/#step-1 ガイド https://ja.vuejs.org/guide/introduction.html 実装サンプル https://ja.vuejs.org/examples/#hello-world ① 公式ドキュメント
  • 5. Copyright ©Unique Vision Company, All Rights Reserved. 一言 Composition APIを中心にVue 3が解説さ れています 全般的に丁寧に解説されていて分かりや すかったです 出版社:技術評論社 (2022/9/26) 著者:齊藤新三 https://amzn.to/3JQi2kE ② Vue 3 フロントエンド開発の教科書
  • 6. Copyright ©Unique Vision Company, All Rights Reserved. 一言 コンポーネント周りやOptions APIを中心に 解説されています Options APIってどんなスタイルなのか気 になって購入しました 出版社:SBクリエイティブ (2022/3/18) 著者:山田祥寛 https://amzn.to/3Qx9WBh ③ これからはじめる Vue.js 3実践入門
  • 7. Copyright ©Unique Vision Company, All Rights Reserved. 一言 Vueの基本的知識が網羅的に解 説されています 実際の画面を流れを見ながらの 解説は書籍より頭に入ってきやす い気がします youtube https://www.youtube.com/watch ?v=Oyr0sr6l3SQ 続き (Udemy) https://www.udemy.com/course /vue-js-complete-guide/ ④ 超Vue.js 完全ガイド 2024
  • 8. Copyright ©Unique Vision Company, All Rights Reserved. 一言 フロントエンド:Vue3、バックエンド :Laravelという構成でCRMを実際 に作ってみるという講座です より実践的な使い方が学べます Udemy https://www.udemy.com/course/la ravel-vue3-crm/ ⑤ 【Laravel】【Vue.js3】で【CRM(顧客管理システム )】をつくってみよう
  • 9. Copyright ©Unique Vision Company, All Rights Reserved. • この半年間で私が勉強して分かりやすかった なというものを紹介しました • まだまだ道半ばですが、ど素人から初心者くら いにはなれた気がします • これからも引き続き日々精進していければと 思います • 懇親会では是非、皆さんの色々な経験を聞か せてください まとめ
  • 10. Copyright ©Unique Vision Company, All Rights Reserved. ありがとうございました。