メルペイの事例に学ぶ、SSRとJAMstackのメリット・デメリット
2020年1月15日、株式会社メルカリにて「Mercari x Merpay Frontend Tech Talk vol.4」が開催されました。フロントエンドの技術に興味があるエンジニアが集まり、各々の知見を共有します。プレゼンテーション「Pros and Cons of SSR and JAMStack」に登壇したのは、メルペイのSasaki Yutaka氏。JAMstackを使ったマイクロサービスの高速化と、そこから得られた知見について語りました。講演資料はこちら キャンペーンのマイクロサービスの高速化 _sskyu氏：では、「Pros and Cons of SSR and JAMstack」と題して発表させていただきます。 私はSasaki Yutakaと申します。メルペイには一昨年の9月1日に入社しまして、フロントエンドエンジニアをやっております。 今日話す内容ですが、去年の8
2019年版Vue.jsを使ってる人には必ず知っていてほしいVue.jsの武器とドキュメントに書かれていないコンポーネントやメンテナンスの際に役立つTips - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 私はVue.js with Vuexを使った業務で1画面30APIを叩く必要のある画面から、たったの数APIしか叩かないけれど、代わりにUIがとても機能的で複雑な画面まで設計し、構築しました。 もちろん、Vue.jsのコンポーネントシステムをフル活用し、Vuexを入れていないプロジェクトの経験もあります。 現在は構築したシステムを保守・運用しています。 また、勉強の為にReact、 Angular、 最近はElm等にも少し触れています。 その際に得られたノウハウ、Vue.jsが他のライバルフレームワークと比べた際に現時点で本当
TypeScript のサポート — Vue.js
ガイド 基本的な使い方 インストール はじめに Vue インスタンス テンプレート構文 算出プロパティとウォッチャ クラスとスタイルのバインディング 条件付きレンダリング リストレンダリング イベントハンドリング フォーム入力バインディング コンポーネントの基本 コンポーネントの詳細 コンポーネントの登録 プロパティ カスタムイベント スロット 動的 & 非同期コンポーネント 特別な問題に対処する トランジションとアニメーション Enter/Leave とトランジション一覧 状態のトランジション 再利用と構成 ミックスイン カスタムディレクティブ 描画関数とJSX プラグイン フィルター ツール 単一ファイルコンポーネント テスト TypeScript のサポート プロダクション環境への配信 スケールアップ ルーティング 状態管理 サーバサイドレンダリング セキュリティ 内部 リアクティブ
単一ファイルコンポーネント — Vue.js
ガイド 基本的な使い方 インストール はじめに Vue インスタンス テンプレート構文 算出プロパティとウォッチャ クラスとスタイルのバインディング 条件付きレンダリング リストレンダリング イベントハンドリング フォーム入力バインディング コンポーネントの基本 コンポーネントの詳細 コンポーネントの登録 プロパティ カスタムイベント スロット 動的 & 非同期コンポーネント 特別な問題に対処する トランジションとアニメーション Enter/Leave とトランジション一覧 状態のトランジション 再利用と構成 ミックスイン カスタムディレクティブ 描画関数とJSX プラグイン フィルター ツール 単一ファイルコンポーネント テスト TypeScript のサポート プロダクション環境への配信 スケールアップ ルーティング 状態管理 サーバサイドレンダリング セキュリティ 内部 リアクティブ
CoreUI - Vue/Bootstrap製の管理画面UI MOONGIFT
管理画面は主に運営元が使う画面になるので、デザインへのこだわりが殆ど感じられないことが多いです。しかし運営元が使いやすい画面でないと細かい制御がしづらかったり、サービスのステータス把握が遅れたりするのではないでしょうか。 そこで使ってみたいのがCoreUIです。VueとBootstrapを使って作られた管理画面テンプレートです。 CoreUIの使い方 スクリーンショット多めで紹介します。まずはダッシュボード。このようなUIの管理画面が簡単に作れます。 ボタン。 ソーシャルボタン。 カード。 フォーム。 モーダル。 スイッチ。 テーブル。 タブ。 アイコン。Font AwesomeかSimple Line Iconsがサポートされています。 ウィジェット。 こんなウィジェットも。 チャート。 ログイン画面。 登録画面。 エラー画面。 CoreUIはVueで作られていますので、表示する際にもW
Nuxt.jsの本格導入で遠回りしないためのTips v1.1 - Qiita
本記事はVue meetup #5で発表させていただいた「Nuxt.js本格導入で遠回りしないためのTips」のスライド発表の内容をQiita向けの記事としてまとめ、内容を一部追加したものです。これからNuxt.jsを本格的に使ってみようという方の助力になれば幸いです。 本記事では、そこそこな規模の本格的なアプリケーションにNuxt.jsを導入する場合に多くの方が直面するであろう問題や、知っていると助かりそうなことを紹介します。 Tips 1. ドキュメントを読もう 本格的なウェブアプリケーションをNuxt.jsで作ろうとしているならば、VueとNuxtのドキュメントを先にしっかり読みましょう。VueやNuxtは使い始めるのに多くのことを知る必要がなく、少しずつ利用の幅を拡げていけます。これはVueやNuxtの良いところです。しかし、本格的なウェブアプリケーションを構築する場合、結局のとこ
Vue.jsで開発を始める前に決めておきたい事 - Qiita
ここ１年ほど実務でVue.jsを利用してWebアプリケーションを開発しています。 今回はVue.jsを使ってチームあるいは個人で開発を始める上で予め考慮しておくと良さそうな事をいくつか書きたいと思います。 コンポーネントルール Vue.jsは単一ファイルコンポーネントによって、とてもシンプルな記述でコンポーネントを作る事ができます。しかし、開発者同士でコンポーネントの認識を揃えておかないと同じようなコンポーネントが作られてしまい、保守性を低下させる要因になってしまいます。 そのため、昨今ではAtomic Designなどの考え方をベースにコンポーネントを管理する方法が用いられています。Atomic Designを用いたコンポーネント設計方法については、以下の記事が参考になるかと思います。 Vue.js × Atomic Design - it's an endless world. いずれ
ReactにするかVue.jsにするか、jQueryだけ触っていたエンジニアがサンプル作って比較してみた - Qiita
ReactにするかVue.jsにするか、jQueryだけ触っていたエンジニアがサンプル作って比較してみたJavaScriptVue.jsReact 今のタイミングでWebサービスを、何か新しく開発しよーって思ったら、フロントサイドをどうしようか悩みますよね？ 特にVue.jsかReact.jsか... そんな悩んでいるあなたへの記事になります。 自分の仕事領域について あまり普段javascript触ってません 触るとしてもjQueryが多いです そんな人が書いた記事だと思って下さい 今回作ったもの ReactとVue.jsで簡単なカレンダーを作成しました。 React https://github.com/ykyk1218/react-calendar-sample Vue.js https://github.com/ykyk1218/vue-calendar-sample コンポーネン
Vue.jsのサーバーサイドレンダリングをGAE/Goでやる #vuejs #golang - Qiita
メリークリスマス！（昨日） これはVue.jsアドベントカレンダーの記事です。 代打です。 僕は初日にサーバーサイドレンダリングについて書きましたが 今回もサーバーサイドレンダリングです。 今回の内容は本当は初日に書きたかったのですがずっとうまくいかずに悩んでいたけどつい昨日できたGoサーバでのSSR（サーバーサイドレンダリング）です。 GoでSSRをするメリットとしてまず一つにポータビリティです。 Node.jsもポータビリティはありますが、Goであればアセットもワンバイナリにまとめることができるのでバイナリを配置するだけでWebUIがあるツールも作ることもできるかもしれません。 そして、僕にとって１番のメリットであるApp Engine(GAE)でSSRができるようになります！ SSRについては初日の記事を見てください！ サンプルの実行 https://github.com/k2wan
LINE Engineer Insights vol.3「UITエンジニアに聞く、最新のフロントエンド開発の裏側やアプローチ手法」
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog LINEで働くエンジニアに色々と話を聞いていく「LINE Engineer Insights」の第3弾です。当コーナーはインタビュアーにLINEで働くエンジニア @tokuhirom を迎え、エンジニア同士でざっくばらんにお話を伺っていくというものです。今回も、LINEのエンジニアは一体どんな人達なのか、その内面に迫っていきたいと思います。 第3弾は、開発1センター UIT室所属の喜多に、最新のフロントエンド開発の裏側やアプローチ手法などについて聞いてきました。あらかじめ説明しておきますと、UIT は User Interface Technology の略で、HTML/CSS/JavaScriptによる LINE のウェブフ
Vue.js Tokyo v-meetup="#3" に参加してきました - tacamy--blog
vuejs-meetup.connpass.com 申し込んだ時点で213/80人と絶望的だったのですが、たまたまブログ書く枠が空いたので勢いでポチってしまいました。ただ、私はVue.js初心者（※）なのでブログを書けるほど内容が理解できるのかかなり不安でしたが、結果的にどのトークも楽しめました（理解したとは言ってない）。なので、同じような初心者の方でも、興味があれば参加してみるとよいのではと思います。 （※）人がつくったアプリ（Vue 1.x）の改修をしたり、開発合宿でミニマムな評価アプリ（Vue 2.x）をギリギリつくった程度のレベルです。 以下、それぞれのトークの内容のメモです。 Vue.js の中身 - 算出プロパティはどうやって動いているか @kitak https://kitak.github.io/slides/170316-vue-meetup/ Vue.jsのようなライブ
ElectronでVue.jsを始める - Qiita
今回は、EletronをVue.jsでどうやって使うか、セットアップをするかを記事に書いていきたいと思います。 このアドベントカレンダーの23日目の、@nakajmgさんと内容が少し被ってしまいそうで申し訳ない気持ちでこの記事を書かせていただきます！ 最新のやり方 2017年度版の記事を、 @1ntegrale9 さんが書いてくださったので是非ご覧ください！ 2017年度版 electron-vueで始めるVue.js 前提 Node.jsが入っていることを前提にかいています！ インストール まずは、npmから vue-cli をインストールします。インストール後、 vue コマンドが使えれば成功です。 vue-cliは、Vue.jsの公式のCLIでいい感じのテンプレートを使用してプロジェクトを始めることができます。 プロジェクトの作成 今回は electron-vue（日本語ドキュメント
Server-side Rendering Shootout with Marko, Preact, Rax, React and Vue
Last week Alibaba announced a React-like library called Rax. Rax is a more lightweight implementation of the React renderer and it’s “universal”. It can run in Node.js, in the browser, and on top of Weex (which is pretty cool). One of the things that Rax is touting is its server rendering performance. It’s prominently featured in their README and it initially showed that they were rendering at abo
💓 Vue.js
P�A�IV � �IV `}��IV @�|�IV ���IV �%��IV �� �IV �7��IV �H�IV ����IV ����IV ����IV �5��IV Р4�IV ����IV p� `$8�IV � ��IV �� �IV � ��IV � ��IV `���IV �C �IV �G��IV ����IV `�A�IV �B��IV � c�IV 0���IV ���IV 0� �IV q|�IV �;��IV e��IV �m��IV P���IV ���IV p;��IV o��IV �8C�IV ����IV �L��IV 0� �Il�IV ^�IV � �IV P� �IV � �IV PQ��IV � �IV ��:�IV ����IV � ��IV ��1�IV ����IV ����IV p�;�IV � ��IV P�|�IV 0i
Vue.js 2.0のServer Side Renderingを試しつつ、軽くコードリーディングした - kitak blog
数日前に、Vue.js 2.0 が発表された ( Announcing Vue.js 2.0 – The Vue Point – Medium )。Server Side Renderingに対応するそうなので、pre-alphaではあるけれど、単純なサンプルを動かしつつ、軽くコードリーディングした。対象のVue.jsはこの記事を書いた時の最新のnextブランチ( fix eslint again · vuejs/vue@014ac35 · GitHub ) 2.0のポイント 内部で GitHub - snabbdom/snabbdom: A virtual DOM library with focus on simplicity, modularity, powerful features and performance. ベースのVirtual DOMを持つようになり、パフォーマンスが
#ウデマエアーカイブ をVue.js@1.0.0にアップデート！ - console.lealog();
しました。 個人のサービスだと思い切ってやっちゃえるので良いですね。 そんなに複雑な使い方してないので参考になるかは謎ですが、手順やら何やらメモっときます。 まず読む Release 1.0.0 Evangelion · vuejs/vue · GitHub まずはNotable Changesを把握 できればドキュメント再読 `1.0.0-migration`ってバージョンなら、v0.12.16と互換しつつv1.0.0の機能も使えるのでまずコレで試すのおすすめ warningsを1つずつ解消する って書いてますがまぁいけるやろーってことで、 Notable Changes読む いきなりv1.0.0つっこむ 変更点なおす + warnings消す って手順でやりました。 変わったところ きっとそのうちどこかの誰かさんが詳細な記事を書いてくださると期待して、ここでは実際になおしたとこだけ書き
Vue.js が辛くなってきた | status code 51
Vue.js が辛くなってきた。 ひとまず現状の辛さをダンプ 今日チームで改めて話し合って辛さがハッキリしてきたので、それをつらつらと書いてく。 (今のチームは僕を含めて Rails プログラマが多くて、フロントエンドを専門にやってる人はいない。) グローバル変数大量問題(もしくはイベント地獄問題) たくさんの状態(変数)が必要 && 複数 DOM にまたがるレンダリングがしたい。 今は、左ペインで選択して右ペインに出す、みたいな事をしている。 左ペインはタブで様々な種類の項目を選べて、選択したものを右側でリスト化して表示している。 これをやろうとするにあたって、方向性が２つあると思っていて 左ペインと右ペインでコンポーネントを分けて、親玉 ViewModel に変更を通知して親玉がレンダリング制御する -> イベント地獄 左ペインと右ペインの上位の親玉 ViewModel をつくって全て
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue on Storybook
GitHub - vue-play/vue-play: 🍭 A minimalistic framework for demonstrating your Vue components
大規模アプリケーションの構築 - vue.js