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

RailsにJavaScriptのトレンドを取り入れる SHIFTPLUSインターン高知大学森田久真

少し自己紹介・・・ • 北海道十勝生まれ (1997.02) • 高知大学入学 (2015.04) • １年間カナダへ（2017.04） •
SHIFTPLUSでインターン(2018.06) • 高知ビジコンに出場予定(2019.03)

目次 • Vue.jsを採用した理由 • RailsでVue.jsを使うと何が便利なのか • SHIFTPLUSでの開発経験で活かせたこと • 今後の展望とちょっと困っていること

Vue.jsを採用した理由

Vue.jsとは？ 1. View層にフォーカスしたJavascriptフレームワーク 2. Model, View, View Model（MVVM） 3.
コンポーネントによるUI構築

ズバリVue.jsを採用した理由！ 1. 他のフレームワークと併用しやすい　　　　（Ruby on Rails） 2. 学習しやすい　　　　　　　　　　　　　　（Angularでの開発経験がある） 3.
張さんが注目していた

Ruby on RailsとVue.jsを併用すると何が便利なのか

フロントエンドバックエンド使用ツール • Vue.js • Vue-Bootstrap • Vue-Router (ルーティング)
• Vuex (情報の受け渡し) • Axios (Ajax処理) コンポーネント化ルーティング使用ツール • Ruby on Rails • AWS APIとしてRailsを使用 Viewsはほとんど使わない

1. Vueの単一ファイルコンポーネント緑　テンプレート赤　スクリプト青　スタイルシート

2. ディレクティブもなかなか豊富 • v-for • v-if • v-on •
v-class • v-attr

3. コンポーネント化 ❖ assets ❖ controllers ❖ javascripts ➢ components

SHIFTPLUSでのインターン経験で活きていること

1. Githubを通したコミュニケーション • 作業単位でコミットを刻む • プルリクエスト • IssueやProjectでタスク管理

ページや機能を作り上げる手順 • 初めからデザインにこだわらない • まず機能を作り込む • 無駄なコードを残さない ◦ console.log(); ◦
変数　関数

Angularでの開発経験 • コンポーネント（部品）設計 • ルーティング諸々 • コードの量を最小限に

今後の展望 • ２月中には機能面を充実させる • ユーザーを募ってテスト運行 • ３月の高知ビジコンに出してみる • モバイルアプリにも・・・？

ご静聴ありがとうございました！

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

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

Kyuma Morita

More Decks by Kyuma Morita

Other Decks in Programming

Featured

Transcript