デコレータ使わない Vue.js + TypeScript で進んだ「LINEのお年玉」キャンペーン
皆さん、こんにちは。LINEでフロントエンド開発を担当しているUIT1室のシュウと申します。 今回、年に一度の企画「LINEのお年玉」キャンペーンにて JavaScript の部分を担当させていただきました。LINEのお年玉は多くのトラフィックが流れる大規模かつ短期間の企画となります。 技術的な挑戦をするためのプロジェクトとしてもちょうど良いサイズ感であったため、今回多くの挑戦を行いましたので、連載形式で紹介していければと思います。 初回である今回は、Vue.js と TypeScript を併用した開発についてです。 なぜ TypeScript を使うのか？ これまで LINE のプロジェクトでは、JavaScript をメインの言語としてフロントエンド開発を行ってきました。ですが、時代の流れもあり、現在では新規プロジェクトの多くが TypeScript を採用しています。 月並みですが
GitHub - vuejs/awesome-vue: 🎉 A curated list of awesome things related to Vue.js
Learn Vue 3: Step by Step on Laracasts Vuejs 2 Authentication Tutorial on Auth0 blog Create a GitHub File Explorer Using Vue.js on Scotch.io Vue.js Tutorial on Vegibit Vuex introduction video - James Browne from London Vue.js Meetup #1 Hybrid App Example with Laravel and Vue.js in Portuguese by @vedovelli Vue.js Introduction Turkish Language on oguzhan.in Vue.js VideoTutoral Series in Spanish (3-8
Vue.jsで独自の確認ダイアログ(confirm)をつくる - Qiita
WEBアプリケーションでユーザに意思を確認したいときはwindow.confirmが使われるかと思います。 しかし、window.confirm系で出せるダイアログはブラウザ依存なので、独自のスタイルを当てることができません。 無機質な確認ダイアログだと統一性がなくて悲しい気持ちになりますよね。 そこでVue.jsで独自の確認ダイアログを作成してみたいと思います。 実装方針 簡単に実装方針をまとめます。 メソッドはVueのグローバルミックスインとする 引数は表示するメッセージ 返り値は非同期で受け取る メソッドの結果はPromise<boolean> Vuetifyのv-dialogを使用する スタイルやアニメーションを考えるのが面倒なので コンポーネントは呼び出し毎に作成・破棄する 常に用意しておくことはしない bodyの末尾に追加 実装 上記の観点から確認ダイアログを実装します。 確認
「Vueコンサルが教えたくない７つの真実」を勉強してみた - Qiita
Vueの便利なテクニック７つ Youtubeで見つけたので勉強ついでにまとめてみる。 出展 Chris Fritz さん Youtube https://www.youtube.com/watch?v=7YZ5DwlLSt8 資料（Github） https://github.com/chrisvfritz/7-secret-patterns まとめ - 動画とはバージョン違い（英語） https://www.vuemastery.com/conferences/vueconf-2018/7-secret-patterns-vue-consultants-dont-want-you-to-know-chris-fritz/ Productivity Boost - 生産性向上 1. Smarter Watcher 元のコードはこれ。生成時になにかしてアップデート時にもなにかする。よくやる。
Vuex：mapStateの書き方8パターン+11サンプルコード - Qiita
VuexのmapStateは書き方にバリエーションがある。ここではできるだけ多くのパターンを紹介する。 まず、話を具体的にするために次のようなストアを前提にする。 const profile = { namespaced: true, state: { twitter: "@suin", facebook: null, text: "よろしく〜" } }; const user = { namespaced: true, state: { name: "suin" }, modules: { profile } }; const post = { namespaced: true, state: { title: "VuexのmapStateの書き方", tags: ["JavaScript", "Vue", "Vuex"] } }; const store = new Store({ s
Vue.js で XSS を作り込まないために気を付けること - セキュアスカイプラス
はじめに はじめまして、福岡オフィスで働いている前平です。 セキュアスカイ・テクノロジーでは、すでにいくつかのカテゴリのブログを発信していますが、技術を気軽に発信したり、エンジニアが普段の業務でどのような技術に触れているのかを紹介したりすることを目的として、新しく「エンジニアブログ」が立ち上がりました。 本記事では、最近になってようやく (汗) 検証した Vue.js でのクロスサイト・スクリプティング (XSS) について紹介します。 なお、本記事の内容は私見に基づくものであり、所属組織を代表するものではありません。 前提 本記事では Vue.js を使って XSS の脆弱性を作ってしまうようなケースを説明しますが、その他の JavaScript のライブラリ/フレームワークを使った場合でも同様のリスクがある可能性があります。 検証で利用したバージョン Vue.js v2.5.16 (サ
画像の遅延読み込みを「Vue-Lazyload」で 簡単に実装する | カバの樹
はじめに imageの遅延読み込みをするなら「Lazy Load」で、これはjQueryを使って実装するのが一般的だと思います。 対して、Vue.jsならどうしたら良いのでしょうか？ Vue.jsなら、「Vue-Lazyload」がオススメです！ 環境 vue.js : 2.5.8 Vue-Lazyload.js ：1.2.3 インストール 以下のnpm、CDNのどれか一つを使ってインストールします。 npm npm i vue-lazyload -S CDN <script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script> gitリポジトリは以下から取得できます。 https://github.com/hilongjw/vue-lazyload 導入手順 1. ライブラリの取り込み サンプルソースにはダミー画像（
VuePressはコーダーの夢を見るか。 - Qiita
Webサービス界隈の優秀な人たちが、フロントエンドの新しいツールを「最高！」と日々謳っている中、 底辺コーダーの我々はクライアントからの修正横目に 「ほーん。どうせ僕らの業務じゃ使えないんでしょ？」という冷淡な姿勢を貫き通していた。 しかし、興味がないわけではなかった。ReactやVueといったコンポーネント思考のフレームワークを駆使すればクライアントからの無理難題をスマートに解決し、家で有意義にダラダラする時間を手に入れる事が出来るかもしれない。そのような考えはいつも心の片隅にあったが目を背け続けてきた。 でもついにその時がきたかもしれない。VuePressがその夢を叶えてくれるかもしれない。 (タイトルはかっこつけただけで特に意味はないです。) 夢と苦悩 夢その1 Nuxt 夢その2 Gatsbyjs 夢その3 VuePressを使えるレベルにする。 開発のディレクトリ構成をいい感じに
Vue.js+d3.jsで折れ線グラフを描く - Qiita
Vue.js Advent Calendar 2016 11日目 まえがき Vue.jsと描画機能とd3.jsの計算機能を合わせて折れ線グラフを描いてみます。 d3.jsで直接描画してもいいのですが、せっかくなのでVue.jsで宣言的に描けたらな、と。 デモ デモ(jsfiddle) コード メインのコンポーネント <svg :width="width" :height="height" :viewBox="viewBox"> <my-line v-for="(line,index) in lines" :x-scale="xScale" :y-scale="yScale" :parameters="line" :index="index"></my-line> <horizontal-grid v-for="y in yTicks" :x-scale="xScale" :y-scale=
Laravel 5.4 と Vue.js 2.2 と JWTAuth で、ログインできる SPA アプリケーションのチュートリアル 1/4 - Qiita
Laravel 5.4 と Vue.js 2.2 と JWTAuth で、ログインできる SPA アプリケーションのチュートリアル 1/4JavaScriptLaravelJWTSPAVue.js Laravel 5.4 と Vue.js 2.2 と JWTAuth で、ログインできる SPA なTODOアプリを作ってみました。 結構本気で作りました。 Laravel + Vue.js はかなり作りやすく、サーバーサイドの処理が少ない＆分かりやすいので楽しかったです。 自分の記憶の定着を上げるため、チュートリアルを書きます。 JS初心者なので、おかしいところとかベストじゃないところが多々あると思いますので ご指摘頂けたら嬉しいです！ 作ったもの ソースコード デモサイト 目次 四部作です。 はじめに ← 今ここ 基本的な概念の説明 インストール Todoアプリ作成編 / サーバーサイド M
Vuex 入門 · Vuex
Vuex 入門 Vuex アプリケーションの中心にあるものはストアです。"ストア" は、基本的にアプリケーションの状態（state）を保持するコンテナです。単純なグローバルオブジェクトとの違いが 2つあります。 Vuex ストアはリアクティブです。Vue コンポーネントがストアから状態を取り出すとき、もしストアの状態が変化したら、ストアはリアクティブかつ効率的に更新を行います。 ストアの状態を直接変更することはできません。明示的にミューテーションをコミットすることによってのみ、ストアの状態を変更します。これによって、全ての状態の変更について追跡可能な記録を残すことが保証され、ツールでのアプリケーションの動作の理解を助けます。 シンプルなストア 注意: 私たちは、このドキュメントのコード例に ES2015 のシンタックスを利用しています。 もし触れたことがなければ、ぜひ触れてください！ Vu
Beginner Vue.js Tutorial with User Login
VueBeginner Vue.js Tutorial with User LoginLearn how to build a Vue.js application from scratch and add authentication. Look for the 🛠️️ emoji if you'd like to skim through the content while focusing on the build steps. In this article, you'll learn how to build a Vue website that will showcase events hosted by an organization. Users will sign in to view the details page of an event, so you'll al
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
An Easy Way to Detect Clicks Outside an Element in Vue
Vue.js 日本User Group | crash.academy
GitHub - alxpez/vuegg: dnd visual editor - mockups and code in one go!
Vue.jsのリストレンダリングとhtml5のドラッグ＆ドロップの実装 - Qiita
How to link img src to a rendered list · Issue #448 · nuxt/nuxt
Vue Fes Japan 2023
D3.js with Vue.js live examples
https://github.com/johnnynotsolucky/samples/tree/master/vuejs-d3
