Vue CLI v3 を利用して、あらゆるサイトに埋め込める Web Component ベースの Qiita スライドビューアーを開発した話JavaScriptVue.jsWebComponentsdeprecated Vue.js Advent Calendar 2018 の管理担当、言い出しっぺだから全部参加をポリシーで進めている potato4d です。 今年は以下の2つを公開しており、ことしは守りのコードを中心に紹介しました。 Vuexによる状態管理を含む最高に快適な Vue.js + TypeScript の開発環境を目指す話 JavaScript ベースの Vue.js プロジェクトのデータ構造を JSON Schema を使って守る ですが、ここは #1 アドベントカレンダー。せっかくなので、もう少し夢のある話をしたいと思います。 Kamishibai Viewer という

Vue.js で SPA を書く際、言語として JavaScript(ES) で書くか TypeScript で書くかは一つの悩みどころとなると思います。 私個人としては、 Vue.js プロジェクトでは多くの場合 TypeScript を、 Nuxt.js プロジェクトの場合は、 Nuxt.js がまだまだ TypeScript サポートが弱いことから、 JavaScript で書くようにしています。 感覚的なものですが、 Nuxt.js + JavaScript の組み合わせがやはり開発の生産性としては非常に高く、効率的な開発ができる半面、データ構造レベルはせめて堅牢に守りたいというモチベーションが出てくることも確かです。 特に私の場合、サーバーサイドを Node.js + TypeScript で書くことが多いこともあり、可能な限りエンティティの型情報くらいは再利用できればと考えるこ

追記 2019/12/05 Vue 3.0 のリリースが現実的に近づいてきて色々と事情が変わっているので、話半分に聞いておいてください。 はじめに Patreon での支援募集をはじめました。この記事が良かった！という方は、今後の情報発信のためにもぜひぜひ支援お願いします。 https://www.patreon.com/potato4d Vue.js Advent Calendar 2018 年の管理役の potato4d です。昨年に引き続き、今年も Vue.js のアドベントカレンダーは他にもたくさんあるので、ぜひ #1 から追ってみてください。 12日目の今日は、 Vue.js + TypeScript での理想的な開発環境について考えてみたいと思います。 Vue.js における TypeScript 利用はまだまだ課題が多く、型の恩恵をうけるためのテクニックも複数存在しています。

Nuxt.js アプリケーションを CircleCI 経由で App Engine Standard 環境へと自動デプロイするJavaScriptNode.jsVue.jsNuxtgooglecloud Nuxt.js が遂に v2.0 になりましたね 私も個人的にほしい機能を Pull Request で出していたものが入って、ようやく使えるようになって嬉しい限りです。 v2 が出たことによって、 v1 である程度安定しているものの、 nuxt-edge とどっちを使うべきかで悩んでいた層が、「v2 から Nuxt.js をはじめてみよう」とはじめることも多くなるかと思います。 そんなときに悩みのタネになるのが、 Nuxt.js 特有のサーバー管理事情です。 SSR モードで立ち上げる場合、 Node.js サーバーが必要となるため、これまでのような静的サイトホスティングにてホストできる

Nuxt.js, Firebase, Stripe をフル活用してサーバーレスでJAMStackなECサイトを2日で開発した話stripeVue.jsFirebasedeprecatedNuxt 本記事で紹介しているサービスの公式Twitterアカウントができました → @jslounge_info はじめに potato4d こと花谷拓磨です。 普段は ElevenBack という屋号のもと、フロントエンドを中心としながらも、デザインやサーバーサイドなどをも含めて作業することが多いのですが、屋号での活動の一環として、 JSLounge という渋谷で活動するハンズオン団体の運営を行っています。 その JSLounge にて過去に開催したハンズオン資料を入手できるサイトを構築することとしました。 通常、ハンズオンとなればその場でメンターがついて 1:1 で進めますが、 JSLounge の資

2017年ももう終わりなので、自分用のメモも兼ねて今年触った技術をざっとメモしてみる。 フロントエンドに対しては大凡モダンなものを使っているけれど、他についてはその限りではないので、自分が古いと感じるものについては来年以降移行したいもの、手をつけたいものもあわせてまとめる。 ちなみに今年のGitHubで見えるだけのアクティビティとしてはこんな感じ。そこそこコードは書いた。 技術の分類 とりあえず以下でカテゴライズしておく。そこそこその他はありそう。 Webフロントエンド Webバックエンド その他Node周り インフラ / ミドルウェア Webサービス(クラウド周り) まとめ Webフロントエンド フレームワーク周り 基本的に去年に続きVue.jsが中心でコードを書く機会が多かった。体感Vue:React:Angularが7:2:1くらい。他もちょこちょこというところ。一定以上有名なもので

Vue.jsでSPAを開発する際、そのプロジェクト構成に迷うかたは多いようです。 今回はそんなかたのために、私が普段Vue.jsで開発するときの構成と、その構成化で開発するときのポイントを共有したいと思います。 追記 2019/12/05 追記 時代が大きく変わって求められる構成なども変化しました。 現在ではこの記事は参考にしないことをおすすめします 2018/01/30 追記 まずは Nuxt.js の利用の検討を Vue.js製のフロントエンド開発フレームワークである Nuxt.js がついに v1.0 のリリースを迎えました。SPA開発とSSR + SPAの開発両方を全面的にサポートしており、PWA対応などもプラグイン一つでできる上、ルーティングの自動生成やVuexストアのオートロードも可能と非常に強力なフレームワークとなっております。本格的なSPA開発を開始するときは、まずは Nu