Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? レンダリングとメモ化についてようやく理解したので書く なぜこの記事を書こうと思ったのか Reactを学び始めてから、props の渡し方、配列処理のメソッド、ユーティリティ関数の使い方、カスタムフック、定数の扱い方、コンポーネントの切り分け、さらにはアトミックデザインといった多くの概念に触れ、理解する必要がありました。現場での約1年間の経験を通じて、これらの要素がようやく整理でき、ある程度の自信を持って活用できるようになりました。 特に、長い間課題だった「レンダリングとメモ化」に関する理解も深まり、自分なりの言葉でまとめられる段階に来ま

2024年6月21日にデジタル庁からデジタル認証アプリの発表がありました。 このデジタル認証アプリで何ができるのか、ざっくり整理してみました。 この記事で対象としている方 デジタル認証アプリの概要についてざっくり理解したい方 デジタル認証アプリについて今北産業してほしい方 この記事では技術的な話はなるべく避け、全体像を整理していきます。 技術的な話を理解したい方は、参考リンクより他の方が書かれた記事を参照してみてください。 「デジタル認証アプリ」はどんなものか？ 「デジタル認証アプリ」は、マイナンバーカードを使った認証や署名を、安全に・簡単にするための、デジタル庁が提供するアプリです。 （デジタル認証アプリサービスサイトより引用） デジタル認証アプリは、デジタル庁が提供するデジタル認証アプリサービスAPIと組み合わせて1つのサービス（デジタル認証アプリサービス）を構成しています。デジタル認

前置き この度、ご縁あってこちらの記事の内容でFindyさん主催の 『「脱！なんちゃってスクラム」実践事例から学ぶ Lunch LT』 に登壇しました！ もし、よろしければアーカイブご視聴ください！ 当日、発表で使用したスライドも載せておきます。併せてご確認いただけるとより理解が深まると思います。 はじめに 今の会社に転職してきて２ヶ月が経ち、まだまだ分からないことも多いですが少しずつ環境にも慣れてきたので頭の中を整理するためにも今感じていることをアウトプットしたいなと思い書きました！ 現在、私が参画しているチームはスクラムをベースとして開発を行なっており、前職もスクラムでの開発を経験していたので、その違いを整理していきます。 前職 スクラムを導入するまでの背景 前職では、美容医療・精神科クリニックを運営している会社で、クリニックスタッフが使用する社内システムの開発に携わっていました。働き

先日、Qiitaに投稿された一つの記事が注目を集めました。 元記事では、htmxというJavaScriptライブラリが英語圏で認知を獲得しているとして、インストールの仕方から使い方について公式のドキュメントの全体にわたって簡単に説明が行われています。 さまざまなプラットフォームでこの記事に対する反応を観察してみると、どちらかというと懐疑的な見方のほうが優勢のように見受けられます。ただ、多くのコメントは誤解に基づいているように見受けられました。「JSが要らない」といった元記事のミスリードによるところも大きそうですが1、なぜhtmxが大きく支持を得つつあるのかを理解するには、背景情報を含めて理解することが必要です。 htmxは、最近の複雑化するフロントエンド技術に対する単なる逆張りではありません。これまで30年ほどのあいだウェブ上のシステムを支え続けた「ハイパーメディア」の持つ強力さに今一度目

はじめに こんにちは！！@Sicut_studyです！ 最近フロントエンドを学ぶ機会が多く、色々試してみて今後 React が選ばれる場面が増えるのかなと思いました。 そこで初学者の方がJavaScriptの次に学ぶ言語の選択肢になりやすいのではないかと考え今回の記事を作成しました。 私自身、2022年9月に独学で React を学び始めました。 最初JavaScriptもままならない状態から始めたのですが、Reactを学ぶことでピースがうまくはまってJavaScriptをより理解できましたし、Reactができるようになることで個人開発で多くのサービスが作れるようになりました。 そんな私が去年の自分にアドバイスするなら、 0からReactを学ぶならこのロードマップで勉強しろ と言いいます。 Reactを学ぶことで 勉強することが楽しい ↓ モノを作ることが楽しい というマインドに変われたの

