どうしてもVimでVueの開発をしたかった話
はじめに これは、ストックマーク Advent Calendar 2022 11日目の記事です。こんにちは、ストックマークでAstrategyというビジネス向けSaaSについて、主にフロントエンドの開発を担当している@tsukkeeです。 昨年のAdvent Calendarの私の記事では、Vimを中心とした開発環境の記事を書いたのですが、今年はその環境をなんとか維持した話を書きたいと思います。 ちなみに、弊社はVimのほか、Emacs、IntelliJ IDEA、Cloud9、Visual Studio Codeを使うメンバーも在籍しており多様性があるのですが、最近デザイナーの方の中にNova使いの方がいることが発覚し、さらに混迷を極めています。そんな中最近入社された方の中にNeoVimユーザーの方がいて、Vim派が倍増(1人→2人)したという朗報もありました。 VimでVueを使ったフ
ngrokを使ってローカル開発中のVueアプリをHTTPSで公開する | DevelopersIO
開発中のVueアプリをHTTPSで公開したい Vueアプリを開発中は通常、以下の流れで開発すると思います。 yarn serve で http://localhost:3000 で起動 ブラウザで http://localhost:3000 を開く 以降、変更内容がホットリロードされる 通常はこの流れでスピーディに開発できますが、ある事情によりHTTPSとして立ち上げなければならない場合があります。 LIFF（LINE Front-End Framework）などLINE上で立ち上げたい場合 (例) HTTPSのみ許可されるブラウザで起動したい場合 そんな時は ngrok を使って、ローカルで起動しているアプリをHTTPSで公開しましょう。 導入方法 今回は vue create などでVueアプリを作成している前提で進めます。 $ vue create ngrok-sample Vueア
巨大化したSPAのフレームワークを少しづつVueに移行しはじめたお話
3行で 絶賛スケール中の Backbone.js 製 SPA を Vue.js に置き換えたい！ でも一度に全ては置き換えできない...。試行錯誤な工程とサンプルコードをご紹介！ 一緒に働くメンバーを大募集中！ はじめに こんにちは。株式会社ペライチ開発チームの関（@nekoneko_wan2）と申します。新潟からフルリモートで働いております🍙 。 今回はペライチのコア機能、フロントエンドの一大リファクタプロジェクトを開始したお話をご紹介いたします。実際に手を動かすフロントエンドエンジニアの自分自身が参考になる、と思えるような記事を目指して書いてみました。 同じ様な課題に直面している方、これから立ち向かおうとしている方、この記事が何かしらの役に立てば幸いです。 古く複雑化したコア機能 ペライチはサービス開始より ホームページを誰でもかんたんに作成できる機能 をコア機能として備えています（
メルペイフロントエンドのテスト自動化方針 | メルカリエンジニアリング
Merpay Advent Calendar 2021 の 8 日目はメルペイフロントエンドチーム の @tanakaworld がお送りします。 はじめに メルペイは金融サービスであり、品質の維持・向上に日々取り組んでいます。フロントエンドチームでは、約 2 年前からリグレッションテストの自動化に取り組み始め、直近の 1 年間はインテグレーションテストの自動化にもチャレンジしてきました。本記事ではメルペイフロントエンドチームに於けるテスト自動化の方針とその全体像について振り返ってみたいと思います。 フロントエンドプロダクトに関わるテストは次のものが挙げられます。これらをひとつずつ順番に見ていきたいと思います。 ユニットテスト インテグレーションテスト シナリオテスト リグレッションテスト テストの種類とそのカバレッジ対象 1. ユニットテスト ユニットテストは Jest を用いて、主に
ねこ限定のフォト共有サイトをつくったよ（Vue + SAM）
猫の写真だけをアップロードできて、かつその表示は毎回ランダムで一期一会、というフォト共有サービスをつくってみたという話。 技術要素は Vue3 (Vue Router、Vuex) AWS SAM (一部Terraform) GitHub Actions あたりです。 よければ一枚、あなたも置き土産していってくださいませ。 概要 こんなサイトです。 👉 YourCat 特徴は以下。 投稿できる写真は猫が写っているものだけ（機械学習でフィルタリングします） アカウント登録も写真へのコメントもなーんもいらないです 毎回サイト上に表示される猫は全登録写真からランダム→数が増えれば増えるほど二度目以降の再会は難しい…！ 本当に一瞬で使えるので、何か 🐱 写真をお持ちの方はとりあえず一枚だけでもお試しでアップロードしていってくださると嬉しいです～～～ 技術要素と所感 使用したもの、および雑感です。
話題の爆速CLIツール「Vite」をVue.jsの定番ツール「Vue CLI」と徹底比較！
はじめに 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型指定ができるように拡張されたAltJS（コンパイルしてJavaScriptにする言語）であるTypeScriptで活用する方法を説明しています。前回記事では、Vue.jsのプロジェクト作成や実行などができるCLI（コマンドライン）ツール「Vue CLI」の利用法を説明しました。 一方、Vue.jsのプロジェクト作成や実行ができるツールとして最近話題になっているのが「Vite」です。Vue.jsの作者であるEvan You氏とオープンソースコミュニティで開発されているこのツールは、「ヴィート」（フランス語で「高速」の意味）という名の通り、プロジェクト作成や実行をより高速に行うことを主眼に作られています。Vue.jsだけでなく、Reactなどさまざまな形式のプロジェクトに対
Vue2 / Vue3 でも Chart.js 3 を使いたい
本記事は vue-chart-js が Vue 3 及び Chart.js 3 に対応していなかった時代の代替策を紹介してますが、 vue-chart-js 4.0.0 からそれらがサポートされたため、多くのケースではそちらで十分となるため、本記事は非推奨になります。 Chart.js 3 は、 Canvas を用いたグラフ描画ライブラリとして人気の高い Chart.js の最新バージョンで、 2021年4月にリリースされました。 v3 は従来の v2 と比べ、以下のような大きな改善が行われています。 webworkers を用いた並列レンダリングなどによるパフォーマンスの劇的向上 細分化されたモジュールを必要十分に import することによるツリーシェイキングの有効化 moment など、日付操作用のライブラリへの依存の撤廃 CSSインジェクションの廃止 膨大な数のバグフィックス ただ
Vue2のプロジェクトをVue3へマイグレーションする
Vue 3が正式リリースされてから約1年が経過しました。 Vuetifyのリリース目標である2021年Q3も近づく中でそろそろVue3へのアップデートを検討されている方もいらっしゃることでしょうか？ この記事ではVue 2からVue 3への移行手順を記述していきます。 参考用のプロジェクトとして以下レポジトリを用意しました。 Vue 2からの移行を体験してみたい場合には、vue2-todo-appのタグにチェックアウトしてください。 移行ビルドを使用する Vue 2からVue 3へ移行するためのツールとして、公式から@vue/compatが提供されています。 @vue/compatを使用すると、Vue 2モードで動作するため、Vue 3で削除や非推奨になったAPIも一部の例外を除いてそのまま使用することができます。Vue3 で削除で非推奨になった機能は実行時に警告が出力されるようになります
【古い情報】Vue+TypeScriptをESLint+Prettierでなるべくコンパクトな設定でLint+整形する - Qiita
警告 この記事の情報は現時点では古くなっています。 ESLintとPrettierを組み合わせる場合、別の記事を参考にしてください。 例： Prettierの導入とESLintとの併用について 経緯については以下を参考にしてください。 Prettier と ESLint の組み合わせの公式推奨が変わり plugin が不要になった Vue+TypeScriptを使用したソースコードに対しESLintとPrettierを適用するにあたり、ESLint関連のパッケージそれぞれがどのような役割を持っているか調べてみると思ったよりもコンパクトな内容(plugins,parser,parserOptionsなどは指定しなくても大丈夫)でLint+整形が出来ることを確認できたため、最終的に確認できた設定と調べた内容を共有します。 動作確認はVSCodeで行っています。 事前に準備が必要なもの Vue3
【Vue3に向けて】viteのconfigを書いて、resolve aliasを設定する。 - Qiita
はじめに Vue3がRCになって速幾年、待ち遠しいですね。 私も今更ですが、Vue3を少しづつ試したり、viteを使ってみたりしてます。 vite、初めてHMRを見たとき、「え、本当にリロードされたの？」とびっくりしたのを覚えてます。 今回はviteでもwebpackのようにresolve aliasの設定の仕方を記事にしていきます。 やりたいこと src/components/*.vueを設定したい。 importする時に./components/Hoge.vueとかしない。 設定方法 viteには、vite.config.jsという、webpack.config.jsの様な設定ファイルを記述することでresolve aliasの設定をできます。 vite.config.jsに書ける設定は公式のこちらを見てもらうのが一番ですが、今回はresolve aliasの部分だけ抜粋して紹介。 公
Vue CLIのデフォルト設定からESLintのベストプラクティスを検討する | フューチャー技術ブログ
TIGの伊藤真彦です。 この記事はフロントエンド連載の3記事目です。 今回は愛用しているVue CLIを利用して、フロントエンドアプリケーションの詳細な設定について調査してみました。 はじめにプログラムを実装する上で、コードの書き方は絶対的な正解のないトピックとして存在します。 例えば、コードのインデントはタブなのか、半角スペースなのか、文字列リテラルを囲う記号は””なのか’’なのか、といった細かいルールです。これらのルールは、究極的には好みの問題で、正解のあるものではありません。 正解がない以上、コードを実装する際にどのようなフォーマットが正しいかを判断することは難しいです。言語によってはコード規約をプロジェクト、チーム、または会社単位で明記、時には社外に公開する事でこれらルールの混乱を防ぐ試みも存在します。 ちなみにフューチャーではJavaとSQLのコード規約を公開しています。 しかし
Vue.js: 環境変数の設定ができてない時にビルドを失敗させる | DevelopersIO
Vue.js 2, 3 でビルド時に環境変数の不備を検出したい時は、vue.config.js 内で環境変数の値の検証をして、値が正しくない場合は例外を発生させることでビルドと開発サーバーの起動の双方を失敗させることができます。 まとめ vue.config.js に環境変数が設定されていなかったら例外を throw する処理を書く yarn lint の時は環境変数が来ないので NODE_ENV が undefined の時は環境変数のチェックをスキップする vue.config.js 内で例外を発生させることで、ビルドと開発サーバーの起動のどちらも失敗させられる vue.config.js // yarn lint の時など、環境変数が来てない場合(NODE_ENV===undefined)はスキップ if (process.env.NODE_ENV !== undefined) {
Vue.jsのslotの機能を初心者にわかるように解説してみた | フューチャー技術ブログ
はじめにはじめまして。2017年入社の永井です。 東郷さんによる「Vue.js最初の難関、「props down, event up」を初心者にわかるように解説してみた」はご覧になられましたでしょうか？おそらくVue.js最初の難関は無事乗り越えられたと思います！ 今回は「Vue.js初心者にわかるように解説してみた」第二弾として、props down,event up と同様に親子関係が肝となる、「slot」について、初心者に向けて説明していきたいと思います。 slotとはslotとは親となるコンポーネント側から、子のコンポーネントのテンプレートの一部を差し込む機能 です。 スロットというと「スロットマシン」が思い浮かびますが、もともとslotの「差し込み口」という意味から派生して、コインの投入口があるスロットマシンの意味をもつようになったそうです。 以下では大きく3つ、デフォルトのsl
Vue.jsで最速に始めるCheetah Grid | フューチャー技術ブログ
はじめに2019年入社、TIG所属の吉野貴大です。 今回、記事を投稿することになったキッカケは、フューチャー発のOSSであるCheetah Gridを使用した業務システム開発に携わったことです。 また、Cheetah Gridの公式ドキュメントは英語のみで、現時点では日本語の解説記事が少ないこともあり、業務システム開発で使いやすいと思われるCheetah Gridの機能を紹介していきます。 内容Cheetah Gridの入門として、業務システム開発で利用する際のCheetah Gridについて、各コンポーネントの概要と簡単な使い方を実装付きで説明します。 細かいコンポーネントの属性や高度なコンポーネント（c-grid-layout-rowとc-grid-header）については説明しません Cheetah GridのAPIにはJavaScript版とVue.js版がありますが、Vue.js
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Vue2 Vue3 マイグレーション 令和最新 最強
スタートアップCTOがVue3とVue2の違い・Vue3の注目機能を分かりやすくまとめ🙌！Vue3の導入を悩んでいるなら必見です👀 | Ragate ブログ
【Vue】Vue Element Adminで簡単な画面を作ってみた - CARTA TECH BLOG
Garbage Base.
GitHub - slanatech/dashblocks: Enable Analytics in your Apps
セマンティクス | Vue.js