韓国語 2024/09/22（日）
シチュエーション: ViteとReactの最新バージョンについて話す
(バイトゥワ リアクトゥエ チェシン ボジョンエ テヘソ イヤギハダ)
ペルソナ Aさん: 新しいプロジェクトを始めようとしている若手フロントエンド開発者。最新技術に興味がある。
Bさん: 経験豊富なシニア開発者。ViteとReactの最新動向をよく把握している。
A: 선배님, Vite와 React 최신 버전에 대해 들어보셨나요?
(ソンベニム、バイトゥワ リアクトゥ チェシン ボジョネ テヘ トゥロボショッナヨ？)
先輩、ViteとReactの最新バージョンについて聞いたことありますか？
B: 물론이죠! Vite 4와 React 18이 최신 버전이에요. 엄청난 개선이 있었어요.
(ムルロンイジョ！ バイト ゥ サワ リアクトゥ シップパリ チェシン ボジョニエヨ。オムチョンナン ケソニ イッソッソヨ。)
もちろんです！Vite 4とReact 18が最新バージョンですよ。すごい改善がありました。
A: 와, 정말요? 어떤 점이 좋아졌나요?
(ワ、チョンマルヨ？ オットン チョミ チョアジョンナヨ？)
わあ、本当ですか？どんな点が良くなりましたか？
B: Vite는 빌드 속도가 더 빨라졌고, React는 동시성 기능을 도입했어요. 특히 Suspense가 대단해요!
(バイトゥヌン ビルドゥ ソクドガ ト パルラジョッコ、リアクトゥヌン ドンシソン キヌンウル ドイパケッソヨ。トゥキ サスペンスガ テダネヨ！)
Viteはビルド速度がさらに速くなり、Reactは同時性機能を導入しました。特にSuspenseがすごいです！
A: 오, Suspense요? 그게 뭐예요? (オ、サスペンスヨ？ クゲ ムォエヨ？)
おお、Suspenseですか？それは何ですか？
B: Suspense는 비동기 데이터 로딩을 더 쉽게 만들어줘요. 로딩 상태를 선언적으로 처리할 수 있죠.
(サスペンスヌン ビドンギ デイタ ロディングル ト シプゲ マンドゥロジュォヨ。ロディン サンテルル ソンオンジョグロ チョリハル ス イッチョ。)
Suspenseは非同期データローディングをより簡単にしてくれます。ローディング状態を宣言的に処理できるんです。
A: 와, 진짜 편리하겠어요! Vite는 어떤 장점이 있나요?
(ワ、チンチャ ピョンリハゲッソヨ！ バイトゥヌン オットン チャンジョミ インナヨ？)
わあ、本当に便利そうですね！Viteはどんな利点がありますか？
B: Vite는 개발 서버 시작이 거의 즉각적이에요. 핫 모듈 교체도 빠르고요. 프로젝트 설정도 간단해요.
(バイトゥヌン ケバル ソボ シジャギ コエ チュッカクジョギエヨ。ハッ モジュル キョチェド ッパルゴヨ。プロジェクトゥ ソルジョンド カンダネヨ。)
Viteは開発サーバーの起動がほぼ瞬時です。ホットモジュールリプレースメントも速いですし、プロジェクト設定も簡単です。
A: 대박! 새 프로젝트에 꼭 사용해 봐야겠어요. 어떻게 시작하면 좋을까요?
(テバク！ セ プロジェクトゥエ コク サヨンヘ ボァヤゲッソヨ。オットケ シジャカミョン チョウルッカヨ？)
すごい！新しいプロジェクトで絶対に使ってみたいです。どのように始めればいいでしょうか？
B: npm create vite@latest 명령어로 쉽게 시작할 수 있어요. React 템플릿도 선택할 수 있죠. 한번 해보세요!
(エンピーエム クリエイトゥ バイトゥ エットゥ レイトスト ミョンリョンオロ シプゲ シジャカル ス イッソヨ。リアクトゥ テムプルリットゥ ソンテカル ス イッチョ。ハンボン ヘボセヨ！)
npm create vite@latest コマンドで簡単に始められます。Reactテンプレートも選択できますよ。ぜひ試してみてください！
A: 네, 당장 해볼게요! 정말 기대돼요. 고마워요, 선배님!
(ネ、タンジャン ヘボルゲヨ！ チョンマル キデデヨ。コマウォヨ、ソンベニム！)
はい、今すぐやってみます！本当に楽しみです。ありがとうございます、先輩！
単語集 최신 버전 (チェシン ボジョン): 最新バージョン /
구 버전 (ク ボジョン): 旧バージョン
개선 (ケソン): 改善 /
퇴보 (テボ): 後退
빌드 속도 (ビルドゥ ソクド): ビルド速度 /
실행 속도 (シルヘン ソクド): 実行速度
동시성 (ドンシソン): 同時性 /
순차성 (スンチャソン): 順次性
비동기 (ビドンギ): 非同期 /
동기 (ドンギ): 同期
선언적 (ソンオンジョク): 宣言的 /
명령적 (ミョンリョンジョク): 命令的
핫 모듈 교체 (ハッ モジュル キョチェ): ホットモジュールリプレースメント /
전체 새로고침 (チョンチェ セロゴチム): 全体リフレッシュ
템플릿 (テムプルリット): テンプレート /
빈 프로젝트 (ビン プロジェクトゥ): 空のプロジェクト
文法の解説
- '-아/어 보다': 「～してみる」という試行を表す表現です。例えば、'사용해 봐야겠어요'（使ってみなければなりません）のように使います。
- '-ㄹ/을 수 있다': 「～することができる」という可能性や能力を表す表現です。'선택할 수 있죠'（選択できますよ）のように使用されています。
明日はこちらで学んでください。
・Reactの新機能Hooksについて詳しく議論する
・フロントエンドのパフォーマンス最適化テクニックを共有する
・JavaScriptビルドツールの比較と選択基準について話す