はじめに こんにちは、kenです。みなさんコンフリクト解消してますか！ チーム開発をしているとコンフリクトとは嫌でも向き合うことになりますが、コンフリクト解消って緊張感のある作業なのでやりたくないですよね。 そんなコンフリクト解消をちょっぴり楽にする(かもしれない)コマンドを最近知ったので今回はそれを紹介します、その名もgit rerereです。 git rerereとは Gitの公式ドキュメント（日本語版）には次のように記載されています。 git rerere コマンドはベールに包まれた機能といってもいいでしょう。これは “reuse recorded resolution” の略です。その名が示すとおり、このコマンドは、コンフリクトがどのように解消されたかを記録してくれます。 そして、同じコンフリクトに次に出くわしたときに、自動で解消してくれるのです。 ここに書かれているように、git

昨今のフロントエンド向けUIライブラリでは、コンポーネントの設計が重要です。この記事では、コンポーネントのスタイリング、その中でもとくにコンポーネントの大きさに関わるコンポーネント設計について考えます。 私の考える結論は、むやみに大きさを指定できるpropを生やさずに、CSSで外から大きさを制御できるようにしたほうがいいです。 コンポーネントの大きさを制御したい UIの一部分を再利用可能なコンポーネントとする場合、同じコンポーネントがさまざまな場面で使えるのが望ましいでしょう。コンポーネントが提供する機能にもよりますが、場面に応じてさまざまな大きさでコンポーネントを使用できたほうがよいこともあります。 具体例として、このようなコンポーネントを考えてみましょう。例はReactで示しますが、この記事の内容はReactとは関係ありません。 const Card: React.FC<React.P

TypeScript で複雑な型定義をするにあたり「テストを書きながら効率的に行いたい！」と思ったことはありませんか？TypeScript では Compilerレイヤーの API が Node.js に向け公開されており、環境コンテキストを加味した推論まで取得することが可能です。 本稿では、CompilerAPI をテストに活用するアプローチを紹介します。 tl;dr サンプルリポジトリを用意しました。 https://github.com/takefumi-yoshii/ts-type-inference-test const w0 = 0; const n1 = 1 as const; const n2 = 2 as 2; const _w0 = { val: w0 }["val"]; const _n1 = { val: n1 }["val"]; const _n2 = { val