VSCode の新機能「built-in port forwarding」を使いローカルサーバーにインターネット側からアクセスHTMLJavaScriptNode.jsVSCode はじめに この記事は、以下の公式ポストや、VSCode のアップデート後のリリースノートにも出ていた「built-in port forwarding」を試してみた話です。 この機能を使うと、ローカルにあるサーバにインターネットからアクセスできるようになります。 同様のことを実現するものには、有名どころの 1つに「ngrok（エングロック）」があったり、その他にもたくさんの類似サービスがあります。 実際に VSCode の built-in port forwarding を試してみる それでは、VSCode の built-in port forwarding を試してみます。 自分が試す際に参考にした情報は

1. はじめに 1年前の入社4年目の私は、開発チームのリーダーの経験はなく、また、スプリントの計画も立てたことが無いような状態でした。 そんな状態で、突然リーダーとしてプロジェクトの意思決定をすることになりました。 自分に務まるかとても不安で、恐怖すら感じていました。 実際にやってみると、これまでいかに作業者視点で物事を考えていたか、プロジェクト全体が見えていなかったのかを痛感しました。 現在では、マネージャーが休みや出張で不在の場合でも、私がいればうまくチームメンバと協力して開発を進めてくれると言っていただけるまでになりました。 それと同時に、より楽しく開発できるようになりました。 本記事では、私がリーダーとして振舞うことになった経緯と、その振る舞いの具体例を紹介します。 同じような開発者の方の参考や励みになればと思います。 2. チームの背景 1年前当時の私が所属しているチームは以下の

こう見たとき、"FileNotFound"のバグが一番多い。と分かりました。そうすると、"FileNotFound"のバグを修正すると、多くの移行エラーが解消され、効率よく移行が進むと考えられます。しかし、現実問題として、それほど直りませんでした。 "簡単なバグ"とは何か？ 前節では、バグの発生頻度が高いものから修正していくとアプローチをしていきましたが、実際問題それほどうまくいきませんでした。端的に、なぜ失敗したか。というと、"バグが直らなかった"からです。仮に"FileNotFound"のバグを直そうとしたとき、2,520個あるログファイルから、ランダムに1つとりだし、どの部分でエラーになっているのかを細かく見ていきます。それで、バグの原因を特定し、直す。という極シンプルなアプローチをするわけですが、「このバグの原因を特定する」ということが、そもそも難しかった。ということです。先にも書

🤷‍♂️ 結合度とは みなさん、おはようございます！ さて、いきなりですが、みなさん プログラミングにおける、結合度とはご存知でしょうか？ 「知っとるわい！！」との声が聞こえてきそうですが、 かく言う私は、言葉は知っていても、細かい部分まで理解することができていませんでした と言うわけで、結合度に関してReactのコードを混ぜながら解説しましたのでご覧ください〜！ もし間違いあればコメントいただけると嬉しいです 凝集度編もあるよ！ 🤔 結合度って？ 結合度とは、関数、モジュール、コンポーネントなどが、どれだけ他のコンポーネントに依存しているかを示す指標 🤔 結合度が低い状態とは？ 結合度が低い状態とは、各コンポーネントが互いに独立している状態 もしくは非常に少ない依存性しか持っていない状態 独立性 各コンポーネントが、できるだけ自己完結している 他のコンポーネントに依存することなく動

はじめに GitHub Copilotをチーム全員で使ってモブプロしたい！と思った時にハマりポイントがあったので、その内容と解消法です。 前提 チーム全員でVSCode & GitHub Copilot Extentionを利用。 GitHub Copilot for Businessを利用。 リモートで繋いで開発するチームのためLiveShareでコードを共有してモブプロ。 結論 LiveShareのゲスト側（URLを払い出してもらった側）はWorkspaceのTrustをしよう！ ハマったこと LiveShareのゲスト側（URLを払い出してもらった側）でなぜかVSCodeにCopilotアイコンが表示されない&コードがサジェストされない、、 ホスト側（LiveShareのURLを払い出した側）からはCopilotのアイコンが見えていて、コードのサジェストが動くぞ、、 原因 LiveS

