dummy GA 新しいURLに転送しています… https://stockmark-tech.hatenablog.com/entry/2021/10/01/120000...
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
VueConf USでのさまざまな発表 今年の3月に VueConf US が開催されました。最近になってビデオが公開されて初めて知ったこともあるので本記事ではその紹介をします。 いろいろ面白いトピックがあるのですが、特にVueコアチームのGuillaume Chauさんによるパフォーマンス改善テクニックはまじかーという感じだったのでここにまとめたいと思います。 "9 Performance Secrets Revealed with Guillaume Chau" プレゼン動画: http://www.youtube.com/watch?v=5B66qer8cZo スライド: https://slides.com/akryum/vueconfus-2019#/ デモサイト: https://vue-9-perf-secrets.netlify.com ソース: https://githu
最終更新日: 2019年3月29日 すべてのアプリケーションは、小規模から大規模の障害を理解する必要があるところまできました。このレシピでは、ブラウザでアプリケーションのデバッグをしたいと考えている VS Code ユーザーのためにいくつかのワークフローを説明します。 このレシピでは、ブラウザで実行している Vue CLI アプリケーションをデバッグする方法を示します。 注意: このレシピは Chrome と Firefox を含みます。もしあなたが他のブラウザで VS Code のデバッグを設定する方法を知っている場合、あなたの知見を共有することを検討してください (ページの下部を参照してください)。 前提条件VS Code とあなたが選択したブラウザがインストールされていることと、ブラウザに対応するデバッガの拡張機能がインストールされ有効化されていることを確認してください: Debug
Vue を使っていてウィンドウのリサイズを検知するには、Vuetify というコンポーネントフレームワークの v-resize というカスタムディレクティブが便利です。 <template> <span v-resize="onResize">{{ windowSize }}</span> </template> <script> export default { data: () => ({ windowSize: { x: 0, y: 0, }, }), mounted () { this.onResize() }, methods: { onResize () { this.windowSize = { x: window.innerWidth, y: window.innerHeight } }, }, } </script> このように、テンプレートで v-resize に発火し
株式会社ラクスが開催するエンジニア向けのイベント「RAKUS Meetup」。今回は「Vue.js、React、TypeScript、E2Eテスト」をテーマに、「楽楽勤怠」の機能開発を担当する北嶋初音氏が登壇し、「Vue.js + TypeScriptによる新規サービス開発の振り返り」という内容で話をしました。関連資料はこちら。 会社初のフロントエンドエンジニア 北嶋初音氏(以下、北嶋):では、「Vue.js + TypeScriptによる新規サービス開発の振り返り」と題して、UI開発課の北嶋初音が発表を始めたいと思います。 まず軽く自己紹介します。名前は北嶋初音と言います。経歴ですが、2016年の4月からWeb系のITベンチャーに新卒入社しまして、Webエンジニアとしての経験を積みました。次は自社サービスを作っている会社で働きたいという気持ちがあったので、転職活動を始めて、今年の1月から
はじめに この記事では、「既存プロジェクトをとにかくVue3へ移行して元通り動くようにする」が目的です。 「Composition APIで書き換える」といったVue 3の新機能への移行を紹介するものではありません。 公式のマイグレーションガイドはこちら: https://v3.vuejs.org/guide/migration/introduction.html#quickstart 執筆時点ではVue3.0.0ですが、ここに書く問題は以降のバージョンで解決している可能性もあります。 もしお気づきの際はコメントいただけると幸いです。 雑感、設定やプラグイン周りで新しい仕様に合わせなければいけないところがありますが、コンポーネント資材は大部分がそのまま動作すると思います。 1日2日もあればとりあえず動作するところまでは持っていけるかと思います。 追記 2020/09/26: ドキュメントか
Vue Composition API によって Vue.js にも React Hooks のようなロジックの再利用性の高い開発体験がもたらされようとしています。 しかし、まだ「Composition API の良さをわかっていない」という方や「Composition API をうまく利用した書き方がわからない」という方も多いかと思います。 本記事では Composition API 時代の便利ライブラリ VueUse を用いた実装例や、 VueUse 自体の実装がどのようなものか紹介します。 Composition API の良さや雰囲気もキャッチアップしていただければ幸いです。 VueUse とは? VueUse は Anthony Fu さん1が中心に開発しているライブラリで、Composition API を用いた便利系関数を数多く集めたライブラリです。 例えば、ブラウザ上のマウ
こちらに移行しました。(2020/05/16) 概要 Vue.jsで作成されたプロジェクトを紹介しているサイト 「made with vue.js 」があります。 面白くて役立ちそうなツールやサービスをまとめてみました。 UIコンポーネント VueSocial ソーシャルサービスのボタンを作成するVueのコンポーネント CKEditor 5 リッチテキストエディタのコンポーネント Vue.Draggable ドラッグ&ドロップのコンポーネント Vuetable 2 データテーブルのコンポーネント。demo vuejs-datepicker vueのdatepicker Kalendar Vueのカレンダーコンポーネント Vue Apexcharts SVGベースのグラフ可視化コンポーネント Vue.js Google Charts VueのGoogle Charts vue-cart ショ
「JX通信社Advent Calendar 2019」7 日目の記事です。昨日は、鈴木(泰)さんの「CodePipelineを用いたLambdaのデプロイについての所感」でした。 フロントエンドエンジニアの渡辺です。今回は社内の管理画面のUIの話です。 はじめに 管理画面、特に社内向けの画面を作る際は、プロダクト側とは少し事情が異なり、 それぞれのコンポーネントのデザインにあまりこだわらない 機能面や、使い勝手の優先度が高い などの事情があります。なので、UIとしては、「このフレームワークに乗っかっておけばコンポーネントが揃っている」という状態が理想です。 JX通信社の管理画面はVue.jsを使っているケースが多く、その際のUIフレームワークにはiViewを使っています。 特徴 基本的にデザインがシンプル カスタマイズできる項目が多い 少し特殊な用途(無限スクロール、ツリー構造のチェックボ
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を使用したアプリケーションでのWeb API呼び出しのデザインパターンについて調べてみました。 しかし検索して出てくるチュートリアルやサンプルは、コンポーネント内でaxiosをインスタンス化していたり、Vuexの中でaxiosを使用するというサンプルがほとんどでした。 しかし実際のプロダクトでこれをしてしまうと コンポーネント内でAPIアクセスの直書きによって単体テストが困難に Vuex(actions)の肥大化(使い回さない処理はStoreに記述しないほうがいいとする文献もある) API通信部分をPureJSでモジュール化しても依存度がイマイチ下がらない(コンポーネントでモジュールをインポートするため)。 などなど問題になることが多そうでした。 ある日、Jorge氏が投稿した「Vue API calls in a smart way」という記事にたどり着きました。
github https://github.com/ebatetsu/firebase_vue_chat Firebaseプロジェクト作成 https://console.firebase.google.com/?hl=ja ここからプロジェクトを作成 Vue.jsの開発環境構築 Vue CLIを使用するのでインストール $ npm install -g vue-cli 任意のディレクトリでプロジェクトフォルダ作成 $ vue init webpack [project_name] とりあえず全部EnterでOKです。 ディレクトリ移動 $ cd [project_name] パッケージをインストールする $ npm install sassで書きたかったら $ npm install sass-loader node-sass --save-dev ローカルサーバー起動 $ npm ru
Firebaseは、Googleが運営しているBaas(Backend as a Service)です。最近人気のサーバレスアプリケーションが簡単に作れることで有名です。ちなみに「サーバレス」とは、別にサーバーを使わないという意味ではなく、サーバーを意識しないで開発できることを言います。 今回、Firebaseの知見がだいぶ集まってきたので、今までで勉強になったサイトや記事などをまとめました。ちなみに、私がフロントエンドをVue.jsで構築しているため、Vue.jsよりの情報になっているのでそこは気をつけてください。 Firebase公式ドキュメント Qiita 個人ブログ 書籍 ドットインストール(動画) まとめ Firebase公式ドキュメント https://firebase.google.com/docs/guides/ いきなりのド直球ですが、この公式ドキュメントを見なくては始ま
まさあき(@masaaakikunsan)です。 最近よく、「Storybookを導入しよう」「Storybookがいい」と言う話は聞きますが、意外となぜ必要なのか、どう使うのか、という記事がみつからなかったので、基本的な使い方をサンプルと共に紹介します。 TL;DR StorybookでUIコンポーネントのカタログを作ることができる カタログのおかげでデザイナーと認識の齟齬が生まれなくなる アドオンを追加するとStorybookがかなり便利アイテムになる Storybookとは ざっくり言うとコンポーネントのカタログです。 コンポーネントライブラリの参照ができ、各コンポーネントの様々な状態の表示などができるものとなります。 また、アプリ外で実行されるため、UIコンポーネントを単独で開発でき、コンポネの再利用、テストの容易性、開発スピードを向上させることができるのが魅力です。 Storyb
ボストン・レッドソックスの皆さん、世界一おめでとうございます!*1 野球ってほんと面白いですね、こんばんは野球エンジニアです.*2 このエントリーでは楽しい野球技術、Vue.jsとDjango(Django REST Framework、以下DRFと略す)の話をサクッと書きたいと思います. なお、このエントリーは先日開催されたPyLadies Tokyo - 4周年記念パーティのLTでやったことの自分メモをブログにしたものです.*3 元ネタ PyLadies Tokyo - 4周年記念パーティのLTで話した内容がベースです. speakerdeck.com DjangoとVue.jsそしてOhtani-San - Pythonで二刀流しよう #PyLadiesTokyo 4周年 TL;DR 複数カテゴリのデータをSPA + REST APIで扱うなら、最初からHATEOAS(Hyperme
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く