｢これはHEAD^^｣ ｢これはHEAD^2｣ ｢これはHEAD~2｣｢HEAD@{2}､reflog用｣｢全部いっしょじゃないですか｣｢違う!!もっとよく見ろ!!｣Git 画像略 TL;DR(Too Long; Didn't Read) ~nは単純なコミットの親をたどる(ブランチの分岐がある場合は現在のブランチのみで辿れるコミット) ^nはマージコミット向けで^2は｢そのコミットの2番目の親(取り込んだブランチの前回のコミット)｣ だからHEAD^n(n > 2)は存在しない 2024/06/04追記：　OctopusなMergeだと３つ以上のブランチからマージできるので^nも存在する......があまり見かけることはない HEAD^^は｢HEAD^の親｣､HEAD^2は｢HEADのもう一人の親｣みたいな......｡タラちゃんがHEADだと波平がHEAD^^でマスオがHEAD^2です(

VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~初心者umlVSCode新人プログラマ応援mermaid はじめに Mermaid Graphical EditorというVSCodeの拡張機能にとても感動したので一筆書きました こんな方におすすめ シーケンス図/クラス図/フローチャートをサクッと書きたいけどmermaidとか難しそう 😢 できること VSCode上でポチポチしながらシーケンス図/クラス図/フローチャートを描けるようになる mermaid記法のコードも自動生成されるよ 個人的メリット mermaidの学習コスト0 紙で書くよりも修正しながら書きやすい 導入手順 （簡単7steps） (1) VSCode上で「Mermaid Graphical Editor」という拡張機能をインストールする (2)

普段、VSCodeを使って業務を行なっています。 VSCodeにはプロジェクトに設定ファイルを設置するだけで、推奨拡張機能を表示させたり、VSCodeの設定を統一したりすることができる便利な機能があります。 チームで開発する際に他のメンバーもVSCodeを使用している場合、お手軽にナイスなDXをチームのみんなで共有できるのでその手順を紹介します。 前提 VSCodeのバージョン: 1.40.2 普段はフロントエンジニアとしてHTML, CSS, JavaScript(TypeScript)を中心に扱っています。 推奨拡張機能を表示する 公式ドキュメント みんなで使っていきたい便利な推奨機能をワークスペースに設定することができます。 推奨拡張機能をインストールしていない環境でそのプロジェクトを開くと、右下にポップアップでお知らせしてくれるようになります。 ここで「推奨事項を表示」を押し推奨拡

本日、2024年4月1日は、TypeScriptの歴史に残る記念すべき日となりそうです。TypeScriptの次期バージョン5.5.555に実装予定の新機能の概要が公開されたのです。 この記事では、本日投稿された以下のissueの内容をかみ砕いて解説します。 Arranged Field Definitionの概要とモチベーション issueのタイトルにもあるように、今回公開された新機能はArranged Field Definition (AFD) と題されています。ここでのarrangedという単語は、「順序に意味がある」という意味に解するのがよいでしょう。つまり、オブジェクト型のフィールド定義において順序まで考慮されるということです。 TypeScriptはJavaScriptに型をつけた言語ですが、JavaScriptではオブジェクトのプロパティに順序があることが知られています。つ

初めに 本記事は All we know about Vue 3's Vapor Mode の日本語翻訳版です。 このブログは現時点で出回っている Vapor Mode についてのリソースでおそらく最も体系的にまとめられているもので、主に Evan You 氏の講演やインタビューをもとに書かれています。 このブログを書いてくださったのは :icarus.gk 氏で、彼はいつも Vue のアップデートのまとめや、機能の紹介に関して素晴らしい発信をしています。 日本語翻訳を公開する件について :icarus.gk 氏 は快く了承してくださいました。 この場を借りて感謝したいと思います。 また、コンテンツの最後に幾つかの注釈を加えました。 こちらは元のブログにはないものであり、筆者 (@ubugeeei) が追記しているという点に注意してください。 Vapor Mode とは？ 🧐 Vapor

始めに 私は最近エンジニアに復帰し、現場で便利に思ったことを今後記事にできたらと思っています。 そして1発目は、gitのオプションについて記事を書いてみようと思います。 --fixup はどんな時に使えるの？ Pull Requestなどで、軽微な指摘や後から気付いた修正など、本来の機能のコミットとは別に修正コミットを残すのは少し嫌な時がありますよね。 コミットが一つ手前であれば、直前のコミットを修正してくれる git commit --amendなどで対応できますが、3つ前のコミットに修正を混ぜ込みたい時などは、少し大変。 そんな時に便利なのが、この git commit --fixupです。 使い方 例えば、下記のコミットの状況で、Fix article pageのコミットに対して、追加の修正をしたいとする。 ❯ git log --oneline 1131338365 (HEAD -

はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove

要素をドラッグして移動することは、JavaScriptにおいて頻出パターンです。 しかし、それを簡単に実現するコードは意外と知られていません。 <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove = function(event){ if(event.buttons){ this.style.left = this.offsetLeft + event.movementX + 'px' this.style.top = this.offsetTop + event.movementY + 'px' this.style.position = 'absolute' this.draggable = false this.setPointe

はじめに みなさんは、CSSで三角形をつくる時どのように作っていますか？ borderを使って作っていませんか？ この記事では、CSSで三角形をつくるベストプラクティスを紹介します。 今までの三角形の作り方 See the Pen CSS Masking - Fade out UI by でぐぅー | Qiita (@sp_degu) on CodePen. 今までは、三角形を↑このようにborderを駆使して作成していました。 どうしてこうなるかは、省略しますが、本来のプロパティとは違う使い方でうつくしくないですよね！ この方法のいけてないポイントは以下の通りです。 1. 指定の大きさの三角形をつくるのに、border-widthを使うところ 本来、border-widthは、要素の境界の幅を指定するプロパティで、要素の大きさを指定するプロパティではありません。 理想は、widht と

はじめに この記事では、consoleメソッドについて紹介を行っていきます。consoleメソッドには例えばconsole.log()などが挙げられます。web開発においてconsole.log()を使用する方は多いかもしれません。しかしconsoleにはconsole.log()以外にも様々なメソッドがあるので、状況に合わせて使い分けることで少しでも快適なデバック、開発ライフを目指しましょう。 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 consoleについて consoleオブジェクトを用いることで変数の値などをコンソール上に出力することができます。主に出力の確認であったり不具合の原因特定などのデバックするために

はじめに ファイルの末尾には改行を入れたほうが良いのでしょうか。 「ファイル 末尾 改行 POSIX」等で調べると、規格の観点から改行を入れた方がいいという話が出てくるのですが、今回はgitの仕組みの観点からも改行を入れたほうが良いという話をします。 GitHub上での末尾改行の警告 例えば末尾に改行のないこんなファイルが有るとし、commitしてGitHubにpushすると以下のような表示になります export function hello(name: string) { return `Hello, ${name}!`; }

今日のXでは、イベントハンドラの関数名についての話題を見ました。元の投稿はこちらです。要するに、次のhandleClickのようなhandleイベント名という命名は良くないということです。 const handleClick = () => { ... }; <button type="button" onClick={handleClick} /> これについて少し考えたので、せっかくなのでアウトプットしておくことにしました。 この記事の目的 考えたことを頭の中に残しておくのがもったいないので、文章の形にしておく。 色々な意見が出る問題であり、ベストな答えは無いので各々好きにすれば良いということを、読者に理解してもらう。 とはいえ、筆者の考えに納得して同じ考えの人が多いと嬉しいので、なるべく納得してもらう。 筆者の考え 自分の考えとしては、むしろhandleClickいいじゃん！　どんど

世の中には、一見関係なさそうな物理現象がITシステムに不可思議な影響を及ぼすことがあります 例えば,500マイル以上離れた場所にメールが送れないという話だったり 中国人のAさんがお茶を入れると会社のネットが繋がらなくなる という話があります。 私の場合は、祖母が就寝するとDBインサートが失敗する、という状況でした 実家の見守りシステム 問題が起きているのは、離れた実家にいる一人暮らしの祖母の状態を見守るために作成した自作のシステムです。 気温や湿度、CO2濃度、明るさ、部屋のドアの開閉、冷蔵庫の開閉の状況をモニタリングできるようにしています。 Raspberry Piに各種センサが接続され、定期的にInfluxDBに送信し、Grafanaという可視化ツールでいつでも見られるようにしています。 これらの情報を見ることで、祖母の家の部屋の温度が適切か、活動しているか、部屋にいるかなどが分かりま

最近見つけた現象で既に論じられているかと思ったがちょっと解説が見つからなかったのでまとめておく。 手短に X(旧Twitter)クライアントで表示されるTwitterカードについてカードに表示されるドメインとは違うページにリンクさせる手法が存在する この手法は第三者のTwitterカードを利用することができる つまり悪用者は第三者のTwitterカードを表示させながら自身の意図するページに閲覧者を誘導することができる これはフィッシングの手法になりうる 見つけたツイート 以下のツイートはGoogle、Bloomberg、日経ビジネスのTwitterカードが添付されているがクリックするとそれらとは異なる情報商材サイトにジャンプする。リンク先に危険な仕組みはないと思われるがクリックは自己責任で。念を入れたい人は curl -L　で。 PCブラウザでカーソルを合わせてもXの短縮URLサービスであ

TL;DR Shift_JISにしただけでコンパイラが通らなくなる恐ろしい事件とその回避法について。 \ (¥)のASCIIコードは0x5c 表、能は良くない UTF-8は神 2023/12/06追記 誤りがあったので訂正します。こんな読まれると思ってなかったので正直ちょっとびっくりしていますが、いろいろコメントありがとうございました。（ツイート等全て拝見しました。） Shift_JISが悪いわけではない（デフォルトのエンコーディング設定の問題）→追記しました UTF-8にはUTF-FSSという仕様でこの問題が回避されている→マジでタメになる知識ありがとうございます OSによってデフォルトのエンコーディング設定が異なるせいで、デフォルト環境での動作がOSにより異なる→なるほど？（調査中） CRLFとLF問題では→なるほど？（調査中） そんな問題何を今更→UTF-8が出てから生まれたからです

この記事はNuco Advent Calendar 2023の4日目の記事です。 弊社では、経験の有無を問わず、社員やインターン生の採用を行っています。 興味のある方はこちらをご覧ください。 はじめに 後輩に 「なぜ0.1+0.2≠0.3になるんですか？」 と聞かれて答えられますか？ コンピュータの計算では「0.1+0.2」は「0.3」になりません。 これを理解していないと予期せぬ重大なバグを生み出す可能性があります。 分からない方、どうぞ安心してください。 この記事を読んだ全員が「0.1+0.2≠0.3」を理解できるように分かりやすく説明していきます。 コンピュータが計算を間違う理由 まず、そもそも「0.1+0.2=0.3」で正しい！「0.1+0.2≠0.3」なんてあり得ない！ という方のために、プログラミング言語のフォーマット処理を経ない、コンピュータの計算結果を見てみます。

この記事は、本番環境などでやらかしちゃった人 Advent Calendar 2023 の4日目です。年末進行、いかがお過ごしでしょうか？みなさま無事に仕事が納まることを願っております… 新人インフラエンジニアが、本番ウェブサーバー60台のホスト名を全部 cat にしてしまった話について、ここに供養させていただきたいと思います 背景 おそらく今から7年くらい前、インフラエンジニアとして転職してきて1年ほどが経ち、本番環境での作業もこなれてきたなというバッチリのタイミングで事を起こしてしまいました。サーバーは CentOS 6 だったと思います。 職場としてはまだまだベンチャー感にあふれ大きな裁量が与えられスピード感のある環境ながら、サービスの登録ユーザー数は1,000万を超え、本番環境の規模としては既になかなかの大きさがあり、ウェブサーバーだけでも60台くらいあったと思います。ひと山につき