はじめに 今回は私が3年間で読んだ技術書をひたすら紹介します。 私は2021年4月に新卒でSIerに就職し、2024年4月でエンジニア4年目となりました。 そんな私の入社時のスキル感はどうだったかというと... 非情報系学部卒の理系 学部4年生の時に研究室で少しPythonを触ったことがある程度 HTTP?なにそれ？ でした。 こんな感じでほぼゼロからのスタートでしたが、3年間でどのくらいのスキル感になったかというと、ざっくりと 基本的に一人称で開発業務ができる 小規模のシステム開発なら技術選定やアーキテクチャの検討も可能 某(若手向け)技術コンテストで入賞経験あり OSSコントリビューション経験あり IT関連の資格7つ取得 くらいには成長することができました。 これから紹介する技術書を読むだけでこのくらいのスキル感になれますという話ではなく、当然日々の業務であったり、その他のインプット/

私個人の障害対応の経験と 一昨日参加したIncident Response Meetup vol.1での学びから 障害対応において大切だと感じていることをまとめる。 障害とは リリース後のシステムにおいてシステムの不具合やユーザーの操作ミスによってユーザー業務に影響が出ているもしくは出る恐れがあるもの。 障害対応の目的 システムを直すことではなく、ユーザー影響の回避・低減・早期回復をすること。 障害対応に対する心構え システムの信頼性の要である 障害への対応の仕方でユーザー影響が大きく変わる いつ発生するかわからないため特定の人が常に障害対応をするということは不可能である 素早く適切に行動するための備えが重要である 役割分担 障害対応では復旧対応、原因調査、ユーザーへの説明、社内調整などたくさんのことをやる必要がある。 またそれぞれの作業の難易度が高いことも多い。 一人の人間にできることは

今回はChatwork株式会社のデザイナー向けに行なったHTML勉強会で使用した解説資料をお伝えします。私は3年ほど前からChatwork株式会社の開発のサポートやデザイン基盤活動のアドバイザーとして参画しており、その活動の一環で会を開催しました。 開催の意図と目的開催概要は@emimさんが、UI設計はHTMLの理解からというタイトルでnoteに書いてくれています。企画の意図は下記のとおりです。 企画の意図 根本としては、情報整理（情報設計）の基礎概念にHTMLがとてもマッチしている、と考えているからです。 ところが、業界的にも昨今よく聞く話ではありますが、最近意外にHTMLに触れる機会がなくプロダクト開発の現場に入る人が多いのが現実です。これは、デザイナーだけでなく、なんならフロントエンドの開発者であっても。 個人的には、HTMLはマークアップ言語であること以上に、構造化のフレームワーク

はじめにTIG EXU真野です。 積読を消化しようというテーマの、読書感想文連載 の1冊目は、単体テストの考え方/使い方 です。 書籍の基礎情報です 2022年12月28日発売 Unit Testing Principles, Practices, and Patterns の翻訳書。原著は2020年1月14日に発売 テーマ 質の高いテストを行い、ソフトウェアに価値をもたらそう！単体（unit）テストの原則・実践とそのパターン プロジェクトの持続可能な成長を実現するための戦略 単体テストの原則・実践とそのパターン コード例は C# であるものの、どの言語でも適用できる汎用的な内容とのこと 中を見ると、微妙にC#特有ぽいところに1箇所悩みましたが、それ以外はその通り 翻訳者の須田さんは、他にもセキュア・バイ・デザイン: 安全なソフトウェア設計 やOAuth徹底入門 セキュアな認可システムを適

本日(1月18日)発売された、Software Design誌 2023年2月号の第一特集で「ドメイン駆動設計入門」を書きました。 執筆の意図と記事の概要を簡単にまとめておきます。 Software Design 2023年2月号｜技術評論社 執筆の意図 特集のサブタイトルにある通り「設計力を磨きたい」読者が、ドメイン駆動設計の基礎を知ることで「設計の手法とアイデアの引き出し」を増やすことの役に立てればと思い執筆を引き受けました。 重視したこと 断片的な用語やパターンの解説でなく、ドメイン駆動設計の全体像と要点を伝える 全体像を伝えるための図や表を多めにした（ソースコードの例は少ない） 全体像と要点は、原典である『エリック・エヴァンスのドメイン駆動設計』（以下『ドメイン駆動設計』）の説明を中心にした ドメイン駆動設計の具体例として『ドメイン駆動設計』に出てくる国際海上貨物輸送の具体的な業務

