前書き React Developer ToolsはReactの公式開発者ツールであり、日常的なコンポーネント開発において、属性やファイルの位置特定、propsのトラブルシューティングなど様々なシーンで重要な役割を果たしています。熟練したReact Developer Toolsの使用は日常の開発をより効率的にすることができます。 この記事では、React Developer Toolsプラグインを体系的に理解することができます。本文では以下のことを学ぶことができます： コンポーネントの一時停止や遅延読み込みシナリオのシミュレーション。 コンポーネントに対応する実際のDOMを早く特定する方法。 props内の特定の関数がどこで作成されているかを早く特定する方法。 コード変更なしで、propsを介したコンポーネント変更をオンラインで検知する方法。 コンポーネントがどのファイルで作成されたかを

はじめに エンジニアの皆さん、日々のお仕事や勉強お疲れ様です。 続けていると、スキルレベルや経験の差などで他人と自分を比較してしまうことは良くありますよね。 そんな時に「他者と比較するよりも昨日の自分と比較する」というのは有効なアプローチだと思います。 しかし、「それが大事なのは頭ではわかった、それでもついつい他人と比較してしまうんです」という方も少なくはないでしょう。 私も腐るほどこのテーマで悩みました（現在進行形かもしれない） こちらは、その「他者比較」に関して心理学的理論も交えながら、対処法を考えていくための記事です。 エンジニアのメンタルリスク エンジニアのメンタルヘルスは一般職の3倍と言われるほど、ハイリスクです。パーソルのリサーチによれば、ITエンジニアのキャリア不安には、他の職種に比べて「スキルの陳腐化」や「新しい技術を習得しなければならないというプレッシャー」が非常に多いこ

はじめに 突然ですが、先日私の PCが壊れました。仕方なく新しいノートパソコン、具体的には Surface Pro 7（Windows 10）を購入したので、これを機に Reactの開発環境をゼロから構築しました。React開発環境の構築手順については過去に書かれた記事が既にいくつかあったのですが、2022/07の現在においては Docker Desktopが 2021/09に有料化 → Docker CE等に切替えが必要 Ubuntu 18.04 LTSのサポート期限が 2023/04に終了 → Ubuntu 22.04 LTS等に切替えが必要 などと、当時と少し状況が変わっているようです。実際に環境構築してみたところ、上記に伴い追加の手順がいくつか発生することが分かりました。同じ場所にハマる人が一人でも減るよう、今回は Windowsにゼロから WSL2(Ubuntu 22.04) +

僕が触り始めた頃のウェブフロントエンド開発はデバッガーもなく、ダイナミックHTMLと呼ばれて文字をチカチカさせたりするようなものでした。IE6という超安定ブラウザが出てきたり（Netscape 4.xも7.xも不安定だった）その後jQueryが登場したときは、天使が降臨したように思えたものです。 そこから長い年月が経ち、ウェブフロントエンドの比重が大きくなるにつれ、フロントエンドのコードはどんどん複雑化しました。OpenAPIなどのコードジェネレータなども普及した結果、通信というものが隠され、イベントの中でawaitや.then()で呼ばれる何か、みたいな理解をしているメンバーも今後増えていくのではないかという懸念があります。 現在ではウェブフロントエンド開発はReactやVueといったフレームワーク上で行われ、イベントというのはそのフレームワークの提供するライフサイクルイベントに対応付け

