HeadlessなUIライブラリを利用する価値
Speaker : Yuito Kawashima ( https://github.com/yuitokawashima ) at 「Vue.js v-tokyo Meetup #20」 https://vuejs-meetup.connpass.com/event/318066/
Speaker : Yuito Kawashima ( https://github.com/yuitokawashima ) at 「Vue.js v-tokyo Meetup #20」 https://vuejs-meetup.connpass.com/event/318066/
はじめに 2022 年 1 月から、趣味で PC 向けの将棋アプリを開発しました。その中で取り組んだことや学んだことについて簡単にまとめます。 作ったもの Electron将棋 (electron-shogi) GitHub: sunfish-shogi/electron-shogi GitHub Pages: Electron将棋 背景 最近ではスマホやタブレットでも将棋の対局や研究ができるようになりましたが、本格的に将棋の勉強や研究をするには必ずしも十分ではなく、特に将棋 AI を動す上で PC の処理能力やカスタマイズ性は有用です。 2010 年あたりからオープンソースの将棋 AI が増えましたが、その多くは GUI や通信対局機能を備えておらず GUI のアプリケーションと組み合わせて使う必要があります。AI と GUI がやりとりするための USI という共通仕様があり、 USI
「とほほのWWW入門」管理人の杜甫々氏が、これまでの経歴と、「とほほのWWW入門」執筆時に気を付けていること、自身の趣味について話しました。全2回。前回はこちらから。 今まで勉強してきた言語 杜甫々：今日はYAPC、Perl（のイベント）なので、プログラミングに関してのことをちょっとしゃべります。 （スライドを示して）今までこんな言語の勉強だけしてきました。よく使う言語はC言語が最初で、C++、そこから掲示板を作っていた頃はPerl。そこからPHPに移って、今はPython、JavaScriptが多いですかね。あとはたまにAWKをまだ使っています。 Perlの好きなところ、今後サポートしてほしいところ （スライドを切り替えて）えっとー…。謝ります（笑）。 （会場拍手） ずいぶん昔にPerl入門を書いたんですが、ほったらかしになっていて。今回このお話をいただきまして「それじゃあ、やはりいかん
この本の概要 E2Eテスト（End-to-End Testing）とは，システムの端から端（End-to-End）まで，全体を通して行うソフトウェアテストを指します。本書ではE2Eテストを「ユーザーの視点でWebシステムの動作を確認する自動テスト」として定義し，E2Eテストをこれからプロジェクトに導入しようとしている人，すでに導入しているがパフォーマンスや保守性で課題を感じている人を対象に，E2Eテストのフレームワークとして近年人気が急上昇しているPlaywrightをツールとして，その目的からモダンなノウハウまで，E2Eテスト初心者の方にもわかりやすくハンズオンを交えながら解説します。CIへ組み込む方法やユニットテストとの棲み分けなど，E2Eテストを実際の開発現場に投入するうえでの知見も数多く紹介します。 こんな方におすすめ E2Eテストをこれからプロジェクトに導入しようとしている人 す
なぜ分割代入をすると Vue は reactive ではなくなるのか - Stockmark Tech Blog
こんにちは。 Anews の開発に携わっている Engineer の 羽柴 と申します。 Anews はフロントエンドを Vue で開発しています。 自分自身の背景として、Stockmarkに入社するまでは React を使って開発していたので Vue の経験は殆どない状態でした。 そこで理解を深めるために chibivue を使った勉強会を社内で進めています。 その時に気づいたことを share したいなと思い、この記事を書きました。 ja.vuejs.org chibivueとは Vue を書き始めた感想 chibivue の勉強会を進めて Proxyについて でもなんで まとめ 余談 最後に chibivueとは ubugeeei.github.io Vue を最少単位で作ってみようという project です。 浅い理解でよければ公式 docs をさらっと読んで実装するのが早いので
はじめに 自己紹介 こんにちは、株式会社ソーシャルPLUSのフロントエンドエンジニア @zomysan です。 ソフトウェアエンジニアとしての経験は10年と少しで、趣味は個人開発と食べることです。直近では Discord の読み上げ Bot「shovel」のWebインターフェイス（マイページ）機能・有償プランなどを作りました。 この記事について 個人開発でタイピングゲームを作ったので、それについて前半・後半に分けて話します。 前半では作ったタイピングゲームの技術選定の理由や 何を大事にして作ったのか？ ということを紹介します。 後半は今回の開発を実例として、私が開発をするときの進め方について紹介します。誰にでも合うものではないかもしれませんが、少しでも参考になれば嬉しいです。 ゲームの紹介 tstt で遊びながら学ぼう！ TypeScript Touch Typing 略して tstt と
こんにちは、VPoEの北川です。 今回はトレタで現在使用している技術スタックについて紹介します。 創業時から稼働している予約・顧客台帳サービス「トレタ」から現在の注力事業のモバイルオーダーサービス「トレタO/X」までをあらためて振り返ってみると、まるで異なる技術スタックになっているので歴史的な背景などを辿りながら紹介していきます。 技術スタックの変遷 予約・顧客台帳「トレタ」 会社名にもなっている予約・顧客台帳の「トレタ」は創業当時から稼働している築11年ほどのシステムです。 サーバーサイドにはRubyとRubyOnRailsで作られた巨大なコードベースのAPIサーバーがあり、予約台帳のiOSアプリやウェブ予約などのWebアプリケーションなどが利用しています。 長年このモノリシックなシステムを成長させてきたので、以前からトレタを知ってくださっている人にはトレタはRubyの会社と認知されてい
JavaScriptのProxy(Reflect) JavaScriptのProxy(Reflect)と 昨日より仲良くなる20分 2024.05.24 JavaScript祭り hiroko_ino ※掲載させていただいているOSSのコードは 発表現在のものです 自己紹介 猪野 浩子 / hiroko_ino 所属：RUN．EDGE株式会社 Web Front-end Engineer, Designe Vue.jsやFlutterでの開発や、UIデザインを時にはやっ たりしま 神奈川在 趣味はゲームのRTA
はじめに この記事は、every Tech Blog Advent Calendar 2024(夏) の1日目の記事です。 DELISH KITCHEN開発部の羽馬(@NaokiHaba)です。 この記事では、DELISH KITCHEN チラシ で使用している Vuex の Pinia への移行について紹介します。 chirashi.delishkitchen.tv 本記事では、これらの知識があることを前提に説明を進めます。 Vue.jsの基本的な知識 Nuxt.jsの基本的な知識 Vuexの基本的な知識 Piniaとは Pinia（ピーニャ）は、Vue.js用の新しい状態管理ライブラリです。Vuexの次のイテレーションとして開発が始まり、Vuex 5に組み込むことを想定していたアイデアを多く取り入れています。 pinia.vuejs.org Piniaは、Vuexと比較して以下のような
はじめに TSKaigi本番も迫り緊急でテックブログを書いています、VPoEの河合です。 来る5月11日(土)、TSKaigi 2024が開催されます。エムスリーエンジニアリンググループは、TSKaigiをリフレッシュメントスポンサーとして応援しています。 本記事は、少しばかりTSKaigiの宣伝をしつつ、エムスリーのJavaScript/TypeScript文化のお話をするものです。 はじめに TSKaigiとは エムスリーにおけるTypeScript 学生向けLTも開催 おわりに We are hiring !! TSKaigiとは TSKaigiは、一般社団法人TSKaigi Associationが企画、運営する、国内最大級のTypeScriptをテーマにした技術カンファレンスです。 今年が第1回目とのことですが、KeynoteにはTypeScript Product Manage
はじめに こんにちにんにん、 art です。 僕が所属するレバテック開発部では、最近デザインシステム『VoLT』が誕生しました。 レバテックでは複数のプロジェクトが運用されており、フロントエンドの技術スタックは Vue.js × Nuxt React x Next.js の２つが採用されています。 ですので、両方の技術スタックに対応したデザインシステムを作る必要があるわけですね。 あら大変。_(:3 」∠ )_ というわけでこの記事では、『VoLT』のUIコンポーネントライブラリを制作するにあたり、肝となったデザインシステムのマルチフレームワーク対応についてお話しします。 🔗そもそも『VoLT』とはなんぞや？構築の背景は？と気になった方は、こちらをご覧ください！ 想定読者 デザインシステムに興味のある方 これからデザインシステム関連の業務に携わる方 すでにデザインシステム関連の業務に携わ
こんにちは。Vue.js 日本ユーザーグループの jay-es です。 2024 年 5 月 28 日（火）に Vue.js v-tokyo Meetup #20 を開催しました。 今回は「Developer Experience 開発者体験特集!」というテーマで、Vue.js エコシステムの DX 関連の内容をキャッチアップできるイベントとなりました。 当日参加いただいた皆様、誠にありがとうございました。 また、会場スポンサーをしていただいた株式会社プレイド様、ツールスポンサーの esa 様にも心よりお礼申し上げます。 会場の様子GINZA SIX の株式会社プレイドの社内にある広々とした人工芝のスペースが今回の会場です。 後方には大きな冷蔵庫があり、好きなドリンクをいただくことができました。太っ腹！ オープニングまずは Vue.js 日本ユーザーグループ代表の kazupon 氏による
Reactでのダイアログの開閉制御については以前、別のエントリーで書きました。 ダイアログもアラートも、Reactで子コンポーネントの開閉管理を実装するVue3でも、何か簡単に書ける方法はないかと試行錯誤して、ちょっといい感じかな？という方針を見つけたので、備忘がてら技術ブログに書いておきます。 使いやすいダイアログAPIとは太古の昔より、便利なダイアログ機能というのは、呼び出し元はダイアログの開閉状態とか細かい制御は気にせず、必要な情報を渡して、結果だけもらうというものです。JavaScriptのブラウザのAPIにもありますよね。 const result = confirm("今日はいい天気でしたね") // OKのときはtrue console.log(result) これはVisual Basicとかでもなんでも同じですね。ただし、JavaScriptだとconfirm()、ale
2024 年 5 月 28 日に東銀座の PLAID さんで開催された v-tokyo 20 に参加してきた。 v-tokyo は Vue.js 日本ユーザーグループが不定期（3 ヶ月に 1 回？）に開催している Vue の Meetup イベントだ。 頭がフレッシュなうちに参加レポートを残す。 headless な UI ライブラリを選択するアンカーリンク会場スポンサーの PLAID さんのセッション。 Headless UI ライブラリの説明からはじまって、Vue 向けの Headless UI ライブラリの Radix Vue を使って社内で Vue 版のデザインシステムを作成しているという話だった。 PLAID さんの社内には Sour というデザインシステムがあって、それの Vue 版を Radix Vue で実装しているらしい。 Sour のことは検索してもあまりアウトプットさ
Vue.js最新動向 by @kazupon — TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線
本記事は、TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線のセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。 本セッションの登壇者 セッション動画 ではVue.jsの最新動向ということで、話していきたいと思います。早口の紹介になりますが、スライドは後日じっくり読んでいただければと思います。 まず自己紹介なんですけども、@kazuponと言います。PLAID株式会社というところで働いています。 Vue.jsのコアチームメンバーで、Nuxtのコミュニティチームに参加していたり、Vue.js日本ユーザーグループのオーガナイザーもしています。
RubyKaigi 2024 のブースコンテンツ用に ruby.wasm を使用したクイズアプリを作成しました - クラウドワークス エンジニアブログ
こんにちは、 @t0yohei です。 ruby.wasm は、Ruby のコードを Wasm に変換しブラウザー上で実行できるようにする技術です。 今回は、この ruby.wasm を使用してちょっとした web アプリを作成したので、そのことについて記載してみようと思います。 ※ この記事は、RubyKaigi 2024 のクラウドワークス社ブースにて展示するクイズアプリの解説記事です。 目次 目次 作ったもの クイズアプリの解説 大まかな仕組み 使わせてもらったライブラリ i18n 対応 問題について デプロイ先 難しかったこと タイマーの部分の実装 Ruby のコード規約、JavaScript のコード規約の使い分け サンプルコード探し 感想 作ったもの Ruby に関するクイズを出題して、それに答えてもらうクイズアプリを作成しました。 RubyKaigi でのクラウドワークス社ブ
こんにちは、 @t0yohei です。 先日、crowdworks.jpで使用されているヘッダーのリプレイスを行いました。 ヘッダーのデザインを改善し、より使いやすくなりました！ – クラウドワークス お知らせブログ このリプレイスでは、ユーザビリティやアクセシビリティの向上を目指すと同時に、技術的負債の解消や新しい画面レイアウトの下準備といった意図もありました。 このブログでは、今回のヘッダーリプレイスで直面した課題やポイントを共有したいと思います。 ヘッダーの改修や多くの画面に適用されているUIパーツのリプレイスに取り組む方にとって参考になれば嬉しいです。 バリエーションの把握と、採用パターンの選択 サービス全体に反映されているヘッダーをリプレイスするには、まずどのようなバリエーションが現在存在しているのかを知る必要があります。 時には特定画面に向けてカスタマイズされたヘッダーもあった
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Electronを使ったPC向け将棋アプリ開発 - Qiita
「説明サイトとリファレンスサイトの両立を目指したい」 「とほほのWWW入門」管理者・杜甫々氏が執筆時に気をつけていること
［入門］Webフロントエンド E2E テスト――PlaywrightによるWebアプリの自動テストから良いテストの書き方まで
Reactのコードを打ち込むタイピングゲームを作った話&個人開発の流れ
Next.jsとGoを使っていきます - トレタ開発者ブログ
JavaScriptのProxy(Reflect)と 昨日より仲良くなる20分 | ドクセル
Vuex から Pinia への移行を行いました - every Tech Blog
TSKaigiのスポンサーです、リフレッシュメントについて全てをお話します - エムスリーテックブログ
デザインシステムをマルチフレームワーク(React/Vue.js)に対応させてみた
Vue.js v-tokyo Meetup #20 を開催しました｜jay-es
Vue3でモーダルダイアログの起動をいい感じに実装する | フューチャー技術ブログ
v-tokyo 20 に参加した | blog.kzhrk.com
サービスのヘッダーリプレイスがたいへんだった話 - クラウドワークス エンジニアブログ