$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Laravel + Vue.jsでサービスを作成&運営してみて
Search
dala00
December 21, 2018
Technology
1
550
Laravel + Vue.jsでサービスを作成&運営してみて
Laravel + Vue.jsでサービスを作成&運営してみて
dala00
December 21, 2018
Tweet
Share
More Decks by dala00
See All by dala00
Freelance Talk Session Kansai
dala00
0
51
A-FrameでWebVR
dala00
1
200
Nuxt.jsとExpressでWebサービスを作ってみた
dala00
0
1.8k
Laravelでサービスを作った時にやったこと
dala00
1
810
何でも書ける技術者向けコミュニティCrieit - 制作物天下一武道会
dala00
0
68
Other Decks in Technology
See All in Technology
Bedrock AgentCore Evaluationsで学ぶLLM as a judge入門
shichijoyuhi
2
240
AgentCoreとStrandsで社内d払いナレッジボットを作った話
motojimayu
1
900
なぜ あなたはそんなに re:Invent に行くのか?
miu_crescent
PRO
0
200
さくらのクラウド開発ふりかえり2025
kazeburo
2
1.1k
2025年のデザインシステムとAI 活用を振り返る
leveragestech
0
190
SQLだけでマイグレーションしたい!
makki_d
0
1.2k
普段使ってるClaude Skillsの紹介(by Notebooklm)
zerebom
8
2.1k
AI駆動開発の実践とその未来
eltociear
2
490
Bedrock AgentCore Memoryの新機能 (Episode) を試してみた / try Bedrock AgentCore Memory Episodic functionarity
hoshi7_n
2
1.8k
投資戦略を量産せよ 2 - マケデコセミナー(2025/12/26)
gamella
0
310
AWSインフルエンサーへの道 / load of AWS Influencer
whisaiyo
0
220
[Neurogica] 採用ポジション/ Recruitment Position
neurogica
1
120
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
61
9.7k
How GitHub (no longer) Works
holman
316
140k
Applied NLP in the Age of Generative AI
inesmontani
PRO
3
2k
Designing for Timeless Needs
cassininazir
0
93
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.4k
BBQ
matthewcrist
89
9.9k
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
310
Primal Persuasion: How to Engage the Brain for Learning That Lasts
tmiket
0
190
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
120
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
750
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
400
Producing Creativity
orderedlist
PRO
348
40k
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です。
ありがとうございました!