スタディスト 技術支援ユニットの笹木 (@s_sasaki_0529) です。 2022年上半期、およそ500コンポーネントを持つ Vue 2 プロダクトである Teachme Biz を、半年間に渡る単独作業を経て、 Vue 3 に移行することに成功しました。 本記事では、私達がどのようにして、機能開発は止めずにバージョンアップや破壊的変更への対応を行えたのかを簡単に振り返ろうと思います。 昨年の TypeScript 移行の次のステップとして、今年は Vue 3 移行を実現することにより、相乗効果でのフロントエンド開発体験の向上を実現しました。 モチベーションTeachme Biz をVue 3 に移行するモチベーションは概ね以下になります。 モダンブラウザに合わせてリアーキテクチャリングされた Vue 3 の恩恵を受けることVue 2 への機能追加・改修が 2.7 で終了してしまった
スタディスト 開発部 技術支援ユニットの笹木 (@s_sasaki_0529) です。 2021年上半期、およそ6万行の JavaScript コードを TypeScript に置き換える作業を、半年間単独で行いました。 本記事では、機能開発自体を止めずに、どのように走り切ることができたのか、ふりかえりたいと思います。 なお、本記事の内容は、移行開始直後の登壇資料 “大規模 Vue アプリケーションの TypeScript 移行” と、移行完了後の登壇資料 “6万行の TypeScript 移行とその後” と重複する内容を含んでいます。 Teachme Biz と TypeScript弊社が開発している、マニュアル作成・共有システム Teachme Biz は、iOS/Android や Windows など、マルチプラットフォームで提供されています。 その中でも、作成・管理に多く使われて
技術で医療課題の解決を図るファストドクター。コロナ禍での負荷増大をスタートアップならではのスピード感で解決 - はてなニュース
新型コロナウイルスの感染拡大により、急激に需要が高まったMedTech分野。注目度が高まる中、医療機関と提携し、夜間往診と24時間対応可能なオンライン診療のプラットフォームを提供しているのがファストドクター株式会社です。代表かつ医師である菊池 亮さんと、共同代表を務める水野敬志さんがForbes JAPANの「日本の起業家ランキング2023」で1位を獲得したことでも話題を集めています。 患者数が増大した2022年7月の新型コロナ第7波では、リアルタイムで業務負荷が高まっているシステムの問題提起から開発、リリースまでを1カ月以内に完了させるなど、スタートアップならではのスピード感で開発に取り組んできました。 また2022年12月にはRuby on Rails中心の開発から、Vue.jsとNestJSを組み合わた新しい技術スタックを採用。加えてテック部門の組織再編も行いフロントエンドとバックエ
フロントエンドを Vue.js から React にリプレイスしたお話 (前編) - NTT docomo Business Engineers' Blog
はじめての方、はじめまして。久しぶりの方、お久しぶりです。 イノベーションセンターの何縫ねの。(@nenoMake)です。 普段の業務ではソフトウェアエンジニアとして Node-AI という WEB アプリケーションの開発をしています。 パブリックな活動としては、好きな言語である C# 関係の OSS 開発や技術ブログの投稿、登壇などをしています。 ですが、今回は C# ではなくフロントエンドのお話をします...! この記事では今まで Vue.js 2.x で開発されていた Node-AI の WEB フロントを完全に捨て去り、React にリプレイスしたお話をつらつらとしていきます。 まずは前編ということで、リプレイスプロジェクト発足時の課題感からはじめ、プロジェクトの進め方や選定技術などについてお話しします。 後編には内部の設計などのより技術的なお話をしたいと思います。では前編スタート
初めに Vue.js の学習をしているとよく「Vite」という単語を目にすると思います。 一体全体あれはなんなのでしょうか？？ なんだかよく分からないコマンドを打つと、いつの間にかプロジェクトが作成されていたり、 ファイルを編集するだけでブラウザで動くようになっていたりします。 そもそも読み方も良くわかりません 😵💫 (ヴィテ...？ ヴァイト...？) この記事では、Vite についての基本的な情報をまとめてみます。 発音？ 発音の仕方は「ヴィート」です。こちらは公式ドキュメントにも書かれています。 Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音）は、 しかし、実はこれにはやや表記揺れがあって、「ヴィット」と表記されているところもあります。 例えば、話題になった Kawaii ロゴではそのように表記されています。 まぁこれらはカタカナ表記の限界
はじめに 弁護士ドットコム デザイナーの林（@taka_piya）です。 弁護士ドットコム 案件管理システムでは、アプリケーションとUIの状態管理にXStateを用いたステートマシンでの管理を導入しています。 この記事では、UIデザインの考え方にステートマシンを導入し、実装まで一気通貫で行う方法と、そのメリットについて説明します。 はじめに UIは2つの要素からなっている ステートマシンを理解する 定義 状態遷移図 ステートマシンを使ったUIデザイン〜実装プロセス ステートマシンを定義する Figmaで表現する JavaScriptで表現する ステートマシンをアプリケーションに適用する UIデザインにステートマシンを導入するメリット 振る舞いに集中できる チームの共通認識として使える 変更に強い おわりに 関連ドキュメント ALPS-ASD UIは2つの要素からなっている Android
📝 require(moduleName) は同期処理なのに対して、import(moduleName)は非同期処理となります。 📝 tsconfig.jsonでesModuleInteropがtrueでないとdeafult importの意味合いは異なります。 この表はCommonJS ModulesとECMAScript Modulesで機能的に1対1で応するという意味ではありませんが、 大まかにはこの対応表にそってECMAScript Modulesの構文へと変換ができます。 エディターを使い手動で変換したり、次のようなツールを使ってある程度機械的な変換も可能です。 cjstoesm commonjs-to-es-module-codemod このモジュールの変換で重要なことは、できるだけCommonJS ModulesとECMAScript Modulesを混ぜないことです。
モダンなjQueryに挑戦してみよう
最初にこの記事を書いた時点では、jQueryでTypeScript, バンドラー, ES module, そしてmoduleを使ったビジネスロジックの分離を使ったものは現場で見たことはないと述べました。その後、これをすべて使っている現場があることも発見したので、本記事を修正しました。 用意したもの 例によって、デモコードをGitHubに公開しました。 今回作るのは下記のリンクにあるUIです。 電車の料金を計算するUIです 入力: ユーザが入力する項目 通常席かファーストクラスか 乗客の人数 割引率 出力: 画面で変化する項目 通常席かファーストクラスかのボタンの表示 単価 合計金額 jQueryが得意とするちょっとしたUIの動的アップデートではなく、ブラウザでステートとビジネスロジックを持たせるものを作っています。考えずに作るとスパゲッティーコード化しやすいものです。 複雑になりやすいUI
こんにちは。 jQuery から商業プログラミングに入門したやまゆです。 なぜ jQuery だと古い、ダメだと言われるのでしょうか？いいじゃん。 $.ajax で簡単にデータ引っ張ってこれるし、 $("#btn").click(function () { alert("押した！"); }); は誰が見ても何が起こるか一瞬で分かる Simple さがあるじゃん。なんでわざわざ React/Vue/Svelte その他 jQuery ではないライブラリを使わなければならないんでしょうか？ 100 億回言われてきたことだと思いますが、私なりに振り返ってみます。 手続き型 UI と宣言型 UI は、手続き型です。 btn という ID の DOM 要素を取得して、それらの(一応複数になる可能性があります)要素に対して click イベントハンドラを登録します。 この処理が実行される前と後では、
Vue.jsエコシステム動向2023
ReactJS: Keep Simple. Everything can be a component!
Tailwind CSSが私には合わなかった理由
ここ1,2年で、Tailwind CSSを使用する人が増えてきました。Tailwind CSSはユーティリティファーストのフレームワークで、いくつかのclassを組み合わせることでUIコンポーネントやレイアウトを簡単に実装できます。 Webデベロッパーによる、Tailwind CSSが私には合わなかった理由を紹介します。 Why Tailwind Isn't for Me by Jared White Tailwind CSSについて詳しく知りたい人は、以前の記事をご覧ください。 Tailwind CSSの便利な使い方、レイアウトやUIコンポーネント用のスタイルシートが簡単にまとめて利用できる CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得
2022/11追記： Nuxt 3 の stable リリースに合わせて新しく記事を書き直しました。 祝・正式リリース！5つのテーマで理解する Nuxt3 の魅力 上記の記事の方が最新の情報を詳しく網羅していますので、そちらを読んで頂くことをオススメします。 Nuxt.js バージョン3のPublic Betaが公開されて約2ヶ月が経ちました。 私自身この2ヶ月、プライベートでNuxt 3を触っているのですが、かなり気に入っています。 とにかく開発体験が向上していて、一言で表すと「開発していて楽しい」フレームワークです。あまりにも気持ちよく開発できるので、Nuxt 3が公開されてから明らかに睡眠時間が減っています。 ただ、実際に何が変わったのか、どんなところが良いのか、よくわからずにとりあえず様子見している方もいると思います。 Vue 3の目玉機能であるComposition APIはVu
Next.jsにおけるSSG（静的サイト生成）とISRについて（自分の）限界まで丁寧に説明する - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? この記事では、Web アプリケーションにおけるデータ取得（データフェッチング）やレンダリングに関する各手法について比較・整理することを目的として、特に最近注目度が高まっている **Next.js における SSG（静的サイト生成）や ISR（インクリメンタル静的再生成）、それ以外の手法（SSR、CSR 等）**を具体的なテーマとしてお話しします。 Twitter もやっているのでよかったらフォローおねがいします！ @_thesugar_ 記事内の解説は正確性を期すよう注意を払っておりますが、誤っている部分などがございましたらコメント欄や
はじめに こんにちは、株式会社マイベストでフロントエンドのテックリードをしているteppeitaです。 弊社が運営している mybest の技術スタックをVueからReactに移行したので、その時の話を共有したいと思います💪 mybestのフロントエンド紹介 まずはイメージしやすくするために、簡単にmybestのフロントエンドについてご紹介します。 フロントエンドの技術構成 - TypeScript - React - ApolloClient（APIがGraphQLです） - Storybook（VRTやinteraction testsを実行しています） - Jest - Cypress ↑少し前まで、ReactのところがVueでしたが、リプレイスしました。今回はその話です。 画面構成 mybestには、大きく分けて、フロント画面（一般ユーザーが見る画面）と管理画面が有ります。 その
前回のおさらい 前回の記事では、Reactに有利なベンチマークでUIライブラリに競ってもらいました。 こういうベンチマークに対しては、「実務では〜」みたいな反応が一定数出てくるのが自然の摂理です。 書きやすさランキング そこで、シリーズのまとめとして、より実務に近い指標として「書きやすさ」で競ってもらおうと思います。ただし、今回は筆者の独断と偏見によるランキングとなります。せっかく6つのライブラリで同じアプリケーションを書いたので、感想を記事にして残しておきたいという意図です。筆者と同じくReact脳の方にとっては参考になるかもしれません。 なお、前の記事を読んだ方はお分かりの通り、今回書いたアプリケーションはコンポーネントが何個かのものであり、React以外の知識は公式ドキュメントを一通り読んだ程度です。したがって、今回のランキングはコンポーネントの書きやすさに着目しています。大規模開発
JSXが嫌でReactを使わないならSvelteがあり、SvelteはゼロオーバーヘッドでVueより速い コンポーネントが作られたり消されたりするような場合一定の閾値でVueの方がバンドルサイズが軽くなる [Draft]VueとSvelteのサイズを比較検証した「vue-svelte-size-analysis」を掘っていく とはいえエッジケース 〇〇倍速いみたいなやつ、知覚したことない（フレームワークパフォーマンスを気にする前にやるべきことが沢山ある） ほぼラインタイムを消し去りたい、20kb未満のアプリケーションを作る必要があるとかだとSvelteは強そう https://zenn.dev/mizchi/articles/8a017097d3994ddc0a85 Next、NuxtのようなSSR/SSG用途で十分に使われてるようなフレームワークがまだない SvelteKit（Svelt
Vue 2 から 3 へ移行しようとしたらいちばん大変なのが Vuetify 2 から 3 への移行だった話 - Spacely Tech Blog
はじめに 株式会社スペースリー フロントエンドエンジニアの宮坂と申します。 ふだんは3Dビューアやその編集画面のDOM部分をReactやVueで書きつつ、たまにフロントエンド開発環境構築おじさんとして他チームへ出しゃばったりして生きています。 今回はその環境構築に関わるところ、Vue 2 から 3 へ移行しようとしたらいちばん大変なのが Vuetify 2 から 3 への移行だった話を書きます。 レガシーを生かしつつアップグレードする苦労話としてニッチに刺されば幸いです。 経緯と背景 Vue 2 のEOLまで1年を切って スペースリーはサービスインから6年以上経つこともあり、技術スタックはプロジェクトによって新しいものもあれば、今となっては古いものもあります。 リリースから日が浅いパノラマ変換3Dプレイヤーは2023年6月時点でエンドユーザー向けの部分がReact 18で、事業者向けの部分
ウェブの表現がリッチになるに従い、コーポレートサイトやキャンペーンページのような「普通のウェブページ」でもモーダルダイアログやアコーディオンといった、ちょっと凝ったUIを見かけることが増えてきました。こうしたUIが必要な場合、皆さんはどのように実装していますか？ 2023年3月にモーダルダイアログの実装について聞いたアンケートでは<div>で自前実装派とJSライブラリ利用派で回答が二分されました。 この記事ではリッチで使いやすいUIを実装するための選択肢として「ヘッドレスUI」ライブラリを紹介します。ヘッドレスUIライブラリも大きな括りでは「JSライブラリ利用派」に含まれますが、古くから定番のBootstrapやMaterial UI・Vuetifyなどとはちょっと毛色の違う存在です。 ヘッドレスUIとは？ BootstrapやVuetifyとは何が違う？ ヘッドレスUIとは「デザイン（見
Vue.jsは昨今よく使われるモダンなJavaScriptフレームワークの1つです。Node.jsで環境構築し、サイト全体をVue.jsベースで開発することもあります。しかし、フロントエンド開発に慣れていない方やデザイナーにはNode.jsでの環境は少し参入障壁が高いです。 実は、Vue.jsは<script>タグから読み込こめばNode.jsを用いずとも使えます。この方法ならばLP（ランディング・ページ）やWordPressサイトといったHTMLベースのサイトでもVue.jsを活用できるでしょう。本記事ではそのようなちょい足しVue.jsの活用例を、最新のVue Composition APIとESモジュールを使って紹介します。 Vue.jsをちょい足す HTMLに下記のようなコードを足すことで、Vue.jsを<div id="app">の要素内に導入できます。 <div id="app
2023年は Vue.js および Nuxt のアップデートがとっても活発な一年でした。 これだけ多くの、そして多様な進展があると、1年を振り返っておかないと何があったか忘れてしまいそうです。 というわけで Nuxt, Vue.js, Vite 関連の情報をピックアップして🏃♂駆け足で振り返ってみます。 （数が多かったので、おもに公式周辺のアカウントから告知されたものが中心です。漏れがあったらすみません。教えていただければ追加します） 🗓2023年1月 2022年の春先に正式に Vue.js 3 がデフォルトのバージョンとなり、2022年11月に Nuxt 3.0 がリリースされました。 年が明けて2023年1月の主だった情報です。 🔼Nuxt 関連 2023年1月17日に公開された Daniel Roe @danielcroe氏による公式ブログ記事 Nuxt: A vision
はじめに こんにちは、フロント歴7年目のエンジニアになります🙂 今回は日頃仕事でお世話になっているVue.jsに感謝の意を込めて、 Vueの素晴らしさを皆さんに少しでも感じて貰えたらと思い、この記事を投稿することにしました。 アゲアゲするとか言って 「どうせSFCが便利とか言いたいんでしょ？」 「script setupが凄く凄いとか言いたいんでしょ？」 ・・・いえいえ、そんな当たり前のことを話したいわけではありません。 もっと深いところの説明だったりをですね、 「いやでも最近のVue3はReactに似ているから、それならReactで良くね？」 全く良くないです はい、そういった人達にこそ見て欲しい内容となっております。 つまり私がVueが優れていると信じ使い続ける理由です。 それでは見てきましょう！ 1. fine-grained Reactivityであること 2. out of b
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog こんにちは、LINEの京都開発室でフロントエンド開発を担当している柴坂浩行です。 みなさんは仕事中などにパソコンで音楽を聴くことはありますか？ LINE MUSIC にはスマホアプリだけではなくWeb版アプリがあります。 私たちが開発しているWeb版アプリでは、JSフレームワークとして Vue.js を使用しています。 https://music.line.me/webapp/ これまでこのWeb版アプリには Vue2 が使われてきましたが、 2022年6月、私たちは Vue3 にアップグレードしたバージョンをリリースしました。 私たちのチームではWeb版アプリの機能開発と平行して、パフォーマンスの改善にも取り組んでいます。パ
本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。前回はVue.jsでコーディングするための基本的な記法を説明しました。今回はVue.jsの公式ブログから発信された「Vue 3をデフォルトバージョンにする」発表と、それに伴って、これまでと変わっていくVue.js開発の新常識を紹介していきます。 はじめに 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型指定ができるように拡張されたAltJS（コンパイルしてJavaScriptにする言語）であるTypeScriptで活用する方法を、順を追って説明しています。 本連載ではVue.jsの最新バージョンとなる「Vue 3」を用いてきましたが、実は
VueとViteで作るUIコンポーネントライブラリ ~デザインシステムとプロダクトの理想的な分離を目指して~ / 20241019_cloudsign_VueFesJapan2024_1
2024年10月19日(土)「Vue Fes Japan 2024」に開催された、弁護士ドットコム株式会社 クラウドサイン事業本部 フロントエンドエンジニア の辻 佳佑が登壇した際の資料です。 セッションタイトル：VueとViteで作るUIコンポーネントライブラリ ~デザインシステムとプロダクトの…
【Vue.js】今、ゼロから Vue を学び始めるならこうやるといいんじゃないか (2024) 【初学者向け】
【Vue.js】今、ゼロから Vue を学び始めるならこうやるといいんじゃないか (2024) 【初学者向け】 🤔 Vue.js って何から勉強すれば良いですか？ この疑問は Vue.js に限らず、多くの初学者の中でホットなトピックです。 すごく端的にこの問いに答えてみると、「好きにすればいい、正解はない！自分で考えなさい！」です。 これは確かにとても正しい意見[1]だと思いますが、そうは言っても初学者にとっては何から手をつけたらいいのかわからない状況が多いです。 と言うことで、上記のような前提は持ちつつ「まぁ、とりあえずこんな感じで良いんじゃないですかね(安牌)」と言う私(筆者)なりのアイデアを書いてみたいと思います。 ご参考までに 😙 それではスタート 💨 Vue.js の公式ドキュメント 「おいおい、急にハードルが高すぎるだろ...」 そう思った方も少なくないかもしれません。
Vue.jsにはOption APIやClass方式があり、Vue.jsバージョン3からはComposition APIも増え、さまざまな作り方があります。Vue.jsを基礎としているフレームワーク、Nuxt.jsも同様にNuxt Composition APIとしてNuxt.js用に拡張されたものがリリースされています。 さらにNuxt.jsには静的サイトジェネレートという強力な機能があります。Nuxtの静的化のための機能はOption APIで提供されていましたが、Composition APIでの使い方はあまり解説記事がありません。本記事ではNuxt Composition APIを使って静的サイトを生成する方法を解説します。 下記は実際にNuxt Composition APIで静的化したものと、非同期処理を比べたデモです。 サンプルを別ウィンドウで開く コードを確認する Nuxt
本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。初回となる今回は、簡単なサンプルを通して、Vue.jsとTypeScriptの概要と機能を紹介していきます。 はじめに Webフロントエンド開発の分野では、JavaScriptを利用して動的なWebページを構築できるライブラリーやフレームワークがいくつかあります。Googleが中心となって開発しているAngularやその前身であるAngularJS、Facebookが中心となって開発しているReactなどが有名です。 本連載で取り上げるVue.jsも、そのようなフレームワークの一つです。JavaScriptを利用して、データとWebページの内容を結び付けて（バインディングして）表示したり、Webページ
2021年のVue.jsは新しいVue 3のコアが安定し、開発環境からライブラリやコードの書き方まで、新しい発表の多い一年でした。ICSではすでに複数のプロジェクトでVue 3やVite等の新しいフレームワーク・ツールを使用していますが、まだまだ様子見という方も多いでしょう。 変化の大きいVue 3の周辺ですが、2021年11月のVueConf Toronto 2021（セッション動画）でようやく次の定番と言える構成がアナウンスされました。この記事では、Vite・cteate-vue・<script setup>・Piniaといった新しい推薦構成を紹介し、Vue 2時代から何が良くなるのかを比較します。 新しい構成は何が良くなる？ メリットを確認 新しい構成ではプロジェクトを作成する際のコマンドラインツールからVS Codeの機能拡張やコードの書き方まで、さまざまな部分が変わっています。個
11月16日、Nuxt 3 の初のstable版となる 3.0 がついに正式リリースされました！ Public Beta版が公開されてから約1年、RC版で様々な改善と機能追加が行われてきましたが、待望の安定版の登場です。 個人的にこの1年いろいろな機能を試してみた感覚として、Nuxt 3 はあらゆるフロントエンド開発者にオススメできる、非常に使いやすくて優れたフレームワークだと思っています。 Nuxt 3 は非常に多機能かつ巨大なフレームワークであり、「何が優れているのか」を一言で説明するのはなかなか難しいのですが、大きく5つのテーマに分けてその魅力を整理してみました。 まず冒頭に、テーマごとの「最低限これだけ知ってもらいたい！」という要約を載せてから、細かいポイントを解説していきます。 まずは忙しい人向けの要約だけでも読んでもらって、興味が出てきた方は続きを読んで頂ければ嬉しいです！ N
一休.com 宿泊管理システムのフロントエンド設計と改善の変遷 - Developers Blog - 一休.com Developers Blog
宿泊の管理システムについて 新しい管理システムについて 開発初期のフロントエンド設計 コンポーネントは4レイヤー方式を採用 UIのコンポーネントライブラリを採用 これ以上の設計、方針は決めなかった 初期ローンチ後の課題 改善した内容 1. コンポーネント設計の見直し ディレクトリ構成の変更 大きくなったコンポーネントの分割 Fragment Colocationを導入してコンポーネントのインターフェースとFragmentを整理 2. 業務処理（composables）の分割 3. 型安全に開発できるように厳しいlint設定に変更 4. 秩序を保てる開発体制、ドキュメントの整備 現在と今後 今後やりたいこと 改善を継続するためのポイント まとめ おわりに 宿泊プロダクト開発部の田中（id:kentana20）です。 このエントリーは一休.com Advent Calendar 2023の14
本連載では、Webページのユーザーインタフェース（UI）フレームワーク「Vue.js」と、Vue.jsを利用してWebページを作成できるフレームワーク「Nuxt.js」の活用方法を、サンプルとともに紹介します。前回は、Nuxt.jsの非同期データ機能について説明しました。今回は、Nuxt.jsを利用して作成したWebページをインターネット上に公開する方法を紹介します。 はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）フレームワークであるVue.jsに、Webページの作成に必要なUI以外の追加機能をまとめて提供するフレームワークです。 Nuxt.jsでは、作成したWebページをインターネット上に公開するための機能が提供されています。この機能を利用すると、Node.jsが実行できないWebサーバー向けに静的ファイルを生成できます。また、Node.jsが実行できるWebサ
静的サイトジェネレーター「VitePress 1.0」正式リリース。VueとViteを採用し、高速なWebサイトを構築
静的サイトジェネレーター「VitePress 1.0」が正式リリースされた。UIフレームワークのVueと高速なバンドラであるViteを基盤に、MarkdownのコンテンツからSPAなWebサイトを構築できる。 オープンソースとして開発されている静的サイトジェネレーターの「VitePress 1.0」正式版がリリースされました。 VitePressは、Markdownで記述されたコンテンツを静的で美しい外見を持つWebサイトへと高速に変換する機能を備えたフレームワークです。 デフォルトでテクニカルドキュメントに適したテーマが用意されており、すでにVite、Rollup、Pinia、VueUse、Vitest、D3、UnoCSS、IconifyなどのWebサイトのドキュメント部分に使われているとのことです。 VitePressは、同じく静的サイトジェネレーターである「VuePress」のモダン
Vite/VueでChrome拡張機能を作ってみる | 4. 環境構築/開発編 - くらげになりたい。
前回の続き。Vite/CRXJS/Vueで作るときの備忘録(*´ω｀*) www.memory-lovers.blog 使ったサンプルはこちらで公開中(*´ω｀*) github.com 環境構築 プロジェクトの作成 # viteでプロジェクトを作成 $ pnpm create vite chrome-extension-sample --template vue-ts $ cd chrome-extension-sample # .npmrcを設定 $ echo "auto-install-peers=true" > .npmrc # @crxjs/vite-pluginの追加。vite3はbeta版 $ pnpm add @crxjs/vite-plugin@beta -D manifest.jsonの設定 manifest.jsonが必要だけど、CRXJSでは.tsにも対応してる。
なんとなく自分の中で言語化しておきたかったので、整理も兼ねて記載しておきます🙆🏻♂️ 普段仕事で様々なAngular、またはReactのコンポーネントを作ったりメンバーから出るPRを読む中で、コンポーネントのスタイルはどういうふうに当てるのが破綻しにくいんだろうと考えていました🤔 Angularは良くも悪くも一つのComponentが結構おっきくなりがちだったのでそこまで意識しなかったですが、Reactは何なら分割しないと気持ち悪いとすら思えるくらいにコンポーネントを分割しやすいです。 コンポーネントを分割することは各ファイルごとに把握すべき事柄が減るので基本的にはいいことだと思っていますが、スタイリングについては意識しないと破綻してしまうなーと思っています。 （もちろん、スタイリングに限らず意識しないと破滅するんだけど、今回はスタイルについての話です） スタイルの破綻っていうのは
Vue.js 状態管理の選択肢 - そのVuex本当に必要ですか - / Vue.js State Management Options
iCARE Dev Meetup #19 2021/03/17
フリック操作に対応したスライダー・カルーセルを実装できるJavaScriptライブラリを紹介します。スマホのフリック操作だけでなく、デスクトップのクリックやドラッグ操作にも対応しています。 シンプルなHTMLで簡単に実装でき、Vue、React、Angularもサポート、単体でも動作するJavaScriptです。 Flicking Flicking -GitHub Flickingの特徴 Flickingのデモ Flickingの使い方 Flickingの特徴 Flickingはその名の通り、フリック操作に対応したスライダー・カルーセルを簡単に実装できるJavaScriptライブラリです。新しくなったFlicking 3はフレキシブルで、さまざまな拡張機能を備えており、無限フリック・フリースクロール・スナップ・バウンドをはじめ、異なるサイズのパネル、静止位置のカスタマイズなどもできます。
フロントエンド連載の6記事目です。 今年のゴールデンウィーク（STAY HOME週間）に最近話題のSvelteに入門したので紹介を書きます。 Svelteとはなんですか？ 公式のサイトはこちらです。有志の方々が日本語翻訳のサイトを作ってくれています。たいへんありがとうございます！ Svelteは主にブラウザ上で動作するユーザーインタフェースを作るフレームワークで、ReactやVue.jsの対抗馬的な存在です。 特徴とReactやVue.jsなどほかとの違い公式サイトでも、コーディングする際のコード量が少ないという特徴があげられています。 詳しくはこちらのブログに書かれています。コードが多ければ作業時間とバグが増えてしまうため、コードが減らすことはこれらの問題を減らすことができるというようなことが書いてありました。またブログには具体的なコードで量の差について書いていますのでぜひ見てみてくださ
<script setup> 構文とは Vue.js 3.2 から <script setup> 構文が使えるようになりました。これは単一ファイルコンポーネント(SFC)内で Composition API を使用している際に使える糖衣構文です。下記のようなメリットを得ることができ、公式からも使用が推奨されています。 ポイラープレートが減りより簡潔になる props と emit を定義する際に純粋な TypeScript の構文が使える ランタイムのパフォーマンスが向上する IDE のパフォーマンスが向上する 基本的な構文 <script setup> 構文をざっくりと説明すると、従来の Composition API における setup() 関数内部を <script> 直下に直接記述することができるという構文です。 単一ファイルコンポーネントの <script> タグにsetup属
Headless UI v1.0
Last fall we announced Headless UI, a library of completely unstyled, fully accessible UI components, designed to pair perfectly with Tailwind CSS. Today we’re super excited to release Headless UI v1.0, which more than doubles the amount of included components for both React and Vue. What’s new We’ve added four new components to the React library, and five new components for Vue. Dialog (modal) He
個人的に超便利な Chrome 拡張を作ってみたので紹介です。 作ったもの Chikamichi（近道）という閲覧履歴・ブックマーク・タブを横断的に検索し移動できる Chrome 拡張です。 機能
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
機能開発を止めずに、500コンポーネント規模の Vue 3 移行を完了させた開発プロセス
機能開発を止めずに、6万行の TypeScript 移行を完了させた開発プロセス
Vite ってよく聞くけど何なんですか？ あれは
UIデザインにおけるステートマシン - 弁護士ドットコム株式会社 Creators’ blog
インクリメンタルに新しい技術を取り入れる方法。TypeScriptへの移行を例にしたプロセス
何故 jQuery ではなく React/Vue/Svelte が流行するのか？
Nuxt 3 を今すぐオススメしたい 15 のポイント
VueをReactにリプレイスしてEasyからSimpleにした話
React脳によるUIライブラリ書きやすさランキング - Qiita
2021年現在Vueを選択すべきでないと思う理由 感想
ウェブ制作にも便利！React & Vueで始めるヘッドレスUI - ICS MEDIA
HTMLにちょい足しでできる！ Vue.jsでサクッと動きをつける方法 - ICS MEDIA
Vue.js と Nuxt の 2023年まとめ
Vue3をアゲアゲ↑↑する記事 - Qiita
LINE MUSIC のパフォーマンスを向上させた Vue3 マイグレーション
Vue.jsの世代交代が到来！ Vue 3デフォルト時代の「Vue.js開発新常識」
API通信一切なし！Nuxt Composition APIで作る完全静的サイト - ICS MEDIA
「Vue.js」入門～JavaScriptフレームワークをTypeScriptで学ぼう
2022年の最新標準！Vue 3の新しい開発体験に触れよう - ICS MEDIA
祝・正式リリース！5つのテーマで理解する Nuxt3 の魅力
「Nuxt.js」で作ったWebページをインターネットで公開する方法
ReactやAngular、VueなどでComponentのスタイリング時に抑えておきたいこと
これなら簡単！フリック操作に対応したスライダー・カルーセルを実装できるJavaScriptライブラリ -Flicking
Svelteに入門した | フューチャー技術ブログ
【Vue.js 3.2】`<script setup>` 構文がすごくすごい
閲覧履歴・ブックマーク・タブを横断的に検索し移動できるChrome拡張を作ってみた
mainichi.jp
news.yahoo.co.jp
posfie.com
www.as-web.jp
tabelog.com
posfie.com