RailsにJavaScriptのトレンドを取り入れる

シェアスペース（空き家、空き山、空き畑）サービス「Vacant」の開発で利用しているRuby on RailsとVue.jsの開発についてまとめました。

Transcript

1. RailsにJavaScriptのトレンドを 取り入れる SHIFTPLUSインターン 高知大学 森田久真
2. 少し自己紹介・・・ • 北海道十勝生まれ (1997.02) • 高知大学入学 (2015.04) • １年間カナダへ（2017.04） • SHIFTPLUSでインターン(2018.06) • 高知ビジコンに出場予定(2019.03)
3. 目次 • Vue.jsを採用した理由 • RailsでVue.jsを使うと何が便利なのか • SHIFTPLUSでの開発経験で活かせたこと • 今後の展望とちょっと困っていること
4. Vue.jsを採用した理由
5. Vue.jsとは？ 1. View層にフォーカスしたJavascriptフレー ムワーク 2. Model, View, View Model（MVVM） 3. コンポーネントによるUI構築
7. ズバリVue.jsを採用した理由！ 1. 他のフレームワークと併用しやすい　　　　 （Ruby on Rails） 2. 学習しやすい　　　　　　　　　　　　　　 （Angularでの開発経験がある） 3. 張さんが注目していた
8. Ruby on RailsとVue.jsを併用すると 何が便利なのか
9. フロントエンド バックエンド 使用ツール • Vue.js • Vue-Bootstrap • Vue-Router (ルーティング) • Vuex (情報の受け渡し) • Axios (Ajax処理) コンポーネント化 ルーティング 使用ツール • Ruby on Rails • AWS APIとしてRailsを使用 Viewsはほとんど使わない
10. 1. Vueの単一ファイ ルコンポーネント 緑　テンプレート 赤　スクリプト 青　スタイルシート
11. 2. ディレクティブも なかなか豊富 • v-for • v-if • v-on • v-class • v-attr
12. 3. コンポーネント化 ❖ assets ❖ controllers ❖ javascripts ➢ components
13. SHIFTPLUSでのインターン経験で活き ていること
14. 1. Githubを通したコミュニケーション • 作業単位でコミットを刻む • プルリクエスト • IssueやProjectでタスク管理
15. ページや機能を作り上げる手順 • 初めからデザインにこだわらない • まず機能を作り込む • 無駄なコードを残さない ◦ console.log(); ◦ 変数　関数
16. Angularでの開発経験 • コンポーネント（部品）設計 • ルーティング諸々 • コードの量を最小限に
17. 今後の展望 • ２月中には機能面を充実させる • ユーザーを募ってテスト運行 • ３月の高知ビジコンに出してみる • モバイルアプリにも・・・？
18. ご静聴ありがとうございました！