APIの設計って意外と移り変わりがあるんです。例えばAPIのバージョンの指定方法がヘッダーを使う方法からURLを使う方法にだんだん統合されてきました。 したがって本やスライドなど、その時点のベストプラクティスを読むよりは、生きているベストプラクティスを読んだ方が良いと思います。 ここではいくつか参考になるリソースのご紹介と、よく聞かれる質問について触れておきます。 設計ガイドライン、スタイルガイドAPIの設計のベストプラクティスを把握するためによくAPIのドキュメントを見ているのですが、特にご紹介したいのはスタイルガイドや設計ガイドです。 マイクロソフトのAPIガイドライン

『ソフトウェアアーキテクチャ・ハードパーツ』を訳者の方からご恵贈いただきました。ありがとうございます。献本については基本的にすべて書評を書こうと思っているため、今回も記事にします。発売は10/27のようです。 ソフトウェアアーキテクチャ・ハードパーツ ―分散アーキテクチャのためのトレードオフ分析 作者:Neal Ford,Mark Richards,Pramod Sadalage,Zhamak DehghaniオライリージャパンAmazon おことわり まず指示語についてです。記事中で「本書」「この本」と書く場合は『ソフトウェアアーキテクチャ・ハードパーツ』を指します。また、「著者」は本書を執筆した人を指すものとします。「筆者」といった場合、それは私のことです。 いわゆるスキミングをした状態で一旦書評をするため、本書の細かい議論の見落としや用語の誤認識が含まれる可能性があります。この書評は

世界で一番初心者に優しいWeb制作のメディア。HTML/CSS/JavaScript、WordPress、Web制作の考え方を解説します。

はじめに データベース設計のER図について、自動で生成する以下３つのツールを比較した記事です。 dbdiagram.io DBeaver A5:SQL Mk-2（A5M2） 先日、こちらの記事をQiitaに投稿したところ、多くの方に記事を見ていただき、コメントも多数いただきました。 ER図に関するお勧めのツールをコメントいただく方が多くいらっしゃいました。 今回はその中から、無料でも利用できる3つのツールの「ER図の自動生成」の機能を試します。 比較の結論としては、〇〇が一番良いという感想ではなく、どのツールも多機能で、できることは違うので、今後使うときは用途や業務の環境によって使い分けていけたらと思っています。 目次 それぞれのツールについて、下記の内容を書いていきます。 1. dbdiagram.io 1-1. 始める 1-2. 使う 1-3. 感想 2. DBeaver 2-1. 始

IE終了により、webpackやbabelを使う必要がなくなるのか、フロントエンドからビルドステップを完全に消し去ることはできるのか。 そもそもなぜフロントエンドを「ビルド」していたのか そもそもなぜwebpackやbabelを使ってJavaScriptをバンドル（1ファイルにまとめる）していたのか 1. HTTP/1.1とモジュールシステムの相性の悪さ ブラウザにはES Moduleというモジュールシステムが導入されています。これはimport文で他のファイルを読み込むことができるシステムです。 HTTP/1.1については、ブラウザ側で同時接続数制限があります。これは、ファイルを多数読み込む必要があるES Modulesには不向きでした。 2. ブラウザのES Module対応率の低さ ES ModulesはIE非対応です。開発するWebサイトがIEをターゲットにしたい場合、ES Mod