はじめに 前提となるマインドセット 具体的な Tips コードを読まずに理解する技術 とりあえず Clone する インタフェースで理解する テストコードで理解する 慣習名で理解する コードの詳細を理解する技術 デバッガを使う とりあえずサンプルコードを書いてみる 分からないなら聞く 初見コードに安全に変更を加える技術 インタフェースを明らかにする Stub としての実装を用意する Design Doc を書く テストを書く まとめ We are hiring !! エンジニア採用ページはこちら カジュアル面談もお気軽にどうぞ インターンも常時募集しています はじめに 京都オフィス在籍で、AI・機械学習チームの山本(@hiro_o918)です。 このブログはサテライトオフィスのメンバーで投稿されるブログリレー 3 日目の記事になります。 関西在住だとオフラインでのコミュニケーションに悩みが

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 今回は有名企業で無料で公開しているエンジニア新人研修資料をまとめました。 昨今、新人向けの研修資料を公開する企業が増えています。 クオリティーがかなり高いものが多く、初級者から中級者でも学びがある資料となっています。 資料の作り方も勉強になるので「勉強会で登壇している人」「企業の研修担当の人」にも有益な資料になっています。 この記事の主な対象者 有名企業の研修資料を網羅的に知りたい人 エンジニア初級から中級者の人 独学で学習をしている人 研修思慮の作成担当 MIXI新卒研修2024 まずはじめに紹介するのは、毎年新人向けの研修

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに こんにちは！エンジニアを目指す26卒院生のvivyです。 突然ですが、皆さんは 「自己流のタスク管理術をお持ちでしょうか？」 院生になって、毎日膨大なタスクに追われるようになりました。かつての私は、思いつくままに行動していたため、締め切りギリギリの徹夜、謎の余裕を感じてベッドでゴロゴロ...というスタイルが定着していました。 そんな私も限界を感じ、ネットに落ちているあらゆるタスク管理術を試してみることにしました。しかし、集中力が続かない＆面倒くさがりの私にはどれもピンと来ませんでした。ですが、試行錯誤の末、ようやく「これなら続

2024.11.05「追記１：問題編」を追加しました！ 2024.11.06「追記２：回答編」を追加しました！ 2024.11.06 [補足]を追加しました！ 前提 LaravelはWordPressからステップアップしたい人に丁度フィットしたような作りになっており、オンプレ前提であり、MVC構成の簡単なSSR（サーバーサイドレンダリング）を推しています。 WordPressの次のステップと捉えると納得できますし、小さなアプリを簡単に作るには丁度良いと思います。 しかし、これで大きなサービスを作ろうとすると途端に崩壊します。 基本的にドキュメント通りに作成すると画面とインターフェースが密結合し、サービスとしてのインターフェースが固まらない状態になります。 結果的に私が関わったプロジェクトは全て密結合で触れない状態に陥っていました… たぶん日本中、いや世界中がこうなってると思います。 決して

※月単価80万円を基準に、7ヶ月分の工数として560万円相当と換算しています。 最初に こんにちは！ 普段はIT企業でWebエンジニアとして働いています。 現在はフリーランスとして活動し、Ruby（Ruby on Rails）、TypeScript（Next.js, React）、Pythonなどを使って、フロントエンドとバックエンドの両方に携わっています。 将来はソフトウェアエンジニアとしてアーキテクチャ・設計について自ら意思決定した上、プロジェクトを推進する事が出来るようになりたいです。 そのためさらにスキルを磨いていきたいと思っており、日々技術に対して情熱を持って仕事に取り組んでいます。 以前Qiitaで 退職して560万円相当の工数をかけてお金を稼ぐサービスを開発した という事でBizRankというビジネス書籍を紹介するサービスを開発しました。 今回はその後としてのお話になります。

プログラミングでは、1文字でも打ち間違いがあればエラーの原因になってしまいます。 そこで似たような文字、例えば数字の「1」（いち）とアルファベットの「l」（エル）、数字の「0」（ゼロ）とアルファベットの「O」（オー）などを容易に見分けられるようなフォントを使うことが、ミスを防ぐことにつながります。 コードを表示させたときに整然として見やすく、エディタ上でカーソルを上下に移動させてもカーソル位置が左右にぶれずに表示されるように文字の幅が等幅に揃っていることも必要でしょう。 日本語の場合には、「－」（マイナス記号）と「ー」（音引き）の区別や、コード内に全角空白が紛れ込んだとしてもすぐに見分けられることなどの特徴を備えていることもプログラミングに適したフォントに求められる条件だといえます。 この記事では、そうした特徴を備えたプログラミングに適したフォントをまとめました。 ここで紹介されていない日

