Vuexによる状態管理を含む最高に快適な Vue.js + TypeScript の開発環境を目指す話 - Qiita
追記 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 利用はまだまだ課題が多く、型の恩恵をうけるためのテクニックも複数存在しています。
2018年秋 JavaScriptエンジニアの技術投資状況 #jserinfo - Speaker Deck
2018/09/22 に JSer.info 400回記念イベントにて発表したプレゼンテーションスライドです。
破綻しない Vue.js アプリケーション開発のために大切なこと / How to make a robust Vue.js application - Speaker Deck
2018/10/15 に JSLounge の活動として UUUM株式会社様で行った発表のスライドです。
Nuxt.jsが気になるならNuxt.jsビギナーズガイドを読めばいいと思う - じまろぐ
Nuxt.jsビギナーズガイドを著者の@potato4dさんよりいただきましたので、読んでみての客観的な感想を記しておきたいと思います。 Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発 作者: 花谷拓磨出版社/メーカー: シーアンドアール研究所発売日: 2018/10/17メディア: 単行本（ソフトカバー）この商品を含むブログを見る ちなみますと、自分のNuxt.js経験は0.10系からで、個人/業務を問わず採用した経験があります。 超実践的ビギナーズガイド まずこの本を一言で表すとしたら超実践的ビギナーズガイドです。 本書ではフレームワークの解説にありがちな「それドキュメント読めばよくない？」的な、機能を羅列して紹介するようなことをしていません。一貫してアプリケーションを作りながら機能を覚えていくというスタイルを取っており、手
Nuxt.js アプリケーションに簡単にベーシック認証を付与できる nuxt-basic-auth-module のご紹介
Nuxt.js アプリケーションに簡単にベーシック認証を付与できる nuxt-basic-auth-module のご紹介JavaScriptVue.jsNuxt Nuxt.jsで爆速アプリケーション開発をする方法 や Nuxt v2へのアップデート方法 や Nuxt アプリケーションのデプロイの自動化 などの記事を公開したり、日本語ドキュメントの管理などをしている potato4d です。 私は普段の仕事の半分以上が Nuxt.js のプロジェクト、それもそのうち半分ほどは新規プロジェクトという状態で、同じようなコードを書くことが非常に多くあります。しかし、本来は重複するようなコードを毎回プロジェクトごとで書きたくないですし、問題があればまとめて治せるような体制にしておきたいところです。 Nuxt.js は幸いなことに、こういったコードの共通化のために任意の拡張を施すことができる「モジュ
Nuxt.js アプリケーションを CircleCI 経由で App Engine Standard 環境へと自動デプロイする
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日で開発した話 - Qiita
Nuxt.js, Firebase, Stripe をフル活用してサーバーレスでJAMStackなECサイトを2日で開発した話stripeVue.jsFirebasedeprecatedNuxt 本記事で紹介しているサービスの公式Twitterアカウントができました → @jslounge_info はじめに potato4d こと花谷拓磨です。 普段は ElevenBack という屋号のもと、フロントエンドを中心としながらも、デザインやサーバーサイドなどをも含めて作業することが多いのですが、屋号での活動の一環として、 JSLounge という渋谷で活動するハンズオン団体の運営を行っています。 その JSLounge にて過去に開催したハンズオン資料を入手できるサイトを構築することとしました。 通常、ハンズオンとなればその場でメンターがついて 1:1 で進めますが、 JSLounge の資
閲覧中のWebサイトで使われている技術を確認できるChrome拡張「Wappalyzer」のご紹介 - Qiita
はじめに エンジニアたるもの、よそで使われている技術は気になると思います。今回は、そんな時に役立つChrome Extensionの「Wappalyzer」をご紹介します。 概要 Wappalyzerは、ブラウザに現在閲覧しているWebサイト内で使われているテクノロジーを覗き見する機能を追加できる拡張スクリプトです。 Chrome Extensionとして配布されているほか、FirefoxのAdd-onとしても配布されているので、どちらでもお好みのブラウザで利用が可能です。 Chromeのかたはこちらのリンクより、Firefoxのかたはこちらのリンクよりダウンロードが可能です。 使ってみる 導入方法をご紹介しましたので、早速実際に使ってみましょう。 今回はWappalyzerを導入したGoogle Chromeにて、Qiitaの執筆画面を見てみます。 まずはじめに、対象とするページを開いた
NuxtのSSRモードで一部だけSSRをスキップする方法 - Qiita
そういえばわざわざ探して公式ドキュメントに追加しておきながら日本語の情報としてまとめてなかったなぁと思いメモ。 Nuxt の SSR モードにおける悩み Nuxt はデフォルトでサーバーが立ち上がって Node.js サーバーがサーバーサイドレンダリングを行う SSR モードで起動するようになっている。 SSR をしたい場合はどうしても SSR モードを使う必要があるけれど、とはいえ例えば SSR 非対応な Vue コンポーネントを読み込んでいる時に、 plugins で ssr: false にしていてもカスタムコンポーネントを記述していると問題となったりしてすこし具合が悪い。 そんな時の、「ここだけSSRしないでおきたい」という要望も、 Nuxt は対応している。 <no-ssr> コンポーネント Nuxt には、本体にデフォルトで登録されたカスタムコンポーネントである <no-ssr
フロントエンドのバリデーションを hapi の joi で行うと手軽で便利 - Qiita
Webフロントエンドの入力とバリデーションは、煩雑なのに手を抜きづらいという、なかなか難しいテーマとして長らく存在し続けています。 最近のSPA開発では、ReactやVue向けに、専用のライブラリが提供されていることも少なくありません。しかしながら、それらは得てして特定のフレームワークに依存しており、かつ解決したい課題に対してオーべースペックであることが少なくありません。 そうして簡単なフォーム作成の時に使える丁度良いフレームワークはないか悩んでいたところ、サーバーサイドJS向けのバリデーションライブラリである hapijs/joi が非常にマッチしていること、そして、その joi が、ブラウザ向けに joi-browser として移植されていることを知り、実際に案件に投入したところ丁度良い塩梅で便利だったのでご紹介いたします。 Joi (オリジナルNode.js版) の特徴と使い方 Jo
Nuxt.js を Google Cloud Functions ベータ node 8で動かしてみた。 - Qiita
Nuxt.js を Google Cloud Functions ベータ node 8で動かしてみた。Vue.jsFirebaseFunctionsNuxtgooglecloud はじめに 用語として、node.js v8をnode8と言っています。 つまり、node.js v6はnode6とここでは書かせてもらっています。 試行錯誤の流れを垂れ流しています。 firebaseのプロジェクトを使いまわしている場合のFunctionsのnodeバージョンを変更する方法がキモだと考えています。最後の方に書いています。 2018/08/25追記 書いた後に気づきましたが、Google App Engine（GAE)でもNode 8 が動くようになりました。こちらでNuxt.jsを動かす方が現実的ですね。 その場合は、以下を参照されるとよいです！ Nuxt.js on Google App Eng
nuxt-client-init-module を使って Nuxt.js にクライアントサイド限定の初期化処理を追加する - Qiita
はじめに Nuxt.js(以下 Nuxt) を利用した Universal Application 開発において、 nuxtServerInit を利用する機会はそれなりに多いかと思います。よくあるシチュエーションとしては、マスタデータの API からの取得、 middleware と併用した、ログインユーザーの Credential の取得などですが、特定の目的に限らず、幅広く使われていることでしょう。 しかし、ライブラリが localStorage 依存であったり、そもそも Single Page Application(以下 SPA) モードで起動していることで、クライアント側での init 処理が必要となり、自分で plugins に init を構築したり、コードの随所に process.browser での分岐が生まれて困ったことはないでしょうか？ この記事では、そういったシチ
【実録】Nuxt.jsの既存プロジェクトを一足早くNuxt v2へとアップグレードする方法 - Qiita
昨年からどんどん勢いが伸び、今年注目のフロントエンドフレームワークである Nuxt ですが、 Nuxt v2 の発表から一ヶ月以上たち、そろそろ待てなくなってきているかたも多いのではないでしょうか？ この記事では、そんな Nuxt v2 を、先行リリースとして公開されている nuxt-edge を利用する形で、現在実際に Nuxt 1.x が動作している、私の個人開発サービスである「請求書クラウド SeQueue」のアップデートした流れをご紹介いたします。 Nuxt v2 の大きな変更である webpack 4 へのアップグレードは、開発効率の向上に大きく貢献することから、少しでもはやく Nuxt v2 を利用したい！というかたも多いでしょう。 そんなかたのお役に立てることができれば幸いです。 ちゃっちゃと結論だけみたい人は一番下の「まとめ」まで飛んでください。 プロジェクトの状況 今回ア
【v2対応】Nuxt.jsとFirebaseを組み合わせて爆速でWebアプリケーションを構築する - Qiita
Firebase Advent Calendar 2017 21日目の記事です。 フリーランスでフロントエンドを中心にエンジニアをやっているpotato4dです。 普段はVue.jsを中心に、案件を進めたりコミュニティに関わったりしていますが、今回はそんなVue界隈で今アツいフレームワークであるNuxt.jsとFirebaseを組み合わせて、SPA + SSRにAuthと Firestore を組み合わせたアプリケーションを高速で作る方法を、サンプルとあわせてご紹介します。 2019/10/16 追記 このサンプルは Firestore が存在しない Nuxt v1.x + RTDB 時代のコードを愚直に移行している ので全体的に資料が古くなっています。 インフラ構成については順次更新していますが、特にデータストア操作周りについては できるだけ参考にしないでください。 2019/07/02
Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発
Vue.js製フレームワークNuxt.jsではじめるUniversalアプリケーション開発 花谷拓磨 Vue.jsでUniversalなSPAを開発できるフレームワークであるNuxt.jsのバージョン 1.0のリリースがいよいよ近づいてきました。 本稿では、シングルページアプリケーション（以下 SPA）開発によって生じた問題を解決するために生まれたサーバーサイドレンダリング （以下 SSR）を中心に、Vue.jsでの開発を強力にサポートするNuxtについて、その魅力と基本的な使い方をご紹介いたします。 Nuxt.jsとは？ Nuxt.js（ナクストと読みます）はReact.jsベースのSSR用フレームワークであるNext.jsに触発されて作成された、Vue.jsベースのフレームワークです。 特にUIの描画サポート に主眼をおき、SSRをはじめとした様々なサポートを行ってくれるものとなります
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
持続可能なプロダクト開発のために - フロントエンドと新陳代謝の話 / Frontend premised on making changes
Amazon.co.jp: Nuxt.jsビギナーズガイド―Vue.js ベースのフレームワークによるシングルページアプリケーション開発: 花谷拓磨: 本
【v2対応しました】Nuxt.jsとFirebaseを組み合わせて爆速でWebアプリケーションを構築する ref: https://qiita.com/potato4d/items/cfddeb8732fec63cb29c · GitHub
GitHub - potato4d/nuxt-firebase-sns-example: Nuxt v2 & Firebase(Hosting / Functions SSR / Firestore), Google Auth SNS Example.
「結局Nuxt.jsって何がいいの？」に対する回答 by potato4d