@potato4d の名前で活動 フリーランスのWebエンジニア Vue.js jp Docs core maintenance member Vue.js Japan UserGroup スタッフ nuxt/docs en & ja contributor Nuxt tech book 著者
![「結局Nuxt.jsって何がいいの?」に対する回答 by potato4d](https://cdn-ak-scissors.b.st-hatena.com/image/square/f424ca0e47daef9688f0efd947c1b9d3e7727c9b/height=288;version=1;width=512/https%3A%2F%2Fmedia.slid.es%2Fthumbnails%2F16bc4de02f97e9666282c0579ceb2a74%2Fthumb.jpg%3F1527057434)
Nuxt.jsで自己紹介サイトを作りました。 https://nitta.studio/ 見ていただくと分かる通りアニメーションをしまくったのですが、、 https://t.co/CXj31medDj Nuxt.jsで自己紹介サイト作りました。NetlifyホスティングでPWA対応してます。 いろいろ自分のイカれた略歴など晒しました。宜しくお願いします。 — 新田聡一郎 (@soichiro_nitta) 2018年4月26日 VuexとVue.jsのウォッチャをつかって、 イベントハンドリング ステート変更 ウォッチャで検知 複数のコンポーネントでアニメーション発火🔥 のような書き方をしたら最高だったので、ご紹介です。 アニメーションって、どこにどの処理書けばいいのか困りませんか? 凝ったものを実装するとめちゃめちゃなコードになりがちですよね... しかーし!Vue.jsのデータ駆動と
Simplicity First Minimal setup with markdown-centered project structure helps you focus on writing. Vue-Powered Enjoy the dev experience of Vue + webpack, use Vue components in markdown, and develop custom themes with Vue. Performant VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.
Vue.js は JavaScript フレームワークです。 ウェブアプリケーションのユーザーインターフェイス開発を支援する様々な仕組みを提供します。 管理画面はもちろん、HTMLエディタのようにユーザの入力に対して即応性が必要なアプリケーションを簡単に作ることができます。 例えば、テキストエリアに文字を入力すると、 デザインしたページの特定のDIV要素がリアルタイムに更新されるといったデータ反映の仕組みを備えています。 また、JavaScript で大規模なユーザーインターフェイスの開発を行う場合、HTMLファイルのテンプレート化、 JSファイルの依存関係、グローバル変数汚染など様々な課題に直面します。 Vue.js は、コンポーネントという仕組みと Webpack というモジュール管理ツールと組み合わせることで、 これらの課題にうまく対処できるようになっています。 今まで jQuery
さて、本連載はWordPressをバックエンドにしてREST APIとJavascriptによるアプリケーションを作成するためのチュートリアルである。利用するライブラリはVue.JS、作成するものはジョブボードである。 前提 対象とする読者 WordPressを使ってテーマカスタマイズを行ったことがある人。 基礎的なJavascriptの知識(変数の取り扱い、文法)がある人。ES2015以降の新しい記法については知らなくても構わないが、if-elseも書いたことがないというレベルだと厳しいかもしれない。 目的 WordPressをアプリケーションバックエンドとして、Webアプリケーションを作成する。 免責事項 WordPressにはジョブボードプラグインがすでに存在するので、「手っ取り早くジョブボードを実装したい」という人に本チュートリアルは向かない。 Vue.JSとは Vue.JSは人気
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
これは、Misoca Advent Calendar 2017 の6日目のエントリーです。 SSR フロントエンドを駆使したアプリケーションを構築すると、 どこかのタイミングでSSR(ServerSideRendering)と向きあうことがある。 最近はクローラが優秀なので、SSRを行わないSPAでもいい感じにインデックスしてくれたりするので、そこまで神経質になることもないことが多いですが、ファーストビューの速度などを突き詰めていくと、やっぱり選択肢としては使える状態にしておきたいところ。 実際にやろうとすると簡単なものではなく、Railsの場合はreact_railsのようなgemに頼ったりすることになったり、頼っても大変だったりするのが現実だと思う。 Next.js & Nuxt.js といったわけで、Next.js/Nuxt.jsの名前をちらほら見かけるようになったと思う。 オフィシ
開発チームの日下部です。 Vueで開発を進める際にあると大変便利なvue-devtoolsをご紹介いたします。 大雑把にいうといちいちconsoleに出力しなくてもdataの中身とかみれるやつです! vue-devtoolsは、GoogleChromeの拡張機能として提供されていて、簡単に導入することができます。 インストールすれば、あとはVueアプリケーションが搭載されているページを開くだけで、vue-devtoolsがVueアプリケーションを検知してくれます。 検知されると、Chromeウィンドウの右上にあるであろうVueアイコンが点灯します。 その状態でChromeのDeveloper Tools(F12)を開くと、Vueタブが右端に追加されているでしょう。 この記事では、vue-devtoolsで何ができるのかを大まかにご説明していきます。 ご注意 ローカルのhtmlファイルで試す
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をはじめとした様々なサポートを行ってくれるものとなります
Vue.jsでSPAを作ったものの、検索エンジンのクローラーやSNSのOGP取得といった問題で困ったことはありませんか? サーバーサイドレンダリングを簡単に構築できるNuxt.jsの活用方法を解説します。 ユニバーサル(Isomorphic)JavaScriptはJavaScriptコミュニティで一般的な用語になりました。ユニバーサルJavaScriptとは、クライアントとサーバーの両方で実行できるJavaScriptコードのことです。 Vue.jsを含むモダンJavaScriptフレームワークの多くは、シングルページアプリケーション(Single Page Application : SPA)の構築を目的に作られています。シングルページアプリケーションはページがリアルタイムで更新されるので、アプリの動きが軽快でユーザーエクスペリエンスが向上します。さまざまな利点がありますが、欠点もありま
querySelectorを教えるべきかgetElementByIdとかでやるべきか一瞬迷う(結局querySelectorにする)
ガイド 基本的な使い方 インストール はじめに Vue インスタンス テンプレート構文 算出プロパティとウォッチャ クラスとスタイルのバインディング 条件付きレンダリング リストレンダリング イベントハンドリング フォーム入力バインディング コンポーネントの基本 コンポーネントの詳細 コンポーネントの登録 プロパティ カスタムイベント スロット 動的 & 非同期コンポーネント 特別な問題に対処する トランジションとアニメーション Enter/Leave とトランジション一覧 状態のトランジション 再利用と構成 ミックスイン カスタムディレクティブ 描画関数とJSX プラグイン フィルター ツール 単一ファイルコンポーネント テスト TypeScript のサポート プロダクション環境への配信 スケールアップ ルーティング 状態管理 サーバサイドレンダリング セキュリティ 内部 リアクティブ
Vue.js の作者Evan氏によるVue.jsの紹介スライドで触れられていた「Progressive Framework」の概念が非常に刺さる所があったのでVue.jsの紹介と合わせて、まとめておきます。 本家資料 本稿は下記Evan氏によるスライド資料をベースに、独自解釈のもと意訳したり加筆したりして作成したものです。 Progressive Framework についての解説 2.0の流れも含めたVue.jsの紹介 道具と道具のコスト フレームワークはアプリケーションの複雑さを解決するために設計されているが、一方で道具は道具固有の複雑さを持っている。 技術選択においては、このアプリケーション固有の複雑さと、道具の複雑さとに向き合わなければならない。 複雑なアプリケーションに対して、簡素な道具を以って挑むのは効果が薄いし、簡単なアプリケーションに複雑な道具を持ち出すのは大げさに感じる。
1. Copyright © DeNA Co.,Ltd. All Rights Reserved. サービスの成長を 支えるフロントエンド開発 February 10, 2017 Naoki Endo x Takefumi Yoshii DeNA Design Strategies Office DeNA Co., Ltd. 2. Copyright © DeNA Co.,Ltd. All Rights Reserved. AGENDA ■ 自己紹介 ■ サービス運用におけるパラダイムシフトとの最適な付き合い方 ■ 直近の業務における選択 - React を選んだ観点 - ■ 直近の業務における選択 - Vue.js を選んだ観点 - ■ 中長期的にサービスを支えるコンポーネント設計 2
(著者:kintone エバンジェリスト 村濱 一樹) Vue.jsは非常にシンプルなJavaScriptフレームワークで、kintoneと相性がよく、私自身kintoneのカスタマイズではVue.jsを使うことも多いです。 先日、CybozuCDNにVue.jsが公開されましたので、kintoneとVue.jsについて少しまとめます。 他のフレームワークとの比較 まず、同じくCybozuCDNで公開されている、Angularなどのフレームワークと何が違うのか、ということですが、公式サイトに下記まとめられております。 https://jp.vuejs.org/guide/comparison.html 例えば、AngularJSはフルスタックなフレームワークで何でもできますが、その分学習コストが高いです。 Vue.jsは双方向データバインディングに特化しており、単体での機能はAngular
Qwintryチームは最近、既存のすべてのプロジェクトのフロントエンドをVue.jsに移行しはじめました。新しいプロジェクトでもVue.jsを使います。 レガシーなDrupalのシステム(qwintry.com) ゼロから新しく書きなおすqwintry.comのブランチ Yii2で動くb2bシステム(logistics.qwintry.com) その他、比較的小さめのプロジェクト(ほとんどは、PHPとNode.jsでバックエンドを構築しているもの) プロジェクトの規模についていうと、 Qwintry は世界中で約50万人の顧客が使っています。アメリカとドイツに倉庫を持っていて、アメリカ国内 最大の郵送先 のひとつで、東欧や中東への出荷に注力しています。Qwintryは、アメリカのオンラインストアでグッズを購入する人たちのためのツールです。私たちの倉庫に届いた荷物をコントロールパネルで管理で
Nov 3, 2016 このブログはこちらの翻訳ブログです。 Vue のユーザーとして、皆さんの多くが使用している可能性がある vue-resource は Vue アプリケーションでの ajax リクエストを処理するためのものです。 長い間それは Vue 用の「公式」ajax ライブラリとして考えられてきましたが、本日私たちはそれを公式推奨という状態から引退させました。 vuejs organization のもとに列挙されているものの、vue-resource はほぼ完全に PageKit チームによって書かれ、保守されてきました。 私たちが初期の頃 vuejs organization にそれを移したのは、コミュニティが本質的な問題を解決するためのライブラリを寄付することは良いことだと思ったからで、また私たちは PageKit チームがプロジェクトに投下したすべての作業に大いに感謝し
Vue.jsとは Vue.js(ビュージェイエス)は、インタラクティブなUIを構築するためのJavaScriptライブラリです。Webサイト内のウィジェットや管理画面のダッシュボードといったビュー(view)層に特化しています。設計の特徴としてMVVMパターンに影響を受けています。 Vue.jsは2013年にEvan You氏の個人プロジェクトとして開始、2014年2月にバージョン0.8が正式に公開されます。その後いくつかのリリースを経て、2015年4月にLaravelへの標準搭載決定を機に一気に知名度があがりました。2015年10月に1.0が、2016年10月1日(日本時間)に2.0がリリースされ現在に至ります。 Vue.jsの主な特徴には以下のものがあります。これらによって短期間で実用的なアプリケーションを作成できるため人気を集めています。 シンプルなAPIやHTMLベースの平易なテン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く