htmxとは何なのか？ その背景にある思想について - Qiita
先日、Qiitaに投稿された一つの記事が注目を集めました。 元記事では、htmxというJavaScriptライブラリが英語圏で認知を獲得しているとして、インストールの仕方から使い方について公式のドキュメントの全体にわたって簡単に説明が行われています。 さまざまなプラットフォームでこの記事に対する反応を観察してみると、どちらかというと懐疑的な見方のほうが優勢のように見受けられます。ただ、多くのコメントは誤解に基づいているように見受けられました。「JSが要らない」といった元記事のミスリードによるところも大きそうですが1、なぜhtmxが大きく支持を得つつあるのかを理解するには、背景情報を含めて理解することが必要です。 htmxは、最近の複雑化するフロントエンド技術に対する単なる逆張りではありません。これまで30年ほどのあいだウェブ上のシステムを支え続けた「ハイパーメディア」の持つ強力さに今一度目
Vue3 の reactivity 部分のソースコードを読む - Qiita
はじめに あとで何か書く。 事前知識 Proxy 知っておかないと Vue3 のソースコードが読めないと思います。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy Reflect 何なのかは知っておかないと Vue3 のソースコードを読むときに詰まります。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Reflect WeakMap 何なのかは知っておかないと Vue3 のソースコードを読むときに詰まります。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/
Goの構文解析に入門してみる - Qiita
Goのソースコードを処理するツール（コードチェックやデータ生成など）を作ってみたいと思ったので、Goの構文解析に入門してみました。 まえがき ソースコードを何らかのツールにかけて処理したいことはよくあるかと思います。 例えばコードのルールチェックやフォーマットを行うとか、特定のフォーマットで書かれたコード（やコメント）から何らかのデータ（APIドキュメントなど）を自動生成するなどです。 昨今ではこのような処理を行うためのツールが多数提供されており、多くのプロジェクトで利用されています。 しかし、プロジェクトに固有なルールであるとか、独自のデータファイルを生成したいとなったとき、それら既存のツールでは対応できないこともあります。 そのような場合は「自分たちでツールを作る」ということが考えられますが、その際にはどのようにしてソースコードを処理すればよいのでしょうか？ 簡単なツールであればちょっ
GAS のGoogle製CLIツール clasp - Qiita
Google Apps Scriptというと以前はWebのエディター上でしかコードを書けなかった。 手に馴染んだエディタが使えないし、バージョン管理はしにくかった。 Googleからclaspが登場し開発環境は大幅に改善された。 利用バージョン： clasp v1.1.5 インストール npm コマンドでインストールできる。 npm i clasp でインストールすると以前は別モノがインストールされたが、今は An alias for @google/claspと書かれており単にclasp のみでも良さそう。 ログイン Webエディタ側から取るにも、Webエディタ側にアップするにもユーザ認証が必要ということで、まずはログインする必要がある。 ログインする前には Google Apps Script API を有効にしておく必要もある。 https://script.google.com/h
たった２つのステップを意識するだけで書けない単体テストがほぼなくなる - Qiita
はじめに この記事は レガシーコード改善ガイド: 保守開発のためのリファクタリング を参考に手を動かしてみて、ある程度自分の中で体系的にまとまった知識のアウトプットです。 この記事で扱う内容 この記事で扱うのは主にレガシーコードで単体テストを書く際のハードルになりがちな 依存関係の排除 に関する手法を紹介します。 この記事を読んだ後に、 『この観点を持っておけば単体テストをスムーズに書いていけそう！』 『今までモック使ってたけど意外とモック使わなくても書けるね！』 となったらいいな、と思います。 ちなみに、今まであんまりテスト書いたことないよーて人は以下の記事など参考にして一度やってみてください。 前提の話： この記事の本旨は「テスト書きにくいプロダクトコードも依存関係を排除すれば楽にテスト書けるよ」なので、それ設計的にアウトでは？リファクタリング耐性低くない？みたいな話は度外視してます。
console.logって打つの面倒だよねって話 - Qiita
この記事の対象者 エディタ: IntelliJ(2023.3.4 Ultimate Edition) TypeScript・JavaScript以外の言語も触ったことがある人 console.log()をタイピングしているつもりがついうっかりprint()とか書いちゃう人 そもそもconsole.logってタイピングが長いと思っている人 console.logとか出すんじゃなくてデバッグすればよくね？ってツッコミが来そうですが、 コーディング初心者なんです、慈悲をください〜🔰 結論 IntelliJのスニペット機能、 Live Templatesに好きな形で登録して幸せになろう！ スニペットの一例↓(細かい設定は後述) console.log("🚀====$FILENAME$: L: $NO$ ====🚀") console.log("$VARIABLES$: ", $VARIABL
git commit --fixup が便利 - Qiita
始めに 私は最近エンジニアに復帰し、現場で便利に思ったことを今後記事にできたらと思っています。 そして1発目は、gitのオプションについて記事を書いてみようと思います。 --fixup はどんな時に使えるの？ Pull Requestなどで、軽微な指摘や後から気付いた修正など、本来の機能のコミットとは別に修正コミットを残すのは少し嫌な時がありますよね。 コミットが一つ手前であれば、直前のコミットを修正してくれる git commit --amendなどで対応できますが、3つ前のコミットに修正を混ぜ込みたい時などは、少し大変。 そんな時に便利なのが、この git commit --fixupです。 使い方 例えば、下記のコミットの状況で、Fix article pageのコミットに対して、追加の修正をしたいとする。 ❯ git log --oneline 1131338365 (HEAD -
俺が悪かった。素直に間違いを認めるから、もうサービスクラスとか作るのは止めてくれ - Qiita
ちなみに、最初に結論だけ言っておくと、まずSandi Metzの「オブジェクト指向設計実践ガイド」を読め、という話です それだけで終わってしまいたい気持ちはあるが、不親切過ぎるしもうちょっとRails向けの話を書こうと思う。 ただ言いたいことは、よく分かってないのに使うのは止めろということ。 自分も本で書いたりした手前、それが参考にされた結果なのかもしれないが、世の中には本当に酷いクラスが存在するもので、雑にサンプルで書くと以下の様な感じのコードが存在したりする。 class HogehogeService # Hogehogeはモデル名まんま def process(hogehoge, option_a: nil, option_b: nil, option_c: false) history = hogehoge.histories.last unless hogehoge.activ
Viteを利用したテストツールVitestの利用を始める - Qiita
はじめに Viteのバージョン4.0の公開をアナウンスするブログでVitestについて言及されていました。 Vitest adoption is exploding, it will soon represent half of Vite's npm downloads. Nx is also investing in the ecosystem, and officially supports Vite. Vitestの採用は爆発的に増えており、まもなくViteのnpmダウンロードの半分を占めるようになるでしょう。Nxもエコシステムに投資しており、Viteを公式にサポートしています。(DeepLによる翻訳) これまではJavaScript、TypeScriptにおけるテストツールとしてはJestという成熟したツールがあるので、Vitestを利用するのは趣味だったり少し先の未来だろうと考え
ゼロイチObsidian｜ゼロからはじめるObsidian案内 - Qiita
この記事のねらい Obsidian はすごくよいノートアプリです。さまざまな思考スタイルに寄り添ってくれます。その代わり、どう始めればいいか迷いやすいところがあります。 この記事では、ノートの枚数でユーザレベルを分けることにし、「ゼロイチ期→育成期→発展期→達人期」と名付けました。くわしくは本記事後半の Obsidianユーザレベルのめやす をご覧ください。 そのなかでも、ゼロイチ期、つまりObsidianをまだ使っていないころから、ノート数が10枚ていどのころに役立つ情報を集めました。 ヒトが考えるためには書くツールが必要です。Evernoteがグダグダのいま、（ほかにもたくさん選択肢はありますが）Obsidianはオススメできる鉄板ツールのひとつです。ぜひ10枚の壁を越えて、見える風景を味わってみてください。 ゼロイチ期（ノート 0-10枚）に役立つ情報 まずは、Obsidianが何な
詳細設計の書き方 - Qiita
はじめに システム開発において詳細設計という工程があります。 プログラマーはこの詳細設計を確認しながら開発を行うことになります。そのため詳細設計ではシステムの構造や仕様、動作などを細かく定義することが必要になります。 詳細設計を行うことでシステム開発の方向性が明確になり、コーディングやテストをスムーズに行うことができます。 詳細設計の成果物としてはクラス図やシーケンス図、画面設計書やデータベース設計書などがあり、システムの動きや機能を具体的に表現するものです。 今回は詳細設計を作成する機会があったので、詳細設計の書き方についてまとめたいと思います。 詳細設計の目的やメリット 詳細設計の目的は、システム開発の品質や効率を向上させることです。詳細設計では、システムの仕様や動作を細かく定義することで、以下のようなメリットがあります。 開発工程でのバグや遅延を減らすことができる テスト工程での不具
私が独学をして、マジ神だと思うサイトおよび他 - Qiita
初めに 私は独学でプログラミングその他について勉強をしていますが、基本的に知識を得るために金はかけません。調べれば何とかなるので。 私がプログラミングを始めるにあたって自分に投資したものは安いノートパソコンとマウスのみで合計金額は14600円（ノートパソコン14000円、マウス600円）ですね。 もちろんいいものはお金をかけなければ手に入りません。しかし、いいものというのはある程度のレベルにならなくては持っていても意味がほとんどないと思います。 実際にプログラミングの勉強を独学で始めると、なかなか教材を見つけることができず、え？こんないいサイトあったの！？もうちょっと早く見つけときゃあよかった！というものがめっちゃありましたので、これから独学でプログラミングの勉強をしたいという方に向けて、少しでもお役に立てたらと、紹介をしたいと思います。 というわけで、今回は私が感謝する神サイトおよびその
もうjsなんていらない！世界で流行っているHTMXについてまとめてみた - Qiita
HTMXとは HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応しているので、チャットアプリなどにも適している。 2023 JavaScript Rising Starsでは、 フロントエンド・フレームワーク部門で見事2位に輝いた！(一位はReact、全部門だとshadcn/ui) 似たような機能として、Ruby on RailsのHotWireがあるらしい。 2024年はHTMXがくると言われているぐらい世界で騒がれているのだが、あまり日本では流行っていない。以下はGoogleトレンドで調べた結果である。 アメリ
通称visually-hiddenについて - Qiita
これはなに アクセシビリティ対応意識でのマークアップとして非常に利便性のある通称visually-hiddenというCSSスニペットがあります。 Qiitaで検索した際に特段ヒットしなかったので備忘録件、皆さんもぜひ使ってみてください！ どういう恩恵があるか 視覚的には要素を見えないように非表示にしたいけど、スクリーンリーダーでは読ませたい場合。 visually-hiddenを書いてclassをつけるだけで視覚的にだけ表示させなくできます。 メリットはこれだけではないと思いますが。(SEOとか) どういう時に使えるか デザイン上はない、ブラウザの表示上いらない要素だけどHTMLの構造をきちんと書く場合です。 例えば見た目明らかに見出しコンテンツ(h2,h3)に見えるけどやむを得なくh2,h3でマークアップできない状況や、 インプットフォームでlabel要素が、デザイン上テキストが無い時に
npm workspace の使い方 - Qiita
npm v7 で追加された workspace 機能の使い方について紹介します。 記事中で使用している npm のバージョンは v7.22.0 です。 workspace 機能とは yarn workspace のような機能です。 単一のルートパッケージから複数のパッケージを workspace として管理することができます。 つまり、次のような monorepo を管理するための機能です。 . ├── package.json └── packages ├── a │ └── package.json └── b └── package.json workspace 機能を使うことによって、package-a, package-b のような複数のパッケージをトップレベルの npm プロジェクト (トップレベルの package.json) から管理・操作することができます。 ちなみに、こ
良いコードを書く技術（まとめ） - Qiita
大学の図書館にて”良いコードを書く技術”という本があったので、 感想とともに自分の体験などを交えて偉そうに話していこうと思う。本の全ては扱っていません。 ※また章の順番も一部変えています。 目次 １章 良いコードとはなにか ２章 良いコードを書くための５つの習慣 ３章 名前付け ４章 スコープ ５章 コードの分割 ６章 コードの集約化 まず良いコードとはなんだろうか？ 例えば宿題で書くコードを例にしたら、課題だから答えがあって、求められているものをクリアすることを優先すると思う。そんなの誰だってそうなので当たり前だ。なのでコメントも殆ど書かないし。読んでもらう相手は先生なので分かってくれるだろうと思って書いている。 私も普段から気をつけたいと思っているが、注意すると良いポイントは読む相手のことを考えることだと思う。他の本を見ると難しいことが書いている。でも重要な事は読み手を意識することだと
All I know about Vue 3's Vapor Mode Details (2023/12) - Qiita
Vapor Mode ってご存知でしょうか? 少しでも聞いたことがあるようであれば、おそらくあなたは日常的に情報を収集している熱心な方でしょう。 というのも、現在(2023/12)、Vapor Mode について日本語での言及はほぼありません。 かといって英語圏に情報が出回っているかというと、そうでもありません。(後述) 今回は現時点で筆者が知っている Vapor Mode の詳細について、前提知識も整理しつつ理解していければと思います。 初めに お品書き (何を理解するか) 改めて Vue.js とは これから Vue.js を学び始める方や、Vue.js をのぞいてみるのは随分と久しぶりだという方もいるかと思うので、ざっくりおさらいします 現在の Vue.js 現在の Vue.js がどういう実装で実現されているのか、 Vapor Mode に関わってくる部分を抽出し、ソースコードベー
Linuxでの調査時に高頻度で使用してきたコマンドまとめ - Qiita
この記事について この記事は、Linux上でコマンドをそこそこ実行してきた私が独断と偏見でよく使う5大コマンドをまとめたものです。 痒い所に手が届くような内容になることを願って記します…。 コマンドたち ①netstat -anp | grep "Listen " 実現できること LISTENしているポートを確認できます。 アプリケーションやミドルウェアに接続できない場合のトラブルシュートに使用できます。 使用方法 ポートの状況を調べたいサーバ上でコマンドを打つだけです。 127.0.0.53:53や:::80の箇所： LISTENしているIPアドレスとポート 0.0.0.0:*や:::*の箇所： 接続する側のIPアドレスとポート このような状況ではSSL設定したはずなのに、443ポートが開いていないぞというような形で調査ができます。 $ netstat -anp | grep "L
本当は教えたくない、VScode拡張の最強プログラミングアシスタントAI Phind(導入・使い方) - Qiita
みなさんプログラムは書いていますでしょうか。この一年でChatGPTができ、CopilotにCopilot Chatなど色々なAIツールが出ていますが今回お勧めするのはPhindというAIアシスタントです。 Phindとは Phind(Phind.com)とは端的にいえばGPT-4を超えるコーディング能力に特化した言語AIです 参考リンク：大規模言語モデル「Phind」がコーディングにおいてGPT-4を上回る リンク内で言われているように、WebからChatGPTやGoogleのように簡単に使うことができますが、Phindの真髄はここでは味わえません。 Phindの真の実力 Phindの本当の実力はVScode拡張を使うことによって体感することができます。 PhindのベースモデルはPhind-CodeLlamaというものを使っています。これはMeta社が作ったCodellamaというプロ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なぜファイルの末尾に改行を入れたほうが良いのか - Qiita
