5 Awesome Boilerplates/Templates For VueJS Projects
Are you about to begin an important Vue project? To ensure you start with a solid foundation, you might use a template (aka boilerplate, skeleton, starter, or scaffold) rather than starting from npm init or vue init. Many experienced developers have captured their wisdom about building high-quality Vue apps in the form of open source templates. These templates include optimal configuration and pro
Vue開発者のためのVue.jsベストプラクティス集15選 - Qiita
はじめに みなさん、Vue使ってますかー！・・・・・・・（へんじがない。ただのしかばねのようだ。） 私は毎日使ってます。が、正しい使い方というのがいまいちわかっていません。ということで、ネットで拾ってきた情報を元にVueで開発する上でのベストプラクティス集15選をまとめてみました。 「ふんふんそうだよね〜」といったものから「えー！？そうなのー！？」となるものまで集めています。皆さんの開発の手助けになる情報が入っていると幸いです。 また、間違っている内容やさらに良い方法等あれば、コメント欄にて（優しく）ご指摘いただけるととても嬉しいです。 1. v-for内では必ず:keyを使う v-forディレクティブでkey属性を使うと、データを操作するのに役立ちます。さらに、Vueがコンポーネントの状態を追跡し、それぞれのエレメントに対し継続的に参照ができるようになります。 特に、アニメーションやVu
スタイルガイド — Vue.js
最終更新日: 2021年5月22日 このドキュメントは、 Vue 固有の記法についての公式なスタイルガイドです。もしあなたがプロジェクトにおいて Vue を使用する場合は、エラーや有益でない議論、アンチパターンを避けるための参考となります。しかし、スタイルガイドはすべてのチームやプロジェクトで理想とは限らないと考えていますので、過去の経験や、周囲の技術スタック、個人の価値観に基づいた上で必要に応じて慎重に逸脱することが推奨されます。 ほとんどのパートにおいて、基本的に JavaScript や HTML に対する提案はさけています。セミコロンやカンマの使用の是非はどちらでも良いです。 HTML の属性に対してシングルクォートかダブルクォートどちらかを利用するかもどちらでも良いです。しかし、特定のパターンにおいて Vue のコンテキストが役立つと判明した場合については、その限りではありません
Vue/Nuxt開発効率を3倍にするVSCode拡張機能セット - Qiita
この記事を読むと VSCode拡張機能を入れて、下記のようなことが実現します ・VSCodeとは別にterminal（Command Line）の画面を開かなくても、VSCode内から直接terminal操作ができる（例えばnpm run devも) ・全てのカッコ()[]{}が種類別に色分けされる ・インデントが一眼で分かる ・htmlタグの開始タグと終了タグを同時に修正できる ・Vue.jsやNuxt.jsの構造やファイル操作が楽になる etc... なぜこの記事を書いたのか VSCodeは素晴らしいテキストエディタです。 特に、Vue.jsやNuxt.jsを用いて開発している方にとっては最も有力な選択肢でしょう（そして、その選択は間違いではないと保証できます）。 さて、VSCodeはそのままでも素晴らしいエディタですが、使用するフレームワークや用途に応じて拡張機能を入れるとさらに、そ
フロントエンド開発をjQueryからVue.jsへ乗り換えたので比較してみる - Qiita
この記事は、Vue #2 Advent Calendar 2019 の3日目の記事です。 Advent Calendar初参加です！ 経緯 自社で開発しているサービスの機能が増えてきて、ユーザーの利便性が問われることが多くなりました。 UI改善と言っても、そのサービスのフロントエンドはjQueryで出来ており、一新しようとしてもできる範囲に限界があります。そこで、部分的にVue.jsを導入していき、段階をとってUI改善をしていく方向性となりました。 Vue.jsは他のjavascriptのフレームワークと比べても学習コストが低く、初心者、経験者問わず、すぐに開発に使用することができるという特徴があります。 私も本来はサーバーサイドエンジニアですので、まずは学習から始まったのですが比較的すぐに技術を習得することが出来ました。頑張れば一日で基本の項目(Componentあたり？)まで習得できる
Nuxt.js+Herokuを使って布団の温度をLINE LIFFで見る #SleepTech - Qiita
はじめに 前回、寝床内気象（布団内の温度・湿度）を測定する装置を作り、データをAmbientというサービスを使って可視化していました。 しかし、毎回 Ambient にログインしてグラフを見るのが面倒になってきたので、 以前に作成した気温に応じておすすめのおふとんを教えてくれるBOTで見れるようにしていきます。 作ったもの リッチメニューの右側をタップすると、LINE LIFF 上にグラフが表示されます。 これで手軽に布団の温度が確認できるようになった！ #protoout #sleeptech pic.twitter.com/KBNQdb1dNd — Takahiro Mitsuoka (@t_mitsuoka) November 27, 2019 アプリ構成 前の記事で温度を測定する部分を作成したので、今回は LINE で表示する部分を作っていきます。 システム構成 バックエンドは前回
2020年のフロントエンドマスターになりたければこの9プロジェクトを作れ - Qiita
以下はSimon Holdorf( dev.to/ Twitter / GitHub )による記事、9 Projects you can do to become a Frontend Master in 2020の日本語訳です。 9 Projects you can do to become a Frontend Master in 2020 Introduction あなたがプログラミングの初心者であるか、既に経験豊富な開発者であるかにかかわらず、この業界では、急速な変化に追いつくために新しい概念と言語・フレームワークを学び続けることが必要です。 たとえばFacebookが4年前にオープンソース化したReactは、既に世界中のJavaScript開発者にとって第一の選択肢になっています。 もちろんVueとAngularにも多くのフォロアーがついています。 さらにはSvelte、Next
Nuxt.jsで未利用のVueコンポーネントを探すシェルスクリプト - Qiita
最近Nuxt.jsでWebアプリを作ってるけど、 度重なる改修でVueコンポーネントが乱立。。 使ってないのもたくさんありそうなので、調べるスクリプトを作ってみた。 スクリプトはこんな感じ #!/bin/bash # vueコンポーネントの一覧を取得 FILES=`find components -name "*.vue"` for i in $FILES; do # 全体からコンポーネントをインクルードしている行の数を取得 NUM=`grep -r "$i" * | wc -l | sed -e "s:[^0-9]*::g"` # ファイル名と見つけた件数を表示 echo "** ${NUM}: ${i}" # grepした結果を表示(確認用) grep -r "$i" * echo "" done ** 1: components/Hero.vue pages/index.vue:im
いい感じのグラフをTypeScriptなNuxt.jsとvue-chartjs(chart.js)で書いてみた - Qiita
Nuxt.jsで開発しているWebサービスで、 棒グラフとか線グラフを使いたいなと思い、いろいろ調べた備忘録。 vue-chartjsを使うと、いい感じのグラフが簡単にできた(´ω｀) こんな感じで使ってます!! 登録されている本の総額と総冊数の推移を棒グラフと線グラフで表示!! 色も文字も変えられて、いい感じに(´ω｀) vue-chartjsの使い方 全体の流れはこんな感じ。 1. インストール 2. コンポーネントを作る 3. コンポーネントを配置する 1. インストール まずはインストール <!-- Template Tag can not be merged... --> <script lang="ts"> import { Component, Vue, Prop, Watch, mixins } from "nuxt-property-decorator"; import
【Nuxt.js】Vue.jsをより効果的に使えるフレームワークのメリットや利用シーンを紹介！｜Udemy メディア
Nuxt.jsでできること では、Nuxt.jsで何ができるのでしょうか？例えば、次のようなことができます。 SSR（サーバーサイドレンダリング） SSR（サーバーサイドレンダリング）とは、「JavaScriptをサーバー内部で実行してHTMLを生成し、クライアントに返す仕組み」です。JavaScriptは本来Webブラウザ上で実行されるものでしたが、サーバー側で実行することにより、処理を早められます。 処理は下図の流れで行われます。 ルーティング ルーティングとは「クライアントからのリクエスト内容と、サーバー処理を関連付ける動作」です。Nuxt.jsは、ルーティングが簡単に設定できるようになっています。どのように簡単になっているかは後述します。 head要素の管理 metaタグの管理を、JavaScriptのオブジェクトベースで記載できます。設定ファイルに記載してフォーマット化しておけば
【新刊紹介】『これからはじめるVue.js実践入門』、今一番人気のJavaScriptフレームワークの入門書
「Vue.js」は、今一番人気のJavaScriptフレームワーク。本書は、このVue.jsについて、導入編、基本編、応用編を全11章に分け解説。段階的に学習を進めることができます。最終章では仕上げとして、読書した時の感想や読了日を記録する「Reading Recorder」アプリを作成し、Vue.jsプログラミングの具体的なイメージを掴むことができます。 担当編集者からのコメント 「Vue.jsをゼロから学びたい」 「Vue.jsを実務に生かせる力をしっかり身につけたい」 本書は、そんな方のために企画されたものです。 書籍としての大きな特徴は以下のようになっています。 多くのサンプルを動かすことを通じて、Vue.jsでできることをひと通り学べる。 テンプレート的な使い方にとどまらず、Vue Router、Vuex、テストにも大きくページを割き、本格的なアプリにも挑戦できる。 Vue.js
Vue.jsで定期的にバックエンドと通信したいときに気にしたい3つのこと - プラグイン作成で解決 - SMARTCAMP Engineer Blog
スマートキャンプのエンジニア瀧川です！ クライアントサイド(JavaScript)で処理を定期実行したい場合は皆さん使いますよね！ そうsetInterval関数です。 ただ何も考えず使ってしまうと色々な問題が起こったり... そこで本記事ではsetInterval関数を使う際の困りごとを挙げて、それをまるっと解消するVue.jsプラグインを作る方法を紹介したいと思います！ (今回はVue.jsで実装しますが、特に依存しているわけはないので他のフレームワークをお使いの方も参考にしてください！) まずVue.jsプラグインの雛形を作る 困りごと1 困りごと: ブラウザ(タブ)を開きっぱなしにすると必要以上に実行されてしまう 解決法: Page Visibility APIを利用してアクティブなときにしか処理を実行しない 困りごと2 困りごと: ページ遷移してもsetIntervalが維持され
Vue.jsでHPを作成する - 開発環境を整える - Qiita
はじめに 転職活動用のポートフォリオを作るにあたりインデックス的なHPを作成することにしました。 なお、筆者は文系出身。SIerにてJava、PHPの業務経験がありますがプライベートでのアウトプットは行ったことがないです。 なお、どこでどう躓いたかどう対策したかを記録する目的もあり、手戻りである部分を残しております。 手戻りがない形で最初からきれいに作れる手順は「参考」に書かれているサイトなどで確認できますので、特別な理由がなければそちらを参照されることをお勧めします。 また、ここではVue、Git、GitHub、GitHubPages、VisualStudioCodeを使った「開発環境の構築」や「開発方針・開発手法の確立」までをまとめております。 具体的なHP作成の過程は別にまとめようと思います。 HP作成に当たる過程 READMEの検討 最初はHP作成は考えておらず、GitHubのRE
Nuxt.js＋Github＋Netlifyを使ったWebサイト環境構築手順 - Qiita
Vue.js アプリケーションを構築するためのフレームワークです。サーバーサイドレンダリング(SSR)するアプリケーションの開発のために必要な設定があらかじめセットされているのが特徴です。SSRについては後述します。 中身はVue.jsなので基本的なコーディングの仕方は同じです。ですので、プログラム開発をするときに、Google検索などでコーディングの仕方を調べることもあると思いますが、Vue.jsとして記載されている記事も、Nuxt.jsの記載の仕方に合わせることで読み換えることができます。 参考：Nuxt.js使ってみた Nuxt.jsとElectron (蛇足) Nuxt.jsはweb開発を前提として開発されたVue.jsをベースとしたフレームワークですが、クロスプラットフォーム言語であるElectronと組み合わせることによって、Nuxt.jsを使ってMac、Windows、Lin
フロントエンドエンジニアにとっての2019年。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA
ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・ この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第5回目となる本記事ではウェブ業界の「フロントエンドエンジニアにとっての2019年」と題してアンケート結果を紹介します。 JSでブラウザ挙動をどうやって防ぐ？ ウェブページでインタラクションを作るときに、ブラウザのデフォルト挙動が邪魔になることがあります。たとえば、aタグのリンクはJavaScriptでキャンセルでき、自前の処理に置き換えることができます。 ブラウザ挙動のキャンセルのやり方にはさまざまな手段があるのですが、主流のやり方はどれでしょうか？ addEventListener()メソッドやonclick属性のイベントについて質問しました。 187票の回答があり「ret
Using Slots In Vue.js — Smashing Magazine
Slots are a powerful tool for creating reusable components in Vue.js, though they aren’t the simplest feature to understand. Vue’s slots take component-based development to a whole new level, and while in this article you will discover a lot of great ways slots can be used, there are countless more out there. Today, Joseph Zimmerman takes a look at how to use slots and some examples of how they ca
Vue.jsでアホなジェネレーターを作る勉強会をやると予想以上にガチになる
デイリーポータルZが「Vue.js勉強会」というWeb開発系のイベントを開催した。サイトを知っている人なら「え？あのデイリーが？なんでそんな真面目なイベントを？」と驚くかもしれない。 急に真面目なことをやりだすと、ヤンキー母校に帰る的な心変わりでもあったのかと心配になる。 僕自身がWeb開発の仕事をしているため「ふざけたサイトがやる勉強会なんて…」と最初は不安に思っていた。しかし、蓋を開けてみればエンジニア業務を擬似体験できるくらい内容のしっかりした勉強会だった。 大学中退→ニート→ママチャリ日本一周→webプログラマという経歴で、趣味でブログをやっていたら「おもしろ記事大賞」で賞をいただき、デイリーポータルZで記事を書かせてもらえるようになりました。嫌いな食べ物はプラスチック。（動画インタビュー） 前の記事：ドラクエに出てくる「やくそう」は現実だとどう使うのか専門家に聞く ＞ 個人サイト
普通のWebサイトをNuxt.jsで作り変えてみた話 | ARAKAZE NOTE
フレームワークはもはや流行りとか言うよりもひとつふたつは使っていて当たりまえ…みたいな雰囲気を感じる今日この頃ですが、受託制作で普通のWebサイトを作っていると普段の仕事では早々使う機会がないんじゃないかと思います。（僕だけですかね…？） Webサービスやゲームのように非同期で通信する要素があるわけでもなく、DBもなくページ内の物量も普通…そんな普通のコーポレートサイトやLPなんかを作るのにフレームワークはややオーバースペックに感じます。 ついでにクライアントから「ちょっとならHTML触れるから自分で更新します」と言われた日には開発環境の導入自体のハードルが高く、そもそもhtmlじゃないフレームワークの導入なんて出来ません。 今回はそんな風に「別に使わなくても仕事は出来るしなぁ」と腰が重かった自分が、自身のポートフォリオサイトをNuxtに作り変えてみた感想を書いていきます。 Nuxt.js
実践TypeScript - 内容のご紹介 -｜Takepepe
ここ最近、TypeScript の盛り上がりが本当にすごいですね。私ごとながら、昨年末からずっと書き続けていた TypeScript の技術書が、ようやく本日校了しました。Twitter で告知をしたところ、想像以上に反響があり驚いています。あれだけ高価な本、予約するには情報が不十分です。「買ってみたが期待はずれだった」という方が出ないよう、内容についてご紹介します。 対象読者もし皆さまが、体型的にアプリケーションを構築する術を身に付けたいと考えているなら、別途、書籍や文献をお求めください。本書は、JavaScript には存在しない、TypeScript 特有の知識を体系的に学ぶための一冊です。想定している対象読者は、ある程度 JavaScript でアプリケーションを作った経験がある方で、型の話がメインです。 本書の目的様々な事情から、TypeScript の現場導
How to build a large Vue application
The MVVM of the Observable model gives Vue a natural advantage in small and medium-sized Web applications, but with the growing popularity of Vue, Vue’s use in large projects is slightly awkward. Obviously, in high complexity projects, type checking has become a required feature, and Vue2’s type checking support in TypeScript is not good enough, and importantly the modular design of Vuex’s state l
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
