1. はじめに ソフトウェア開発のチームに、新しいメンバーが入ってくることはよくあります。 以前に新卒社員がチーム入ってきた場合の育成方法を紹介しました(こちら)。 今回は、新卒社員ではなく、他の会社から中途入社か同じ会社の部署異動で来る新メンバーの話です。 (エンジニアが数百人などで規模が大きい会社の場合、部署が違うと仕事のやり方が全く変わる場合があるので、今回は中途入社と他の部署からの異動を同じように「新メンバー」として扱います) 会社や部署が変わると仕事のやり方が大きく変わるため、仕事のやり方に戸惑うことが多いと思います。 本稿では、そのような「新メンバー」を活躍しづらくしてしまうアンチパターンとその対策を紹介します。 2. 中途入社や部署異動で来た新メンバーが適応することの困難さを理解する 中途入社や部署異動で来た新メンバーが組織に適応することは、新卒社員のそれとは別の難しさがあり

こんにちは！ dely株式会社サーバーサイドチームの安尾です。 本記事はdely Advent Calendar 2019の5日目の記事になります。 qiita.com adventar.org 昨日は辻さんが「Jupyterもいいけど、SageMath使って可能性もっと伸ばそう！」という記事を書きました。 tech.dely.jp 本日は「スピード優先の開発で溜まった技術的負債の返済計画（サーバーサイド編） 」というタイトルで、今delyのサーバーサイドチームの技術的負債についての考え方から、負債返済のために具体的に行なっていることをご紹介したいと思います。 技術的負債とは 抽象的な言葉なので、組織や人によって微妙に定義が異なるのではないかと思いますが、僕たちのチームでは「未来の開発スピードを下げる原因となるプログラムやアーキテクチャのこと」を総称して技術的負債と呼ぶようにしています。

河野と申します。2018年8月からマッハバイトで業務委託（いわゆるフリーランス）として業務に携わっており、2022年6月から、テックリード（以降、TL）という立場となりました。 TLという言葉は広く使われていますが、実際に何をするのかは、会社や環境によってさまざま。 3ヶ月の振り返りがてら、ここに一例として公開してみようと思った次第です。 TL着任以前 Join当初はRailsエンジニアとしての働きを期待されており、最初の担当はマッハバイトiOS版用に、REST APIを開発することでした。 半年少しでその業務が一段落した後は、以下のことなどを担当してきました。 Rails製アプリケーションの機能追加、Ruby、RailsのUpdate ホストOSのUpdateに伴う、deploy環境の修正や、ライブラリなどのUpdate（オンプレ環境） マイクロサービスの中心に置きたいメッセージングサー

コンポーネントのイベント ​このページは、すでにコンポーネントの基礎を読んでいることを前提にしています。初めてコンポーネントに触れる方は、まずそちらをお読みください。

props の宣言 ​Vue のコンポーネントでは、明示的な props の宣言が必要です。これにより Vue は、外部からコンポーネントに渡された props をフォールスルー属性（専用のセクションで説明します）として扱うべきかを知ることができます。

Playwrightあるいはそのロケーターの元ネタとなっているTesting Libraryでは、DOMを指定する方法として data-testid 属性を扱ったクエリーを提供しています。どちらでも getByTestId(ID文字列) メソッドを使い、この属性値を使った要素の取得が行えます。しかし、ドキュメントを見ると、PlaywrightもTesting Libraryも、「他の手法が使えないときの最終手段」としています。 In the spirit of the guiding principles, it is recommended to use this only after the other queries don’t work for your use case. Using data-testid attributes do not resemble how your

はじめに 株式会社スペースリー フロントエンドエンジニアの宮坂と申します。 ふだんは3Dビューアやその編集画面のDOM部分をReactやVueで書きつつ、たまにフロントエンド開発環境構築おじさんとして他チームへ出しゃばったりして生きています。 今回はその環境構築に関わるところ、Vue 2 から 3 へ移行しようとしたらいちばん大変なのが Vuetify 2 から 3 への移行だった話を書きます。 レガシーを生かしつつアップグレードする苦労話としてニッチに刺されば幸いです。 経緯と背景 Vue 2 のEOLまで1年を切って スペースリーはサービスインから6年以上経つこともあり、技術スタックはプロジェクトによって新しいものもあれば、今となっては古いものもあります。 リリースから日が浅いパノラマ変換3Dプレイヤーは2023年6月時点でエンドユーザー向けの部分がReact 18で、事業者向けの部分

とりあえず落ち着け。 みなさん、毎日なにかしらのコードを読み、開発する日々を送っていると思います。そんな中で、 糞コードは死ぬべきである！！絶対に直すべき！！ という感情に取りつかれてしまうことがあると思います。自分の技術力に自信のある人ほど、無理やりにでも直そうと試みると思います。それがどんな修羅の道か。そして、糞コード修正がどんな道を歩むのか。この記事では糞コード修正の罠とありがちなストーリーについて書きたいと思います。 ビジネスとしてのプログラムは本質的に糞である 例えば、「携帯電話の利用料金」のプログラムがあります。 「携帯電話　透明性高め料金値下げを」という記事もあるように世の中の携帯電話の料金プランはかなり複雑です。例えば、auだと「auでんき」といった電気料金とパックされた電話料金プランがあります。また、「auスマートバリュー」といったプランもあり、家のインターネット回線をa

ライフサイクルフック ​各 Vue コンポーネントインスタンスは、生成時に一連の初期化を行います - 例えば、データ監視のセットアップ、テンプレートのコンパイル、インスタンスの DOM へのマウント、データ変更時の DOM の更新が必要になります。その過程で、ライフサイクルフックと呼ばれる関数も実行され、ユーザーは特定の段階で独自のコードを追加することが可能です。 ライフサイクルフックの登録 ​例えば、onMountedmounted フックは、コンポーネントが最初のレンダリングを終了し DOM ノードを生成した後に、コードを実行するのに使用することができます: vue<script setup> import { onMounted } from 'vue' onMounted(() => { console.log(`コンポーネントがマウントされました。`) }) </script>

