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
Laravel + Vue.jsでサービスを作成&運営してみて
Search
dala00
December 21, 2018
Technology
560
1
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
Laravel + Vue.jsでサービスを作成&運営してみて
Laravel + Vue.jsでサービスを作成&運営してみて
dala00
December 21, 2018
More Decks by dala00
See All by dala00
Freelance Talk Session Kansai
dala00
0
57
A-FrameでWebVR
dala00
1
220
Nuxt.jsとExpressでWebサービスを作ってみた
dala00
0
1.8k
Laravelでサービスを作った時にやったこと
dala00
1
820
何でも書ける技術者向けコミュニティCrieit - 制作物天下一武道会
dala00
0
80
Other Decks in Technology
See All in Technology
作り直せるコードは迅速に 作り直せないDBは慎重に - AI時代のプロダクトエンジニアが「判断の不可逆性」で開発速度を変える話
kinosuke01
0
210
最新技術に積極チャレンジ!EKS共通基盤のこれまでとこれから
daitak
0
300
20260903 Tokyo Jazug Night #62 | Azure エンジニアよ、 その環境は本当にセキュアか?
olivia_0707
1
610
Genie Code ワークショップ 応用編 / Genie-Code-Workshop-advanced
databricksjapan
PRO
0
310
#jawssonic2026 あの時代が悪かった ~動かなかったSageMakerと共に迎えたイベント当日~
ktkn1129
0
130
Bet AI Day 2026丨バクラク Autopilot、業務システムの再設計
layerx
PRO
2
1.1k
AI活用の現在地、 ちゃんと見えてますか?/XPfest-2026
visional_engineering_and_design
0
140
V8コントリビュート超入門
riyaamemiya
0
130
書籍『生成AIの安全性入門』の入門
wataoka
0
210
【Oracle AI Spotlight ウェビナー】AWSか、Azureか、Google Cloudか。その議論にオラクルを含める意義。
oracle4engineer
PRO
2
220
PfEingのアプローチで働こう
rindrics
0
170
AI時代におけるプロダクト横断勉強会の設計
zozotech
PRO
0
150
Featured
See All Featured
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
2
1.6k
Joys of Absence: A Defence of Solitary Play
codingconduct
1
470
AI: The stuff that nobody shows you
jnunemaker
PRO
9
970
Writing Fast Ruby
sferik
630
63k
Game over? The fight for quality and originality in the time of robots
wayneb77
1
260
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
livdayseo
0
190
BBQ
matthewcrist
89
10k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
akademiya2063
PRO
1
340
VelocityConf: Rendering Performance Case Studies
addyosmani
331
25k
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
120
120k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1.3k
Rails Girls Zürich Keynote
gr2m
96
14k
Transcript
Laravel + Vue.jsでサービスを作 成&運営してみて
自己紹介 Twitter: dala00 個人で色々とサービスを作っている(今年は5つ+ α) PHPメインだけどNode.js、Elixir、Firebase等何でも使ってリリースしたりする 普段人と話さないので、思いがけず普段脳内で言っているようにヌクストと言ってしまうかもしれません。ごめん なさい
作ってみた構成例 • Laravel + Vue.js (JS) ← 今回はこれの話 • Elixir
+ Phoenix (JS) • Laravel + Vue.js (TS) • Nuxt.js + Express (TS) • Nuxt.js + Firebase (TS)
作ったもの CrieitというQiitaのようだけど ポエムでも何でも書ける記事投稿サービス • Laravel • Vue.js • Bootstrap Material
Design (jQuery)
なぜVue.jsを選択したのか • 何度か使ったことがあって使いやすいと思った(コンポーネントの配置が簡単なのが良い) • React + Reduxは個人開発では重いと感じていた • Laravelにデフォルトで入っているから結構世界的にも人気がある? と感じた(実際には一時期流行って 主にReactの方が人気がある?)
• ネットを見てもかなり流行っていたため( 2017年のQiitaのAdvent Calendarのカレンダー数が#4まで あった) • 当時はNuxt.jsを使ったことがなかったため、選択しなかった。今だったら Nuxt.jsを使うと思う。
実際に使った箇所
None
None
None
使ってみてどうだったか
インストール後すぐ使えすぐ開発を進められる • Laravelに最初からpackage.jsonとサンプルコンポーネントが入っている • yarn run hotでホットリローディング • とにかくなんの準備もなくすぐ簡単に開発開始できて良い
Laravel Mixが楽 • 何も設定しなくても動くので簡単 • mix.webpackConfigでWebpackの設定も拡張できる • tsにすればTypeScriptを使える • mix.version()でバージョニング
使ってみてどうだったか • インストール後すぐ使えるしすぐ開発を進められて良い • Laravel Mixで設定も簡単 ◦ いちいちWebpackの設定を一からやる必要がない ◦ バージョニング
◦ TypeScriptに変更 • サーバーサイドレンダリングが不要なアプリケーションであればこれで十分
• サーバーサイドレンダリングができない ◦ JavaScriptのMarkdownエディタとセットの Viewerを使っているので本当は SSRしたい ▪ SSR用にPHP側でも同じ様なロジックを入れていて辛い。 JS側に統一したい ▪
Nuxt.jsに変えたいけど工数かかって辛そう。最初から Nuxt.jsにすべきだった • TypeScriptにすべきだった ◦ たくさんカンマ入れなきゃいけないのが辛い ◦ @Prop使いたい 使ってみて辛かったところ
普段の運用 • yarn run prodでリリースビルド • commitしちゃう • 本番で不具合があった時一瞬で戻せる(ビルド不要) •
本番でNode動かす必要がない 個人開発だったらこれで十分 これはNuxt.jsでなくVue.jsを使っている場合のみのメリット
まとめ • SSR不要ならLaravel + Vue.jsは良い選択肢 • SSR必要ならNuxt.jsを最初から使ったほうが良さそう • TypeScriptは最初から使っておいたほうが良さそう
宣伝 Advent Calendar企画をやっています。 (クリスマス&イブ空いてます) 技術関連連のことならポエムでも 何でもOKです。
ありがとうございました!