毎年無限スクロールの実装をしているのだが正直なところ実装したくないので依頼されたときの反論材料として実装したくない理由を言語化しておこうと思う。 無限スクロールとは 無限スクロールが何を指すかを知らない人のために解説すると、ページにコンテンツを足す方式でページネーションする UI を指している。例えば Twitter のように下にどんどんコンテンツが伸びていく UI が良い例だろう。そのような UI を無限スクロールと呼ぶことが正式なのかは知らないが、このような体験の実現を支援するライブラリに infinite-scroll というものがあり、少しは普及している呼び方なのだと思い無限スクロールという言葉を使う。一方で WEB フロントエンド文脈で無限スクロールと言うと複雑 GUI やドローイングツール実装における "無限平面" のようなニュアンスもあるが、今は無限平面のことを指しているわけ

モダンCSSは今までの記述をよりシンプルにしたり、余分なHTMLを追加する必要なく記述することもできます。 ラッパーとしてdivなどのHTMLを追加せずに、左揃えの要素を中央配置する際に記述するCSSの古い書き方とモダンCSSを使用した書き方を紹介します。 ※display: flex;が古いということではなく、モダンCSSだとラッパーは不要という意味です。 IEのサポート終了（6/15）も近づき、これからはIEを気にすることなく、モダンCSSを使用できます。マイクロソフト社でも6/15を待たずにIEを廃止してください、と通達しています。 参考: Don’t wait for June 15th! Set your own IE retirement date. たとえば、左揃えのリスト要素を中央配置にしたいとします。 HTMLは、下記の通りです。 <ol> <li>Foreword</l

タイトルにも書いていますが、Google Analytics(UA)がもうすぐ使えなくなるんですよ。 GA4っていうのになるらしいんですが、自動で切り替わったりしないし、何もしてないと単に使えなくなるんですよ。知ってました？ ※追記※2023年になって 自動的にGA4プロパティが作成されることになりました。しかし、むしろ手動ではないことで混乱しているようです。切り替えではなくGA4プロパティが追加されるんですが、そのデメリットについてはググって調べてね。 (UA)っていうのはGA4ではない、これまで使われてきたGoogle Analyticsだと思ってください。やや正確ではないのですが「GA4という最新版ではないGoogle Analyticsはすべてサービス終了される」くらいのイメージで捉えてもいいです。 業務で関わってる人たちからはGA4移行についての記事やツイートがたくさん流れてきま

【更新】寄稿した記事が Web に公開されました 技術評論社様のご厚意により、 Software Design 2022年3月号に寄稿した「自動テストとテスト駆動開発、その全体像」が gihyo.jp にて公開されました。誠にありがとうございます！ gihyo.jp はじめに 2022年2月18日発売の Software Design 2022年3月号 にて、第2特集「そろそろはじめるテスト駆動開発」の第1章「自動テストとテスト駆動開発、その全体像」を執筆いたしました。第1章では、混同されることの多い自動テスト関係の概念を自動テスト、テストファースト、テスト駆動開発（TDD: Test-Driven Development）の3つの段階に分け、それぞれの効果や注意点を包括的に整理整頓しています。 ソフトウェアデザイン 2022年3月号 作者:大竹 章裕,瀬戸口 聡,庄司 勝哉,光成 滋生,

はじめに ソフトウェアプロジェクトには不思議な性質があります。現状のスケジュールに課題を感じて、短くするために人員を投下しても、なかなか思い通りに短くならない。それどころか悪化してしまうことがあります。場合によってはプロジェクト自体が破綻して失敗してしまうことすらあります。 今回は、このようなソフトウェアプロジェクトに潜む直感に反する性質を数理的なモデルを介して理解していく試みです。ある種の思考実験としてお楽しみください。 宣伝 Qiitaさんとコラボ企画でアドベントカレンダーをつくりました。 DXをめちゃくちゃ改善した話を募集しています。 https://qiita.com/advent-calendar/2021/dx-improvement 10人の妊婦がいても1ヶ月で一人の子供は生まれない これは誰かの技術力やプロジェクトマネジメント力に欠陥があるのではなく、「人月の神話」で有名な