VueConf US - Join the official Vue.js conference | May 15-17, 2024 - New Orleans, USARegister Now Use code VUEJSDOCS to get $100 off!

基本的な例 ​テンプレート内に式を書けるのはとても便利ですが、非常に簡単な操作しかできません。テンプレート内に多くのロジックを詰め込むと、コードが肥大化し、メンテナンスが難しくなります。例えば、配列が入れ子になっているオブジェクトがあった場合: jsexport default { data() { return { author: { name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Mystery' ] } } } } jsconst author = reactive({ name: 'John Doe', books: [ 'Vue 2 - Advanced Guide', 'Vue 3 - Basic Guide', 'Vue 4 - The Myste

はじめに 今回紹介するのは、React や Vue などの「コンポーネント指向のフロントエンド開発」における「テスト方針の考え方」と、それを実現するための「方法論」です。 初めて React などのコンポーネント指向のテストを書くとき、どういう考え方・方針でテストを書いていくのか分からず悩んだ人も多いのではないでしょうか。 この記事ではその疑問の1つの解として、React 公式で推奨されているテストライブラリ Testing Library の開発者であり、Testing Trophy というテストコンセプト考案者でもある Kent C. Dodds の考え方とその実現方法を紹介していきます。 社内のシステムでも実際にこの Kent のコンセプトに従いテストの運用をしていますが、これによって「壊れにくいテスト」がフロントエンド（React）で書きやすくなっています。より正確に言うと「壊れる

はじめに 公式ドキュメントをしっかり読もう。 なんとなくで始めても良いけど、結局、公式ドキュメントに戻ることが多かった・・・。 理解度によるんだろうけど。 ハイドレーション サーバーサイドレンダリング(SSR)などで事前にサーバー側で作られたHTMLを、JavaScriptで動的にしていくプロセスのこと。 ①サーバーサイドで作られたHTMLをブラウザが受け取る。 ②javascriptがサーバーサイドで作られたHTMLと期待しているHTML（ブラウザに表示されているHTML)をチェックする。 違っていれば、javascriptが再度レンダリングする。 ③期待するHTMLに対してjavascriptのイベントを登録していく。 個人的に詳細まで理解できていないので、SEOが心配なときはcurlでhtmlを確認するのが良さそうな気がする。（心配性） インストール node.jsのバージョンは、1

平素よりOLTAおよびFINUX（INVOY）のサービスをご利用いただき誠にありがとうございます。 2023年11月7日（火）に判明した、弊社関連会社（FINUX）が提供するクラウド請求書プラットフォーム「INVOY」において特定の条件に該当した一部のユーザー様の顧客情報が他のINVOYユーザー様から閲覧できる状態になっていた事象について、恒久対応が完了しましたので再発防止策とあわせてご報告いたします。 本事象の解消に向けて2023年11月7日（火）18時10分より緊急メンテナンスのためサービスを一時停止しておりましたが、2023年11月8日（水）2時58分に復旧し、現在は通常通りご利用いただけます。 なお、他ユーザー様が閲覧できる状態にあった可能性がある情報は、ご登録のメールアドレス、ユーザー名、ユーザーの種別と権限（管理者か否か）であり、第一報よりお伝えの通り、クレジットカード情報など

書物の紹介 良いコード/悪いコードで学ぶ設計入門 ―保守しやすい 成長し続けるコードの書き方 ITエンジニア本大賞2023で大賞に選ばれた本です。 感想としては、様々な基本的な知識を現代の状況に折り合いをつけてまとめた良書だと思います。 重要ポイントのみをまとめましたが、購入して読んでみるとより理解が深まると思います。 第1章　悪しき構造の弊害を知覚する ■悪しきコードとは コードを読み解くのに時間がかかる バグを埋め込みやすくなる 悪しき構造がさらに悪しき構造を誘発する 低凝集、生焼けオブジェクトにならない ■重要なワード 低凝集 関連するデーやロジック同士が分散し、バラバラになっていること 生焼けオブジェクト 初期化しないと使い物にならないクラス、または未初期化状態が発生しうるクラス 第2章　設計の初歩 変数、メソッド、クラス名はなるべく内容を把握できるようにする 名前について理解不能

上記のようにコードエディタを開くコマンドを分けるために、既にcodeコマンドをVScodeで使っている方はcursorダウンロードの際にcursorコマンドのみインストールするようにしてください。codeの方もインストールすると、codeコマンドでVScodeとCursorどちらも開いてしまうようです。 Cursor主要機能紹介 cmd + Shift + L or cmd + L でGPTとChat機能 エディタ上で画面右にGPTに質問できるサイドバーが出現する。何も選択してないと無から質問できる状態になっていて、コードを選択した状態で開くとそのコードがあらかじめ引用された状態になっている(別の部分のコードもどんどん追加できる)。 ↑10~21行目をcmd + Lした後に31~33行目を追加でcmd + Lした画像 cmd + K　でAI Edit機能 コードを選択した状態でcmd +

https://offers.connpass.com/event/299909/ 登壇資料

自分は2年前にデザインシステムの専門チームを会社で立ち上げた。 この話をすると太っ腹な会社ですね、余裕あるの羨ましいです、その環境贅沢じゃない？と言われることがある。これにはとても違和感を感じる。 所属しているプロダクトのデザインチームは全然余裕があるわけでもなく、必要性がないところに好きにチームを作れる訳でもない。自分たちは下の記事を参考にTeam Model #3: Federatedを意識し…