保守性の高いソフトウェアの開発に役立つ様々なTipsを書いた。 特定の言語にとらわれずあらゆる場面で役立つことを集めた。
こんにちは、delyコマース事業部エンジニアの小川です。 先月11月に入社し、エキサイティングな毎日を過ごしています。 この記事はdely Advent Calendar 2019 - Qiitaの24日目の記事です。 昨日はSREの松嶋さんが「AWS RunCommandを使ってEC2上に監視ダッシュボードをサクッと作る(Ansible+Terraform+Grafana編)」という記事を書いてくれましたので是非そちらも読んでみてください! tech.dely.jp コマース事業部では、現在「事業開発」と「ソフトウェア開発」がほぼ同時に進行しており、プロジェクトにおける確定要素と不確定要素が複雑に絡み合っています。 スピード重視でゴリゴリ実装していくのも興奮しますが、変化に耐えづらい実装をしてしまうと、その後の開発スピードに影響していまい、事業のスピードが落ちるなんて事にもなりかねません
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。Yahoo!広告のデータマーケティングソリューション(以下、DMS)を開発しているデータアナリストの薄田です。 みなさんは、中間テーブル同士が複雑に絡み合い変更しようにも影響範囲を推定できず、手がつけられない分析パイプラインの保守で苦労された経験はないでしょうか? 私のチームでは数千行におよぶ分析用SQLをリファクタリングして、保守性と生産性を両立する分析パイプラインに生まれ変わらせることができました。 この記事ではリファクタリングを通して確立した、分析用SQLを構造化するための4原則を紹介します。4原則を意識しながらSQLを書くことで、高凝集・疎結合な分析パイプラインを作ることができます。 この記事では凝集度と結合度
前提 本記事は保守性の高いReact hooksコードの指針を記述します。指針はtipsに近いものから原則に近いものまで雑多に含まれます。総じてReact hooksの標準的なAPIを上手く扱う方法が多めです。 これらは保守性の低いコードを反面教師とした私的な経験則に基づきます。(思い出し次第随時追加していきます) ご留意ください。 解消したい痛み 再現が困難な不具合の発生 容易に無限ループが発生しうる 不具合発生箇所の特定が手間 分岐が多くコードリーディングに手間がかかる 解消する手法 useEffectは1ページに1つ useEffectにdeps自動補完除外コメントを入れる stateはプリミティブにする propsにフラグがある場合はコンポーネントを分ける useEffectは1ページに1つ 悪例: ユーザーイベントの処理 const [foo, setFoo] = useStat
1986年の5月27日に『ドラゴンクエスト』が発売され、今年で36年という月日が経とうとしている。 当時小学生だった自分も40を過ぎたいい大人になったわけだが、未だに『ドラゴンクエスト』の新作を楽しみにし続けているとは正直思わなかったし、まだ現在発売されている最新作のナンバリングが『XI』であるという事実を当時の自分に伝えられたとしたら、どんな顔をするだろうか。 (画像はSteam『ドラゴンクエストXI 過ぎ去りし時を求めて S』より) 今更改めて説明するまでもなく『ドラゴンクエスト』と言えば日本にRPGというゲームジャンルを普及、定着させた最大の功労者であり、現代においても最も日本で人気のあるゲームシリーズのひとつである。このゲームシリーズをそんな風に説明することはそれほどむずかしいことではない。誰もがとっくに知ってることだろう。 しかし、当時のゲームユーザーに『ドラゴンクエスト』がどの
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは! Yahoo!ショッピングクーポンチームの小倉です。 前回のフロントエンド技術刷新の話とは打って変わり、今回は2019年に行ったバックエンド技術刷新の話です。 刷新前のシステムはノンフレームワークPHPのモノリスでしたが、現在は主にJava/Spring Bootでマイクロサービス化しています。今回は、その中でもっとも仕様が複雑だったマイクロサービスにおいて、ドメイン駆動設計(Domain Driven Design:DDD)を実践した話をご紹介します。 ショッピングクーポンの自由度を知る みなさんは、ショッピングの商品が割引になるクーポンをご存じでしょうか? 実は、クーポンには、ヤフーが予算をだして発行する「モールク
はじめに リリースされたプロダクトをエンハンス開発していく上で、保守性を保ち続けることがとても大事なのは言うまでもありません。 特に複雑な要件は実現するために難解なロジックを書く必要があります。 このことから 要件の複雑さと保守性はトレードオフになりがち です。 保守性を保つ方法はさまざまです。 例えば、可読性を高めるような書き方をした上でコメントを残したり、 Lintやテストなどツールを使ったりなどです。 しかし、この記事では書き方やツールではなく、 そもそも複雑になりそうな仕様を整理し要件から取り外すこと で保守性を保つ取り組みを紹介します。 この記事は Recruit Engineers Advent Calendar 2022 の2日目の記事です。 adventar.org 開発者が仕様の整理に入り込む フロントエンドエンジニアをやっていると、カジュアルに難解なUI要件が定義された
はじめに UIを設計するときにオブジェクト指向UIは大きな効果を発揮することがあります。一方で、オブジェクト指向UIの考えをそのまま適用できないけれども、タスク指向UIと呼ぶのも微妙な画面があります。 例えば、ECサイトの購入プロセスです。よくあるECサイトの購入プロセスは以下の図のような構成です。これだけだと簡単そうですが、実際のECサイトの購入プロセスはある画面をスキップしたりしなかったりという制御があり、なかなかに複雑なものです。 今回の記事は画面遷移に順序があるがタスク指向UIと呼ぶのも微妙な、複雑な画面遷移を持つ画面にオブジェクト指向UIの考えを導入することで画面遷移制御を簡単にする手法を提案します。 対象読者 画面遷移の制御の保守性を向上させたいITエンジニア この記事の概要 複雑な画面遷移を持つUIに対して、オブジェクト指向UIの考え方を導入することで、制御フローをシンプルに
この記事は NIJIBOX Advent Calendar2019 の20日目の投稿です。 背景 この記事は「仕様の変更に強いコードを書きたいよねって話」のテストについて掘り下げたお話になります。 題材は「ページネーションにおける関数」です。 ※ 以下currentは現在いるページ、totalは総ページ数、sizeはページネーションの表示するページサイズを指します。 書くこと ページネーションのロジック部分のgetPageNums関数のテストコードがわかりにくかったのでクラス設計を導入し、修正した。 テストコードを書くときに気をつけたいぞい!ってこと 参考にしたもの テスト駆動開発(TDD)の第一人者のtwadaさんにアドバイスをいただきました、ありがとうございました! 書籍「リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック」 手順 テストには、Facebook社
TAK(@tak_dcxi)です。今回もCSS設計に関する投稿です。 皆様はWebサイトの運用でCSSを更新・改修する際に、既存のスタイルが上書きできなくて苦しんだことはありませんか? class名のタイポミスだったり、そもそも指定したセレクタに対応する要素が無い…といった凡ミスも原因だったりはしますが、大抵の場合他のスタイル指定が強くて上書きできない、つまり「詳細度」が影響していることが多いです。 CSSを破綻させる原因の一つの「詳細度」とは? MDNの説明を引用すると以下の通り。 詳細度は、どの CSS プロパティが要素に最も関係があるか、すなわち適用されるかをブラウザーが決定する手段です。詳細度は様々な組み合わせの CSS セレクターで構成される一致規則に基づいています。 CSSのスタイル指定が競合した時に優先される、セレクタが生まれながらに持つ「強さ」みたいなものです。 全称セレク
無職やめ太郎さんの許可はこれから取ります→相互パクリへ ある日の会社にて わて「バイトくん、何してるん?シャボン玉楽しいで?」 バイトくん「何いってるんですか、仕事中ですよ。大概にしてくださいね」 わて「げほげほっ、このシャボン玉液ちょっと美味しい」 バイトくん「・・・」 わて「で、何してるん?」 バイトくん「あー、関数を薄くラッパーして、保守性を高めてるんですよ」 わて「ラッパー?わても好きやで。昔はフロアを沸かしていたもんや。フロアっていうかほんとは風呂なんやけどな」 バイトくん「・・・」 わて「にらまんといてや・・・」 薄くラッパーするってなんなん? バイトくん「例えばここに Http Request をするライブラリがあるんですね」 const sugoiHttpLibrary = new SugoiHttpLibrary(); const url = 'https://qiita
Merpay Advent Calendar 2022 の9日目は、メルペイ フロントエンドエンジニアの @tokuda109 がお届けします。 この記事は、メルペイ フロントエンドチームで保守しているリポジトリを複数のディレクトリに分割し、スケーラブルで保守性の高いコードベースに再構築する方法を紹介します。 記事の内容は『Merpay Tech Talk 〜Monorepo開発におけるツール選定〜』のイベントで一度紹介したものになりますが、この記事ではさらに詳しく説明します。 フロントエンドチームは今後 Nuxt 3 への移行作業を控えていて、今回紹介するリポジトリ移行が Nuxt 3 への移行に与える効果についても紹介します。 抱えていた課題 フロントエンドチームは、メルペイのサービスリリース時からカスタマーサポート業務を行う社内向け管理画面や加盟店さま向け管理画面など、様々なマイクロ
はじめに アソビュー! Advent Calendar 2022の8日目です。 2019年ごろから基本的にReact hooksを使用しており、REST APIを呼ぶ際も以前紹介したこちらのようにhooksベースで行っています。今回はその中でSWRに着目してご紹介したいと思います。tech.asoview.co.jp SWRとは? SWRとはstale-while-revalidateの考えに基づいたデータ取得用のライブラリのことで、stale-while-revalidateは直訳すると「再検証している間は古いまま」というようなニュアンスの意味になります。 公式ドキュメントにも記載されておりますが、APIリクエストがされたら、まずそのAPIのキャッシュを返却し、APIのレスポンスが返ってきたらその最新の取得結果をキャッシュと置換するというのが、一番基本的な機能です。 SWRを使用すること
こんばんは。 株式会社CHILLNNという京都のスタートアップでフルサイクルエンジニアをしております大島と申します。 弊社では現在アプリケーションのリプレイスを行っているのですが、そのリプレイスと並行してフロントエンド側のリアーキテクチャを行っています。 リプレイス後のフロントエンドでは、React, TypeScriptで実装しており、特定の境界で「関数型ドメインモデリング」に影響を受け、DDDのパラダイムを導入しています。 導入するに至るまで、数多くの試行錯誤を重ねてきた中でいくつかの知見を獲得しました。 それらの知見を本記事にて具体例を用いて紹介出来ればと思っております。 何か少しでもみなさまのお役に立てれば幸いです。 はじめに 本記事で紹介する開発手法では、 設計と実装を分離し、保守性・可読性の高いReactComponentを目指しています。 背景 弊社では主に以下のような課題が
はじめに 即戦力人材と企業をつなぐ転職サイト「ビズリーチ」の採用企業様向け管理画面の開発を行っている岡﨑と申します。 早速ですが、みなさんは、プロダクト開発において以下のような経験がありますか? 前提 プロダクトの機能リリースについて、期日が決められていて、プレッシャーがかかっている 経験 リリースを優先するために、「TODO」コメントで技術的な課題を残す 技術的な課題を改善したいが、時間が取れない この記事では、私が所属するチームが上記のような「悩み」や「課題」を持ちつつ、 「高い内部品質が速いスピードを生む」状況を実現するために取り組んだ開発プロセスについて、@t_wadaさんを講師としてお招きした「質とスピード」の社内研修をきっかけに改善に取り組んでいることや今後取り組もうとしていることをご紹介します。 「保守性」に対するチーム内の課題感 私たちが運用しているビズリーチシステムはサー
FLOCSS(フロックス)は、人気の高いCSS設計手法の1つです。 CSSは複数人で作業したり、大規模なWebサイトになるとコード量が増えてしまい、途中で整合性が取れなくなったり、破綻してしまう場合があります。それを防ぐために必要なのがCSS設計手法で、しっかりとルールを定めてコードを書くことにより、管理しやすく、破綻しづらいCSSを記述することができます。 今回は、FLOCSSの基本や特徴をご紹介したいと思います。 【CSS設計手法】BEM、OOCSS、SMACSSの違いと特徴のまとめ CSSの設計手法とは、CSSのメンテナンス性や作業効率を向上させるためのHTMLのクラス名の付け方と、CSSのコードの管理方法の考え方のことを言います。命名規則などとも呼ばれたりしますね。 ページ数が... Web Design Trends
AWS認定など、IT関連の勉強をしている際には、 「耐久性は99.999999999%、可用性は99.99%の高い堅牢性を誇る」 だとか、 「耐障害性を向上させるため、冗長性の確保が必要」 だとか、 「◯◯性」という用語がたくさん出てきます。 信頼性、可用性、耐久性、耐障害性、冗長性、堅牢性、保守性、保全性、安全性、結果整合性、読み取り一貫性などエトセトラエトセトラ・・・ どれもないよりはある方が、低いよりは高い方が、なんとなく安心で高性能なのはわかりますが、具体的にはどう違うのか、初学者の方はなかなか迷うのではないでしょうか。 これらをある程度使い分けないことには、正しい理解は出来ませんし、資格試験でも業務でも支障をきたすこと間違いありません。 しかも、あまり違いをはっきり解説してくれているサイトが見つかりませんでした。 (信頼性と可用性、可用性と耐久性など、2者を比較解説してくれるサイ
はじめに 前日もくもく会で一緒になったエンジニア初学者の方を見て、ポートフォリオとしてフロントエンド開発はちゃんとできてはいるものの、実務において必要な保守性や堅牢性の高いコードについての意識がどうしても不足しているなという印象を受けました。 もちろん初学者の方にそのようなことを求めるのは酷な話なので知らないからダメ、ということを言うつもりは毛頭ありません。 が、職業としてエンジニアを目指すためにフロントエンド開発をやっている場合、保守性や堅牢性を意識すると企業からの評価が段違いなのではないかと思うのです。 そこで今回の記事では単にフロントエンドが開発できるというスキルだけではなく、実務における保守性や堅牢性を意識したフロントエンドを開発するために有効になるであろう技術について説明してみたいと思います。 対象者 プログラミング初学者の方で、モダンなJavaScriptフレームワークを使って
こんがらがったシステムの保守開発で苦労した経験から新規開発では「シンプルな構成・シンプルな実装にしよう」という話が出る。 目指す方向としては間違って無いように思えるのに、それだけだとうまく行かない。 「保守しやすい構造」とはそれなりに多くの知識が必要なので、これらの知識を持たず単純に「シンプルな構成・シンプルな実装」を目指すと失敗する。 「保守しやすい構造」を作るには「どういう構造が保守しやすいのか?」を学ぶ必要がある。 これについて書く。 「シンプル」を目指したつもりが複雑になって失敗する例 まずは、ありがちな失敗例を示す。 実装する処理を減らしてシンプルにしたら複雑化した コードの複雑さを減らすため、実装する機能を絞った。 コード量が減ったのでシンプルになった。 しかしここで削られた機能の処理は結局はどこかでやる必要があった為、後日別の場所(連携する別システム側など)に実装された。 や
はじめに こんにちは。CTO室 分析基盤部の長谷川(shase)です。 私が所属するチームでは、データ分析基盤の開発と運用を行っています。 今回は私が入社以来(といっても半年弱程度なのですが)やってきた、データパイプラインの整理についてご紹介したいと思います。 この記事が想定する読者 事業会社でデータ分析基盤の開発と運用に携わる、データエンジニア、データアナリストなどの職種の方にとって参考になればと思い執筆しました。 記事に出てくる社内用語の補足 セキュアデータ基盤は、センシティブなデータが含まれる基盤でアクセス可能なメンバーが制限されています。また、特定の踏み台からしかアクセスすることができません。 カジュアルデータ基盤は、センシティブなデータが含まれていない代わりに、通常のオフィスネットワークからアクセスすることができる環境です。 抱えていた課題 私が入社した時点で、カジュアルデータ分
アーキテクチャが不在のレガシーコードは、エンジニアを疲弊させ、ビジネスのスピードも遅延させてしまう。そんな事態を避けるためには、開発の開始段階から適切なアーキテクチャを導入することが重要だ。そもそもアーキテクチャとは何なのか。どのような種類があり、どれを選択すればよいのか。設計や実装における注意点なども含め、電通国際情報サービス(以下、ISID)の現役アーキテクトが解説する。 アーキテクチャの定義、プロジェクトにおける設計・実装を解説 株式会社電通国際情報サービス Xイノベーション本部 エンタープライズプラットフォームセンター チーフアーキテクト 米久保 剛氏 最初に登壇したのは、2008年にISIDにジョインした、米久保剛氏だ。米久保氏はアーキテクトとして複数の大型SI案件への参画を経験した後、現在は非IT部門の担当者でもノーコードで、社内の各種申請業務を電子化するワークフローシステム「
東京五輪・パラリンピック公式マスコットを背に記者団の質問に答える菅首相/5月12日、首相官邸 (c)朝日新聞社この記事の写真をすべて見る AERA 2021年5月31日号より 国会の会期末が迫る中、政府は出入国管理法の改正案の成立を今国会で見送った。一方で、国民投票法などの重要法案が続々と審議入り。背景にあるのは内閣支持率の急落だ。AERA 2021年5月31日号から。 【図】菅内閣の支持率は? * * * 急転直下の出来事だった。5月18日、与野党で修正協議が続いていた出入国管理(入管)法改正案の成立見送りが決まった。事実上の廃案だ。入国管理を所管する入管庁にとって同法の改正は悲願。どうしても、今国会で改正しておきたかった。 実は6月16日の会期末に向けて国民投票法改正案、LGBTなど性的少数者をめぐる「理解増進」法案、そして、冒頭の入管法改正案が自民党によって提出された。五輪憲章で
PHPの人気のフレームワークLaravelを活用すると短期間でWebアプリケーションを作ることができます。 そのLaravelではリポジトリパターンを活用することで、チームでソースの開発・保守がしやすくなったり、データの構築などで変更が生じる場合にソースの変更がしやすいなどと言ったメリットがあります。 この記事ではそんなリポジトリパターンについて、どう言ったものなのか・どのように実装するのかを徹底解説していきます。 Repositoryデザインパターンについて詳しく知りたい方Laravelに興味がある方これらに当てはまる方におすすめの記事となっています。これを読めばRepositoryデザインパターンについて、どのように活用していけばいいかがわかりますよ。 Repositoryデザインパターンとはこれは高度なデザインパータンですので初心者のエンジニアさんはあまり気にしないかも知れませんが、
Vue3で保守性の高いテストコード作成方法を解説!Vue3エンジニアが実装とテストの疎結合実装方法を解説! こんにちは! 今回は Vue3 でのコンポーネントのテストコードの作成方法を紹介します! テストコードを書くことでチーム開発はもちろん、個人開発においてもコードをリファクタリングしたり、バグを発見したりする際に重要な役割を果たします。 Vue3 から新たに登場した Compostion API を利用することで、より保守性の高いコンポーネントを定義することができます。 コンポーネントをテストする場合、一般的にはテストコードを実装からできる限り切り離すように作成します。 理想的なのはコンポーネント内のロジックなどを考慮せずに実施するブラックボックス的なテストを書くことです。 はじめに 本記事では Vue3 でのテストコードの作成方法について解説しております。 Vue2 では Vue.e
何故人類はDRY原則を適用すべきない場面で適用してしまうのか。「これらの処理は偶然似ているだけで本質的に同一ではないので共通化すべきではない」というレビューコメントを打ち続ける日々はいつまで続くのだろうか。 プログラミングに慣れていない人々にとって「抽象化」や「直行性」等といった概念を理解するのは難しい。難解な言葉を使わずに共通化すべきか否かの判断基準になる考え方を短く簡潔に説明する方法はないだろうか。そこで私が辿り着いたのは「DRY原則の適用に可読性や保守性の向上を期待するな」という考え方である。 多くの初心者が処理を共通化する時に考えているのは「短くて読みやすくなる」や「今後の修正が1箇所で済む」といった可読性や保守性に対する効用であり、これは本来間違ってはいない。しかし、「これらの効用は単なる副作用でありDRY原則適用の主目的であってはならない」と敢えて強く言うべきではないかと私は考
TL;DR 以下の手順を踏むと、元のexploreの全てのjoinを継承し、ベーステーブルのみを差し替えられる いずれかを選択する a. 継承元のexploreにおいて、ベーステーブルをview_nameで指定する b. 継承元のexploreにおいて、ベーステーブルをfromで指定し、独自のview_name名を定義する 継承先のexploreにおいて、extendsで継承元のexploreを指定し、fromでベーステーブルのみを差し替える はじめに Lookerでは、「ベーステーブル」(Exploreのベースとなる、最初に指定するテーブル)に様々なテーブルをjoinしてExploreを作ります。 似たようなベーステーブルが複数存在することはよくあります。例えば、分析のユースケースに従って似たようなサマリーテーブルを複数作成する場合などです。 大量のテーブルによる分厚いjoinがある場合
なにを目指しているのか 優れたスタイリング体験 CSS-IN-JS ライブラリのEmotionと CSS のショートハンドライブラリのTailwind CSSを組み合わせて、SCSS の便利な&やネストで記述できる従来の優れた CSS 記述の自由を残したまま、スコープが限定された保守性の高く Tailwind CSS の持つスピードでスタイリングできる現代的なマークアップ開発体験を目指します。 つまり、CSS-IN-JS と Tailwind CSS のいいとこ取りをします。見た方が早いのでコチラをご覧下さい。 Emotion で CSS コンポーネントを作成しつつ、CSS コンポーネントの中でtwキーワードを使って Tailwind CSS のショートハンドが使えます。 また、css={}でスタイルを当てることによって、グローバル汚染を防ぎつつ、HTML タグにスタイリングされているスタ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く