はじめに 株式会社ゆめみでは、採用時にコーディング試験を課しています。 2023年5月中旬より、数年間内容を更新せずに利用してきたこのコーディング試験の内容を刷新、合わせて模試も新しいものにすることとしました。（※まずは2025年度新卒採用から変更しますが、順次展開する予定です。） この記事では、2023年度版のサーバサイドコーディング試験の模試の内容、およびそれに回答があった場合にゆめみがどういう観点でどういうレビューを実施するかをまるっと全部解説します。 ※2024年度のコーディング試験も同じ内容で実施しております。 過去のコーディング試験の目的とレビュー観点はこちらを御覧ください。 刷新した理由 5年以上同じ問題を利用してきて、準備されたテストケースの通過率がほとんどの人が90%以上となってしまったこと。 応募者のレベルが上ってきたことに合わせて、より難易度を上げないと差別化が難しく

警告 本記事に記載している内容はCORSだけでなく、ブラウザの様々なセキュリティ機能を無効化する危険な行為です。 今すぐにセキュリティを無効化しないといけない事情がある場合を除いて安易に実施しないでください。セキュリティを無効化した状態でのインターネット接続など言語道断です。 上記内容、そして本記事に記載している行為を理解している方のみ自己責任でお願いします。 Google Chrome 以下のコマンドでChromeを起動する。--user-data-dirを指定しないと既存の設定でChromeが起動し、セキュリティは有効のままだった。 不要になったらここで作成したデータディレクトリは消せばよい。 <Chrome実行ファイル> --disable-web-security --user-data-dir=<データディレクトリ>

前提としての情報 単に「Figmaで要件定義のためのUMLも、外部設計のためのデザインも、内部設計のためのERDも全部つくるよ〜〜」という話をすると、ERD書くならデザインツールなんて使わないで、DBMSから自動生成できるツールとか使った方がいいじゃん、みたいな疑問が出るのは重々承知なので、そもそもこの形式に落ち着いた前提事項を書いておきたいと思います。 ご興味がなければ読み飛ばしてください。 筆者の仕事範囲 さて、冒頭で「事業会社でデザイナーとPMの狭間みたいな仕事をしてます」と書きました。キャリアの背景的には受託のPMっぽい仕事（厳密には違うんですが、本旨ではないので割愛します）→事業会社のインハウスデザイナー→現職という感じで、外渉から手を動かす所まで、必要ならなんでもします。 ざっくりいうと、機能の起案をして、経理などの関連部署に相談して、WBS引いて、UML書いて、画面遷移図書い

こんにちはISSUEを運営している寒河江です。 今回は情報の少ないWebエンジニアの業務委託単価相場について調べてみました。 現在の単価が適正単価なのか、次の単価レンジに行くにはどうすればいいか。ISSUEの実績をふんだんに使い記事を書いてみたのでご一読いただけると幸いです。 オリジナルの記事はこちら ISSUE DB 3,000人の実績データから相場を作成 現在(2022年11月)ではISSUE上に1,800人以上のユーザーデータと2,000以上の単価診断結果があります。またISSUEではクラウドソーシング形式で企業とマッチングすることにより、報酬を獲得することができます。その際の契約時給単価を参考に今回の相場作成の参考にしています。ISSUE上でもリアルタイムの単価相場を確認できますのでご参考ください。 Webエンジニアの業務委託単価相場 わかりやすいように各業務委託単価とその技術能力

現在の会社にテックリード（１人目の正社員エンジニア）として入社して、２年間やってきたことを書いています。 エンジニア二年目でテックリードとして試行錯誤してきて、自分の振り返りもしたいという思いから記事を書きました。 （前提として、シード期のスタートアップで実行してきたことです。） 入社時のチーム課題 入社当時は、２週間単位のスプリントでスクラムを回してましたが、全員が業務委託だったこともあり、完全な内製化を進める必要があり、主な課題は以下でした。 継続的リリースが困難な状態になっており、それを解消することが急務 社内にエンジニアがいなかったので、開発組織体制づくりが必要だった。 ウォーターフォール寄りのリリースが多く、継続的にリリースする文化がなかった。 リファクタリングやテストコードが不十分だった。 改善したこと Zenhubを導入 それまでは、GitHub Projectで進捗管理をし

