ブックマーク / zenn.dev (3,069)

  • 初心者が本当に知りたかったC#入門以前

    この記事は「初心者だった時に知りたかったな…」っていう普通のC#入門だと教えてくれないことが書いてあります。 なので入門記事というより、C#初心者にはちょっと難しい内容もあります! C#の特徴的なところ C#は変化が早い💨 最近は毎年メジャーアップデート 2019: C# 8.0 2020: C# 9.0 2021: C# 10.0 2022: C# 11.0 2023: C# 12.0 新記法、新しい書き方がモリモリ入る しかも新しい書き方の方が便利で性能が良い(ことが多い) 少し前のC#を知ってる人からするともう別物 解説 C#は6.0までゆっくりな変化だったんですが… 7.0から様子が変わって8.0以降は毎年変わるようになりました。 ↓こちらのスライドの7ページから数枚が参考になります! あんまり変わらないバージョンもありますが、特に大きなところだと, 「null安全」になった (

    初心者が本当に知りたかったC#入門以前
  • Next.js + TypeScript + Tailwind CSS の開発環境をできるだけ丁寧に構築する【2024年】

    はじめに 最近、Next.jsTypeScriptTailwind CSSを使って技術ブログを立ち上げました。(まだあまり更新は進んでいませんが…) このプロジェクトを通じて構築した開発環境がわりと快適だったので、誰かの参考になるかもしれないと記事を書いてみることにしました。 できる限りわかりやすく詳細な説明を心がけましたが、その結果、記事のボリュームが大きくなってしまいました。長文ですが、興味のある方はぜひ読んでみてください🙏 また、この記事内で紹介した内容をセットアップしたリポジトリを公開しています。 Next.jsのボイラープレートとして活用可能ですので、興味のある方はぜひ覗いてみてください。

    Next.js + TypeScript + Tailwind CSS の開発環境をできるだけ丁寧に構築する【2024年】
  • Webフロントエンド入門

    まずはじめに HTMLCSS、JSを学んだ後にモダンなweb制作を行う上でこれから何を学べばいいだろうと手探り状態だった過去があるので、今同じ悩みを抱えている方に向けてこの記事を書こうと思いました。また、自分自身が2023年に多くのことを学んだのでそれの整理になればという思いもあります。 あと、いいね、コメントいただけると記事作成の励みになります😇 この記事の対象者 HTML, CSS, JSはある程度理解した モダンなWeb制作を行いたい これから学ぶべき技術 React, Next.js 一度は聞いたことある人も多いと思います。これは、Webサイトを効率的に開発することを目的に作られたJSのフレームワーク(正確にいうとReactはライブラリ)です。 ReactはFacebook社が開発したもので、それをVercel社がより使いやすくしたものがNext.jsです。 作成するものによっ

    Webフロントエンド入門
  • 【DDD入門】TypeScript × ドメイン駆動設計ハンズオン

    TypeScriptとドメイン駆動設計(DDD)を組み合わせ、APIを構築するハンズオンガイドです。このでは、DDDとは何かという基礎的なところからソフトウェア開発における戦略的設計、戦術的設計まで、包括的な知識を提供します。 戦略的設計では、ビジネスの要求に合わせたドメインモデルの設計をイベントストーミングを用いて行います。その後、戦術的設計では、具体的なコードの実装に関連するDDDの原則と実践を学びます。 TypeScriptを使ってコードを書きながら、DDDの概念を実際のプロジェクトに適用するヒントを紹介します。

    【DDD入門】TypeScript × ドメイン駆動設計ハンズオン
  • Googleの新しい送信者ガイドラインに備えてDMARCレポートに基づいて具体的にやったこと

    2023年10月にGoogleYahoo!がメール送信者向けのガイドラインを更新してから早3か月。いよいよ適用開始の2024年2月が近づいてきました(ドキドキ)。 私は昨年から件の対応を進めていて、地味に大変だな、と感じています。多くの企業では自社ドメインから様々なメールを送信していると思います。利用しているツール・サービスも様々で、たとえば、Sendmail/Postfix/Eximのサーバを立てている、Google WorkspaceやMicrosoft 365を使っている、といった他に、CRMであるSalesforce、マーケティングツールのHubspotやAccount Engagement(旧Pardot)、メール送信用のAmazon SESやSendGridを使っているなど、多くのツール・サービスを併用している企業が多いのではないでしょうか。 そういった状況では自社のどこか

    Googleの新しい送信者ガイドラインに備えてDMARCレポートに基づいて具体的にやったこと
  • お気に入りのコマンドラインツールを淡々と紹介する

    めちゃくちゃ良い記事でした。 「OSS は使っていることを公言するだけでも貢献になる」と songmu さんが言っていたので、私も貢献したいと思います。 僕も貢献したいのでよく使うコマンドラインツールを紹介していきます。 特定のプログラミング言語等に依存するツールは省いています。 actionlint - GitHub Actions の Workflow ファイルの静的検査 GitHub Actions の Workflow ファイルの静的検査ツールです。 かなり精度が高く、色々な設定ミスを検知してくれます。 エラーメッセージも見やすくて助かります。 aicommits - コミットメッセージを自動生成 変更内容を元に自動でコミットメッセージを AI が生成してくれるツールです。 コミットをする前にちゃんと確認してくれるのも安心感があって良いです。 cLive - ターミナル操作を自動化

    お気に入りのコマンドラインツールを淡々と紹介する
  • パスワードはおしまい! 認証はパスキーでやろう

    はじめに パスワードは古来より認証に良く使われる方法ですが、その運用の難しさからセキュリティの懸念とその対策としての運用の複雑さ(複雑で長い文字列、90日でパスワード変更など)が要求される大きく問題をもった仕組みです。 その根的な解決策としてFIDO Allianceを中心に推進されている 「パスワードレス」 が注目されています。これはPINや生体認証とデバイス認証を使ったMFAからなっており、フィッシングやパスワード流出に強い上に、ユーザも複雑なパスワードを覚えなくて良い、という大きなメリットがあります。最近はこの流れでPassKeyというものが登場し、Apple/MS/Googleのプラットフォーマが対応したことで、格運用に乗せれるフェーズになってきました。というわけで以下に解説動画を作ったのですが、動画中で時間の都合で触れきれなかったところや、JavaScriptによる実装のサン

    パスワードはおしまい! 認証はパスキーでやろう
  • 基本情報技術者を取得してから「見える世界」が変わった話をしようか

    どうもお疲れ様です。 MESIです。 皆さん基情報技術者は取得済みでしょうか? よくITエンジニアの免許と言われている資格ですよね。 私は一昨年の秋に取得しました。 ちょうどエンジニアとして就職して2年目の時でしたね。 それまでの私の知識は業務で必要とされる部分しか知識がなく、情報系の学科を出ているわけでもないので、ITエンジニアとしての土台が全くない状態でした。 時々、このままではいけないと技術書を買って読むのですが、土台がないので頭に全然入ってこないし、何が書いてあるのかわからない。。 そんな私が基情報を受験してから、見える世界が変わった件について話します。 『何をしている?早く基情報技術者を取るんだ!』 新卒1年目の自分に言いたいセリフNo1がこれです。 なぜ基情報を受験することになったのかといいますと、会社で半年に一度目標設定をするのですが、その一環としてです。 エンジニア

    基本情報技術者を取得してから「見える世界」が変わった話をしようか
  • スイカゲームの作り方

    はじめに Go言語用のEbitengineというゲームエンジンに興味があったので、試しにスイカゲームもどきを作りってみました。Ebitengineを使うと意外と簡単にスイカゲームもどきを作る事ができたので、なるべく分かりやすく作り方を紹介してみようと思います。 まずは先に完成品をお見せします。ちなみにフルーツの回転は面倒くさいので実装しないことにしました。 ちなみにEbitengineはwasmでも普通に動きます。ビルドしたものをこちらに置いたのでブラウザから実際に動かす事ができます。 それではスイカゲームもどきを作って行きましょう。 描画する まず一番初めにフルーツの画像を作るところから始めます。これはリンゴ、オレンジ、ブドウ、パイナップル、メロン、スイカのつもりです。 続いてフルーツを定義します

    スイカゲームの作り方
  • 数年間継続している「作業メモ」の話

    メモを残す習慣 以前、@gorou_178さんが「1日1ファイル、「調べたこと」「やったこと」を日報として残す」という記事を公開していた。 この記事の中に以下のようなくだりがある。 そこでふと思い出したのが元同僚のメモの取り方。 毎日1ファイル作成して、そのファイルにその日にやったこと(事細かくやった作業、実行したコマンドなども)をメモしていた。メモは年単位で残っておりとても驚いたことを覚えている。 この、「元同僚」というのはきっと私のことである。 私はメモを取ることが結構と好きな方で、メモを残すことがわりと習慣化している。 例を挙げると、普段からこういったことをやっている。 Google Keepに「Podcastに出演してほしいゲスト候補」、「勉強会・カンファレンスの登壇履歴」、「来月購入予定の日用品・雑貨」、「自宅周辺の行ったことないラーメン屋」、「読みたい・気になったマンガ」とい

    数年間継続している「作業メモ」の話
  • Reactコンポーネント同士の結合度を考える

    この記事は株式会社ゆめみ Advent Calendar 2023 | Qiita の 2023-12-21 投稿分です。 React のコンポーネント間の結合度、特に「〇〇的結合」といった段階を使った評価について、私なりにその考え方・用語を React に翻訳してみました。 React のコンポーネント同士の結合のしかたの制約を考慮に入れてみると、結合度の各レベルにはこのような短い説明を付けられます。 レベル1: 内容結合 ―― 高水準言語なので起こらない レベル2: 共通結合 ―― グローバル or Context. 賢く使おう レベル3: 外部結合 ―― React では原則として禁止 レベル4: 制御結合 (ここからがマシな結合) ―― 論理的凝集におちいるので注意 レベル5: スタンプ結合 ―― 無駄なデータにだけは注意 レベル6: データ結合 ―― 理想的 番外編: 名前や型付

    Reactコンポーネント同士の結合度を考える
  • Server Action と useFormState

    稿は Next.js で今試せる React canary の機能「useFormState」に関する記事です。Server Action を使用すると、API Client を使用せずにブラウザから直接サーバーサイドの関数を実行できます。Server Action のメリットは以下のものが挙がります。 API Client が不要になる ハイドレーションを待たずに反応できる Progressive Enhancement を維持できる useFormState の話の前に、Server Action について少し触れていきます。 Server Action だけではない「Client Action」とは? 「Server Action」というワードを知っている方は多いと思いますが「Client Action」はまだ馴染みのないワードかもしれません。ReactNext.js いずれも公

    Server Action と useFormState
  • 【Next.js】Server Actions時代のデザインパターン入門

    この記事は? アーキテクチャというとエンジニアによって定義が曖昧になりがちです。来、システム構成やインフラ構成まで含めてアーキテクチャという意見も尤もですが、この記事ではNext.js(App router以降)のアーキテクチャ(フロントエンド、バックエンド)について考察していきます。フロント、バックエンドを分ける理由は、バックエンドにとってはデータベースを含むモデリングが重要になる一方、フロントエンドにとってはデザインシステムを含む整理が重要になってくるからです。 アーキテクチャの基礎知識 (※ ここは復習部分になるので、適宜読み飛ばしてください。 初めにアーキテクチャの基礎について触れるのは、基礎がわかっていれば応用が効きやすいため(敢えてServer Actionsにしていますが、それ以外の技術構成でも応用可能)です。 フロントエンドの実装でデザインシステムが重要なのは、効率良く作

    【Next.js】Server Actions時代のデザインパターン入門
  • 狭ピッチ & 薄型キーボードで、お出かけ先でのタイピングを楽しくしてみない??

    この記事はキーボード #1 Advent Calendar 2023の3日目の記事です。 前日はIKeJIさんの今年作ったキーボードまとめ(2023)です。 今年も、自作キーボードにどっぷりと浸からせて頂きました。 なんかんだでキーボードを8つ設計し、キーキャップを4種類ほどデザインしたりと思いの外のめり込んでましたね。 早く飽きたい。 さて、私が今年に頒布したキーボードキットの内、一番人気は「miniDivide」でした。 簡単にminiDivideの紹介を並べると 0.8u(16mmピッチ)の38キー分割型キーボード。 従来のキーボードより各キーが近いので... 手が小さい方でも使いやすい。 指の動きを最小限に文字を打つことが可能。 コンパクトさと薄さを徹底。 BLE Micro Proのサポートしており、Bluetooth接続が可能。(従来のPro Microによる有線接続も可能)

    狭ピッチ & 薄型キーボードで、お出かけ先でのタイピングを楽しくしてみない??
  • システム生物学って何だったんですか?(前編)

    はじめに システム生物学(systems biology)が提唱され(1998年)てすでに25年が経過しました。 諸外国をみると例えばUKなどではsystems biologyやその派生分野 (例えばsystems immunology)が比較的頻繁に使われ分野名として根付いているようであるのに対し、日ではシステム生物学を標榜する研究室は思ったよりも少ないです。一方で、システム生物学が目指した研究の方向性は、定量生物を始めとして国内においても自然に受け入れられ普及しています。つまり名実でいえば実は十分伴っているように見受けられます。そして、新たにシステム生物学入門の教科書が出版されたように、若い世代にはそれ以上の世代(2023年現在40, 50代の世代)と比較して、システム生物学という語に良い意味でも悪い意味でも特別な印象は持ってないように見受けられます。 システム生物学の黎明期からこの

    システム生物学って何だったんですか?(前編)
  • Goroutineの使い方

    この記事はGo 言語 Advent Calendar 2023のシリーズ2の4日目の記事です(穴があったので入りました!)。 goroutineの特徴 コルーチンをベースにコルーチンの以下の点を改良 言語組み込みワード「go」にて起動できる M:Nスレッドシステム採用によりマルチコア分散処理が可能 ブロッキングを検出したらネイティブスレッドが独立 プリエンプティブ性を追加(Go1.14以降) 以上により、goroutineスレッドシステムはコードを書く人にとって「ネイティブスレッド」の感覚で実装を書くことができ、「コルーチン」のようにメモリやタスクスイッチ負荷が小さく、「コルーチン」のような面倒な制約(期待するレイテンシ以上にCPUビジーにしてはいけないなど)も無いといういいとこどりのスレッドシステムになりました。 ネイティブスレッドライクによる特性 ネイティブスレッドを使ったプログラミン

    Goroutineの使い方
  • 弊社で使っているAzureリソースのスルメ系命名規則を紹介します

    上記を元に先ほどの整い例 をご説明しますと ステージング環境:s 認証会員基盤(Auth and Member):am Azure Kubernetes Service:ak 東日リージョン(Japan East):je クーポン(coupon):coupn 最初のリソース:001 となります。 いや…やっぱ分かりにくいし普通にCloud Adoption Frameworkのベストプラクティスに従えばいいんじゃ…とほとんどの方が感じていると思うので次にこの初見殺しの命名規則の二大メリットをお話しますね。 【その一】Azure リソースの名前付け規則と制限事項に抵触しない まず下記を確認してみましょう。 嘔吐しそうになるほど盛り沢山のAzureリソースの名前付けの規則と制限事項が並んでいますね。で、細かく見ていくと下記のようなことがたま~にあるんです。 ハイフン(-)が有効な文字に含まれ

    弊社で使っているAzureリソースのスルメ系命名規則を紹介します
  • 【PR】『Tailwind CSS実践入門』を2024年1月26日に出版します

    おそらく日語の商業出版の技術書ではほぼ初となる[1]、Tailwind CSS格的な入門書を発売します(そして私にとっては初の単著となります!)。 技術評論社様の「エンジニア選書シリーズ」という比較的新しめのレーベルです。表紙が風車なので、愛称として「風車(ふうしゃ)」とでも呼んでもらえると喜びます! 物理版&電子版の両方が出ます。Amazonほか各種ECサイトなどでお求めください。 コンセプトと構成 このHTMLCSSそのものの基礎は扱いません。 「すでにCSSを使ったことがあり、CSSの設計で苦しみを味わってきた開発者(文まえがきより引用)」が対象読者です。 コンセプトとしてはTailwind CSSというフレームワークの入門書である以上に、ユーティリティファーストという思想への入門書を志向しています。全9章ですが、どの章も概ね以下の3つのテーマを巡って展開しています。

    【PR】『Tailwind CSS実践入門』を2024年1月26日に出版します
  • TypeScriptパーサーのベンチマーク:Rustツールの性能の謎を解く

    TL;DR: JavaScriptで使われるネイティブパーサーは、言語間の余分な作業のために常に速いとは限りません。これらのオーバーヘッドを回避し、マルチコアを使うことが性能にとって重要です。 Rustは、そのパフォーマンスと安全性の特徴から、JavaScriptエコシステムの中で急速に選択肢の一つになっています。しかし、RustJavaScriptツールに統合することは、特に効率的で移植性の高いプラグインシステムを設計する際に、固有の課題をもたらします。 「JavaScriptツールをRustで書き直すことは、広範な外部貢献を必要としない速度重視のプロジェクトにとって有利です。」 ESLintの作者であるNicholas C. Zakas Rustは、その急な学習曲線のために難しいものになりがちで、さらにコンパイルされたバイナリを異なるプラットフォームに配布することも簡単ではありません

    TypeScriptパーサーのベンチマーク:Rustツールの性能の謎を解く
  • Vite は使ってないけど Jest を Vitest に移行する

    上記以外で特筆すべき点として、他の開発者(≒チームメンバー)にとっては、変更の影響をほとんど受けずに、ノーコストで上記恩恵を受けられる点があります。 これは Vitest の Jest に対する高い互換性のおかげでテストコードの書き方に大きな変更がなかったことと、テスト実行コマンドを npm-scripts によって隠蔽していたことによるもので、移行したことに気づきさえしない可能性もあります。 Vite を使ってないのに Vitest 使ってええんか? 今回 Jest から Vitest への移行を行ったプロジェクトは、開発サーバーやプロダクションビルドには Webpack を使用しており、Vite は一切使用していませんでした。 そういったプロジェクトにおいても、Vite をベースとしたテストフレームワークである Vitest は使用して良いものでしょうか? これについては Vitest

    Vite は使ってないけど Jest を Vitest に移行する