Nuxt.jsで多言語化デビューしよう！/ Let's make internationalization with nuxt.js

▼資料概要
Nuxt.js、vue-i18nのざっくり説明を記載
▼ 資料内リンク
# vue-i18nのパフォーマンス最適化
https://link.medium.com/Mp2S9jiq9U
# ハンズオン資料（Qiita）
https://qiita.com/matsumana07384/items/4b9731d46c3698b464d8

▼勉強会の詳細
# サポーターズCoLab
https://supporterzcolab.com/event/776/
▼登壇者
# Twiiter
https://twitter.com/mtmn07384

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

Transcript

1. Nuxt.jsで多言語化 デビューしよう！ 2019.03.25@サポーターズCoLab ManamiMatsuura
2. Hello! まっつん/ManamiMatsuura 2 社会人2年目 フロントエンドエンジニア #Nuxt.js #Vue.js #HTML #CSS #Pug #SASS 所属 #ZOZOテクノロジーズ #サポーターズCoLab #PyConJP2019 #GeekWomenJapan
3. この勉強会について ▧ 目的 ◦ ハンズオンを通して、なんとなくNuxt.jsが「よしな にやってくれている」便利さを感じること ▧ 話すこと ◦ 後述 ▧ 話さないこと ◦ Nuxt.jsの各ファイルの役割や機能 ◦ コードの詳細な内容 3
4. 目次 4 • Nuxt.jsとは？ • vue-i18nとは？ • Let’sハンズオン
5. 1. Nuxt.js とは？ かんたんに説明します 5
6. Nuxt.jsとは？ ▧ Vue.jsを使ったアプリケーションを作成するフ レームワーク ◦ 以下から作成するアプリケーションを選択可能 ▪ ユニバーサルアプリケーション ▪ 静的サイト ▪ シングルページアプリケーション（SPA） ▧ 余談 ◦ React.jsのフレームワークであるNext.jsからインス ピレーションを受けて作られたとのこと 6
7. “ Vue (発音は / v j u ː / 、 view と同様）は ユーザーインターフェイスを構築するための プログレッシブフレームワークです。 7 Vue.jsとは？ Vue.js公式サイトより （https://vuejs.org/v2/guide/index.html ）
8. Nuxt.jsの特徴 ▧ Vueファイルで記述可能（*.vue） ◦ Vueの記述が使える ▧ サーバーサイドレンダリング（=SSR） ◦ 補足：サーバーでHTMLを描画し、静的マークアッ プをクライアントに配信 ▧ 開発に集中できる ◦ Vue.jsで開発する上で必要な環境構築やルーティン グ処理などをよしなにやってくれる 8 And so on...
9. 2. vue-i18n とは？ かんたんに説明します 9
10. “ Ruby on Rails の i18n に インスパイアされて開発された Vue.js 向けの国際化プラグインです。 10 vue-i18nとは？ vue-i18nのパフォーマンス最適化 @kazu_ponより （https://link.medium.com/Mp2S9jiq9U）
11. vue-i18nの特徴 ▧ APIを使って簡単に言語切替が可能 ▧ 数字や日時などのローカライズをサポート ▧ コンポーネントファイルで管理できる ▧ 余談 ◦ i18nは「internationalization」のiとnの間の18文 字を省略して、i18nだそうです 11
12. 3. Let'sハンズオン とりあえずやってみましょう 12
13. ここからはQiitaの記事で進めていきます 13 https://qiita.com/matsumana07384/private/4b9731d4 6c3698b464d8
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