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の良いところです。しかし、本格的なウェブアプリケーションを構築する場合、結局のとこ
グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
Vue.js サーバサイドレンダリング on Cloud Functions for Firebase - Qiita
去年の今頃にNode.jsとGoでサーバサイドレンダリングをしました。 ２０１７年になって自分の中でこうやってサーバサイドレンダリングすればいいなという一つの答えが出たことを書きます。 サーバサイドレンダリングの必要性 サーバサイドレンダリングをやる理由に２つ理由があると思います。 １つはSEO、もう１つが表示の高速化です。 もしGoogleからのアクセスのみを考えているのであればあまりサーバサイドレンダリングするメリットは薄いかもしれません。 GoogleのクローラはJavaScriptも解釈してくれると言われています。 それとsitemapを設定してもindexをしてくれるので個人的にSEOのためにサーバサイドレンダリングすることはとくにないです。 次に表示の高速化のためですがこれはファーストペイントの高速化のためにサーバサイドレンダリングするべきかですが これはその通りでサイトアクセ
Nuxt.jsで変わる開発フローとUniversal JavaScriptのイマ #jsfes
2017.11.18 HANATANI Takuma(@potato4d) #jsfes
SCOUTER開発者ブログ
2024-04-29 CSSってどんな勉強をしたらいいの？おすすめの勉強法3選！ 文字やタブなどWebサイトのデザインを作成するマークアップ言語がCSSです。 CSSを勉強すると、おしゃれなWebサイトやかっこいいWebサイトが作れるようになります。 また、Webサイトを作るときに必要なHTMLを理解するのにも役立ちます。 CSSを勉強するならできるだけ効率よく勉強できるようになりたいですよね。 ではCSSの勉強法はどのようなものがあるのでしょうか。 CSSの勉強法は、スクール […] 2024-04-29 WEBエンジニアから見たXserverの使い勝手と評判 レンタルサーバーのおすすめサイトを見ると、大体どこでも上がってくる有料のレンタルサーバーの一つに「Xserver」があります。 このXserverとは、どのようなサーバーで、サービスにはどのようなものがあるのか。 ホームページ関連
Vue.js 2.0 で自社プロダクトを SPA + SSR 化した話
2017.05.27 の 初夏の JavaScript 祭 in mixi でお話した時のスライドです。Read less
SEO、OGP……Vue.js製SPAの「困った」を解決できる「Nuxt.js」が便利だ！
Vue.jsでSPAを作ったものの、検索エンジンのクローラーやSNSのOGP取得といった問題で困ったことはありませんか？ サーバーサイドレンダリングを簡単に構築できるNuxt.jsの活用方法を解説します。 ユニバーサル（Isomorphic）JavaScriptはJavaScriptコミュニティで一般的な用語になりました。ユニバーサルJavaScriptとは、クライアントとサーバーの両方で実行できるJavaScriptコードのことです。 Vue.jsを含むモダンJavaScriptフレームワークの多くは、シングルページアプリケーション（Single Page Application : SPA）の構築を目的に作られています。シングルページアプリケーションはページがリアルタイムで更新されるので、アプリの動きが軽快でユーザーエクスペリエンスが向上します。さまざまな利点がありますが、欠点もありま
プロダクトに 1 から Vue.js を導入した話
CloudNative Days Spring 2021 ONLINE キーノートでの発表資料です。 https://event.cloudnativedays.jp/cndo2021/talks/1071 本セッションでは、DockerとKubernetesのもつ基本的な機能の概要を、コンテナの仕組みをふまえつつイラストを用いて紹介していきます。一般にあまり焦点をあてて取り上げられることは多くありませんが、コンテナの作成や管理を担う低レベルなソフトウェア「コンテナランタイム」も本セッションの中心的なトピックのひとつです。 本セッションは、拙著「イラストで分かるDockerとKubernetes」(技術評論社)の内容を参考にしています。 https://www.amazon.co.jp/dp/4297118378
Nat.js - Vue/Weexで使えるモバイルフレームワーク MOONGIFT
JavaScriptでスマートフォンアプリを作る、一つのコードでiOS/Android両方に対応するという夢に挑戦する人たちは後を絶ちません。かつてのTitaniumであり、現在のReact Nativeでもあります。 そして今回はもう一つの存在、Nat.jsを紹介します。こちらはVueやWeexなどで使えるライブラリ集になります。 Nat.jsの使い方 Nat.jsを使ったチュートリアルアプリを紹介します。こんな感じで機能が並んでいます。別なアプリを立ち上げたり、写真やオーディオ、動画を扱ったりできます。 Nat.callで電話をかけられます。 画像を選ぶ場合。 写真の撮影もできます。 モーダル、ネットワーク、位置情報、センサーなどの機能もあります。 さらに各種デバイスの情報も取れます。 Nat.jsは前述の通り、WebであればVueが使えて、ネイティブアプリであればWeexと組み合わせ
Vue.js で d3.jsを使う その1（svgのcircleを表示） - Qiita
Vue.jsのフレームワークの中でd3.jsを使う場合どうすればいいのか困ったので、メモとして投稿します。 Vue.jsを触ったことのある人、かつd3.jsを触ったことある人を対象にしています。 ※ Vue.js v2.5.2 / d3.js Version 4.11.0にて確認 コード全文 <head> <script src="https://unpkg.com/vue"></script> <script src="https://d3js.org/d3.v4.min.js"></script> </head> <body> <div id="vue"> <svg id="circle-001" :width="width" :height="height"></svg> <div>r: {{ r }}</div> </div> <script> new Vue({ el: '#vu
Vue 2.5 released
We are excited to announce the release of Vue 2.5 Level E! This release includes improvements of various features and we recommend checking out the release note for full details. In this post we are going to highlight some of the more prominent changes: better TypeScript integration, better error handling, better support for functional components in single-file components, and environment-agnostic
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をはじめとした様々なサポートを行ってくれるものとなります
Style Guide — Vue.js
This is the official style guide for Vue-specific code. If you use Vue in a project, it’s a great reference to avoid errors, bikeshedding, and anti-patterns. However, we don’t believe that any style guide is ideal for all teams or projects, so mindful deviations are encouraged based on past experience, the surrounding tech stack, and personal values. For the most part, we also avoid suggestions ab
Vue.js命名規則、命名のコツ - Qiita
Vue.js コンポーネント スタイル ガイド こちらがベースになっているのでまずはこれを熟読すべし! 以下、引用になっているのはこのサイトからの出典です。 2017/12/14 追記 公式ガイドがもうすぐBetaが外れるのでこちらを見たほうが良いです。 コンポーネント名 意味のある名前で: 具体的過ぎず、抽象的過ぎず。 短く: ２または３語。 発音可能: それらについて話せるようにしたい。 例) Card: 短すぎます。抽象的すぎます。 UserProfilePostErrorModal: 長すぎます。具体的すぎます。 UserList: Good ファイル名 PascalCaseにします。 user_list.vue: PascalCaseになっていません。 UserList.vue: Good name属性 name属性は必ず与えましょう。 name属性は.vueファイルでない場合は
フォームが多くなってVuexがだるくなる問題 - Qiita
第9回ペパボテックカンファレンス ～ Vue.js 特集 ～ @Joe_nohさんが「Vuex と入力フォーム」にて、「フォームが多くなると辛い（特にmutation）」と話したが、シンプルにフォームデータをcompのローカルstateに詰め込んで、発火するたびにローカルstate丸ごとstoreに投げればいいじゃないかっと思ってちょっとやってみた。 ゴール mutationsを減らす get, setを減らす Vuex wayを守る vue-devtoolsを手放さない GitHub:vuex-form-approach Demo ポイント1 compのdataを一つのObjectにしておく（profile）
VueをSSRに乗せると容易にXSSを生み出す場合がある件について - Qiita
はじめに 最近Vue.jsを頻繁に使用するのですが、他のSSR(サーバーサイドレンダリング)の仕組みと組み合わせる場合、容易にXSSを生み出してしまうケースが存在するので、注意喚起も兼ねて事例を紹介させていただきます。 9月7日 追記を追記しました 前提 サーバーサイドで動的に要素をレンダリングするシステムとVue.jsを組み合わせた場合 この記事はrailsのSSRとの組み合わせで解説しますが、プレーンなPHP等、動的にHTMLをレンダリングシステムとの組み合わせでも発生します。 サンプルコード まず、こちらのコードをご覧ください。 user.erb <div id="app"> <div class="user"> <%= @user.name %> </div> <button v-on:click="registerFavorite" data-user-id="<%= @user
Vue.js バージョンとコードネーム - Qiita
バージョンとコードネームの一覧表 Vue.jsは、コードネームが付加されてリリースされています。 v0.9.0から頭文字が発表順に、アルファベット順で始まるアニメの名前が付けられています。 リリース日 版 コードネーム 原作 製作者
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Workbox使ってVue.jsのPWA作ってみた - mya-ake.com
Element
小さな課題解決から始めるVue.js / Getting started Vue.js for small improvement
