Vue 3でドラッグ&ドロップを実装してみる
要素の並び替え機能を実装する機会があり、Vue 3でドラッグ&ドロップを実現する方法を調査しました。 いくつか方法がある中で、今回はVue 3との相性が良い vue-draggable-plus を使ってみました。 この記事では、vue-draggable-plusの導入から基本的な使い方までを紹介します。 vue-draggable-plusとは vue-draggable-plu
2026.7.7
JavaScript
Vueやreactでデータが反映されない！？なぜ？？ 問題を再現して解決方法がわかるようになる
ラクーングループのサービスのフロントはreactやVue.jsに順次更新していっています。その中で様々な問題が発生しますが、 その中でも、私が最も多く受ける相談が「値を変更したはずなのに、画面に反映されない！」というものです。 今回は反映されないパターンをreact、Vue.jsそれぞれでいくつか再現して、なぜ反映されないのか解き明かしていきます。 準備 サンドボックスであそんでみる rea
2025.4.22
Storybook駆動開発とは？UIコンポーネントを効率よく作る
Storybook駆動開発を知っていますか？ ページ全体をいきなり作るのではなく、「ボタン」や「モーダル」、「入力欄」などのUI部品を先に個別に作るという開発スタイルがあります。 こうしたUIパーツをひとつずつ作って確認できるツールが、Storybook（ストーリーブック）です。 この記事では、Storybookとは何か、Storybook駆動開発の考え方やメリット・デメリットなどを紹介してい
2025.4.11
Illustratorユーザー必見！AI入稿時のチェックを効率化するスクリプトをつくる！
みなさんは普段、イラストレーターを使用したai入稿のチェックにどれくらいの時間をかけていますか？ 今回はイラレで使用できる「入稿時のチェックを自動化するスクリプト」の作成方法を紹介します。 スクリプト作成の目的 入稿前チェックでは誤字脱字など定量的でないチェックも必要となりますが、一方で「ドキュメントのカラーモードがCMYKか」「フォントはアウトライン化されているか」など定量的なチェックも多々
2024.11.5
パスワードにさよなら？スマホ・PCで顔や指紋認証でログイン Passkey認証ができるWebサイトの作りかた
エンジニアの皆様は、ログイン機能が必要なサイトの「ログイン方法」の要件として何を思い浮かべますか？ 多くの方はID/パスワードでの認証を一番に思いつくのではないかと思います。 ID/パスワード認証はポピュラーな認証方法ですが、パスワードの漏洩からの不正アクセスのリスクや忘れてしまったときの不便さがあります。 そこで今回は、Passkey認証のできるサイトの作り方をフロントエンドの実装にフォーカスし
2023.4.28
type=”file”のinputタグをJSで操作する方法
今回は私が最近担当した案件で苦労した、type="file"のinputの値と全く同じ形式のデータを０から作る方法と、データをフォームでアップロードする方法各種について書いていこうと思います！ input type="file"について 基本的にinput type="file"の値というのは、type="text"などのほかのinput要素と違い変更したり設定したりすることはできません。 も
2023.4.26
dialogタグでセマンティックにモーダルを作成するには
新しく追加されたdialogタグの特徴に触れつつ弊社のサイトで使われているモーダルをつくってみます。 対応ブラウザ 執筆時のSafariバージョンが16.xxのため、気になるのはSafariくらいでしょうか。 ブラウザ バージョン Safari 15.4 Safari ios 15.4 Chrome 37 Firefox 98
2023.3.28
簡単導入Oracle SQLclと手慣れたJSで少し凝ったデータ登録の方法
最近データ移行の仕事をする機会があり、その調査の中で見つけた、Oracle Databaseで手軽に柔軟にデータ登録する方法を紹介したいと思います。 具体的には、Oracle SQL Developerコマンドラインと呼ばれる、Oracle SQLcl（以降、SQLcl）でJavaScriptを利用した方法です。 SQLclは依存関係が少なく比較的導入が簡単で、利用プログラマが多いJavaScri
2022.4.5
モダンJavaScriptに触れてみよう
フロントエンドに React/Vue.js を採用する機会が多くなってますが、まだまだ jQuery が現役のところも多いと思います。 今回は過去に JavaScript を触った経験がある方を対象に ES2015（ECMAScript 2015、ES6） 以降で変わった点をいくつかまとめてみました。 const let ES2015 従来は変数宣言に var を使用してきましたが、const
2022.3.28
簡単！javascriptライブラリとテキストで～図を作成
シーケンス図を書く機会があり、その際に使用した便利なjavascriptライブラリがあったので２つご紹介します。 エクセルやパワーポイント等で図や矢印を綺麗に引くのが苦手な人でも、テキストで書けば綺麗に図を作成できます。 1. js-sequence-diagramsで図を書く js-sequence-diagramsはシーケンス図をテキストで表現できるjavascriptのライブラリです。
2022.2.17
どこでつまずきやすい？？デザイナーにjQueryを教える際の注意点
ここ最近デザイナーや新人さんからjQuery・jsの質問を受けたりヘルプで代わりに作成したりという業務がぽつぽつと出てきました。 直近であった失敗の反省も兼ね、jsを使う機会は少ないけど少しかじってる状態の人にjQueryを教えた時つまずきやすいと感じた点を私なりにまとめたいと思います！ 失敗談 まず実際に社内で起こった失敗事例を紹介します。 とある案件で上の画像のような追従ボタンを実装
2021.4.4
e2eのテスティングフレームワークCypressを導入しました
今回はe2eのテスティングフレームワークであるCypressを導入したので、その導入についてのお話です。 なぜCypressを導入したのか URIHOのお客様に使用していただいている画面はSPAで構築してあります。そのためSPAに対応したe2eのツールが必要になりました。今まではseleniumを使用していたのですが各個人の環境の設定が手間、SPAで使用するとなるとDOMが出現するまで待つとい
2021.3.1