ほとんどの人はだれかと恊働しています。マネージャーやリーダーであるなら、この割合はより大きくなります。 筆者は、仕事の重要な要素のひとつを「進捗を出すこと」と定義しています。そして進捗を出すには、進捗をただしく把握することも重要になってきます。 しかし「進捗を把握する」と言っても、想像以上に難しいと感じる場面が多々ありました。たとえば、 進捗はどうですか？ → 進行中です／〜をやっています なにか問題はありますか？ → とくにないです 〜までに終わりそうですか？ → たぶん大丈夫だと思います というようなやりとりは一般的なコミュニケーションだと思いますが、あまり有用な情報は得られていません。 この記事では、自身の経験則をもとに、進捗にまつわる良い情報をゲットするための具体的な質問を考えてみました。 なぜ進捗を把握すべきなのか 話の前に、なぜ進捗を把握すべきなのでしょうか。 それは良い計画づ

昨今のフロントエンドのCSS開発においては、タスクランナーやフレームワークの活用により煩雑なベンダープレフィックスの付与を意識する必要がありませんし、IE11のサポート終了により実戦に投入できるCSSプロパティも格段に増えました。 たった数行の記述で複雑な機能が実装可能だったり、再現が難しかったデザインへも対応できるようになったことは喜ばしいことです。 そこで今回は有名サイトで実装されているそんな最新のCSSテクニックをあらためて確認してみたいと思います。

経緯 DOMについて調べてた時に気づいたので、備忘録として。 （この備忘録ではReactベースで書いてます） 結論 仮想DOMの真のメリットは「パフォーマンスが良いこと」ではなく、「宣言的UIの実現と現実的なパフォーマンスを両立できること」にある。 命令的UIと宣言的UIってなんだろう... 命令的UI 「イベント・変更が発生するたびに、どのように処理を実行し、状態を反映するのか」を記述する必要がある const checkbox = document.querySelector(".checkbox"); const button = document.querySelector(".button"); checkbox.addEventListener("click", () => { if (checkbox.checked === true) { button.disabled =

はじめに 今回はゲーム感覚でプログラミングを学べるサービスを紹介します。 ゲームを通して学んだ知識をアウトプットできるサービス集を厳選したので、ぜひ学んだ知識を「使える技術」として自分のものにしていただければと思います。 この記事の主な対象者 プログラミング初心者~中級者 基礎文法は学んだけどアウトプットができていない人 フロントエンジニアを目指してる人 楽しみながらプログラミングを学びたい人 ぷよぷよプログラミング まずはじめに紹介するのは、SNSでも話題になった、ぷよぷよを開発しながらプログラミングを学ぶことができる「ぷよぷよプログラミング」です。 ぷよぷよプログラミングでは、人気ゲームぷよぷよを開発しながらHTMLやCSSやJavaScriptといったプログラミングをしていく中で基礎となる技術を学ぶことができます。 実際にアプリ開発をしながら学べるので、インプットとアウトプットが同時

はじめに Pythonはコードが汚くなりがち（個人的にそう思う） そんなPythonくんを快適に書くための設定を紹介します。 拡張機能編 ここでは Pythonを書きやすくするため の拡張機能を紹介していきます。 1. Error Lens before 「コード書いたけど、なんか波線出てるよ💦」 記述に問題があった場合、デフォルトでは波線が表示されるだけ。。。 after Error Lensくんを入れることによって 波線だけでなくエディタに直接表示される。 はい、有能〜 2. indent-rainbow before Pythonくんは インデントでスコープを認識している。 for の f から下に線が伸びてるけど、ちょっと見にくいなぁ after 色が付いてちょっと見やすくなった！ 3. Trailing Space before 一見、普通に見えるコード after 末尾にある