Observability を実現するためにアセットを活用しよう（AWS 秋の Observability 祭り ~明日使えるアセット祭り~ ）

はじめにいつもお世話になっている方も、初めましての方も、この記事を見ようとしてくださり、ありがとうございます。 今回、完全専門外の素人エンジニアが、アプリ開発をして月100万円の不労所得を稼ぐ、という自分の中の一つの目標を達成することができたため、こちらを記事にさせていただいたところ、大変多くの方に見ていただき、大変嬉しく思っております。 今回は第二作目となる、前回の続きになります。 一作目をまだ見ていない！という方はこちらを見てください〜！ 一作目は、 なぜアプリ開発を始めようとおもったのか？ どのようなモチベーションで開発を続けられたのか？ アプリ収益化できていなかった時代にどう工夫して収益化したか？ などなどの内容になっており、アプリ開発をこれから始めようと考えられている方や、アプリ開発初心者の方に是非見ていただきたい内容になっております。 二作目は、『個人開発において、より戦略的に

『Sid Meier’s Civilization Ⅵ』（シドマイヤーズ シヴィライゼーションⅥ）が、現在Steamで大型のセールを実施している。本体のみなら90％オフで700円になっているほか、本体・全拡張・DLCを全て含むコンプリートエディション『Anthology』バンドルが91％オフとなり、税込みで2万3910円→2169円となっている。 同作については現在Nintendo Switch版もセールを行っており、同様のコンプリートエディションを購入すると1万2100円→2959円と、こちらも大幅な値引きが行われている状態だ。 『シヴィライゼーションⅥ』は世界中で高い人気を誇るストラテジーシリーズの6作目。歴史上に存在したさまざまな文明（国家）を率いて、文明の萌芽が起こった太古の時代から、地球外天体の探索に乗り出す宇宙時代まで、数千年に及ぶ人類の歴史を自らの手で紡いでいくという壮大なゲ

この記事は以前 エンジニアと人生 というオンラインコミュニティで執筆し技術書典で頒布した本の中の、私の執筆した章をリライトしたものです。 無料公開の背景 本は有料で販売していたのでこの記事も有料記事にしようかとも思っていましたが、最近個人開発をネタにした特に中身のない記事を有料で買ってしまい後悔している友人を見かけて、そういうのにうんざりしていたので無料で公開することにしました。 個人開発云々いうなら中身のない情報商材じゃなくて自分のサービスで稼げよな！ ということで。でも投げ銭はありがたくいただくのでいいと思ったらバッジしてください！ 【追記】 上記に対して「有料記事がダメって事？」という反応を頂きました。書き方が悪く申し訳ありません。 有料でノウハウなどを販売する事は良いと思います！そしてそれでサービスの運営費を賄えるなら嬉しい事です。 なんならサービスに関する事ならこの記事の"データ

「パスキー」って何？ Webサイトにログインする際に「パスキー」の設定を推奨されることはないだろうか？　よく分からないため、［後で］をクリックして設定をパスしたり、途中まで設定して不安になって止めたりしている人も多いと思う。そこで、「パスキー」とはどういったものなのか、仕組みや設定方法などについて解説する。 Googleアカウントにログインする際、「ログインをシンプルに」という画面が表示され、「パスキー」の利用を推奨されたことはないだろうか（一度、パスワードを忘れて、再設定後にGoogleアカウントにログインする際などに表示されることが多い）。 このパスキーとはどういったものなのだろうか？　よく分からないため、［後で］をクリックして設定をパスしたり、途中まで設定して不安になって止めたりしている人も多いのではないだろうか。 本稿では、このパスキーの仕組みや設定方法、運用上の注意点などについて

