いただきましたー！わーい。脳に収めるぞー！ @haradakiro @ryuzee pic.twitter.com/3Qd6EvPioU— SHIIBA Mitsuyuki (@bufferings) June 13, 2024 明日（2024年6月18日）発売！ www.oreilly.co.jp どう書くのがいいんだろうなぁ？ 複雑なコードと向き合うときは「あー、これはメモを取りながら読まないと迷子になるやつだ」ってなる。最初はわりとキレイに作られていたとしても、機能追加を重ねていくとだんだん読めなくなっていく。 だから「時間が経っても読みやすいコードってどう書くのがいいんだろうなぁ？何かヒントがあるかなぁ？」って思いながらこの本を開いた。先に書いておくと、ヒントはあった。 アウトサイドインのTDD 全然予想してなかったから、おー！と思ったのが、説明をTDDで進めていくってところ。好き
C言語をマスターしたい人はGCCのバージョン14を使いましょう - pyopyopyo - Linuxとかプログラミングの覚え書き -
C言語（C++を含む）を習得したい人，ポインタを勉強したい人はgcc-14を使いましょう．難しいところは gcc-14 が丁寧に解説してくれます C言語の難しいところ 例を示します．C言語で記述された，たった６行のソースコードです int main() { int buf[10]; buf[10] = 0; return 0; } このソースコードには問題があります．初見でわかるでしょうか？ : : : 問題があるのは buf[10]=0 の部分です．C言語でやりがちなミスですが，これがバグやセキュリティホールの原因になります． C言語が難しい理由は二つあります．この手の問題を見逃しやすい点と，この手の問題を理解することが難しい点の二つです gcc 14 に解説してもらいましょう 上記の６行のソースコードをgcc14を使ってコンパイルしてみます ソースコードのファイル名は test.c と
2024年版「基本的なウェブアプリケーションを構築する」のチュートリアル手順まとめてみた[Amplify Gen2対応] | DevelopersIO
初めてAWSのサーバレスサービスを学習するときに利用できる「基本的なェブアプリケーションを構築する」の内容を2024年現在でも実行できる手順にしてみました こんにちは、臼田です。 みなさん、AWSのチュートリアル活用してますか？(挨拶 今回はAWSの初心者向けハンズオンコンテンツである基本的なウェブアプリケーションを構築するを2024年の現在版の手順としてまとめてみました。 このコンテンツはAWSのサーバレスなサービスを利用して、簡単にウェブアプリケーションを作成する体験ができるチュートリアルとなっており、登場するAWSの各サービスを理解するのにちょうどよい内容でした。しかし、リリースされてしばらく経っているのもあり、特に今回のAmplify Gen2リリースもあってだいぶ画面や操作方法などが変わってしまいました。 実現できる事自体は変わらないので、現時点でこのチュートリアルを初心者でも完
![2024年版「基本的なウェブアプリケーションを構築する」のチュートリアル手順まとめてみた[Amplify Gen2対応] | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/89d69da1ff63f03a6134b1ba08325495afbaf56e/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2024%2F06%2F000_basic_web_app.png)
『ルールズ・オブ・プログラミング』を読んだ #iknowtherulesjp - Don't Repeat Yourself
Ghost of Tsushimaなどを作った会社の人が書いた本です。ゲーム開発におけるコードを書く際の教訓を整理し、改めて示し直したいい一冊だったと思います。大事なことですが、著者は決して「このルールを絶対使え」と言っているのではなくて、そもそもまず会社の製品の特性上、このようなルールを敷いておくと品質や生産性を高く保てたという前提があり、その前提を元に「ルールを選び取って自分たちのコーディング哲学を構築しよう」と推奨しています。 ルールズ・オブ・プログラミング ―より良いコードを書くための21のルール 作者:Chris Zimmermanオーム社Amazon この手の本では『リーダブルコード』がよく薦められる傾向にあると思います。私にとってもリーダブルコードは確かに駆け出しの頃すごく役に立った記憶はあるのですが（もう10年くらい前に読んだので正直忘れた）、そこから知識がアップデートされ
OpenAIからChatGPT-4oが発表されましたが、皆さんガンガンつかっていますでしょうか？ さて、このChatGPT-4oですが、テキスト以外のデータも使用できるようになっているという特徴があります。 普通にテキストでのやり取りをしつつも画像データを扱えるということで、「実はこれいい感じのOCRとして使えるんじゃね？」って思っちゃったわけです。 ということで、今回はChatGPT-4oを使ってOCRを使うとどんなもんなのかやってみたいと思います。 やりたいこと やってみる とりあえずやってみる 請求書 名刺 参考文献 感想 やりたいこと 今回やりたいことはOCRです。早い話が画像ファイルを突っ込んでテキストを読み取りたいって感じです。 ただ、当たり前のようにOCRって言葉を使用していますがOCRって結構奥が深いです。 mediadrive.jp 単純に画像から文字を見つけて対応するテ
エンジニアからマネージャになったときにあるだろうなぁってことを想像して遊ぶ - Mitsuyuki.Shiiba
ソフトウェアエンジニアの話ね。想像して遊んでるだけね。 スキルは高い まず、マネージャになってほしいって言われる時点で「仕事を任せられる」というエンジニアなんだろうな。それは、つまりコードを書くことに加えて、プロダクトをなんとかしてリリースする力と責任感をもっていて、それが会社にとってプラスになっている。 だから、チームを任せて同じようなエンジニアを育てて欲しいと期待されている。自分自身も、自分のスキルをもっと会社の役に立てるぞー！とやる気になっている。 任せたい そういう人がマネージャになって、あるだろうなぁと思うのは「どう任せたらいいんだろう？」という悩み。 自分が手を動かせばプロジェクトがなんとかなるのは分かっている。でも、自分はマネージャの仕事があるし、そこは自分の役割ではないし、実際のところ手を動かす時間なんてない。それはメンバーにやってもらわないといけない。 ただ、だいたいの場
Googleに存在するコードを読みやすく保守しやすい形に保つ取り組みを行うグループ「Code Health」が、「DRYを早まって適用しないこと」と題した記事を公開しました。 Google Testing Blog: Don't DRY Your Code Prematurely https://testing.googleblog.com/2024/05/dont-dry-your-code-prematurely.html DRYは「Don't Repeat Yourself」の略称で、コードを重複させないことを重視する考え方です。重複するコードが存在していると、特定の機能を変更しようとした時に同じ機能を持つ部分を全て探して同時に変更する必要があり、見落としやミスが発生する危険性が高まります。一方、コードの重複を防げていれば一カ所だけを変更すればOKというわけ。 一見DRYを厳しく適用
良いコードってどんなコードですか？という質問を受けたら何と答えるか - snoozer05's blog
技術顧問先で、一生懸命コードに向き合っているプログラマーになりたての方から、次のような質問をもらいました。 最初に面談した時、1年後にいいコードが書ける、上手に書けることを目標にしましたが、 先日スクール時代の同期（それぞれRubyの会社で働いている）と話したところ、会社ごとにレビューの仕方やコードに関する基準がさまざまなようで、良いコードとはなんなのか疑問に感じました。「いいコード」とは、みたいな部分で島田さんの考え方をお聞きできたら嬉しいです。 この質問にぼくは次のような回答をしたのですが、「この質問が来たら他の人はどんな回答するんだろうな」に興味があるので、ここにしたためておきます。もしよかったら「若者にこれを聞かれたら自分ならこう答える」をコメントなどで残していってもらえたら嬉しいです。 とても大事な疑問を見つけられたんだなあと思います。 「良さとは何か」ということに向き合う必要の
自分も含めて社内に詳しい人がいない領域のコードをいじることってあるよね。特に歴史の長いサービスだと当時触っていた人が誰もいないとか。仮にいたとしても1年くらい触ってないとほとんど忘れてしまって知らないのと同じような状態になっていたりする。 自分もそういうことが何度もあって、雑にスタンスややってることをまとめておこうと思う。 前提のスタンス 「これを倒したら俺がこの領域で一番詳しい最強になるんや」という気持ちを持ってる 詳しい人がいない状態で属人化とか気にしても仕方ない。まずは自分が詳しくなってから考えるでよい 自分用メモを作る キャッチアップしたことを書き残していく。ドキュメントじゃなくてSlackに垂れ流すでもいい 過去のドキュメント・やりとりを探す 全体像を把握できるドキュメントがないかを探すのを最初にやってる ここは近道はない。とにかく全部集めて全部読む気持ちで臨む Google D
Chrome の JavaScript はとても高速なことでも有名ですが、その実行エンジンは V8 と呼ばれます。V8 自体は独立したモジュールであり、Node.js 等にも使われております。 V8 が JavaScript を高速に実行する技術の一つが JIT (Just In Time) コンパイルです（一般的に JIT と呼ばれます）。これは、そのまま実行すると遅い JavaScript を実行中にリアルタイムに直接マシンコードに変換し（これが Just In Time と呼ばれる所以です）、途中からそのコードに入れ替えて実行することで高速化を達成しています。特に何度も実行される関数で効力を発揮します。 JIT という名前は聞いたことがあろうとも、実際に JIT がどのようなコードを実行しているのかを確認する機会は滅多にないでしょう。この記事では、実際に V8 の JIT の出力を確
技術的負債という言葉がある。もともとは、「楽するために導入したが、メンテにコストがかかるようになってしまった技術や構成」くらいの意味合いで使われているように思う。しかし、そもそも全部が負債ではないか、というのがこのメモの趣旨である。 負債 同僚とSlackで会話していると、「けっきょくどの言語を利用しても負債になるときはなるし、大抵負債になる」といった話になった。言われてみればそうで、基本的にコードというものは書いたそばから負債になっていく。去年書いたコードのことも思い出せない。 そんな中で思ったのだが、そもそも、負債になるコードと負債にならないコードとがあったり、技術が「負債化する」のではなく、コードや技術そのものが負債なのではないか。そして、どの言語で書こうが負債からは逃れることができない。負債にならないコードは存在しない。ゆえに、コードや技術は無ければ無いほど良い、ということになる。
前回の記事では、JavaScript の実行エンジン V8 の JIT 出力コードを読んでみました。記事は M1 Mac 上で動かした結果でしたので、ARM アーキテクチャのアセンブラを読むことになりました。 さてそんな ARM アーキテクチャですが、最近の ARM には FJCVTZS という JavaScript 専用の機械語命令があるのをご存知でしょうか？CPU に、特定の言語（それもコンパイラを持たない JavaScript）専用の命令があると知ったとき、私は大いに驚きました（過去にも Jazelle みたいなものはありましたが） 今回は、この FJCVTZS 命令について、実際にどれだけ効果があるのか、V8 をビルドしながら調べてみましょう。 FJCVTZS 命令とは？ FJCVTZS 命令は、Arm v8.3 から導入された JSCVT 命令の一つで、JavaScript の言
概要 pythonでテストコードを書くときがありますが、（筆者のように）超初心者からすると難しい用語や書き方がたくさん並んでいてハードルが高いです。 テストコードの入口となる最低限（最低限過ぎるかもしれませんが）の書き方を備忘を兼ねて書きます。 pythonでのテストコードを書く時のライブラリの種類 筆者が簡単に調べたところ、2つのライブラリがよく使われているようです。 unittest : python標準ライブラリ。インストールが必要ない。pytestと比較すると、柔軟なテストケースを書きづらい。 pytest : サードパーティ製のライブラリ。インストールの必要がある。柔軟なテストケースが書ける。pythonのテストコードを書く時のデファクトスタンダートになりつつある模様（これが本当かは確認していないですが、そういう記述を見かけることが多かったです）。 筆者個人としては、以下の3つの
TotT 98 GTAC 61 James Whittaker 42 Misko Hevery 32 Anthony Vallone 27 Code Health 27 Patrick Copeland 23 Jobs 18 Andrew Trenk 12 C++ 11 Patrik Höglund 8 JavaScript 7 Allen Hutchison 6 George Pirocanac 6 Zhanyong Wan 6 Harry Robinson 5 Java 5 Julian Harty 5 Alberto Savoia 4 Ben Yu 4 Erik Kuefler 4 Philip Zembrod 4 Shyam Seshadri 4 Adam Bender 3 Chrome 3 Dillon Bly 3 John Thomas 3 Lesley Katzen 3 Ma
こちらで登壇させていただいた資料です。 https://trident-qa.connpass.com/event/314818/ ※ こちらは2024/05/23 時点の私の考えとなります。更新の予定はございませんのでご了承ください
これは簡単で便利！ レスポンシブ対応のフォントサイズをCSSのclamp()関数で定義できるツール -Type Fluidity
フォントサイズをレスポンシブ対応にするときに、最近よく使用されている実装方法はclamp()関数による流体タイポグラフィです。CSSのclamp()関数を使用するとフォントサイズの最小値と最大値を定義してその間の値を流動的にすることができ、デバイスのスクリーンサイズが増えた現在に欠かせないテクニックです。 CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツールを紹介します。 Type Fluidity -GitHub Type Fluidityの特徴 Type Fluidityの使い方 Type Fluidityの特徴 流体タイポグラフィ（Fluid Typography）は、フォントサイズをレスポンシブ対応にする最新テクニックです。さまざまなスクリーンサイズに応じて固定値を定義する代わりに、CSSで単一の流体値を定義して、フォントの最小値と最大値の中でスクリーンサイ
CSSはどんどん進化している！ マグネットのようにくっつくエフェクトを実装するテクニック -CSS Anchor Positioning
ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。 Anchor Magnet Slide Menu 実際の動作は、デモページでお楽しみください。 右上の矢印アイコンをクリックすると、アイテムの並びが垂直・水平になります。また、右下のアイコンをクリックすると、ダーク・ライトモードになります。 ※CSSのみで動作するのは、Chrome 125+です。それ以外のブラウザはポリフィルが使用されています。 See the Pen Anchor Magnet Slide Menu by coliss (@coliss) on CodePen
AIで簡単に実装コードを生成できる！ テキストからCSSアニメーションのコードを生成できるツール -AI CSS Animations
簡単にCSSアニメーションのコードを生成できるAIツールが登場しました。テキストや音声でプロンプトを入力するだけで、複雑なCSSアニメーションでも数秒でコードが生成されます。 生成されたCSSアニメーションはその場ですぐ...記事の続きを読む
ローカル環境でコード生成を使いたい 〜Continue+Llama.cpp+ELYZA-japanese-CodeLlamaを試してみた〜 - GMOインターネットグループ グループ研究開発本部
2024.01.12 ローカル環境でコード生成を使いたい 〜Continue+Llama.cpp+ELYZA-japanese-CodeLlamaを試してみた〜 ご覧頂きありがとうございます。グループ研究開発本部 AI 研究開発室の N.M.と申します。 ChatGPTをはじめAIに関する大きなムーブメントの起きた激動の2023年が終わり、2024年が始まりました。我々AI研究開発室も日々AI技術を追いかけています。昨年から話題になることの多いGitHub Copilotもその一つであり、特にコードの補完は非常に使い勝手もよく開発や解析のサポートに使うことができます。今回はなるべくローカルに閉じた状態で近しい環境が作れないか試してみたことを紹介します。最後までご覧いただければ幸いです。 TL;DR VSCodeのExtensionであるContinueとELYZA-japanese-Cod
[JSなし] パワーアップしたView Transitions APIでMPAをSPAみたいにする - Qiita
2024年6月11日リリースのChrome126から、View Transitions APIがパワーアップし、別ページへの遷移でも使うことができるようになったので紹介したいと思います。 View Transitions APIとは View Transitions APIは、画面遷移をなめらかに行うことができる機能です。 この機能を使うと、以下の動画で紹介されているように、ページ遷移にアニメーションをつけることができます。 まずはView Transitions APIの特徴から紹介したいと思います。 特徴1：異なるDOM要素間でアニメーションできる アニメーション前後のDOM構造が異なっていても、アニメーションを行うことが可能です。 例えば、<div>がアニメーションで変化しつつ<img>要素になる、といったアニメーションが可能です。 特徴2：アニメーションがCSSで自由自在 アニメー
![[JSなし] パワーアップしたView Transitions APIでMPAをSPAみたいにする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/40f0bdd895644cfec9e8497e08ce9c0883edb8d0/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSlMlRTMlODElQUElRTMlODElOTclNUQlMjAlRTMlODMlOTElRTMlODMlQUYlRTMlODMlQkMlRTMlODIlQTIlRTMlODMlODMlRTMlODMlOTclRTMlODElOTclRTMlODElOUZWaWV3JTIwVHJhbnNpdGlvbnMlMjBBUEklRTMlODElQTdNUEElRTMlODIlOTJTUEElRTMlODElQkYlRTMlODElOUYlRTMlODElODQlRTMlODElQUIlRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWFhYTFiMTIzMDhkZDMyYmMzOTg1Zjg5MjVhYWZiOWI4%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBhY2Nlc3MzMTUxZnEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWMzODc4MWE1MWNmYzRiZGJlNTcyYzdjM2RkZDMxNDE0%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D3626912c51af4270ad5c67dd51388c1e)
生成AI時代のフロントエンド開発術
2022年11月にChatGPTがリリースされて、1年と約半年が経過しました。私はChatGPTが話題になった頃から、継続して利用しています。ChatGPTを使い続けていると、Webアプリケーションのフロントエンド開発に役立つことがありました。 そこで、本記事ではフロントエンド開発でChatGPTを活用して効率よく進める3つのパターンにまとめました。これらのパターンを紹介し、読者の皆さんの開発に役立ててもらえればと思います。 以下は、本記事で紹介するFigma、ソースコード、デプロイ先URLです。 Wireframing photo - Figma silverbirder/figma-photo-sample-app-for-ai - GitHub https://figma-photo-sample-app-for-ai.vercel.app ChatGPTを使う前に ChatGPTに
前回の記事『2024年版 HTMLで作るフォームバリデーション』ではHTMLの機能を駆使したフォームバリデーションの実装について解説しました。HTMLのみでも高機能なフォームを作成できるのは解説したとおりですが、HTMLに加えてJavaScriptを組み合わせることでより高機能なフォームを作成できます。それに加えて、開発者体験の向上も期待できます。 本記事では3つのライブラリを使用して実践的なフォームを作成する方法を解説します。 UIライブラリ「React」 フォーム向けライブラリ「React Hook Form」 型システムと相性の良いスキーマバリデーションライブラリ「Zod」 また、静的型付け言語であるTypeScriptもこれらのライブラリと同時に使用し、堅牢なフォームの実装を目指します。 本記事を読むことで以下の知識が身につきます。 フォーム画面のユーザー体験（UX）と、フォーム実
こんにちは。 Findy で Tech Lead をやらせてもらってる戸田です。 弊社では本番環境へのデプロイを1日に複数回実行していますが、本番環境での不具合の発生率は低いです。 次の画像は弊社のあるプロダクトの直近1年のFour Keysの数値です。 平均で1日2.3回の本番デプロイを行っていますが、変更障害率は0.4%程度を維持しています。単純計算ですが、1年で障害が2件程度の水準です。 また、平均修復時間は0.3hとなっており、障害が発生しても20分以内には復旧できていることがわかります。 この数値を維持できている理由の1つにテストコードの品質があると考えています。 システムで発生する不具合を自動テストが検知することで本番環境への不具合の混入を事前に防ぐことができ、仮に不具合が発生したとしても修正内容が他の箇所に影響が出ないことをテストコードが保証してくれるため迅速に修正できるから
scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する 2024.06.01 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがクラシックスクロールバーの場合、スクロールバーの表示・非表示によりボックスの幅が変わるため、画面がガタつくことがあります。scrollbar-gutter プロパティを使うとスクロールバー用のスペースをあらかじめ確保でき、画面のガタツキを解消できます。 子要素が親要素のボックスからはみ出した時、overflow プロパティの値が auto または scroll の場合にスクロールバーが表示されます。スクロールバーがどのように表示されるかは OS やブラウザの設定により異なりますが、大きく分けて以下
はじめに データサイエンティストのasanoです。 Gitコマンドを学んだあと「Gitブランチ戦略」や「綺麗なコミット」や「プルリクの出し方」など、チームでGitのコード管理を円滑に運用するためのノウハウは実務を通して学ぶことが多いと思います。 実際の業務ではそういった暗黙知になっている部分を認識合わせするために、本記事のようなガイドラインを利用しています。 ※ これを読んでスキルが一朝一夕で身に着くわけではなく少ない時間でも毎日Gitを触る中で身につけるものだと思いますが、学習の一助になれば幸いです。 円滑に運用するために 次の3つをチーム全員で取り組む必要があります。 ①Git運用モデルを取り入れる ②綺麗なコミットを心がける ③適切なプルリクを出す、受ける ①Git運用モデルを取り入れる まずはA successful git branch model (git-flow)を学びまし
Svelte は記述量が少なくシンプルなコードで書けることが特徴の 1 つでした。しかし、アプリケーションの規模が大きくなるにつれて学習コストや認知負荷が増加していくという課題が浮上してきました。Svelte v5 で導入される Rune は今までの Svelte のコンセプトを覆し、よりシンプルになることを目指しています。このトークでは Svelte v5 の新機能を通じて Svelte の書き方がどのように変わるのかについて話します。
これでもうロゴのSVGを探さないで済む！ SNSやブラウザ、ライブラリ、ソフトウェアなどのロゴをSVGで簡単に利用できる -svgl
ソーシャルメディアをはじめ、各種ブラウザ、フレームワーク、ライブラリ、言語、ソフトウェア、AI関連などのロゴをSVGで簡単に利用できるsvglを紹介します。 SVGはコードをコピペで利用したり、SVGファイルをダウンロー...記事の続きを読む
このブックマーク可能なガイドの目的は、最近CSSに追加されたばかりの新機能や使い方を分かりやすくまとめることです。 「CSSって、こんなこともできるの?!」と思ってしまうほど、多くの人が知らない新しいテクニックが中心です。 また、たとえ知っていたとしてもよく理解できておらず、「それって何?」「なんで気にする必要があるの？」「サンプルコードがあると助かるんだけど、」そんな人におすすめしたい記事となっています。 周りがあっと驚くテクニックを習得して、ウェブデザインでできる表現の幅をぐっと広げましょう。 コンテンツ目次これだけは知っておきたい最新モダンCSS（2024年春版）CSSコンテナクエリのインタラクティブガイドCSS sroll()とview()によるスクロール駆動アニメーション実践編CSS :has()のインタラクティブガイドCSS Nestingの具体的な使い方と使用例CSSコンテナ
JJUG CCC 2024 Spring：テストコードが根付くチームを立ち上げるために考えたいこと | ドクセル
スライド概要 JJUG CCC 2024 Springでのスポンサーセッション「テストコードが根付くチームを立ち上げるために考えたいこと」の公開資料です。 シンプレクスは1997年の創業以来、メガバンクや大手総合証券を筆頭に、日本を代表する金融機関のテクノロジーパートナーとしてビジネスを展開してきました。現在では、金融領域で培った豊富なノウハウを活用し、金融機関以外の領域でもソリューションを展開しています。2019年3月にはAI企業のDeep Percept株式会社、2021年4月には総合コンサルティングファームのXspear Consulting株式会社がグループに加わり、創業時より付加価値の創造に取り組んできたシンプレクスとワンチームとなって、公的機関や金融機関、各業界をリードする企業のデジタルトランスフォーメーション（DX）の推進を支援しています。
getとfindの使い分け - 日々常々
メソッド名の getXXX と findXXX どっちがいいの？みたいな話になることがある。 この手の話ができるだけでもいい感じだと思います。名前が記号化していないってことなので。 世の中には名前に力を割くのが無駄な文脈もあって、そう言うのに晒されて続けると当然そこに力をかけなくなります。 その文脈では最適解だけど、私は名前が重要だと思っているし、その価値観を土台に他のものを積み上げていきたい。 ということで話を戻す。 「得る」と「探す」のようなものを意図して使い分けるとコードが読みやすくなります。 使い分け方によって読みやすさは変わりはするのですが、「意図して使い分けている」だけでも十分変わります。 その意図に共感できたり汲み取れたりすればさらに読みやすくなりますが、その前段階として意図の有無が重要だと思ってます。 私の基本的な使い分け getHoge(条件): Hoge findHog
はじめに JavaScript初学者を抜けたあたりの方にむけて、便利な記法や関数、その注意点について紹介します。 初歩的な文法やデータ型などの知識は前提として解説を省きます。 JavaScriptの巨大なテーマとしては非同期処理などもあるのですが、巨大すぎるために本稿では割愛させていただきます。 let/constの使い分けについて 変数は不変なconstおよび可変なletを利用することができます。原則的にはconstを使い、再代入が必要な個所のみletを使うのが標準的です。 letを利用している時点で 「処理のどこかで再代入される」 と処理内容の推論を働かせてコードを読む人が多いと思います。このようなコードの読み方をするという前提を踏まえてコードの可読性を高めるうえでも、再代入されるかされないかを意識してconst/letを使い分けることが重要です。
別にみんなそうするべきとは全く思わないのだけど、僕は最近GitHub Copilotを意図的に無効にすることがあるので、そのへんについて雑に書いておく。 あらかじめ言っておくが、僕はGitHub Copilotを有効にすることもある。この記事もGitHub Copilotおよびそのユーザーを批判する意図は全くない。 GitHub Copilot が便利な場面 僕がGitHub Copilotを使い始めて少なくとも一年以上は経ってる。自分が書こうと思っているコードに近いものが簡単に生成されていくことに最初は感動したし、便利な場面がはたくさんある。 具体的に便利な場面を思い返してみる。 僕は仕事ではNext.jsでフロントエンドを書いたり、NestJSでバックエンドを書いたりしているのだが、その用途では便利だった。僕は自分が関わっているプロジェクトのReactやNode.jsの書き方はある程度
数値や日付をさまざまな形式の文字列に！ toLocaleString()を使ってスマートに変換しよう ウェブアプリケーションなどでは外部のAPIからデータを取得して表示することがあるでしょう。しかしながら、APIの値を必ずしもそのまま表示せず、ユーザーにとって分かりやすい文字列に加工することもあります。たとえば、数値をカンマ区切りにしたり、日付データを特定のフォーマットに変換したりといったことはみなさんも経験があるのではないでしょうか？ そのような数字や日付を変換するのに便利なのが、JavaScriptのtoLocaleString()メソッドです。このメソッドを使うことで、数値や日付をさまざまな形式に変換できます。この記事では、toLocaleString()メソッドの使い方と、その応用例を紹介します。 サンプルを別ウインドウで開く コードを確認する toLocaleString()メソ
Python命名規則の基本
はじめに Pythonの命名規則は、コードの可読性を高めるために非常に重要です。 実はPeP8というPythonのスタイルガイドには、命名規則に関する詳細なガイドラインが記載されています。 本記事では、Pythonの命名規則について、PeP8に基づいてまとめたいと思います。 なぜ命名規則が重要なのか 命名規則(Naming Convention)は、コードの可読性を高めるために非常に重要です。 最も重要なのは一貫性(Consistency)で、コードが一貫性のある命名規則に従っていると、変数や関数の目的が明確になり、コードの理解が容易になります。 また、命名規則に従っていると、他の開発者がコードを読んだり、メンテナンスしたりする際にも、迷うことなく作業を進られるため、作業効率UPにもつながります。 Pythonの命名規則のタイプ Pythonの命名規則には、大きく分けて以下の4つのタイプが
モノレポ環境にPR-Agentを導入した効果と課題について書いています。 導入結果としては、AIによるコードレビューが効果がある一方で、現時点では全てのレビューがAIに置き換えることはないことが分かりました。 この記事では、PR-Agentの具体的な効果、実際に感じた課題、課題に対する横断チームの対応策などを掘り下げています。
目まぐるしく変化するWebデザインの世界は、新しい技術やテクニックが毎日のように登場し、追いかけるだけでも大変。 「Webデザインの最新テクニックを知りたいけど、時間が足りない」という方へ。 この記事では、話題になった人気テクニックを中心に集めているので、効果的にWeb注目ニュースをインプットできます。 しかもスニペットはコピペで利用でき、CSSのみでスタイリングされたものも多数。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット Cards (gradient border) 最近良く見かけるモダンなUIカードエフェクトをまとめたミニライブラリ。CSSでできるボーダーアニメーションと合わせてどうぞ。 See the Pen Cards (gradient bor
CSSのメディアクエリでcalc()が使用できるの知ってた？
CSSのメディアクエリでcalc()が使用できるのを知ってましたか？ これは6/6,7に開催されたCSS Day 2024で共有されたときに、多くのビジターが驚いたとのことで、私も知りませんでした。 メディアクエリは比較...記事の続きを読む
2024年のソフトウェアエンジニアリングに関する戦略的テクノロジは「プラットフォームエンジニアリング」「クラウド開発環境」、AIを活用した「AI拡張型開発」など。ガートナー
2024年のソフトウェアエンジニアリングに関する戦略的テクノロジは「プラットフォームエンジニアリング」「クラウド開発環境」、AIを活用した「AI拡張型開発」など。ガートナー 調査会社のガートナージャパンは、2024年以降のソフトウェアエンジニアリングに関する戦略的テクノロジトレンドのトップ5を発表しました。 同社が発表した戦略テクノロジトレンドは以下です。 ソフトウェアエンジニアリングインテリジェンス これまでソフトウェアエンジニアリングにおける意志決定は、責任者の直感的な感覚や経験、スプレッドシートなどでの進捗管理などを基に行われてきました。 ソフトウェアエンジニアリングインテリジェンスは、これをソフトウェアの開発ライフサイクルにおいて、例えばどれだけのコードが新規作成されたか、リファクタリングされたか、どれだけのプルリクエストが発生し、いくつがレビューされたか、などの精緻な数値によって
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
脳に収まるコードの書き方を読んだ。面白かった。 - Mitsuyuki.Shiiba
GPT-4oをOCRとして使う - Re:ゼロから始めるML生活
「コードに早まってDRY原則を適用しないこと」とGoogleが呼びかけ
社内に詳しい人がいない領域のコードを触る時 - Konifar's ZATSU
JavaScript 実行エンジン V8 の JIT 出力コードを読んでみよう
すべてのコードやライブラリ自体が技術的負債である / 高利率な技術と低利率な技術 - Lambdaカクテル
ARM に存在する JavaScript 専用命令「FJCVTZS」を追う（ついでに V8 をビルドする）
【超初心者向け】Pythonのテストの書き方（pytest, unittest） - Qiita
Don't DRY Your Code Prematurely
GitHub Copilotと快適なユニットテストコード作成生活
ReactとZodで作る堅牢なフォームバリデーション - ICS MEDIA
Findyの爆速開発を支える「システムを守るテストコード」の実例3選 - Findy Tech Blog
scrollbar-gutter CSS プロパティでスクロールバーの切り替わりによる画面のガタツキを解消する
Gitでコード管理する際の運用ガイドライン - Qiita
よりシンプルになる Svelte の世界
これだけは知っておきたい最新モダンCSSの書き方（2024年夏版）
JavaScriptの便利な記法や関数の紹介およびそれらの注意点について - Qiita
最近は意図的にGitHub Copilotを無効にすることがある
数値や日付をさまざまな形式の文字列に！ toLocaleString()を使ってスマートに変換しよう - ICS MEDIA
AIによるコードレビュー "PR-Agent" を導入した効果と課題について
こんなことできるの?!最新HTMLテクニック・スニペット30選 2024年5月版