SPA開発未経験者によるNuxt.jsを使った自社サービス開発の裏側
2019年1月30日、株式会社Re:Buildが主催するイベント「【Nuxt.js/Vue.js】スタートアップ企業導入事例」が開催されました。近年注目を集めるNuxt.jsやVue.jsを実際の開発現場でどのように活用しているのか、スタートアップ4社が集い、自社の取り組みを語ります。プレゼンテーション「SPA開発未経験者によるNuxt.jsを使った自社サービス開発」に登壇したのは、株式会社リビルドの嘉数侑起氏。講演資料はこちら SPA開発未経験者によるNuxt.jsを使った自社サービス開発 嘉数侑起氏（以下、嘉数）：みなさん、こんばんは。「SPA開発未経験者によるNuxt.jsを使った自社サービス開発」というタイトルで、プレゼンさせていただきます。株式会社Re:Buildの嘉数と申します。よろしくお願いします。 こちらがアジェンダです。 今回、Nuxt.jsをこれから導入しようと検討し
Vue.jsの <template>タグには複数の役割がある - Qiita
先に結論書いてしまいますと、全部公式ドキュメントに書いてあります。 でも、書いてある箇所がバラバラなので 先に公式ドキュメントをちゃんと目を通していれば混乱しないのでしょうが、 ちゃんと読まずにいきなり現場のソースコード読んで、まぁどうにかなんだろうと思ったら ん？この <template> と <template> はなんか違うの？？ と混乱してしまった人（私です）向けにまとめました。 <template> タグには以下の役割があります。 条件付きレンダリングで複数要素を対象とする場合（v-if） リストレンダリングで複数要素を対象とする場合（v-for） 名前付きスロット（v-slot） 単一ファイルコンポーネント 条件付きレンダリングで複数要素を対象とする場合（v-if） 公式ドキュメントはこちら https://jp.vuejs.org/v2/guide/conditional.h
【Vue.js】ref と reactive どっちを使う？
Vue.js の Composition API が登場してから 1 年少しが経過しており、すでに使いこなしている方もいらっしゃるのではないでしょう？ 私自身お仕事で Composition API を使用しており、従来の Options API と比較して UI とロジックの分解がよりやりやすくなったように思えます。リアクティブなデータをコンポーネントの外で定義できるようになったことで、1 つのコンポーネントにまとめて書かざるをえなかった論理的な関心事に分けてそれぞれ別のファイルで定義できます。 書き心地としては React のカスタムフックに近い感じとなっていますね。 個人的には React がクラスコンポーネントから関数コンポーネント + Hook へ移行したように、Vue.js においても Composition API へ移行する流れが来るのではないかと思います。 さて、そんな
Design Patterns for Vue.js
Vue.js is a great framework - you find yourself building better applications, faster than ever. With the Composition API and TypeScript, you're now feeling unstoppable... ...over time, velocity slows. Business requirements change. The line between business logic and the your UI components begins to blur. Design patterns for Vue.js will arm you with the tools, patterns and concepts to build complex
Vue.jsのrender関数(JSX)に思いを馳せた結果 - じまろぐ
この記事はVue.js #2 Advent Calendar 2018の18日目の記事です。 Vue.jsを使った開発では、特別な理由がない限り.vueファイルで記述するのが主流かと思います。.vueの場合、テンプレートの定義は<template>で行うことになるでしょう。 自分も何の疑問が湧くことなく<template>を使っていましたが、ある日ふとrender関数に思いを馳せ、いくつかの個人プロジェクトで試してみました。 Vueのrenderについて思いを馳せてる— じまぐ (@nakajmg) 2018年6月29日 本記事では、その試行錯誤から得たrender関数についてのあれこれを記しています。 <template>がコンパイルされるとどうなるか render関数の前に、まずは<template>がコンパイルされるとどうなるかについて目を向けてみます。 .vueの<template
Vue + JSX + Nuxt Composition API で最高のフロント開発体験 - ANDPAD Tech Blog
はじめに ANDPADでフロントエンドの開発を担当している小泉です。 前回、約3ヶ月前にVue Composition APIをチームで導入して得られたメリットという記事を書かせて頂きました。 その後、今年の5月頃からまた新たなプロダクトの立ち上げを担当する機会があり、フロントの技術選定についていろいろ検討する中で、Vue.jsでもJSXを使って書けること、かなり導入しやすくなっていることを知りました。 そこで、Nuxt Composition API + TSXという組み合わせを採用してみたところ、かなり使いやすく、Vue と React のいいとこ取りができて最高 なのではないかとさえ思いました。 この記事では、そんなVue + TSX の導入方法と、メリット・デメリット、そして使う際のTipsをいくつか紹介しています。今後のフロントエンドの技術選定や、Vue + JSXでの開発に興味
Intersection Observerを使用すると実装が簡単に！Vue.jsでスクロールイベントをトリガーする方法
Webページやスマホアプリにスクロールのアニメーションを実装したり、特定の地点までスクロールしたらイベントをトリガーにしたりする際は、JavaScriptのライブラリを使用するのではなく、Intersection Observerが非常に簡単で便利です。 Intersection Observerを使用して、Vue.jsでスクロールイベントをトリガーする方法を紹介します。 How To Trigger a Scroll Event in Vue.js With the IntersectionObserver by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Intersection Observer APIで何ができるか IntersectionObserverのコンポーネント 終わり
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