誰しもLaravelのbladeでformを書くにあたって、@csrfという魔法の呪文を書いたことがあるかと思います。 「これを書いておけばCSRF対策はOK」 ドキュメントにも要約するとそういう旨が書いてあります。 この記事では@csrfについてLaravelの実装を実際に見てみることで、CSRFとその対策への理解を深めたいと思います。 ちなみにこの記事はぺちこん2024で残念ながら採択に至らなかったCfPの供養です。[1] 利用するサンプルアプリ @csrf はなにをしているのか？ そもそもですが、@csrfが何をしているのかを見てみます。 bladeに@csrfを埋め込んだ場所を、HTML変換後の状態から見てみます。 <input type="hidden" name="_token" value="G5FzKXaCYA4w8kdWbftEZMYoglQgD9yPIG9r2zzx"

はじめまして、asachiです。 普段はプロダクトマネージャーとかデザインとかをやっています。 最近、会社・事業のインフラコストをどう評価するかという話に社内でなって、実際各企業どんなもんなんだろうなと気になり、IR資料から頑張って漁ってきました。 せっかく色々と見たので、気になった事例等含めて書いていこうかなと思います。 TL;DR 上場企業のインフラコストを調べた 規模・業態問わずで30社くらいのデータを発掘できた 最もコストがかかっていたのはゲーム会社アカツキ約11-12億/年 次点はツイキャス運営のモイ 約5.8億/年 「メメントモリ」が流行ったため、BANK OF INNOVATINが直近四半期でサーバー費用が3億円/四半期(前年同期比1,153%)になっていた 各種会計項目に対してサーバー費の比率が安定しているのは、GunosyとGameWith 売上原価に占める割合が高いのは

もし世界が消滅して Visual Studio Code の設定が失われてしまった時に、この記事を見ればまた VSCode のカスタマイズが復元できる。 ここでは Visual Studio Code の見た目に影響するものについてのみ 取り上げる。 スクリーンショット Editor Terminal Zen Mode 環境 Visual Studio Code バージョン: 1.94.2 (user setup) コミット: 384ff7382de624fb94dbaf6da11977bba1ecd427 日付: 2024-10-09T16:08:44.566Z Electron: 30.5.1 ElectronBuildId: 10262041 Chromium: 124.0.6367.243 Node.js: 20.16.0 V8: 12.4.254.20-electron.0 OS

参考 IT業界では、請負契約と準委任契約がよく使われます。 委任契約はあまり使われることはなく、筆者も見たことがありません。 これは、エンジニアが法律行為を伴う業務を行うことが少ないためです。 請負契約と準委任契約の違い 請負契約と準委任契約は、どちらも業務委託契約の一種ですが、大きな違いがあります。 一言でいうと、請負契約は「成果物を納品することが目的」であり、準委任契約は「業務の遂行自体が目的」です。 請負契約では成果物を納品する責任が発生しますが、準委任契約ではその責任は発生しません。 ウォーターフォール開発で言うと、PoCや要件定義は準委任契約、設計や開発、テストは請負契約になることが多いです。 また、SES（システムエンジニアリングサービス）も準委任契約で結ばれることが多いですね。 PoCや要件定義が準委任契約になることが多いのは、不確定要素が多いため、確実に成果物を納品すること

Note Storybook Vitest Plugin は 2024 年 10 月 5 日現在実験的な機能として提供されており、API が将来にわたって変更される可能性があります。 Storybook v8.3 より、ストーリーをテストするためのテストランナーとして Vitest を使用できるようになりました。今までも composeStories 関数で作成済みのストーリーを使いまわし、Jest などのテストランナーを用いてたテストを行うことができましたが、複雑なセットアップが必要でした。 また Vitest では ブラウザモード により、ヘッドレスブラウザ上で Storybook のテストを高速に実行できる点が特徴です。ヘッドレスブラウザ上でテストを実行することにより、例えば jsdom や happy-dom などのシミュレーションを使用する方法と比べて、実際のブラウザでの挙動をよ