V が名前に入ってる

最近勉強していたり、使ってたりする技術に "V" が入ってることが多いこといに気づきました。

- Slidev
- Vue
- uv

の考え方や基本的な機能を説明します。

Transcript

1. V が名前に入ってる ナイトウ Press Space for next page 9/8/2024, 7:10:26 AM
2. このスライドはこちらで https://kosuke222naito.github.io/20240907-lt/
3. Table of contents 1. V が名前に入ってる 2. スライドはこちらで 3. 自己紹介 4. V が名前に入ってる技術 5. What is Slidev? 6. Vue コミュニティ 7. What is uv? (cargo for Python?) 8. まとめ おしながき
4. 旧 Twitter GitHub Zenn I'm ナイトウ Python で Web バックエンド Web フロントもやりたい Vue が好き since: 2021 (4年目) 筑波大卒 (非 CS 専攻) 柏 (東葛dev 運営) 自作キーボード
5. V
6. ue V
7. Slidev
8. uv
9. VS Code
10. Vite
11. Vercel
12. Svelte
13. Volta
14. Vagrant
15. Hyper-V
16. Vim
17. Java
18. JavaScript
19. nvm
20. V8
21. v0
22. Valibot
23. Laravel
24. Vlang
25. alkey V
26. Vue Slidev uv VS Code Vite Vercel Svelte Volta Vagrant Hyper-V Vim Java JavaScript nvm V8 v0 Valibot Laravel Vlang Valkey V
27. 今日話すのは Vue uv Slidev
28. Slidev
29. 📝 テキストベース - Markdown と HTML, CSS のいいとこどり 🧑‍💻 開発者フレンドリー - Web の知識がそのまま転用できる 🤹 インタラクティブ - Vue コンポーネントを埋め込み可能 🎥 録画機能 - 録画機能とカメラビューもある 📤 ポータブル - PDF、PPTX、PNG、または SPA としてエクスポート可能 🛠 ハッカブル - Web でできることはほぼ全てSlidevでも可能 Why Slidev? Slidev Presentation Slides for Developers
30. このスライドも Powered by Slidev
31. クリックアニメーション v-click v-mark Learn more <div v-click>v-click</div> <span v-mark.green="3" v-mark.circle.blue="4">v-mark</span>
32. Shiki Magic Move // step 1 const author = reactive({ name: "John Doe", books: [ "Vue 2 - Advanced Guide", "Vue 3 - Basic Guide", "Vue 4 - The Mystery", ], }); 1 2 3 4 5 6 7 8 9
33. Slidev Motions <div v-motion :initial="{ x: -80 }" :enter="{ x: 0 }" :click-3="{ x: 80 }" :leave="{ x: 1000 }" > Slidev </div> Learn more
34. Draggable Elements Double-click me!
35. Monaco Editor import { version } from "vue"; import { emptyArray } from "./external"; console.log(`vue ${version}`); console.log( emptyArray<number>(10).reduce( (fib) => [...fib, fib.at(-1)! + fib.at(-2)!], [1, 1], ), ); vue 3.5.0 [1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144]
36. Learn More Powered by Documentation · GitHub · Showcases
37. Vue
38. Vue コミュニティ できること 仲間のユーザーを助ける issue のトリアージを助ける コードの貢献(バグ修正、新機能) 経験を共有する(記事、ブログ) ドキュメントを翻訳する イベントで発表する、支援する あなたもすでにコミュニティの一員！？
39. 「コミュニティとはグラデーション」 【初学者にこそ伝えたい】Vue.js コミュニティ入門 より引用
40. ぼくがやってること v-tokyo 参加 Vue 教えてもらう(勉強会を開く) ドキュメント日本語訳の改善 Vue Fes Japan のボランティア 記事を書く Twitter, Discord でわちゃわちゃする Vue 書いてなくてもできることはある
41. コミュニティ 世界中の Vue カンファレンス Vue Germany @vue_js_… ·Follow Look at our vueFamily! Such an amazing community #vuejsdeconf2022 12:21 AM · Oct 19, 2022 24 Reply Co… Read more on X Vuejs Amsterdam @vuejsam… ·Follow We have kicked off with the man, the legend, Creator of Vue @youyuxi 5:42 PM · Feb 28, 2024 91 Reply Co… Read more on X Vue Fes Japan @vuefes·Follow 乾杯！ #vuefes 6:16 PM · Oct 28, 2023 36 Reply Co… Read more on X VueJS Athens @VueJSA… ·Follow It's happening now! The very first VueJS Athens Meetup has begun. 12:59 AM · Oct 11, 2019 18 Reply Co… Read more on X
42. Vue Fes Japan 2024 https://vuefes.jp/2024/ 2024.10.19 Sat @ Otemachi PLACE HALL & CONFERENCE
43. uv
44. uv 以下を置き換えるツール pip pip-tools pipx poetry pyenv virtualenv etc… Rust 製 Python 用パッケージ & プロジェクトマネージャー
45. Python やるならまずは uv ？ Rust 製で高速 Python 自体のインストール & バージョン管理 Python パッケージ管理 Python スクリプトの実行 プロジェクト管理 ツール管理 慣れ親しんだ pip インターフェース uv 自体のアップデートなど各種ユーティリティ one-stop shop tool for Python
46. これまでの Python パッケージツール どのツールもいいところと課題があった pip: シンプル but 依存関係管理が困難 poetry: 依存関係 & プロジェクト管理 but 速くない 併用するとコンフリクトしたり 互換性なかったり 依存関係管理に requirements.txt が使われていたことも バージョンの固定( .lock )ができない 手動で管理 複数環境( dev , staging , prod )の管理が難しい 乱世、混沌、錯綜、、、
47. pyproject.toml & .lock ファイル .lock ファイルでバージョン固定 ツールが pyproject.toml を読んで自動的に依存関係の解決 パッケージ管理とプロジェクト管理も 開発依存とプロダクション依存を分離して管理可能に モダンなパッケージ管理へ
48. Rye の登場 パッケージ & プロジェクト管理
49. 当時のuv Rust 製高速 Python パッケージインストーラー & リゾルバー
50. Rye & uv Rye と uv は目指している地点が近かった Rye 作者と astral 社の話し合いのもと、 astral 社で Rye を管理することに！ そして最終的には uv と Rye が一つになって、 完全体 "cargo for Python" の実現を目指す！ Rye も astral 社へ
51. まとめ Slidev で一緒に遊ぼう！ Vue Fes Japan 2024 ほんとに uv 流行ってほしい 名前に V 入ってること多くない？ Vue Fes Japan @vuefes·Follow 乾杯！ #vuefes 6:16 PM · Oct 28, 2023