フロントエンド連載の5記事目です。 HTML5が2021年の1月に廃止されました。 Webエンジニアとしてバリバリ活躍されてる方やエグゼクティブテックリードのような肩書きを持つ方にとっては「何をいまさら」という話題かと思います。 しかしながら、今年も新人さん入ってきてくださったので、プログラミングを学習中にHTML5という文字列に悩まされないように、そもそもHTML5とは何かや、廃止された経緯をまとめてみます。 HTML5とはWebサイトを作るときに必ず書くことになるHTML。Webサイトのコンテンツ、つまり中身や構造を作るために使うマークアップ言語です。 そして、その最近版として10年ほど前に登場したHTML5。当時は Webニュースなどで盛んに特集が組まれていましたが、このHTML5がついこないだ、2021年1月28日に廃止されました。 広義のHTML5 / 狭義のHTML5HTML5

Laravel大規模開発入門！MVC分離のFatModel問題に対する責任分離と依存管理、その設計と考え方について ナイル株式会社メディアテクノロジー事業本部の工藤さんにMVC分離のFatModel問題に対する責任分離と依存管理、その設計と考え方について解説いただきました。 こんにちは、ナイル株式会社メディアテクノロジー事業本部で開発マネージャをしています工藤@ta99toです。 今回は大規模で複雑度の高い開発をMVCフレームワークベースで構築する際に僕が課題と捉えているポイントやその具体的な解決手法について解説させていただきたいと思います。 「MVC以上の責任分離イメージがつかないよ！」 「DDDとかクリーンとかオニオンとかあのへんの設計パターンの導入モチベーションが不明」 「どうやっても最終的には複雑になって追加開発や修正開発が怖い状態になっちゃう」 ↑このような悩みを持った方に対して

こんにちは。フロントエンドチームの金野と申します。 食べログでは現在、React+TypeScriptでフロントエンドのリプレースを進めています。 以前の記事で、食べログではAtomic Designをどのように取り入れているかの紹介をしました。 しかし、最近のリプレース作業では、Atomic Designとは異なるディレクトリ構造を採用しています。 今回の記事では、「なぜAtomic Designをやめたのか」という理由と、「どのようなディレクトリ構造にしたのか」を紹介します。 Atomic Designを導入したねらいと導入した結果 上記の記事で言及した通り、当初Atomic Designを導入したねらいは以下になります。 1. コンポーネントの責務がより明確になる 2. 見た目の粒度だけでなく、ロジックの責務も明確にできる 3. 「ドメインが入るか／入らないか」。「抽象的か／そうでな

より詳細な内容は公式ブログの記事にまとまっているので、日本語に翻訳して紹介していきます。 Bootstrap5公式Blog記事(日本語訳) Bootstrap5を正式公開しました！3つのアルファ版、3つのベータ版、数か月の開発を経て、最初の安定版としてメジャーバージョンをリリースします。Bootstrapのユーザー及びコントリビューター、メンテナーとすばらしいコミュニティによって実現しました。ここに来るのを手伝ってくれたすべての人に感謝します！ 新しいロゴ 新コンポーネント：Offcanvas 新しいアコーディオン 新しくなったフォーム チェックボックスとラジオボタン フローティングラベル 新しいファイル入力 シンプルになったレイアウト RTL対応 刷新されたユーティリティ 新しいユーティリティAPI 新しいユーティリティ スペーシングユーティリティ 新しいスニペット例 グリッドとレイアウ

Moment.jsは、新規開発停止、メンテナンスモードに移行 Moment.jsは、新規機能の開発停止、メンテナンスモード(セキュリティ修正とMoment Timezoneのデータ更新は行う)に移行することが発表されています。これから新規開発するプロジェクトでは、別のライブラリを使うことが推奨されています。 僕の新規開発のプロジェクトでも当初はMoment.jsを使っていましたが、リリース前にこの発表が出たので、別のライブラリに変更することにしました。 Moment.jsのドキュメントページに、推奨ライブラリが4つ掲載されていたので、その中から選ぶことにしました。 Luxon Day.js date-fns js-Joda 簡単に結論が出るケース Day.jsを使うべき人 Moment.jsからの移行 Moment.jsを使い慣れている人 Day.jsはMoment.jsと同じAPI体系を