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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
dala00
December 21, 2018
Technology
1
560
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
52
A-FrameでWebVR
dala00
1
210
Nuxt.jsとExpressでWebサービスを作ってみた
dala00
0
1.8k
Laravelでサービスを作った時にやったこと
dala00
1
820
何でも書ける技術者向けコミュニティCrieit - 制作物天下一武道会
dala00
0
71
Other Decks in Technology
See All in Technology
品質を経営にどう語るか #jassttokyo / Communicating the Strategic Value of Quality to Executive Leadership
kyonmm
PRO
3
1.2k
「コントロールの三分法」で考える「コト」への向き合い方 / phperkaigi2026
blue_goheimochi
0
150
新規事業×QAの挑戦:不確実性を乗りこなす!フェーズごとに求められるQAの役割変革
hacomono
PRO
0
180
データマネジメント戦略Night - 4社のリアルを語る会
ktatsuya
1
230
AIエージェント×GitHubで実現するQAナレッジの資産化と業務活用 / QA Knowledge as Assets with AI Agents & GitHub
tknw_hitsuji
0
230
PostgreSQL 18のNOT ENFORCEDな制約とDEFERRABLEの関係
yahonda
0
120
A4)シラバスを超えて語る、テストマネジメント
moritamasami
0
130
CloudFrontのHost Header転送設定でパケットの中身はどう変わるのか?
nagisa53
1
180
スケールアップ企業でQA組織が機能し続けるための組織設計と仕組み〜ボトムアップとトップダウンを両輪としたアプローチ〜
tarappo
4
370
【AWS】CloudTrail LakeとCloudWatch Logs Insightsの使い分け方針
tsurunosd
0
120
_Architecture_Modernization_から学ぶ現状理解から設計への道のり.pdf
satohjohn
2
770
Copilot 宇宙へ 〜生成AIで「専門データの壁」を壊す方法〜
nakasho
0
190
Featured
See All Featured
So, you think you're a good person
axbom
PRO
2
2k
Technical Leadership for Architectural Decision Making
baasie
3
300
Product Roadmaps are Hard
iamctodd
PRO
55
12k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
490
Digital Ethics as a Driver of Design Innovation
axbom
PRO
1
230
Are puppies a ranking factor?
jonoalderson
1
3.2k
Leading Effective Engineering Teams in the AI Era
addyosmani
9
1.8k
Stop Working from a Prison Cell
hatefulcrawdad
274
21k
Sam Torres - BigQuery for SEOs
techseoconnect
PRO
0
220
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
120
ラッコキーワード サービス紹介資料
rakko
1
2.7M
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
1
3.5k
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です。
ありがとうございました!