CINXE.COM
Vue Fes Japan Online 2022 に登壇 & 参加しました - 弁護士ドットコム株式会社 Creators’ blog
<!DOCTYPE html> <html lang="ja" data-admin-domain="//blog.hatena.ne.jp" data-admin-origin="https://blog.hatena.ne.jp" data-author="bengo4" data-avail-langs="ja en" data-blog="bengo4.hatenablog.jp" data-blog-host="bengo4.hatenablog.jp" data-blog-is-public="1" data-blog-name="弁護士ドットコム株式会社 Creators’ blog" data-blog-owner="bengo4" data-blog-show-ads="" data-blog-show-sleeping-ads="" data-blog-uri="https://creators.bengo4.com/" data-blog-uuid="13574176438040458148" data-blogs-uri-base="https://creators.bengo4.com" data-brand="devblog" data-data-layer="{"hatenablog":{"admin":{},"analytics":{"brand_property_id":"","measurement_id":"G-KJB0HLBDNN","non_sampling_property_id":"","property_id":"","separated_property_id":"UA-29716941-25"},"blog":{"blog_id":"13574176438040458148","content_seems_japanese":"true","disable_ads":"custom_domain","enable_ads":"false","enable_keyword_link":"false","entry_show_footer_related_entries":"true","force_pc_view":"true","is_public":"true","is_responsive_view":"true","is_sleeping":"false","lang":"ja","name":"\u5f01\u8b77\u58eb\u30c9\u30c3\u30c8\u30b3\u30e0\u682a\u5f0f\u4f1a\u793e Creators\u2019 blog","owner_name":"bengo4","uri":"https://creators.bengo4.com/"},"brand":"devblog","page_id":"entry","permalink_entry":{"author_name":"hivesbee","categories":"CLOUDSIGN\t\u30a4\u30d9\u30f3\u30c8\u30fb\u30ab\u30f3\u30d5\u30a1\u30ec\u30f3\u30b9","character_count":4024,"date":"2022-11-15","entry_id":"4207112889934527709","first_category":"CLOUDSIGN","hour":"8","title":"Vue Fes Japan Online 2022 \u306b\u767b\u58c7 & \u53c2\u52a0\u3057\u307e\u3057\u305f","uri":"https://creators.bengo4.com/entry/2022/11/15/083000"},"pro":"pro","router_type":"blogs"}}" data-device="pc" data-dont-recommend-pro="false" data-global-domain="https://hatena.blog" data-globalheader-color="b" data-globalheader-type="pc" data-has-touch-view="1" data-help-url="https://help.hatenablog.com" data-hide-header="1" data-no-suggest-touch-view="1" data-page="entry" data-parts-domain="https://hatenablog-parts.com" data-plus-available="1" data-pro="true" data-router-type="blogs" data-sentry-dsn="https://03a33e4781a24cf2885099fed222b56d@sentry.io/1195218" data-sentry-environment="production" data-sentry-sample-rate="0.1" data-static-domain="https://cdn.blog.st-hatena.com" data-version="add51ddc2d3c0599e98ea1239ac012" data-initial-state="{}" > <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="robots" content="max-image-preview:large" /> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=7; IE=9; IE=10; IE=11" /> <title>Vue Fes Japan Online 2022 に登壇 & 参加しました - 弁護士ドットコム株式会社 Creators’ blog</title> <link rel="canonical" href="https://creators.bengo4.com/entry/2022/11/15/083000"/> <meta itemprop="name" content="Vue Fes Japan Online 2022 に登壇 & 参加しました - 弁護士ドットコム株式会社 Creators’ blog"/> <meta itemprop="image" content="https://cdn.image.st-hatena.com/image/scale/debfb5cbedeaf9c02284bb22df7785c37d3b949d/backend=imagemagick;height=1300;version=1;width=1300/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fb%2Fbengo4%2F20221108%2F20221108182646.png"/> <meta property="og:title" content="Vue Fes Japan Online 2022 に登壇 & 参加しました - 弁護士ドットコム株式会社 Creators’ blog"/> <meta property="og:type" content="article"/> <meta property="og:url" content="https://creators.bengo4.com/entry/2022/11/15/083000"/> <meta property="og:image" content="https://cdn.image.st-hatena.com/image/scale/debfb5cbedeaf9c02284bb22df7785c37d3b949d/backend=imagemagick;height=1300;version=1;width=1300/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fb%2Fbengo4%2F20221108%2F20221108182646.png"/> <meta property="og:image:alt" content="Vue Fes Japan Online 2022 に登壇 & 参加しました - 弁護士ドットコム株式会社 Creators’ blog"/> <meta property="og:description" content="こんにちは。クラウドサイン Product Engineering 部です。 今回 Vue Fes Japan Online 2022 にてプラチナスポンサーとして参加させていただきました！ 本記事は登壇させていただいた「Design System Meets Vue.js」の紹介をしつつの Vue Fes Japan Online 2022 全体の参加レポートとなります。 なお各セッションのアーカイブは以下にございますので、見られていない方はぜひご覧ください。 メドピアトラック FUTURE トラック クラウドサイントラック Design System Meets Vue.js エンジニアリ…" /> <meta property="og:site_name" content="弁護士ドットコム株式会社 Creators’ blog"/> <meta property="article:published_time" content="1668468600" /> <meta property="article:tag" content="CLOUDSIGN" /> <meta property="article:tag" content="イベント・カンファレンス" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:image" content="https://cdn.image.st-hatena.com/image/scale/debfb5cbedeaf9c02284bb22df7785c37d3b949d/backend=imagemagick;height=1300;version=1;width=1300/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fb%2Fbengo4%2F20221108%2F20221108182646.png" /> <meta name="twitter:title" content="Vue Fes Japan Online 2022 に登壇 & 参加しました - 弁護士ドットコム株式会社 Creators’ blog" /> <meta name="twitter:description" content="こんにちは。クラウドサイン Product Engineering 部です。 今回 Vue Fes Japan Online 2022 にてプラチナスポンサーとして参加させていただきました！ 本記事は登壇させていただいた「Design System Meets Vue.js」の紹介をしつつの Vue Fes Japan…" /> <meta name="twitter:app:name:iphone" content="はてなブログアプリ" /> <meta name="twitter:app:id:iphone" content="583299321" /> <meta name="twitter:app:url:iphone" content="hatenablog:///open?uri=https%3A%2F%2Fcreators.bengo4.com%2Fentry%2F2022%2F11%2F15%2F083000" /> <meta name="twitter:site" content="@bengo4_creators" /> <meta name="description" content="こんにちは。クラウドサイン Product Engineering 部です。 今回 Vue Fes Japan Online 2022 にてプラチナスポンサーとして参加させていただきました！ 本記事は登壇させていただいた「Design System Meets Vue.js」の紹介をしつつの Vue Fes Japan Online 2022 全体の参加レポートとなります。 なお各セッションのアーカイブは以下にございますので、見られていない方はぜひご覧ください。 メドピアトラック FUTURE トラック クラウドサイントラック Design System Meets Vue.js エンジニアリ…" /> <script id="embed-gtm-data-layer-loader" data-data-layer-page-specific="{"hatenablog":{"blogs_permalink":{"is_blog_sleeping":"false","blog_afc_issued":"false","is_author_pro":"true","has_related_entries_with_elasticsearch":"true","entry_afc_issued":"false"}}}" > (function() { function loadDataLayer(elem, attrName) { if (!elem) { return {}; } var json = elem.getAttribute(attrName); if (!json) { return {}; } return JSON.parse(json); } var globalVariables = loadDataLayer( document.documentElement, 'data-data-layer' ); var pageSpecificVariables = loadDataLayer( document.getElementById('embed-gtm-data-layer-loader'), 'data-data-layer-page-specific' ); var variables = [globalVariables, pageSpecificVariables]; if (!window.dataLayer) { window.dataLayer = []; } for (var i = 0; i < variables.length; i++) { window.dataLayer.push(variables[i]); } })(); </script> <!-- Google Tag Manager --> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-P4CXTW');</script> <!-- End Google Tag Manager --> <link rel="shortcut icon" href="https://creators.bengo4.com/icon/favicon"> <link rel="apple-touch-icon" href="https://creators.bengo4.com/icon/touch"> <link rel="icon" sizes="192x192" href="https://creators.bengo4.com/icon/link"> <link rel="alternate" type="application/atom+xml" title="Atom" href="https://creators.bengo4.com/feed"/> <link rel="alternate" type="application/rss+xml" title="RSS2.0" href="https://creators.bengo4.com/rss"/> <link rel="alternate" type="application/json+oembed" href="https://hatena.blog/oembed?url=https%3A%2F%2Fcreators.bengo4.com%2Fentry%2F2022%2F11%2F15%2F083000&format=json" title="oEmbed Profile of Vue Fes Japan Online 2022 に登壇 & 参加しました"/> <link rel="alternate" type="text/xml+oembed" href="https://hatena.blog/oembed?url=https%3A%2F%2Fcreators.bengo4.com%2Fentry%2F2022%2F11%2F15%2F083000&format=xml" title="oEmbed Profile of Vue Fes Japan Online 2022 に登壇 & 参加しました"/> <link rel="author" href="http://www.hatena.ne.jp/hivesbee/"> <link rel="preload" href="https://cdn-ak.f.st-hatena.com/images/fotolife/b/bengo4/20241011/20241011212321.png" as="image"/> <link rel="stylesheet" type="text/css" href="https://cdn.blog.st-hatena.com/css/blog.css?version=add51ddc2d3c0599e98ea1239ac012"/> <link rel="stylesheet" type="text/css" href="https://usercss.blog.st-hatena.com/blog_style/13574176438040458148/d55616d8a82dc73f1254718e666a1d73d39c566d"/> <script> </script> <style> div#google_afc_user, div.google-afc-user-container, div.google_afc_image, div.google_afc_blocklink { display: block !important; } </style> <script type="application/ld+json">{"@context":"http://schema.org","@type":"Article","dateModified":"2023-12-01T08:44:13+09:00","datePublished":"2022-11-15T08:30:00+09:00","headline":"Vue Fes Japan Online 2022 に登壇 \u0026 参加しました","image":["https://cdn-ak.f.st-hatena.com/images/fotolife/b/bengo4/20221108/20221108182646.png"]}</script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-KJB0HLBDNN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-KJB0HLBDNN'); </script> </head> <body class="page-entry header-image-only enable-bottom-editarea category-CLOUDSIGN category-イベント・カンファレンス globalheader-off globalheader-ng-enabled"> <div id="globalheader-container" data-brand="hatenablog" style="display: none" > <iframe id="globalheader" height="37" frameborder="0" allowTransparency="true"></iframe> </div> <div id="container"> <div id="container-inner"> <header id="blog-title" data-brand="hatenablog"> <div id="blog-title-inner" style="background-image: url('https://cdn-ak.f.st-hatena.com/images/fotolife/b/bengo4/20241011/20241011212321.png'); background-position: center 0px;"> <div id="blog-title-content"> <h1 id="title"><a href="https://creators.bengo4.com/">弁護士ドットコム株式会社 Creators’ blog</a></h1> <h2 id="blog-description">弁護士ドットコムがエンジニア・デザイナーのサービス開発事例やデザイン活動を発信する公式ブログです。</h2> </div> </div> </header> <div id="content" class="hfeed" > <div id="content-inner"> <div id="wrapper"> <div id="main"> <div id="main-inner"> <!-- google_ad_section_start --> <!-- rakuten_ad_target_begin --> <article class="entry hentry test-hentry js-entry-article date-first autopagerize_page_element chars-4400 words-400 mode-markdown entry-odd" id="entry-4207112889934527709" data-keyword-campaign="" data-uuid="4207112889934527709" data-publication-type="entry"> <div class="entry-inner"> <header class="entry-header"> <div class="date entry-date first"> <a href="https://creators.bengo4.com/archive/2022/11/15" rel="nofollow"> <time datetime="2022-11-14T23:30:00Z" title="2022-11-14T23:30:00Z"> <span class="date-year">2022</span><span class="hyphen">-</span><span class="date-month">11</span><span class="hyphen">-</span><span class="date-day">15</span> </time> </a> </div> <h1 class="entry-title"> <a href="https://creators.bengo4.com/entry/2022/11/15/083000" class="entry-title-link bookmark">Vue Fes Japan Online 2022 に登壇 & 参加しました</a> </h1> <div class="entry-categories categories"> <a href="https://creators.bengo4.com/archive/category/CLOUDSIGN" class="entry-category-link category-CLOUDSIGN">CLOUDSIGN</a> <a href="https://creators.bengo4.com/archive/category/%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%83%BB%E3%82%AB%E3%83%B3%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9" class="entry-category-link category-イベント・カンファレンス">イベント・カンファレンス</a> </div> </header> <div class="entry-content hatenablog-entry"> <p>こんにちは。クラウドサイン Product Engineering 部です。 今回 <a href="https://vuefes.jp/2022/">Vue Fes Japan Online 2022</a> にてプラチナスポンサーとして参加させていただきました！ 本記事は登壇させていただいた「Design System Meets Vue.js」の紹介をしつつの Vue Fes Japan Online 2022 全体の参加レポートとなります。</p> <p>なお各セッションのアーカイブは以下にございますので、見られていない方はぜひご覧ください。</p> <ul> <li><a href="https://www.youtube.com/watch?v=HsBTx36c_kA">メドピアトラック</a></li> <li><a href="https://www.youtube.com/watch?v=dtD4p89ogKM">FUTURE トラック</a></li> <li><a href="https://www.youtube.com/watch?v=eOJZ_3W4kaQ">クラウドサイントラック</a></li> </ul> <h2 id="Design-System-Meets-Vuejs">Design System Meets Vue.js</h2> <p>エンジニアリングマネージャーの芳賀です。</p> <p>今回はクラウドサインとデザインシステムの成長にフォーカスをあてて発表させていただきました。 デザインの管理系ツールとフロントエンドの管理系ツールの組み合わせは膨大にあり、かつ具体事例もたくさん拝見してきております。 そのすべてが輝かしく見え、ついつい手を伸ばしたくなります。 （私もその一人ですｗ）</p> <p>ただ、そのタイミングを見極めないとオーバーエンジニアリングになったり、後追いになってしまったりしがちです。 では何を基準にして選択・導入・変化していくか、ですが 我々としては、サービスの事業成長、組織成長、スキルを俯瞰して考えていく必要があるかなと感じております。</p> <p>具体的な内容につきましては <a href="https://www.youtube.com/watch?v=eOJZ_3W4kaQ&t=5071s">クラウドサイントラックの 01:24:31 ごろ</a> にて発表しておりますのでご覧いただけますと嬉しいです！</p> <h2 id="負債が溜まったレガシーフロントエンド画面を-Vuejs-でリプレイスした話">負債が溜まったレガシーフロントエンド画面を Vue.js でリプレイスした話</h2> <p><iframe id="talk_frame_937627" class="speakerdeck-iframe" src="//speakerdeck.com/player/7540c18ae9c84a37b88ee378c2eff8eb" width="710" height="399" style="aspect-ratio:710/399; border:0; padding:0; margin:0; background:transparent;" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen"></iframe> <cite class="hatena-citation"><a href="https://speakerdeck.com/t0yohei/fu-zhai-galiu-matutaregasihurontoendohua-mian-wo-vue-dot-js-deripureisusitahua">speakerdeck.com</a></cite></p> <p>フロントエンドエンジニアの山田です。</p> <p>こちらのセッションは株式会社クラウドワークスさんによるレガシーなフロントエンドをリプレイスした話です。</p> <p>具体的には Rails + jQuery によって実装された画面により以下の課題があったそうです。</p> <ul> <li>見た目を変えたいだけなのにバックエンドもいじる必要がある。</li> <li>フロントエンドとバックエンドの分業がしにくい。</li> <li>jQuery から脱却したい。</li> </ul> <p>それらを Vue.js 化によって解決した、ということでした。</p> <p>まずプロジェクトにおいて大まかな方針、優先順位を決め、そしてやること・やらないことを明確にしたとのことです。 ことリファクタリング的な意味をもつプロジェクトでは、やろうと思えば理想を追い求めてどこまでもやれてしまいます。 プロジェクトには達成すべき目的があり、人的リソースと時間も限られます。そのため、どこまでやるかの境界線を最初に設定することが非常に大事だと思いました。</p> <p>セッションの後半では既存の API の JSON 形式のレスポンスに HTML が含まれている例を紹介されていました。 既存のレスポンスを破壊的に変更するのではなく必要な要素を追加することで対応しサービスへの影響度をなるべく小さくすることを意識して進められていました。 サービスへの安定性を求められるクラウドサインのエンジニアとしても共感をもちました。</p> <h2 id="Vuejs-でアクセシブルなコンポーネントをつくるために">Vue.js でアクセシブルなコンポーネントをつくるために</h2> <p><iframe id="talk_frame_937617" class="speakerdeck-iframe" src="//speakerdeck.com/player/c844fbb176414e14b8bf2b77c5dda81f" width="710" height="399" style="aspect-ratio:710/399; border:0; padding:0; margin:0; background:transparent;" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen"></iframe> <cite class="hatena-citation"><a href="https://speakerdeck.com/yamanoku/to-make-accessible-components-in-vuejs">speakerdeck.com</a></cite></p> <p><a href="https://www.youtube.com/watch?v=dtD4p89ogKM&t=15915s">動画へのリンク</a></p> <p>フロントエンドエンジニアの <a href="https://twitter.com/tee_talog">@tee_talog</a> です。 株式会社クラウドワークスさんのセッションについて書かせていただきます。</p> <p>こちらのセッションでは、Vue.js で開発する際にアクセシビリティの向上に取り組みやすくなる、3 つのテーマを発表されていました。</p> <ol> <li>誤ったアクセシビリティ対応</li> <li>汎用性のあるアクセシブルなコンポーネント</li> <li>アクセシビリティテスト・チェック</li> </ol> <p>発表内容で驚いたのが、「Vue.js でのアクセシビリティ対応は平均より 24.8% も低い」という調査結果が出ていることです。ライブラリやフレームワークは関係ないとはいえ、Vue.js と比較されることが多い React は -0.1% と平均的な数値になっているのと対照的です。 このような数字が示されている中で、Vue.js を利用しているユーザーのアクセシビリティへの関心を高めるという取り組みに感銘を受けました。</p> <blockquote><p>アクセシビリティ対応というものに完璧なものはないので、間違いを見つけたら焦らずに確実に直していくことが大切です。</p></blockquote> <p>まとめでおっしゃっていたこの言葉に思わず唸ってしまいました。 最初から 100% を目指すのではなく、一歩一歩着実に上を目指すことが大事だということを、あらためて実感しました。</p> <p>余談ですが、「誤ったアクセシビリティ対応」セクションでは、弊社の太田が執筆した「 <a href="https://www.borndigital.co.jp/book/25999.html">HTML 解体新書</a> 」もおすすめされていました。気になった方はぜひご覧ください（ダイレクトマーケティング）</p> <h2 id="安全に開発効率を上げるための-Vue-27-移行">安全に開発効率を上げるための Vue 2.7 移行</h2> <p>フロントエンドエンジニアの篠田(<a href="https://twitter.com/tttttt_621_s">@tttttt_621_s</a>)です。</p> <p>こちらのセッションは、株式会社 iCARE さんのプロダクトで <code>Vue 2.6</code> + <code>@vue/composition-api</code> から、<code>Vue 2.7</code> に移行した話でした。</p> <p>主に以下の事について発表されていました。 - なぜ移行先は <code>Vue 3</code> でなく、<code>Vue 2.7</code> を選んだのか - <code>Vue 2.7</code> を経由するメリットと注意点 - 段階的に <code>Vue</code> のバージョンアップが必要な理由 - <code>Vue 2.7</code> 移行へのつまずきポイント</p> <p>弊社プロダクトの CloudSign も <code>Vue 2.6</code> + <code>@vue/composition-api</code> の構成で開発しており、今後 <code>Vue 2.7</code> へ移行するため非常に刺さる内容でした。</p> <p>実際に手を動かしたことで得られる <code>Vue 2.7</code> を経由するメリットやつまずきポイントは、はじめて聞くものが多く個人的にとても学びになりました。</p> <p>また <code>Vue 2</code> の EOL までに段階的に移行するため、<code>Vue 2.7</code> と <code>Vue 3</code> の 2 つのマイルストーンを置いて分割していくアプローチが参考になりました。</p> <p>プロダクトの安定性を担保するためにも段階的に移行し、負担とリスクを軽減することが重要であると実感しました。</p> <h2 id="プロダクト開発を止めずに-Composition-API-と-TypeScript-に最速で移行するための戦い">プロダクト開発を止めずに Composition API と TypeScript に最速で移行するための戦い</h2> <p><iframe id="talk_frame_938076" class="speakerdeck-iframe" src="//speakerdeck.com/player/9d05f025a31943d790c91d25690b1b5b" width="710" height="399" style="aspect-ratio:710/399; border:0; padding:0; margin:0; background:transparent;" frameborder="0" allowtransparency="true" allowfullscreen="allowfullscreen"></iframe> <cite class="hatena-citation"><a href="https://speakerdeck.com/wattanx/purodakutokai-fa-wozhi-mezuni-composition-api-to-typescript-ni-zui-su-deyi-xing-surutamenozhan-i">speakerdeck.com</a></cite></p> <p>フロントエンドエンジニアの辻です。</p> <p>こちらのセッションは、STORES 株式会社さんの Composition API と TypeScript の移行についてのお話でした。</p> <p>移行に際して、Options API と mixins を使った実装を Composition API と composable で実装する形に分解、その作業を作成した自動化ツールを使って行うことで、手動だと 1 ファイルの移行に 1 時間かかっていたものを 20 秒で完了できるようにしたというものでした。 リファクタリング時に自動化ツールの作成や導入を行うといった進め方は、弊社プロダクトでも参考にできる部分があり非常に学びになりました。</p> <p>またモチベーションを維持しづらいリファクタリングの作業をできるだけ小さく細分化することで 1 日最低 1 プルリクエスト出せる状態にしたり、 DataDog のメトリクスで何％完了しているのか可視化するといった進め方も参考になりました。</p> <h2 id="Vue2-Vue3-マイグレーション-令和最新-最強">Vue2 Vue3 マイグレーション 令和最新 最強</h2> <p><iframe src="https://hatenablog-parts.com/embed?url=https%3A%2F%2Fdocs.google.com%2Fpresentation%2Fd%2Fe%2F2PACX-1vS1Drke3qV5WoYkpwk06FL3Zr0VZz7s4usDrJlM4AozNmxcfOM1xHCS9sxK1idD6O7v7vAKEy7NMVLv%2Fpub%3Fslide%3Did.p" title="Vue2 Vue3 マイグレーション 令和最新 最強" class="embed-card embed-webcard" scrolling="no" frameborder="0" style="display: block; width: 100%; height: 155px; max-width: 500px; margin: 10px 0px;" loading="lazy"></iframe><cite class="hatena-citation"><a href="https://docs.google.com/presentation/d/e/2PACX-1vS1Drke3qV5WoYkpwk06FL3Zr0VZz7s4usDrJlM4AozNmxcfOM1xHCS9sxK1idD6O7v7vAKEy7NMVLv/pub?slide=id.p">docs.google.com</a></cite></p> <p>フロントエンドエンジニアの森です。</p> <p>こちらのセッションは、STUDIO 株式会社さんの エディタ機能における <code>Vue 2</code> から <code>Vue 3</code> の移行についての発表でした。</p> <p>1000コンポーネント以上のある巨大なソースコードを体験ベースでどう移行していったのかを主に話していました。</p> <ul> <li><code>Vue 3</code>が正式リリースするまでの歴史</li> <li>最初に <code>webpack</code> → <code>Vite</code> を変更することによりBuildの時間を大幅短縮 + プロジェクト全体で <code>Vue 3</code> に対するモチベーションアップ</li> <li>正規表現での変換 + 独自ツール で Composition化 を半自動化</li> <li>移行時のハマったポイント</li> </ul> <p>1000コンポーネントのある大幅なマイグレーションと1人で戦っていることは、純粋に凄いなと思いました。 手作業でやるには、辛い部分が多すぎるのでいかに自動化していくのかがとても参考になりました。</p> <p>ただ、今回は一気に<code>Vue 3</code>に移行したのもあり、通常の開発も進んでいく中でマイグレーション用のブランチとコンフリクトが大量発生した話もあったので そこは作業などを細分化して徐々に以降していくなどの工夫が必要だなと感じました。</p> <h2 id="おわりに">おわりに</h2> <p>はじめに、当日までご尽力いただいた運営スタッフのみなさん、ありがとうございました。 オフラインとオンラインの組み合わせという新しい開催形式で、 「どうなるかな」というワクワクを持ちながら配信画面を見つめておりました。 期待を上回るくらいの「盛り上げよう、楽しもう」という熱量が画面越しにも伝わるカンファレンスでした。 あらためてありがとうございました。</p> <p>我々としても久しぶりの Vue Fes ということもあり、非常に面白く、かつ大いに収穫のあるカンファレンスでした。 これからの Vue であったり、今まさに弊社内でやろうとしていたことに刺さる内容であったり... みなさんのノウハウを吸収しつつクラウドサインとしてもより成長していければと思います。</p> <p>具体的にどのようなことを考えているかについては <a href="https://meety.net/ma/matches/tqHWTndcAaFS">meety</a> でお話できればと思います。 （<a href="https://hrmos.co/pages/bengo4/jobs/0006502">採用ページ</a> もよろしければ！）</p> <p>ありがとうございました。</p> </div> <footer class="entry-footer"> <div class="entry-tags-wrapper"> <div class="entry-tags"> <span class="entry-tag"> <a href="https://d.hatena.ne.jp/keyword/Vue%20Fes%20Japan" class="entry-tag-link"> <span class="entry-tag-icon">#</span><span class="entry-tag-label">Vue Fes Japan</span> </a> </span> <span class="entry-tag"> <a href="https://d.hatena.ne.jp/keyword/%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0" class="entry-tag-link"> <span class="entry-tag-icon">#</span><span class="entry-tag-label">デザインシステム</span> </a> </span> </div> </div> <p class="entry-footer-section track-inview-by-gtm" data-gtm-track-json="{"area": "finish_reading"}"> <span class="author vcard"><span class="fn" data-load-nickname="1" data-user-name="hivesbee" >hivesbee</span></span> <span class="entry-footer-time"><a href="https://creators.bengo4.com/entry/2022/11/15/083000"><time data-relative datetime="2022-11-14T23:30:00Z" title="2022-11-14T23:30:00Z" class="updated">2022-11-15 08:30</time></a></span> </p> <div class="hatena-star-container" data-hatena-star-container data-hatena-star-url="https://creators.bengo4.com/entry/2022/11/15/083000" data-hatena-star-title="Vue Fes Japan Online 2022 に登壇 & 参加しました" data-hatena-star-variant="profile-icon" data-hatena-star-profile-url-template="https://blog.hatena.ne.jp/{username}/" ></div> <div class="social-buttons"> <div class="social-button-item"> <a href="https://b.hatena.ne.jp/entry/s/creators.bengo4.com/entry/2022/11/15/083000" class="hatena-bookmark-button" data-hatena-bookmark-url="https://creators.bengo4.com/entry/2022/11/15/083000" data-hatena-bookmark-layout="vertical-balloon" data-hatena-bookmark-lang="ja" title="この記事をはてなブックマークに追加"><img src="https://b.st-hatena.com/images/entry-button/button-only.gif" alt="この記事をはてなブックマークに追加" width="20" height="20" style="border: none;" /></a> </div> <div class="social-button-item"> <div class="fb-share-button" data-layout="box_count" data-href="https://creators.bengo4.com/entry/2022/11/15/083000"></div> </div> <div class="social-button-item"> <a class="entry-share-button entry-share-button-twitter test-share-button-twitter" href="https://x.com/intent/tweet?hashtags=Vue+Fes+Japan&hashtags=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0&text=Vue+Fes+Japan+Online+2022+%E3%81%AB%E7%99%BB%E5%A3%87+%26+%E5%8F%82%E5%8A%A0%E3%81%97%E3%81%BE%E3%81%97%E3%81%9F+-+%E5%BC%81%E8%AD%B7%E5%A3%AB%E3%83%89%E3%83%83%E3%83%88%E3%82%B3%E3%83%A0%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE+Creators%E2%80%99+blog&url=https%3A%2F%2Fcreators.bengo4.com%2Fentry%2F2022%2F11%2F15%2F083000" title="X（Twitter）で投稿する" ></a> </div> </div> <div class="customized-footer"> <div class="entry-footer-modules" id="entry-footer-secondary-modules"> <div class="hatena-module hatena-module-related-entries" > <!-- Hatena-Epic-has-related-entries-with-elasticsearch:true --> <div class="hatena-module-title"> 関連記事 </div> <div class="hatena-module-body"> <ul class="related-entries hatena-urllist urllist-with-thumbnails"> <li class="urllist-item related-entries-item"> <div class="urllist-item-inner related-entries-item-inner"> <a class="urllist-image-link related-entries-image-link" href="https://creators.bengo4.com/entry/2024/11/05/080000"> <img alt="イベント開催レポート：「出張！俺の電子契約」〜クラウドサインをアクセシビリティチェック〜" src="https://cdn.image.st-hatena.com/image/square/337345157192e1ddef992a9df627c402ccb389d5/backend=imagemagick;height=100;version=1;width=100/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fb%2Fbengo4%2F20241105%2F20241105080022.png" class="urllist-image related-entries-image" title="イベント開催レポート：「出張！俺の電子契約」〜クラウドサインをアクセシビリティチェック〜" width="100" height="100" loading="lazy"> </a> <div class="urllist-date-link related-entries-date-link"> <a href="https://creators.bengo4.com/archive/2024/11/05" rel="nofollow"> <time datetime="2024-11-04T23:00:00Z" title="2024年11月5日"> 2024-11-05 </time> </a> </div> <a href="https://creators.bengo4.com/entry/2024/11/05/080000" class="urllist-title-link related-entries-title-link urllist-title related-entries-title">イベント開催レポート：「出張！俺の電子契約」〜クラウドサインをアクセシビリティチェック〜</a> <div class="urllist-entry-body related-entries-entry-body">2024年9月11日(水) SmartHRさんと開催した弁護士ドットコム×Sma…</div> </div> </li> <li class="urllist-item related-entries-item"> <div class="urllist-item-inner related-entries-item-inner"> <a class="urllist-image-link related-entries-image-link" href="https://creators.bengo4.com/entry/2024/10/10/083000"> <img alt="MockServiceWorker（MSW） を使った高速開発のための運用事例" src="https://cdn.image.st-hatena.com/image/square/45c91a5a2433d1e863405ce9eeb9a5c0803289c0/backend=imagemagick;height=100;version=1;width=100/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fb%2Fbengo4%2F20241010%2F20241010084002.png" class="urllist-image related-entries-image" title="MockServiceWorker（MSW） を使った高速開発のための運用事例" width="100" height="100" loading="lazy"> </a> <div class="urllist-date-link related-entries-date-link"> <a href="https://creators.bengo4.com/archive/2024/10/10" rel="nofollow"> <time datetime="2024-10-09T23:30:00Z" title="2024年10月10日"> 2024-10-10 </time> </a> </div> <a href="https://creators.bengo4.com/entry/2024/10/10/083000" class="urllist-title-link related-entries-title-link urllist-title related-entries-title">MockServiceWorker（MSW） を使った高速開発のための運用事例</a> <div class="urllist-entry-body related-entries-entry-body">クラウドサイン事業本部の田邉(𝕏@s_tanabe_)です。 フロントエ…</div> </div> </li> <li class="urllist-item related-entries-item"> <div class="urllist-item-inner related-entries-item-inner"> <a class="urllist-image-link related-entries-image-link" href="https://creators.bengo4.com/entry/2024/02/26/080000"> <img alt="モブプロが最高だった話" src="https://cdn.image.st-hatena.com/image/square/3c1c0fd36ceb468e849ed45bebb508cfade4eb94/backend=imagemagick;height=100;version=1;width=100/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fb%2Fbengo4%2F20240226%2F20240226090015.png" class="urllist-image related-entries-image" title="モブプロが最高だった話" width="100" height="100" loading="lazy"> </a> <div class="urllist-date-link related-entries-date-link"> <a href="https://creators.bengo4.com/archive/2024/02/26" rel="nofollow"> <time datetime="2024-02-25T23:00:00Z" title="2024年2月26日"> 2024-02-26 </time> </a> </div> <a href="https://creators.bengo4.com/entry/2024/02/26/080000" class="urllist-title-link related-entries-title-link urllist-title related-entries-title">モブプロが最高だった話</a> <div class="urllist-entry-body related-entries-entry-body">クラウドサインのフロントエンドエンジニア辻です。 現在所属し…</div> </div> </li> <li class="urllist-item related-entries-item"> <div class="urllist-item-inner related-entries-item-inner"> <a class="urllist-image-link related-entries-image-link" href="https://creators.bengo4.com/entry/2023/12/05/090000"> <img alt="弁護士ドットコムサマーインターンシップ2023の狙いと技術要素" src="https://cdn.image.st-hatena.com/image/square/84e84467d15c828f566caa8e976fda364c5c8b73/backend=imagemagick;height=100;version=1;width=100/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fb%2Fbengo4%2F20231205%2F20231205084903.png" class="urllist-image related-entries-image" title="弁護士ドットコムサマーインターンシップ2023の狙いと技術要素" width="100" height="100" loading="lazy"> </a> <div class="urllist-date-link related-entries-date-link"> <a href="https://creators.bengo4.com/archive/2023/12/05" rel="nofollow"> <time datetime="2023-12-05T00:00:00Z" title="2023年12月5日"> 2023-12-05 </time> </a> </div> <a href="https://creators.bengo4.com/entry/2023/12/05/090000" class="urllist-title-link related-entries-title-link urllist-title related-entries-title">弁護士ドットコムサマーインターンシップ2023の狙いと技術要素</a> <div class="urllist-entry-body related-entries-entry-body">この記事は弁護士ドットコム Advent Calendar 2023の 5 日目の…</div> </div> </li> <li class="urllist-item related-entries-item"> <div class="urllist-item-inner related-entries-item-inner"> <a class="urllist-image-link related-entries-image-link" href="https://creators.bengo4.com/entry/2023/11/10/090000"> <img alt="Vue Fes Japan 2023にプラチナスポンサーとして協賛し、メンバーが登壇しました！" src="https://cdn.image.st-hatena.com/image/square/be8182094f814560b949b360be7dc4bf288abea0/backend=imagemagick;height=100;version=1;width=100/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fb%2Fbengo4%2F20231110%2F20231110090315.png" class="urllist-image related-entries-image" title="Vue Fes Japan 2023にプラチナスポンサーとして協賛し、メンバーが登壇しました！" width="100" height="100" loading="lazy"> </a> <div class="urllist-date-link related-entries-date-link"> <a href="https://creators.bengo4.com/archive/2023/11/10" rel="nofollow"> <time datetime="2023-11-10T00:00:00Z" title="2023年11月10日"> 2023-11-10 </time> </a> </div> <a href="https://creators.bengo4.com/entry/2023/11/10/090000" class="urllist-title-link related-entries-title-link urllist-title related-entries-title">Vue Fes Japan 2023にプラチナスポンサーとして協賛し、メンバーが登壇しました！</a> <div class="urllist-entry-body related-entries-entry-body">こんにちは。技術広報を担当している@a_katoです。 2023年10/28…</div> </div> </li> </ul> </div> </div> </div> </div> </footer> </div> </article> <!-- rakuten_ad_target_end --> <!-- google_ad_section_end --> <div class="pager pager-permalink permalink"> <span class="pager-prev"> <a href="https://creators.bengo4.com/entry/2022/11/21/083000" rel="prev"> <span class="pager-arrow">« </span> UIデザインにおけるステートマシン </a> </span> <span class="pager-next"> <a href="https://creators.bengo4.com/entry/2022/11/07/083000" rel="next"> Apache Solr から OpenSearch に載せ替え… <span class="pager-arrow"> »</span> </a> </span> </div> </div> </div> <aside id="box1"> <div id="box1-inner"> </div> </aside> </div><!-- #wrapper --> <aside id="box2"> <div id="box2-inner"> <div class="hatena-module hatena-module-profile"> <div class="hatena-module-title"> プロフィール </div> <div class="hatena-module-body"> <a href="https://creators.bengo4.com/about" class="profile-icon-link"> <img src="https://cdn.profile-image.st-hatena.com/users/bengo4/profile.png?1695814907" alt="id:bengo4" class="profile-icon" /> </a> <span class="id"> <a href="https://creators.bengo4.com/about" class="hatena-id-link"><span data-load-nickname="1" data-user-name="bengo4">id:bengo4</span></a> <a href="https://blog.hatena.ne.jp/guide/corporation" title="はてなブログ for DevBlog"><i class="badge-type-devblog">はてなブログ for DevBlog</i></a> </span> <div class="hatena-follow-button-box btn-subscribe js-hatena-follow-button-box" > <a href="#" class="hatena-follow-button js-hatena-follow-button"> <span class="subscribing"> <span class="foreground">読者です</span> <span class="background">読者をやめる</span> </span> <span class="unsubscribing" data-track-name="profile-widget-subscribe-button" data-track-once> <span class="foreground">読者になる</span> <span class="background">読者になる</span> </span> </a> <div class="subscription-count-box js-subscription-count-box"> <i></i> <u></u> <span class="subscription-count js-subscription-count"> </span> </div> </div> <div class="profile-about"> <a href="https://creators.bengo4.com/about">このブログについて</a> </div> </div> </div> <div class="hatena-module hatena-module-search-box"> <div class="hatena-module-title"> 検索 </div> <div class="hatena-module-body"> <form class="search-form" role="search" action="https://creators.bengo4.com/search" method="get"> <input type="text" name="q" class="search-module-input" value="" placeholder="記事を検索" required> <input type="submit" value="検索" class="search-module-button" /> </form> </div> </div> <div class="hatena-module hatena-module-html"> <div class="hatena-module-title">採用情報</div> <div class="hatena-module-body"> <div class="b4-module-banner"> <a class="b4-module-banner-link" href="https://hrmos.co/pages/bengo4/jobs/0009602?utm_source=referral&utm_medium=creatersBlog&utm_campaign=sideBanner" target="_blank"> <img class="b4-module-banner-image--outline" src="https://cdn-ak.f.st-hatena.com/images/fotolife/b/bengo4/20220131/20220131211957.jpg" alt="採用情報"> </a> </div> </div> </div> <div class="hatena-module hatena-module-recent-entries "> <div class="hatena-module-title"> <a href="https://creators.bengo4.com/archive"> 最新記事 </a> </div> <div class="hatena-module-body"> <ul class="recent-entries hatena-urllist "> <li class="urllist-item recent-entries-item"> <div class="urllist-item-inner recent-entries-item-inner"> <div class="b4-module-post"> <a class="b4-module-post-link" href="https://creators.bengo4.com/entry/2024/11/05/080000"> <div class="b4-module-post-head"> <img class="b4-module-post-image" src="https://cdn.image.st-hatena.com/image/square/337345157192e1ddef992a9df627c402ccb389d5/backend=imagemagick;height=100;version=1;width=100/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fb%2Fbengo4%2F20241105%2F20241105080022.png"> </div> <div class="b4-module-post-body"> <span class="b4-module-post-date">2024-11-05</span> <span class="b4-module-post-title">イベント開催レポート：「出張！俺の電子契約」〜クラウドサインをアクセシビリティチェック〜</span> </div> </a> </div> </div> </li> <li class="urllist-item recent-entries-item"> <div class="urllist-item-inner recent-entries-item-inner"> <div class="b4-module-post"> <a class="b4-module-post-link" href="https://creators.bengo4.com/entry/2024/10/22/073000"> <div class="b4-module-post-head"> <img class="b4-module-post-image" src="https://cdn.image.st-hatena.com/image/square/c1dfc03847a3f2cce3cb951118c7127ebc14768f/backend=imagemagick;height=100;version=1;width=100/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fb%2Fbengo4%2F20241021%2F20241021192009.png"> </div> <div class="b4-module-post-body"> <span class="b4-module-post-date">2024-10-22</span> <span class="b4-module-post-title">ゼロダウンタイムで Amazon EC2 で稼働している nginx を AWS Fargate に移行した</span> </div> </a> </div> </div> </li> <li class="urllist-item recent-entries-item"> <div class="urllist-item-inner recent-entries-item-inner"> <div class="b4-module-post"> <a class="b4-module-post-link" href="https://creators.bengo4.com/entry/2024/10/19/060000"> <div class="b4-module-post-head"> <img class="b4-module-post-image" src="https://cdn.image.st-hatena.com/image/square/78550c9140689b604ecd1443b7fbafed9a699798/backend=imagemagick;height=100;version=1;width=100/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fb%2Fbengo4%2F20241019%2F20241019060008.png"> </div> <div class="b4-module-post-body"> <span class="b4-module-post-date">2024-10-19</span> <span class="b4-module-post-title">弁護士ドットコムはVue Fes Japan 2024にスポンサー＆登壇します！</span> </div> </a> </div> </div> </li> <li class="urllist-item recent-entries-item"> <div class="urllist-item-inner recent-entries-item-inner"> <div class="b4-module-post"> <a class="b4-module-post-link" href="https://creators.bengo4.com/entry/2024/10/10/083000"> <div class="b4-module-post-head"> <img class="b4-module-post-image" src="https://cdn.image.st-hatena.com/image/square/45c91a5a2433d1e863405ce9eeb9a5c0803289c0/backend=imagemagick;height=100;version=1;width=100/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fb%2Fbengo4%2F20241010%2F20241010084002.png"> </div> <div class="b4-module-post-body"> <span class="b4-module-post-date">2024-10-10</span> <span class="b4-module-post-title">MockServiceWorker（MSW） を使った高速開発のための運用事例</span> </div> </a> </div> </div> </li> <li class="urllist-item recent-entries-item"> <div class="urllist-item-inner recent-entries-item-inner"> <div class="b4-module-post"> <a class="b4-module-post-link" href="https://creators.bengo4.com/entry/2024/10/09/073000"> <div class="b4-module-post-head"> <img class="b4-module-post-image" src="https://cdn.image.st-hatena.com/image/square/511df004a6ecc99e66c03522a77e4b7cfb05073d/backend=imagemagick;height=100;version=1;width=100/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fb%2Fbengo4%2F20241008%2F20241008230505.png"> </div> <div class="b4-module-post-body"> <span class="b4-module-post-date">2024-10-09</span> <span class="b4-module-post-title">AWS COST CUT FIGHT 回答を作ってみました</span> </div> </a> </div> </div> </li> </ul> </div> </div> <div class="hatena-module hatena-module-archive" data-archive-type="default" data-archive-url="https://creators.bengo4.com/archive"> <div class="hatena-module-title"> <a href="https://creators.bengo4.com/archive">月別アーカイブ</a> </div> <div class="hatena-module-body"> <ul class="hatena-urllist"> <li class="archive-module-year archive-module-year-hidden" data-year="2024"> <div class="archive-module-button"> <span class="archive-module-hide-button">▼</span> <span class="archive-module-show-button">▶</span> </div> <a href="https://creators.bengo4.com/archive/2024" class="archive-module-year-title archive-module-year-2024"> 2024 </a> <ul class="archive-module-months"> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2024/11" class="archive-module-month-title archive-module-month-2024-11"> 2024 / 11 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2024/10" class="archive-module-month-title archive-module-month-2024-10"> 2024 / 10 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2024/09" class="archive-module-month-title archive-module-month-2024-9"> 2024 / 9 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2024/08" class="archive-module-month-title archive-module-month-2024-8"> 2024 / 8 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2024/07" class="archive-module-month-title archive-module-month-2024-7"> 2024 / 7 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2024/05" class="archive-module-month-title archive-module-month-2024-5"> 2024 / 5 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2024/04" class="archive-module-month-title archive-module-month-2024-4"> 2024 / 4 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2024/03" class="archive-module-month-title archive-module-month-2024-3"> 2024 / 3 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2024/02" class="archive-module-month-title archive-module-month-2024-2"> 2024 / 2 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2024/01" class="archive-module-month-title archive-module-month-2024-1"> 2024 / 1 </a> </li> </ul> </li> <li class="archive-module-year archive-module-year-hidden" data-year="2023"> <div class="archive-module-button"> <span class="archive-module-hide-button">▼</span> <span class="archive-module-show-button">▶</span> </div> <a href="https://creators.bengo4.com/archive/2023" class="archive-module-year-title archive-module-year-2023"> 2023 </a> <ul class="archive-module-months"> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2023/12" class="archive-module-month-title archive-module-month-2023-12"> 2023 / 12 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2023/11" class="archive-module-month-title archive-module-month-2023-11"> 2023 / 11 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2023/10" class="archive-module-month-title archive-module-month-2023-10"> 2023 / 10 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2023/09" class="archive-module-month-title archive-module-month-2023-9"> 2023 / 9 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2023/08" class="archive-module-month-title archive-module-month-2023-8"> 2023 / 8 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2023/07" class="archive-module-month-title archive-module-month-2023-7"> 2023 / 7 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2023/06" class="archive-module-month-title archive-module-month-2023-6"> 2023 / 6 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2023/04" class="archive-module-month-title archive-module-month-2023-4"> 2023 / 4 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2023/03" class="archive-module-month-title archive-module-month-2023-3"> 2023 / 3 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2023/02" class="archive-module-month-title archive-module-month-2023-2"> 2023 / 2 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2023/01" class="archive-module-month-title archive-module-month-2023-1"> 2023 / 1 </a> </li> </ul> </li> <li class="archive-module-year archive-module-year-hidden" data-year="2022"> <div class="archive-module-button"> <span class="archive-module-hide-button">▼</span> <span class="archive-module-show-button">▶</span> </div> <a href="https://creators.bengo4.com/archive/2022" class="archive-module-year-title archive-module-year-2022"> 2022 </a> <ul class="archive-module-months"> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2022/12" class="archive-module-month-title archive-module-month-2022-12"> 2022 / 12 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2022/11" class="archive-module-month-title archive-module-month-2022-11"> 2022 / 11 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2022/10" class="archive-module-month-title archive-module-month-2022-10"> 2022 / 10 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2022/09" class="archive-module-month-title archive-module-month-2022-9"> 2022 / 9 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2022/08" class="archive-module-month-title archive-module-month-2022-8"> 2022 / 8 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2022/07" class="archive-module-month-title archive-module-month-2022-7"> 2022 / 7 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2022/06" class="archive-module-month-title archive-module-month-2022-6"> 2022 / 6 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2022/05" class="archive-module-month-title archive-module-month-2022-5"> 2022 / 5 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2022/04" class="archive-module-month-title archive-module-month-2022-4"> 2022 / 4 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2022/03" class="archive-module-month-title archive-module-month-2022-3"> 2022 / 3 </a> </li> <li class="archive-module-month"> <a href="https://creators.bengo4.com/archive/2022/02" class="archive-module-month-title archive-module-month-2022-2"> 2022 / 2 </a> </li> </ul> </li> </ul> </div> </div> <div class="hatena-module hatena-module-category"> <div class="hatena-module-title"> カテゴリー </div> <div class="hatena-module-body"> <ul class="hatena-urllist"> <li> <a href="https://creators.bengo4.com/archive/category/%E3%82%A2%E3%83%89%E3%83%99%E3%83%B3%E3%83%88%E3%82%AB%E3%83%AC%E3%83%B3%E3%83%80%E3%83%BC" class="category-アドベントカレンダー"> アドベントカレンダー (25) </a> </li> <li> <a href="https://creators.bengo4.com/archive/category/%E3%82%A4%E3%83%99%E3%83%B3%E3%83%88%E3%83%BB%E3%82%AB%E3%83%B3%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9" class="category-イベント・カンファレンス"> イベント・カンファレンス (19) </a> </li> <li> <a href="https://creators.bengo4.com/archive/category/CLOUDSIGN" class="category-CLOUDSIGN"> CLOUDSIGN (38) </a> </li> <li> <a href="https://creators.bengo4.com/archive/category/%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3" class="category-アクセシビリティ"> アクセシビリティ (1) </a> </li> <li> <a href="https://creators.bengo4.com/archive/category/SRE" class="category-SRE"> SRE (5) </a> </li> <li> <a href="https://creators.bengo4.com/archive/category/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89" class="category-フロントエンド"> フロントエンド (9) </a> </li> <li> <a href="https://creators.bengo4.com/archive/category/%E3%83%AA%E3%83%BC%E3%82%AC%E3%83%AB%E3%83%96%E3%83%AC%E3%82%A4%E3%83%B3%E9%96%8B%E7%99%BA" class="category-リーガルブレイン開発"> リーガルブレイン開発 (1) </a> </li> <li> <a href="https://creators.bengo4.com/archive/category/%E7%A8%8E%E7%90%86%E5%A3%AB%E3%83%89%E3%83%83%E3%83%88%E3%82%B3%E3%83%A0" class="category-税理士ドットコム"> 税理士ドットコム (3) </a> </li> <li> <a href="https://creators.bengo4.com/archive/category/%E5%BC%81%E8%AD%B7%E5%A3%AB%E3%83%89%E3%83%83%E3%83%88%E3%82%B3%E3%83%A0" class="category-弁護士ドットコム"> 弁護士ドットコム (23) </a> </li> <li> <a href="https://creators.bengo4.com/archive/category/%E5%BC%81%E3%82%B3%E3%83%A0%E3%81%AA%E4%BA%BA%E3%80%85" class="category-弁コムな人々"> 弁コムな人々 (15) </a> </li> <li> <a href="https://creators.bengo4.com/archive/category/QA" class="category-QA"> QA (2) </a> </li> <li> <a href="https://creators.bengo4.com/archive/category/CRE" class="category-CRE"> CRE (2) </a> </li> <li> <a href="https://creators.bengo4.com/archive/category/%E3%83%87%E3%83%BC%E3%82%BF%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%83%AA%E3%83%B3%E3%82%B0" class="category-データエンジニアリング"> データエンジニアリング (2) </a> </li> <li> <a href="https://creators.bengo4.com/archive/category/%E9%83%A8%E6%B4%BB%E5%8B%95" class="category-部活動"> 部活動 (2) </a> </li> <li> <a href="https://creators.bengo4.com/archive/category/%E6%83%85%E5%A0%B1%E3%82%AC%E3%83%90%E3%83%8A%E3%83%B3%E3%82%B9%E6%9C%AC%E9%83%A8" class="category-情報ガバナンス本部"> 情報ガバナンス本部 (1) </a> </li> <li> <a href="https://creators.bengo4.com/archive/category/%E4%BA%BA%E4%BA%8B%E6%9C%AC%E9%83%A8" class="category-人事本部"> 人事本部 (1) </a> </li> <li> <a href="https://creators.bengo4.com/archive/category/%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3" class="category-セキュリティ"> セキュリティ (1) </a> </li> <li> <a href="https://creators.bengo4.com/archive/category/BUSINESS%20LAWYERS" class="category-BUSINESS-LAWYERS"> BUSINESS LAWYERS (1) </a> </li> <li> <a href="https://creators.bengo4.com/archive/category/Professional%20Tech%20Lab" class="category-Professional-Tech-Lab"> Professional Tech Lab (1) </a> </li> <li> <a href="https://creators.bengo4.com/archive/category/%E6%96%B0%E5%8D%92%E6%8E%A1%E7%94%A8" class="category-新卒採用"> 新卒採用 (1) </a> </li> </ul> </div> </div> <div class="hatena-module hatena-module-html"> <div class="hatena-module-title">リンク</div> <div class="hatena-module-body"> <div class="b4-module-banner"> <p class="b4-module-banner-title">クラウドサイン note ~Inside~</p> <a href="https://note.com/cloudsign/m/md653f118eed4" class="b4-module-banner-link"> <img class="b4-module-banner-image" src="https://cdn-ak.f.st-hatena.com/images/fotolife/b/bengo4/20220407/20220407152735.jpg" alt="20220407152735"> </a> </div> </div> </div> </div> </aside> </div> </div> <div id="bottom-editarea"> <div class="b4-module-footer"> <p class="b4-module-footer-copyright">© Bengo4.com, Inc. 2005</p> </div> </div> </div> </div> <script async src="https://s.hatena.ne.jp/js/widget/star.js"></script> <script> if (typeof window.Hatena === 'undefined') { window.Hatena = {}; } if (!Hatena.hasOwnProperty('Star')) { Hatena.Star = { VERSION: 2, }; } </script> <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ja_JP/sdk.js#xfbml=1&appId=719729204785177&version=v17.0"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> <div class="quote-box"> <div class="tooltip-quote tooltip-quote-stock"> <i class="blogicon-quote" title="引用をストック"></i> </div> <div class="tooltip-quote tooltip-quote-tweet js-tooltip-quote-tweet"> <a class="js-tweet-quote" target="_blank" data-track-name="quote-tweet" data-track-once> <img src="https://cdn.blog.st-hatena.com/images/admin/quote/quote-x-icon.svg?version=add51ddc2d3c0599e98ea1239ac012" title="引用して投稿する" > </a> </div> </div> <div class="quote-stock-panel" id="quote-stock-message-box" style="position: absolute; z-index: 3000"> <div class="message-box" id="quote-stock-succeeded-message" style="display: none"> <p>引用をストックしました</p> <button class="btn btn-primary" id="quote-stock-show-editor-button" data-track-name="curation-quote-edit-button">ストック一覧を見る</button> <button class="btn quote-stock-close-message-button">閉じる</button> </div> <div class="message-box" id="quote-login-required-message" style="display: none"> <p>引用するにはまずログインしてください</p> <button class="btn btn-primary" id="quote-login-button">ログイン</button> <button class="btn quote-stock-close-message-button">閉じる</button> </div> <div class="error-box" id="quote-stock-failed-message" style="display: none"> <p>引用をストックできませんでした。再度お試しください</p> <button class="btn quote-stock-close-message-button">閉じる</button> </div> <div class="error-box" id="unstockable-quote-message-box" style="display: none; position: absolute; z-index: 3000;"> <p>限定公開記事のため引用できません。</p> </div> </div> <script type="x-underscore-template" id="js-requote-button-template"> <div class="requote-button js-requote-button"> <button class="requote-button-btn tipsy-top" title="引用する"><i class="blogicon-quote"></i></button> </div> </script> <div id="hidden-subscribe-button" style="display: none;"> <div class="hatena-follow-button-box btn-subscribe js-hatena-follow-button-box" > <a href="#" class="hatena-follow-button js-hatena-follow-button"> <span class="subscribing"> <span class="foreground">読者です</span> <span class="background">読者をやめる</span> </span> <span class="unsubscribing" data-track-name="profile-widget-subscribe-button" data-track-once> <span class="foreground">読者になる</span> <span class="background">読者になる</span> </span> </a> <div class="subscription-count-box js-subscription-count-box"> <i></i> <u></u> <span class="subscription-count js-subscription-count"> </span> </div> </div> </div> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> <script src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> <script type="text/javascript" src="https://cdn.blog.st-hatena.com/js/external/jquery.min.js?v=1.12.4&version=add51ddc2d3c0599e98ea1239ac012"></script> <script src="https://cdn.blog.st-hatena.com/js/texts-ja.js?version=add51ddc2d3c0599e98ea1239ac012"></script> <script id="vendors-js" data-env="production" src="https://cdn.blog.st-hatena.com/js/vendors.js?version=add51ddc2d3c0599e98ea1239ac012" crossorigin="anonymous"></script> <script id="hatenablog-js" data-env="production" src="https://cdn.blog.st-hatena.com/js/hatenablog.js?version=add51ddc2d3c0599e98ea1239ac012" crossorigin="anonymous" data-page-id="entry"></script> <script>Hatena.Diary.GlobalHeader.init()</script> </body> </html>