ページ上のあらゆる要素をドラッグ・リサイズ・スケール・回転・ワープ・グループ化・スナップ操作を可能にする万能JavaScriptライブラリ -Moveable
ページ上のあらゆる要素をドラッグ・リサイズ・スケール・回転・ワープ・グループ化・スナップ操作できるようにするJavaScriptライブラリを紹介します。 単体で利用でき、React, Preact, Angular, Vueにも対応しています。 Moveable -GitHub Moveableの特徴 Moveableのデモ Moveableの使い方 Moveableの特徴 Moveableはページ上のあらゆる要素をドラッグ・リサイズ・スケール変更などを可能にするTypeScriptで実装されたライブラリです。MITライセンスで、商用のプロジェクトでも無料で利用できます。 Draggable ターゲットをドラッグおよび移動する機能 Resizable ターゲットの幅と高さを増減する機能 Scalable ターゲットのx軸・y軸のスケールを増減する機能 Rotatable ターゲットを回転さ
Vue.js(SPA)でhead要素のtitleとdescriptionはページ別に設定しよう【SEO対策】 - かとのぼのマイコード・マイライフ
Vue.js(SPA)でサイトを作るときは、head要素をページごとにちゃんと設定しないと、グーグルの検索画面になかなか載らないため、対策が必要です。 SPAでサイトを作るとhead要素がページごと変化しない問題 Vue.jsでhead要素titleとdescriptionの変更する方法 規模が小さいサイトなら、各ページmounted SPAでサイトを作るとhead要素がページごと変化しない問題 SPA（シングル・ページ・アプリケーション）は、その名前の通り、一つのHTMLのページで、まるで色々なページに切り替わっているように見せる技術です。ページの遷移も早く、作りやすいです。 しかし、実際はページが切り替わっていないため、別のページに移動しても、何も設定をしないとhead要素は変わらないままです。 これがとても問題で、ページごとにhead要素が変わるように対策をしないとグーグルの検索にな
何がjQueryを負債たらしめているのかを考察する | yamanoku Advent Calendar 2023
何がjQueryを負債たらしめているのかを考察する この記事はyamanoku Advent Calendar 2023の12日目の記事になります。 現代のフロントエンド技術的負債の要因となっているものはいくつかあると思いますが、その中でも共通で「jQuery」が挙げられるかなと思っています。長期間運営されているサービスであればまだまだ現役なのではないでしょうか？かくいうウチもそうです！ 2023年現在でのフロントエンド開発であれば今は新規でjQueryを選択肢としてあげることはほとんどないと思っていますが、今よりもJavaScriptのサポートが貧弱だったころ、かつてのブラウザ間の齟齬を吸収する点で大変重宝されていたようです。 JavaScript自体が進化してきたのもあり、jQueryでできた表現が単体のJavaScriptとWeb APIとで表現できるようになってきている1ので
ANDPADフロントエンドエンジニアの小泉です。 昨年の夏頃、担当したプロダクトで新規リポジトリでの開発を立ち上げる機会があり、Nuxt 3 を用いて構築を行いました。 アップデートではなく新規で Nuxt 3 サイトを構築するのは業務としては初めての経験だったのですが、Vue 3・Nuxt 3 の様々な機能によって、型安全な状態を保ったまま快適な開発を進められ、かつ3ページの全体実装を約7営業日で形にすることができました。 この記事では、「いま新規サービスのゼロからの立ち上げにNuxt 3を選択するとどんな嬉しいポイントがあるのか」という実例をご紹介できればと思います。 担当したプロダクトについて ANDPAD資料承認 | 製品のご紹介 2023年10月にリリースされた「ANDPAD資料承認」という、資料の申請・承認を一元管理する機能のフロントエンド開発を担当しました。 ただし、紹介サイ
台風がVue Fesを直撃する勢いで向かってきています。 参加者の方にカンファレンスを楽しんで頂きたい気持ちはもちろんですし、スタッフも多大な労力をかけてタフな調整を続けてきた方ばかりなので、報われるような結果になることを祈るばかりです。諸々の事情は公式記事で詳しく書かれています。 私は発注したりなんだりする係の一人なので、色々と気が気ではありませんが、台風が空気を読んでくれると信じて準備を進めています。笑い話で済みそうな感じになったときに詳しく書ければいいなーと思います。 UPDATE: 2019/10/11 中止が発表されました。開催を楽しみにしてくださった皆様に多大なご迷惑、ご心配をおかけしましたことを心より深くお詫び申し上げます。 一方でDenoは明るい話題しかないわけで、癒やしになっています。 DenoでJSXが実行できるようになったよ react勢みて、denoでtsx直接実行
処理の共通化とコンポーネントの分割/分類/粒度について
じまぐ @nakajmg Frontend Engineer at PixelGrid Inc. + 副業 （元DMM.comラボ 7年前？
技術について思っている印象とかを、定期的にまとめておくとあとで見直したときに良い振り返りになるかもしれないなと思ったのでまとめておく。 上記の目的でやるので思い切り主観で書く。 Vue について思うこと composition-api がとてもいい。 composition-api で頑張るなら React 使えよみたいな意見を耳にしたことがあるが、Vue の良いところは、template と style が JS と別個で動くというところだと思っているので、composition-api の前身である Option API が改善したところで、React と比較してどうこうみたいな見解の変化はない。 Vue を使っている限りは、基本的には CSS in JS 戦争に巻き込まれないので平和。 Vue3 をまださほどキャッチアップしていないので適当な意見になるが、SFC の書き方自体が結構変
![[ポエム]VueとReactとCSSについて思うこと2021/1月版](https://cdn-ak-scissors.b.st-hatena.com/image/square/c5b1a7d33962fdef07ef6cb7b48fb4f1fd91dbdf/height=288;version=1;width=512/https%3A%2F%2Flh3.googleusercontent.com%2Fa-%2FAOh14GjOZkrZMgKwcEyykl5_iULVEVkUUJd793r9_z8DF4s%3Ds250-c)
こちらは、Webアクセシビリティ Advent Calendar 2019 の２１日目の記事です。 Vue.js 開発における Web アクセシビリティ対応にまつわる内容となっております。（英訳記事） この記事は公開から１年以上が経過しています。内容が一部古い箇所があります。 自己紹介 大山奥人（おおやまおくと）と申します。ネット上では、おおやまみちのく、yamanoku と名乗って活動しています。 制作会社の Web デザイナーとして働き出し、株式会社GEEK でマークアップ・フロントエンドエンジニアとして従事した後、2019 年 10 月から株式会社クラウドワークスに在籍しております。 役職は UX エンジニアです。個人ではアクセシビリティ啓蒙も行っています。 著書 これからはじめるwebアクセシビリティ 技術書典で「これからはじめるwebアクセシビリティ」という技術同人誌を発表しまし
OpenAPI Generator + TypeScript で始める自動生成の型に守られた豊かなクライアント生活 | GiFT（ギフト）株式会社
OpenAPI Generator + TypeScript で始める自動生成の型に守られた豊かなクライアント生活2020.02.28 OpenAPIをドキュメントだけでなく、Schema firstな開発に利用しようということで、TypeScript + OpenAPI Generatorでフロントエンドの開発をしました。 Vue, Nuxtで使う際の例と共にその内容を紹介します。 目次OpenAPIでドキュメントを書くメリットなどOpenAPI GeneratorでClient情報を吐き出すVue, Nuxtで利用するAPIの変更に追従しやすく、型もあるし幸せOpenAPIでドキュメントを書くメリットなど弊社では以下のブログでも書いているように、API仕様のドキュメント化にOpenAPIを活用しています。 committee×OpenAPI×RailsでスキーマファーストなAPI開発O
本エントリは2021年8月30日に開催されたNode学園 37時限目 オンラインにて、「Vue 2で大きなデータを扱うときの性能改善手法」というタイトルで発表させていただいた内容をテックブログ記事化したものです。発表当日の様子はYouTubeにアーカイブで公開されておりますので、そちらも合わせてご覧いただけましたら幸いです。 はじめにストックマークでは、法人ユーザー向けに「Astrategy」というウェブサービスを開発・提供しています。Astartegyの詳細や技術的な全体構成についてはAstrategyを支える技術: gRPC, Elasticsearch, Cloud TPU, Fargate… SaaS型AIサービスの内側の世界というエントリで紹介しておりますのでそちらを参照いただくとして、本エントリではAstrategyのフロントエンドを構築する上で重要である性能改善手法について紹
はじめに こんにちは、レストランボード（以下、RB）のフロントエンドチームの石亀です。担当していた規模の大きめなプロジェクトでVueを結構触っていまして、設計含め困難と向き合いながら色々取り組ませてもらったのでそれをナレッジとして残そうと思い記事を書くことになりました。エモいですね。 RBは現在自社のフレームワークで構築されていて、徐々にVueでリプレイスをかけています。 今回、大規模なプロジェクトにてVueでさらなるリプレイスを実行しましたが、プロダクト自体がとても大きく且つ限られたリソースの中でいかに負債化させずにできるだけ安全に移行させるかを検討しました。 そこで実際に実施した施策や検討内容などを紹介します。 おそらく、多くのサービスやプロダクトで既存のコードを新しいライブラリ・フレームワークで書き換えているかと思います。 背景だったり関わる規模・コンテキストが異なるとは思いますが、
eslint-plugin-vue で来たる Vue.js 3 のリリースに備えよう - BASEプロダクトチームブログ
フロントエンドチームの右京です。 Vue.js 3 が八月上旬にリリース予定ということで、BASE でもバージョンアップに向けて少しづつアクションを始めています。 Vue.js 3 では多くの機能が追加され開発の幅が広がりますが、一方で削除や非推奨となる機能も多く頭を悩まされている方もいるのではないでしょうか、BASE もそうです。 この記事では ESLint とその Vue.js 向けプラグインの eslint-plugin-vue を利用した、deprecated となる機能へのアプローチを紹介します。 なぜ eslint-plugin-vue か ESLint には Vue.js の SFC のためのプラグインとして eslint-plugin-vue が開発されていて、BASE でもこれを利用しています。 このプラグインには vue/no-deprecated- で始まるルールがい
ほぼ独学・未経験者がモダンな技術でポートフォリオを作ってみた【Rails / Nuxt.js / Docker / AWS / Terraform / CircleCI】 - Qiita
ほぼ独学・未経験者がモダンな技術でポートフォリオを作ってみた【Rails / Nuxt.js / Docker / AWS / Terraform / CircleCI】RailsAWSCircleCITerraformNuxt はじめに こんにちは! akiと申します！ 当記事はほぼ独学・未経験者がモダンな技術でポートフォリオ（以下PF）を作ってみたので、ご紹介させて頂きたいと思います。 昨今、未経験者がモダンな技術を使用して作成した、PFの作成記事も多く存在するので、何番煎じかにはなってしまいますが、この記事も同じ初学者の方の参考になれば幸いです。 自己紹介 私は22歳・高卒で、現在(2021年3月時点）も工場で製造の仕事を続けております。 そんな私ですが「Webエンジニア」という職種に興味を持ち、2020年4月よりプログラミング学習を開始しました。 今回紹介するPFの作成期間は約3ヶ
大規模アプリのVue3アップデート対応知見まとめ
はじめに 今参加させてもらっている案件でついにVue3へのアップデートが完了したので、知見をまとめていきます！ 僕1人だけではなく、チームでやったので多少曖昧なところもありますが、そこはご愛嬌でお願いします。 マジで一年くらいかかりました。笑 ちなみにこれを全てやれば完璧にVue3対応出来るわけではなく、あくまでこのプロジェクトで躓いた知見を書いているだけでですので、実際に上げる場合はしっかりと公式ドキュメントを確認してください。 特に移行ビルド系は執筆時点で確認していたら、かなりリリースされていたので是非確認してみてください。 前提 新規機能の開発は止めない Options APIからComposition APIへの書き換えなどはしない 特にいつまでにアップデートなどの期限は設けない マイグレーションビルドは使わない webpackerをつかっている TypeScriptは使っていない
はじめに インターンでお世話になっている、コウゲと申します。現在担当させていただいている仕事は業務で使用している管理画面のマイクロサービス化です。 マイクロサービス間をつなぐ認証機能が必要だったので、認証プラットフォームとして使いやすそうな 「Auth0」で どんなことができるのか、実現したいことは可能なのかを検証してみることになりました。 なぜAuth0なのか ダッシュボードの設定 + 少ないコード で認証機能が簡単に実装できる。 Auth0専用ライブラリやSDKが多数存在し、目的に応じてそれを利用することで 簡単にログイン機能を実装することができる。 実現したいこと 発表 ありがたいことに、調べた結果を社内で発表する場を設けていただきました。 ブログの内容より少し詳しく書いています。読んだら即実装できるようなスライドを心がけて作りました! speakerdeck.c
nextint_tsuyotsuyo_koshikake.md [募集終了]NextInt社 つよつよ人材 腰掛け雇用枠 参考ツイート 雇用条件 月収30万円 週3勤務 残りの週2日については副業、勉強、大学院、転職活動等に充ててよい 曜日はいい感じに調整、応相談 土日祝日は休み、休日はちゃんと休め 交通費支給（現実的な範囲内で） 経費での書籍購入 有給休暇は適度にあり（調整中） 社保（厚生年金、健康保険、雇用保険）あり 社会保険は「週所定労働20時間以上」、雇用保険の労働認定は「月11日以上勤務」という規定があるため、この規定を満たすように働いてもらう 詳しくは国の資料を参考 十分な余剰利益が出たら賞与が出るかもしれない、基本は期待してはいけない マシンは自分のPCを持ち込むか、30万円以内で好きなのを買う（もしくは転がっているお古マシン） 最初のうちは試用期間＋契約社員、雇用が長期化し
@チャリティーカンファレンス沖縄 vol.1 フロントエンド編 2020 / 6 / 21 (Sun) https://charity-conf.okinawa.jp/
Vue 2.xとVue 3を共存させようと思ったけどダメだった話 - SMARTCAMP Engineer Blog
こんにちは！！！ スマートキャンプでエンジニアをしている吉永です！ 去年の8月に入社し、BOXILのフロントエンド開発に主に関わっています。 自己紹介記事&前回の記事はこちら 弊社の主力サービスであるBOXILは、リリースしてから既に何年も経っているということもあり全てが最新という訳ではなく、インフラからフロントまで様々な技術的負債を抱えています。 フロントエンドでは古いライブラリを使ってしまっているケースや、UIライブラリに依存してしまっているというケースが挙げられます。 他には、CoffeeScriptの中でnew Vue...としてVueを動かしている部分もあり、可読性や保守性に大きな弊害をもたらしてしまっている状況です。 昨年Vue 3がリリースされましたが、各種ライブラリの対応はまだ追いついていない部分も多く、「Vueのバージョンを2系から3にあげたいけど、主要なライブラリがいま
「AmplifyとAppSyncでモダンでイケてるWebサービスを爆速で立ち上げようぜ 」を話しました #devio2020 | DevelopersIO
こんにちは、もこ@札幌オフィスです。 6月16日より、クラスメソッドの年次技術イベント「Developers.IO 2020 CONNECT」を開催しています。期間は2020年6月16日（火）から7月7日（火）、テーマごとに7日間の日程に分けて開催、セッションはなんと合計100本以上あります。 私は、6月23日（火）のライブセッションの3本目を担当しました。登壇の内容についてはこちらをご覧ください。 登壇動画 ライブセッションだけでなく多数の技術について動画を公開しています。下記のYouTubeチャンネルの登録もお願いします。 登壇資料 Q&A Q1. Amplifyを使うことでインフラ側がブラックボックスになってしまい、セキュリティ上の不安や仕様考慮漏れによる不具合が怖いのですが、どうすればそういった不安を拭えますか？ 確かに脆弱性や不具合がある可能性は無きにしも非ずですが、自前で全てを
「JX通信社Advent Calendar 2019」7 日目の記事です。昨日は、鈴木（泰）さんの「CodePipelineを用いたLambdaのデプロイについての所感」でした。 フロントエンドエンジニアの渡辺です。今回は社内の管理画面のUIの話です。 はじめに 管理画面、特に社内向けの画面を作る際は、プロダクト側とは少し事情が異なり、 それぞれのコンポーネントのデザインにあまりこだわらない 機能面や、使い勝手の優先度が高い などの事情があります。なので、UIとしては、「このフレームワークに乗っかっておけばコンポーネントが揃っている」という状態が理想です。 JX通信社の管理画面はVue.jsを使っているケースが多く、その際のUIフレームワークにはiViewを使っています。 特徴 基本的にデザインがシンプル カスタマイズできる項目が多い 少し特殊な用途(無限スクロール、ツリー構造のチェックボ
massCode https://masscode.io/ massCodeの特徴 「massCode」は、50以上のプログラミング言語を記録できるオープンソースのスニペットマネージャです。 「SnippetsLab」や「Quiver」がメジャーなツールですが、どちらも有料ということで、オープンソースで使ってみたい方におすすめのプロダクトです。 セットアップ # インストール git clone https://github.com/antonreshetov/massCode.git # ディレクトリに移動 cd massCode # 依存性の解消 yarn install # 起動 npm run dev 上記手順でセットアップを実行します。 既存のツールをかなり意識したUIになっています。 まずは記録するフォルダを登録していきます。 作成したフォルトごとに、デフォルトの言語が指定可能
jQuery、今までありがとう【移行すべき理由と代替案3選】
世界で一番初心者に優しいWeb制作のメディア。HTML/CSS/JavaScript、WordPress、Web制作の考え方を解説します。
Announcing Nuxt 3.0 stableWe are thrilled to announce the first stable version of Nuxt 3.0.0 ✨ Nuxt 3 is a modern rewrite of the Nuxt framework based on Vite, Vue3, and Nitro with first-class TypeScript support and the result of more than two years of research, community feedback, innovation, and experiment to make a pleasant full-stack Developer Experience for Vue development to everyone. [Read M
LAPRAS 社内で開催した Vue3 勉強会の資料を一部内容を変更して公開します。 Vue3 の新機能、Breaking Change に対して Codesandbox でひとつひとつ実行環境を作っています。動作・コードを検証しながら読んでもらえると嬉しいです。 🙋♂️ 対象読者 Vue2 を Vue3 に移行中 or 移行検討中の人 普段 Vue は触らないけど、教養的に Vue3 をキャッチアップしたい人 Vue3 の機能・注意点を普段フロントエンドを触らないメンバーに説明したい人 🏎️ Vue3 で何が変わる？ 新たな API の追加 Teleport, Fragments、Suspenseなど便利な API が多数追加 リアクティブの改善 Vue2 はObject.definePropertyを利用したリアクティブの実装だったが、Vue3 ではProxy をベースに変更 パ
![Vue経験者向け Vue3 スタートガイド [実行環境付き]](https://cdn-ak-scissors.b.st-hatena.com/image/square/69ffc48886e3b06f842bea181ea8620e84c4cbf5/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--TSYN3V7l--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AVue%2525E7%2525B5%25258C%2525E9%2525A8%252593%2525E8%252580%252585%2525E5%252590%252591%2525E3%252581%252591%252520Vue3%252520%2525E3%252582%2525B9%2525E3%252582%2525BF%2525E3%252583%2525BC%2525E3%252583%252588%2525E3%252582%2525AC%2525E3%252582%2525A4%2525E3%252583%252589%252520%25255B%2525E5%2525AE%25259F%2525E8%2525A1%25258C%2525E7%252592%2525B0%2525E5%2525A2%252583%2525E4%2525BB%252598%2525E3%252581%25258D%25255D%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Aryo_kawamata%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzU2N2NiMTI0ZWYuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
auです。 リモートワークが浸透してきて、もっとデジタル化が進んで近未来を題材にしていた漫画のような世界になるのかなととてもワクワクしています。 今回は、大学生が1人で自由に機能を追加できるオンライン会議のOSSを作ってみました。 今の私の技術力だとできないこともあり、理想的なものというわけにもいかなかったのですが、いろんな人の意見をいただいたり、協力をし合って使いやすいものにできたらなと思います。 お礼 今回の企画のレビューをしていただいた企業様です。 ゲーム開発のメンバーを募集しているので興味がある方はぜひ。 www.find-job.net www.find-job.net 興味深い情報を発信をしているので、フォローして確認してみてください。 https://twitter.com/amazing_engine お礼 環境 なぜ作ったのか 利用方法 起動方法 ファイルの追加方法 ビデ
Content made easy for Vue DevelopersNuxt Content reads the content/ directory in your project, parses .md, .yml, .csv and .json files to create a powerful data layer for your application. Use Vue components in Markdown with the MDC syntax.
Nuxt.jsで開発しているけど、スワイプで画面遷移とかしたいなと思い、 いろいろ調べたときの備忘録。 vue-touch-eventsというのが良さそう(´ω｀) hammer.jsというライブラリのラッパーらしい。 hammer.jsではスワイプだけでなく、 Pan / Pinch / Press / Rotate / Tapも検知できるよう。すごい。。 インストール
FirebaseとNuxt.jsによるSPA x PWA x サーバーレスアプリケーションの開発 - Qiita
初めましてsatoshiです。 エンジニアとしては業務未経験のエンジニアの僕と非エンジニアであるCEOの二人三脚で開発したバックエンドオールFirebaseアプリの知見を残しておきたいと思い記事にします。 学生エンジニアが数ヶ月で一気にプロダクトを完成させる工程という観点でも参考になれば幸いです。 アプリ概要 「Wilico」というヘルスケアCtoCサービスを開発しました。 Wilicoはダイエットや食事管理が必要なタイミングに合わせて、ユーザーと管理栄養士さんをマッチングし、すぐにプロによる食事管理を受けることができるサービスです。 〜生きるために食べる時代から、(健康に)生きるために痩せる時代へ〜 飽食の時代と言われるようになり、好きなものを好きなだけ食べることができる現代ですが、その先に待っているのは生活習慣病です。 すなわち、健康に生きるためには、好きなものばかり食べるわけにはいか
Vuestic UI is an OpenSource Vue 3 based UI framework. It is a MIT-licensed UI framework that provides ready-to-use frontend components that are easily configurable and speed up development of responsive and fast-loading web interfaces. It was initially released in May 2021 by Epicmax and that is what Vuestic UI today.
Snowpack
Update (April 20, 2022): Snowpack is no longer actively maintained and is not recommended for new projects. Check out Vite for a well-maintained Snowpack alternative. See also: esbuild, parcel What is Snowpack?Snowpack is a lightning-fast frontend build tool, designed for the modern web. It is an alternative to heavier, more complex bundlers like webpack or Parcel in your development workflow. Sno
JSXとHTMLベースのテンプレート言語の比較を行い、批判されがちなJSXが実はベターな解だったのでは？という記事です。 僕の結論は、HTMLとJSのどちらが制御構造を持てばいいのか？でいえばJS側が持つ方がリファクタリングしやすいため、JSXの方が良いというものです。 さて、先日、JSフレームワーク事情2020年始めという記事を書きました。これは、JavaScriptフロントエンドフレームワーク、Angularの人気が下落中という記事の元ソースであるThe State of JavaScript 2019を見ながら、React/Vue/Angularや、Next/Nuxt/Gatsbyが置かれている状況を解説するものでした。 他には、確証はないものの、Reactのシェアと人気がともに高い理由は、意外にJSXにもあるのではないか？と考えています。VueもAngularも基本的にはHTMLを
ushironoko.me Vue.jsビギナーズガイド などを著書に持つushironokoさんの記事。 とくに共感したのは以下の文章 Vue は長らく「持たざる者のための宣言的UI」でした。React は Javacript さえ書ければ使えると評されるように、裏を返せば JavaScript を書けないデザイナーや非フロントエンドエンジニアにとって扱いが難しく、jQueryが支配的な環境において Vue の存在はとてもありがたかったのです。 https://ushironoko.me/articles/2022/vue-ore-taido 僕がVueを知ったのは「Angularほど難しくない軽量データバインディング」としてのVueだったのでニーズが重なっていた。逆にこのニーズは今後Vueではなく別のライブラリが補うことになるのかもしれない。 TypeScript対応もComposit
目次 目次 はじめに とある日のこと カスタムディレクティブとは やりたいこと クラシルのデータ分析基盤 イベント定義シート イベントパラメーター型定義シート サンプル実装 カスタムディレクティブのコード Vueコンポーネントに適用してみる クラシルWebに実際に導入してみた結果 この実装を通して学んだこと おわりに はじめに こんにちは、dely株式会社 開発部の白石(しらりん)です。 2019年新卒として入社し、現在Webフロントエンドエンジニアを担当しています。 昨日はiOSエンジニアのtakaoさんが、「個人アプリの開発で陥った6つの失敗とそこから学んだやらないことの重要性」という記事を書いてくれました。 本記事は dely Advent Calendar 2019 18日目の記事になります。 qiita.com 本記事のテーマは、タイトル通りVue.js(以下Vue)でユーザーの
この記事は？ 著者はReactを軸に開発をおこなってきたが、仕事の関係でVueをやることになって「emit」周りの理解が難しく、調べてもなかなかわかりづらかったので改めて記事にすることにした。 対象読者 ・Vueのemitを使う理由がわからない人 ・Vue3•TSでのemitを使い方を知りたい人 Vueの基礎(復習) この記事では以下のようなことがわかることは前提にしています。 ・ref/reactive 値が監視され、変更が検知される状態のことをリアクティブといい、refはプリミティブな値をリアクティブにし、reactiveはObjectの値をリアクティブした変数を作る。 ・props Vueでは親から個コンポーネントにpropsを経由して情報を渡す。 ・v-model Vueではデータの変更とViewが同期する双方向バインディングを提供しており、v-modelを使って変数と入力フォーム
![[Vue3/TypeScript対応] emitで理解するVue.jsの本質](https://cdn-ak-scissors.b.st-hatena.com/image/square/89b6e3406eace09e0fe7d97ed190f9b1b96becc3/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--8Bl-onYk--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BVue3%25252FTypeScript%2525E5%2525AF%2525BE%2525E5%2525BF%25259C%25255D%252520emit%2525E3%252581%2525A7%2525E7%252590%252586%2525E8%2525A7%2525A3%2525E3%252581%252599%2525E3%252582%25258BVue.js%2525E3%252581%2525AE%2525E6%25259C%2525AC%2525E8%2525B3%2525AA%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Ario_dev%252Cx_203%252Cy_98%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2MxNWNjNmU2MjcuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_72%2Fog-base.png)
はじめに イマドキの SPA 開発だとアプリケーションの設定を環境変数で取り扱うことが非常に多くあります。 開発環境・本番環境で変えたい API の baseURL、Google Analytics のトラッキング ID や Firebase の認証情報、ビルド後の成果物を上げる CDN の URL まで、ぶっちゃけ「大体の設定が環境変数で行われている」といっても過言ではない状態です。 ただ、割と環境変数は雑に使われます。いたるところから呼び出されます。いつか崩壊します。 なので、この記事では環境変数の利便性を残しながらも、可能な限り安全に環境変数を取り回す方法をご紹介します。 例によって例の如く、サンプル及び実現方法は Nuxt.js ですが、他の技術でも転用できるはずです。 この記事はちょこちょこ手伝わせてもらっている Omnis inc. での治安維持向上の一環で上がった話のまとめだ
はじめに 先日、仕事で参加させてもらっているプロジェクトでVueを3系にバージョンアップしました。 続いて、TypeScriptが入っていなかったので入れたのですが、なかなか<script setup lang="ts">の知見がネットになかったのでここに軽く共有できたらと思います。 前提 Vueは3.2系（<script setup>が使えるのは3.2系から） TypeScriptは4.5.5(vue-createするとこれが入る) webpacker... ts-loader 有用なドキュメント集 おそらく<script setup>自体は簡単に書けるようになってすぐ慣れると思うのですが、TypeScript対応が結構癖があって困ります。 なのでこれらの公式ドキュメントをよく読むようにしましょう。 SFC<script setup>TypeScript のみの機能 https://v3
GitHub - effector/effector: Business logic with ease ☄️
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Vue.js with TSX - From Vue 2.x to Vue 3 #v_tokyo11
2020/08/25 の #v_tokyo11 で話した登壇スライドです。
Vue3にアップグレードしてフロントエンドを改善した話 - SMARTCAMP Engineer Blog
vue3-migration-improve-frontend はじめまして！ BALES CLOUDエンジニアのえーす（井上）です。この度、BALES CLOUDで長年使ってきたVue2から卒業し、Vue3を導入した状態でリリースできました。今日はこれについてお話できればと思います。 やったこと なぜVue3移行をしたか TypeScriptサポート 各ライブラリが古い Vue2のEOLが近い 具体的なVue3移行ステップ Vuetify卒業 Vue3導入 Vue3完全移行 移行にあたって問題だったこと ライブラリのアップグレード Vuetify卒業 ElementUI -> ElementPlus 巨大PRによるレビュー負荷 チーム体制 マイグレーションビルドと他ライブラリの相性 よかったこと 課題感 これから 2024/04/03 編集部追記 やったこと Vue2を卒業し、Vue3を
はじめに 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型指定ができるように拡張されたAltJS（コンパイルしてJavaScriptにする言語）であるTypeScriptで活用する方法を、順を追って説明しています。 Vue.jsにおいて、Webページのある一部分を構成する実装単位を「コンポーネント」と呼びます。これまでの連載記事では、Webページ全体に対応するコンポーネント（App.vueファイル）を単体で利用してきましたが、より表示が複雑な実際の開発では、1つのWebページを複数のコンポーネントに分割して開発するのが一般的です。そこで本記事では、複数のコンポーネントを利用してWebページを作成する方法を説明します。 対象読者 これからVue.jsに入門したい方 新しいトレンドを常に取り入れたい方 比較的複雑なWebページをV
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
新規プロダクトの開発に Nuxt 3 を採用して良かったこと - ANDPAD Tech Blog
DenoがJSXに対応した - No Regrets in Bathing
[ポエム]VueとReactとCSSについて思うこと2021/1月版
Vue.js から考えるアクセシビリティについて - 2019
Vue 2で大きなデータを扱うときの性能改善手法
「レストランボード」における大規模フロントエンドの漸進的なVueリプレイスの取り組み
Auth0を使ってSPA(Vue.js, Python)の認証機能を作ってみた - JX通信社エンジニアブログ
nextint_tsuyotsuyo_koshikake.md
Nuxt.jsプロジェクトの改善テクニック
管理画面向けのVue.jsのUIフレームワーク、iViewについて - JX通信社エンジニアブログ
Electron+Vueでできたオープンソースのスニペットマネージャ「massCode」を使ってみた
Announcing 3.0 · Nuxt Blog
Vue経験者向け Vue3 スタートガイド [実行環境付き]
オンライン会議で使えるOSSアプリケーションを作ってみた - auの日記
Nuxt Content made easy for Vue Developers
Nuxt.js/Vue.jsでもスワイプでページ移動したい - Qiita
Vuestic UI — Vue.js 3.0 UI Framework
JSXが実はベターな解だったのではないか？｜erukiti
フレームワーク乗り換える必要なし系の意見がもう少し欲しい - laiso
Vue.jsでカスタムディレクティブを使ってユーザーの「見てる」を可視化する - dely Tech Blog
[Vue3/TypeScript対応] emitで理解するVue.jsの本質
Nuxt.js + TypeScript のアプリケーションで環境変数を安全に管理する - Qiita
Vue3<script setup lang="ts">知見
Vue.jsでWebページをつくる際の肝！「コンポーネント」をTypeScriptで活用しよう