Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
RailsにJavaScriptのトレンドを取り入れる
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Kyuma Morita
January 19, 2019
Programming
0
82
RailsにJavaScriptのトレンドを取り入れる
シェアスペース(空き家、空き山、空き畑)サービス「Vacant」の開発で利用しているRuby on RailsとVue.jsの開発についてまとめました。
Kyuma Morita
January 19, 2019
Tweet
Share
More Decks by Kyuma Morita
See All by Kyuma Morita
高知100人カイギの発表スライド
kyuma
0
300
Other Decks in Programming
See All in Programming
例外処理とどう使い分ける?Result型を使ったエラー設計 #burikaigi
kajitack
16
6.1k
生成AIを使ったコードレビューで定性的に品質カバー
chiilog
1
270
副作用をどこに置くか問題:オブジェクト指向で整理する設計判断ツリー
koxya
1
610
FOSDEM 2026: STUNMESH-go: Building P2P WireGuard Mesh Without Self-Hosted Infrastructure
tjjh89017
0
170
AIフル活用時代だからこそ学んでおきたい働き方の心得
shinoyu
0
140
CSC307 Lecture 07
javiergs
PRO
1
550
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
manfredsteyer
PRO
0
130
カスタマーサクセス業務を変革したヘルススコアの実現と学び
_hummer0724
0
720
2026年 エンジニアリング自己学習法
yumechi
0
140
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
600
Package Management Learnings from Homebrew
mikemcquaid
0
230
高速開発のためのコード整理術
sutetotanuki
1
400
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
16k
Being A Developer After 40
akosma
91
590k
The Spectacular Lies of Maps
axbom
PRO
1
520
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.8k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
231
22k
Amusing Abliteration
ianozsvald
0
100
The agentic SEO stack - context over prompts
schlessera
0
640
HU Berlin: Industrial-Strength Natural Language Processing with spaCy and Prodigy
inesmontani
PRO
0
220
Measuring & Analyzing Core Web Vitals
bluesmoon
9
750
Build your cross-platform service in a week with App Engine
jlugia
234
18k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
55k
Transcript
RailsにJavaScriptのトレンドを 取り入れる SHIFTPLUSインターン 高知大学 森田久真
少し自己紹介・・・ • 北海道十勝生まれ (1997.02) • 高知大学入学 (2015.04) • 1年間カナダへ(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構築
None
ズバリ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での開発経験 • コンポーネント(部品)設計 • ルーティング諸々 • コードの量を最小限に
今後の展望 • 2月中には機能面を充実させる • ユーザーを募ってテスト運行 • 3月の高知ビジコンに出してみる • モバイルアプリにも・・・?
ご静聴ありがとうございました!