Nuxt.jsで多言語化デビューしよう！(2019-04-23 ver)/ Let's make internationalization with nuxt.js 2019-04-23

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

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

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

Transcript

1. Nuxt.jsで多言語化 デビューしよう！ 2019.04.23@サポーターズCoLab ManamiMatsuura
2. Hello! まっつん/ManamiMatsuura 2 社会人3年目 フロントエンドエンジニア #Nuxt.js #Vue.js #HTML #CSS #Pug #SASS #AtomicDesign #サービスデザイン 所属 #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を使ったアプリケーションを作成できる フレームワークの一種 ▧ 状態管理（Vuex）やルーター（Vue-Router） など開発に必要な機能が含まれている ◦ 余談 ▪ React.jsのフレームワークであるNext.jsからイ ンスピレーションを受けて作られたとのこと 6
7. Nuxt.jsの特徴 ▧ Vueファイルで記述可能（*.vue） ◦ Vueの記述が使える ▧ サーバーサイドレンダリングをサポート ◦ 簡単に環境構築ができる ▪ 補足：サーバーでHTMLを描画し、静的マーク アップをクライアントに配信 ▧ 開発モードにおけるホットリローディング ◦ 再読込をしなくても修正が反映 7 And so on...
8. “ Vue.jsとNust.jsって 何が違うんですか？ 8
9. 9 イメージ JavaScript
10. 2. vue-i18n とは？ かんたんに説明します 10
11. “ Ruby on Rails の i18n に インスパイアされて開発された Vue.js 向けの国際化プラグインです。 11 vue-i18nとは？ vue-i18nのパフォーマンス最適化 @kazu_ponより （https://link.medium.com/Mp2S9jiq9U）
12. vue-i18nの特徴 ▧ APIで簡単に言語切替の機能を実現 ▧ 数字や日時などのローカライズをサポート ▧ 単一コンポーネントでメッセージを管理 ◦ 余談 ▪ i18nは「internationalization」のiとnの間の18 文字を省略して、i18nだそうです 12
13. 3. Let'sハンズオン とりあえずやってみましょう 13
14. ここからはQiitaの記事で進めていきます 14 https://qiita.com/matsumana07384/items/4b9731d46c3698b464d8
15. Thanks! Any questions? You can find me at: @matsumana07384（Github/Qitta） @mtmn07384（Twitter） 15
16. 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 16