Vue

こんにちは。LayerX バクラク事業部 バクラク申請・経費精算チーム エンジニアの @tatane です。 最近10万円超えのヘッドホンを買ってしまい、しばらく離れていたオーディオ沼にまた片足を突っ込んでしまいました。 この記事は LayerXテックアドカレ2023 21日目の記事です。前回は @serima が「LayerXの発信の"のびしろ"とCasual Nightのウラガワの話」を書いてくれました。次回は同じチームの @upamune が「エラーログ祭り改善の話」を書いてくれる予定なのでご期待ください！ 今回はバクラク事業部で進めている Vue3 移行の話をご紹介します。 バクラクの…

インストール & 初期開発画面 npm init vue@latest # セットした内容 ✔ Project name: … vue-project ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router for Single Page Application development? … No / Yes ✔ Add Pinia for state management? … No / Yes ✔ Add Vitest for Unit Testing? … No / Yes ✔ Add an …

■Vueのローカル環境構築 npm install -g vue-cl グローバルにvue-cliをインストールする。 cd で作業ディレクトリに移動 vue init webpack [プロジェクト名] でアプリケーション作成用のコマンドを実行 実行すると色々質問されるが、基本全部enterでOK。一応注意して読む。 アプリケーションの作成が完了したので、 cd [アプリケーション名] でアプリケーションディレクトリに移動し npm run dev で仮想サーバーを立ち上げ http://localhost:8080 で問題なく表示されれば環境準備完了 ■githubのセッティング （Git…

■Nuxtのローカル環境構築 npm install -g vue-cl グローバルにvue-cliをインストールする。 cd で作業ディレクトリに移動 npm init nuxt-app <project-name> でインストール。 質問への回答の参照はこちら アプリケーションの作成が完了したので、 cd [アプリケーション名] でアプリケーションディレクトリに移動し npm run dev で仮想サーバーを立ち上げ http://localhost:3000/ で問題なく表示されれば環境準備完了 ■githubのセッティング （Gitの使い方を参照。Firebaseの前にやったほうがいい…

はじめに はじめまして！エキサイト株式会社で約1ヶ月間就業型インターンシップ(Booost!!! Excite Internship 2023)に参加させて頂きました大澤と申します。 今回は、私のインターンシップでの取り組みやインターンシップを通じて得た知識や学びについて紹介していきます！少しでも参考になれば幸いです！ はじめに 自己紹介 私なりのBB.excite事業部(以下、BB事業部)の紹介 そもそもブロードバンドって？ 光回線, プロバイダサービスについて その他関連するサービス展開について インターンで取り組んだこと APIの開発 管理ツールの新機能開発 インターンを通じて学んだこと…

概要 半年ほど前から、仕事でVue3を触っているため最新の動向をキャッチアップ & Vueへのモチベ向上を狙って東海地方から参加しました。 会場の様子 会場のお絵かきオブジェクト (正式名称忘れた) セッションの様子 全体を通しての感想 ※各セッションに対する感想はアーカイブや公開された資料に説明を託します。(アーカイブ動画も公開予定だそうです) OSSトップランナーはやっぱりすごい 今回はVue作者のEvan You氏が来日し、Vue Fesのトップを飾った。もちろんセッションは英語であるが、同時通訳もあるので言語の障壁はなさそう。 (またNuxtの作者やコアコントリビューターも来日していた…

フロントエンドの小林和弘です。 遂にオフラインでの開催となった Vue Fes Japan 2023 が今月末に迫っています。 2019 年は台風、2020 年、2021 年は新型コロナウィルス感染症による開催見送り、去年は感染予防のためオンライン開催となっていました。 2018 年以来、実に 5 年ぶりのオフラインカンファレンスです（めでたい）🎉🎉🎉 vuefes.jp メドピアは例年に引き続き Vue Fes Japan 2023 にゴールドスポンサーとして協賛しています。 （去年に引き続き、個人スポンサーもさせてもらいました） その他にセッションルームネーミングライツスポンサー、スペシャ…

初めまして。10月からGameWithのサービス開発部にジョインしたkimgwxです。 最近はダークソウルシリーズを立て続けにプレイしてメンタル強化を図っています。 今回はアドベントカレンダー7日目の記事として入社エントリーを投稿します！ qiita.com あまり技術の話は出てきません。サービス開発部の雰囲気を感じでもらえたらなと思っています。 自己紹介 私はフロントエンドエンジニア歴7年で、Web制作会社で色々なWebサイトの開発をしたり、メガベンチャー企業でECサービスのフロントエンド開発に携わったりしてきました。ここ最近ではTypeScriptやVue.jsを中心に扱っていました。 こ…

ホームページは Vue.js で作ってるけど だいたいこんな感じ <template> <div class="feed"> <table> <tbody> <tr v-for="item in sortedFeedItems" :key="item.guid"> <td> <p class="date">{{ item.pubDate }}</p> <p class="title"><a :href="item.link" target="_blank">{{ item.title }}</a></p> </td> <td> <a :href="item.feedLink" target="…

年の瀬ですね。クリスマスの足音も近く、ピザなんかを頼んだら景気が良いかなと思ったので、GitHub 上で Issues を生やすとピザが頼める仕組み（workflows）を構築してみました。本記事は mast Advent Calendar 2023 の 7 日目の記事です。6 日目は Hitoko T. 先生の記事「我が家に猫3匹がやって来た話｜Hiroko T.」でした。猫、癒やしですよね折角のアドカレの機会ですから、GitHub 上でピザを頼むまでの過程を、GitHub や Web 技術、ピザ等に明るい方にも、そうでない方にもお楽しみいただけるように説明*1*2を進めていきます*3。少し…

こんにちは。バクラク申請・経費精算チームでモバイルエンジニアをしている @_chocoyama です。社内のラジオ好きコミュニティに属しているのですが、自分の推し番組を紹介したところ誰にも刺さらず、コミュニティに属しているのにソロ活動している今日このごろです。 この記事はLayerXテックアドカレ2023の29日目の記事です、前回は Tomoaki さんが「バクラクのAI-OCRを支える性能モニタリングの仕組み #LayerXテックアドカレ - LayerX エンジニアブログ」を書いてくれました。 本日の記事では、Flutterアプリを開発している現在の私（以降、今オレ）と、iOSネイティブア…

こんにちはkubotakです。 弊社M&Aクラウドでは先日、Nuxt(v2系)のアプリケーションをSvelteKitへ移行を完了しました。 ※一部ページは諸事情によりNuxtのままですが9割以上が移行済み。 本記事ではSveltekitへの移行した理由や移行方法について紹介したいと思います。 Vue2系がEOLを迎える Vue.jsは現在3系となり、Vueをベースとして作られているWebフレームワークであるNuxtも現在3系が最新となります。 また、Vue.jsの2系は2023年12月31日*1に、Nuxtについても2系は2024年6月30日*2にサポート対象外になることが発表されています。 …

皆さんこんにちは！フルスタックエンジニアというよりどっちつかずの hikaru-kimi です！！ 早速ですが、Vue.js の store 管理はみなさんどうされていますか？ Vue.js の store 管理といえば、今や事実上開発が終了して久しい Vuex ではなく Pinia であるというのは広く人の知るところであると思います！ 今回は、Vuex と Pinia の差異や、Pinia の簡単な概要について今更ながらご紹介していきたいと思います！！ Pinia って何？ Vue.js 2系までは事実上の標準だった Vuex に代わる状態管理ライブラリです。Vue.js 3系からは事実上の…

ー Un homme vient d’être abattu rue Fortuny, à deux cents mètres du parc Monceau. Il paraît, d’après ses papiers, que c’est une assez grosse légume, un important marchand de vins en gros. (©Georges Simenon : Maigret et le marchand de vin; Chap.1er) 「モンソー公園から２００ｍほどのフォルチュニー通りで男が撃たれたところです。身分証によれば、どうもかなり…

この記事は 2023 年 12 月 6 日に投稿しました。 目次 はじめに Vuetify3 でチップの縦幅を狭くする(その3) おわりに (function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject=a; b[a]=b[a]||function(){arguments.currentScript=c.currentScript ||c.scripts[c.scripts.length-2];(b[a].q=b[a].q||[]).push(arguments)}; c.getElementById(a)||(d=c.createElement(f),d.…

こちらの記事はhacomono Advent Calendar 2023の6日目の記事です フロントエンドテックリードやってます. みゅーとんです. GitHub の hacomono-lib organization にて, OSS として TypeGuard 関数ライブラリを作っています. lodash を脱却したい思いで実装していましたが, ある程度実装が固まってきて, もうすぐ v1 をリリースできそうなので, 合わせてドキュメント化をすることにしました. さて,ドキュメント化フレームワークというと,最近ホットなのは astro のメタフレームワークである,starlight かなと思…

こんにちは。 アドベントカレンダー5日目です。 今年はフロントエンドまわりであれこれ開発することが多かったので、振り返りを兼ねてこれからフロントエンド開発を始める方向けに入門編としてお送りしています。 最終日の25日には何かアプリケーションができていることが目標です。 ↓最初から読み始めたい方はこちらか↓ devops-blog.virtualtech.jp これまでのおさらい 第1回では、Reactを使った開発環境の構築について学びました。 第2回ではtailwindcssを使ったUI開発、機能が増えるとコードの見通しが悪くなるので、コンポーネント化という手法について第3回で学びました。 第…

はじめに どうも、SST研究開発部の小野里です。 弊社は去る10月末、EASMサービスのβ版をリリースいたしました。あれから約1ヶ月ちょっと、ありがたいことに様々なお客様に試用いただきご好評を頂いております。 www.securesky-tech.com 思えば社内での開発開始からおよそ9ヶ月近くが経ったでしょうか。私は開発の割と初期から参加しており、主にフロントエンドの技術選定から実装までフロントエンド全般を担当していました（最近は開発メンバーが増えたのもあって私一人ではなくなりましたし、私もバックエンド等もやるようになりました）。当初はかなり手探り状態の中で進めてきた感もあるプロジェクトで…

面白法人カヤック技術部の谷脇です。私は元気です。 この記事は面白法人グループ Advent Calendar 2023の5日目のエントリーです。 というわけでこの記事では、現環境(私が取り組んでいる業務のこと)ベストの管理画面の技術選択について考えたことを書き連ねていきます。 前提知識 管理画面の定義 ここで読者と私の目線を合わせるため、この記事上での管理画面の定義をしておきます。 管理画面はサービスの運営上必要な操作やデータの閲覧をまとめたWebアプリケーションです。また、このWebアプリケーションは一般ユーザーには開放されておらず、サービス運営者側のみ閲覧と操作が可能となっている、とします…