1.はじめに 普段画面共有しながら実装することや、メンティーとペアプロすることが結構あります。自然に人のターミナル見ることも多くなりましたが、zsh-autosuggestions 使ってない方々が多いことに気づきました。これめっちゃいいから知らない人いないように…！！！！ という強い気持ちで記事にします。 2. zsh-autosuggestions とは zsh-autosuggestions はターミナルのコマンド履歴に基づいてコマンド候補を表示、入力補完もしてくれるとても便利なプラグインです。 皆さんよく使うコマンドたくさんあると思いますが、それを毎回いちいち最後まで打ってるのはとても…とてもめんどくさいです。私はめんどくさがり屋なので無理です。そういう人のためのプラグインなので今から入れてみましょう。 やり方は公式のインストールガイドの通りです。パッケージ、Antigen、Oh

こんにちは。ウォンテッドリーで Enabling チームでバックエンドエンジニアをしている市古（@sora_ichigo_x）です。 現在、Enablingチームでは技術的な取り組みを社外にも発信すべく、メンバーが週替わりで技術ブログをリレー形式で執筆しています。前回は冨永さんによる「Pocket終了に備えてObsidian Web Clipperに移行した話」でした。今回は、実践 Claude Code の話をしたいと思います。 先日、Anthropic から Claude 4 がリリースされ、それに合わせて Claude Code の一般提供が始まりました。これまで研究プレビューだった期間を経て、誰でも利用できるようになっています。本記事には Claude Code を知らない方向けの解説も含みますが、実際の設定・運用がすぐに知りたい方は読み飛ばしてください。 Claude Code

こんな人に読んで欲しい ・スケジュールを管理するツールはコストがかかるので入れられない… ・Excelやスプレッドシートなら使えるけど作り方が分からない… ・スプレッドシートのテンプレートは探せばあるけど、自分で作ってみたい！ …etc そんな方に是非読んでいただきたいです。 スプレッドシートでWBSを作るには… 早速、作り方を紹介します。 今回はExcelではなくスプレッドシートで作成しておりますので、ExcelでWBSを作成したい方はExcelに置き換えていただければと思います。 先に完成イメージをお伝えしておくと、こんな感じで作成していこうと思います。 画面左に各タスクと担当者、開始日、期限、稼働日、タスク完了率をイメージしております。 画面右はカレンダーになっていて、画面左の開始日、期限に応じて自動で色付けをしてくれるように作りたいと思います。 また、カレンダーは土日、祝日は自動で

最近では、Tailwind CSSで実装した無料のUIライブラリが増えてきました。これらのライブラリで共通しているのはもちろん、Tailwind CSSをベースにしていることで、さまざまなデザインやスタイルのライブラリが公開されています。 無料で利用できるTailwind CSSのライブラリからUIコンポーネント別に実装コードを探せるCurated UI Listを紹介します。

春の入門連載2024、5本目の記事です。 はじめにこんにちは。CSIG（Cyber Security Innovation Group）の棚井です。 春の入門連載2024ということで、VSCodeの拡張機能である「GitLens — Supercharge Git in VS Code」を取り上げます。 エディタ選びみなさんは、普段の開発エディタには何を利用されていますか？ ソフトウェアエンジニアであれば、エディタとの付き合いは絶対に外せないポイントです。私の場合は、「生成系AIとの連携があるか？」と「開発支援ツールが整備されているか」を判断軸としています。 「GitHub Copilot」との連携があり、私がこれまで利用してきたエディタは JetBrains VSCode（Visual Studio Code） の2つです。 JetBrainsの製品はインストール時点で豊富な開発支援機能

Git logの場合Gitの履歴はgit logコマンドをターミナルで打つと見れます！ 開発ブランチと本番ブランチなど複数のブランチがあると一目で開発の流れが追いにくいですよね。 その場合にGit HistoryやGit Graphを使うとグラフィカルに流れが把握できます。 Git Graphの場合 左端にあるGIt Flowをグラフィカルに表示してくれている箇所があるので、視覚的にブランチの流れが追いやすいです！ Git操作は間違えると修正するのに苦労するので、GUIを使って視覚的に全体像を把握する事をお勧めします！ Git運用に慣れていない方は、よくあるパターンとその対処法を事前に把握しておきましょう。 👉 Gitに慣れていない人がよくハマるパターンと対処法まとめ 2. Git Graphのインストール方法ここからはGit Graphの導入方法や使い方を解説していきます。 導入方法は

un-T factory! XA Advent Calendar 10日目の記事です。 リキッドレイアウトの葛藤 リキッドレイアウトによるWebページ制作の際、表示端末の画面幅（viewport）の違いによって各要素のサイズ比率が変わり、デザイン時の意図と異なる見た目になってしまうことがあります。 特にスマートフォンやタブレットでは端末によってブラウザ幅が固定されるため、テキストの改行のされ方や周辺要素とのレイアウトバランスなど、ちょっとした違いでページの印象が大きく変わることもあります。 「さまざまな解像度の端末があるのだから、そのような違いが出ることも許容するべき」という考え方にはもちろん同意ですが、今回は、CSSのサイズ指定を少し工夫してアスペクト比を維持したサイズ可変レイアウトを手軽に実装する方法を紹介します。 サイズ可変レイアウトの実装 一つの例として、画面幅（viewport）

画像のように拡大・縮小するコーディング実例 では、先ほど紹介したvwの考え方を使ってコーディングしてみます。自分の場合は基本的にPCからスマホに映るまでの幅で使う多いです。 （表示がぐちゃぐちゃになりがちなので…） 先に結果だけ見せると以下のような動きになります。文字や余白、横幅がウインドウ幅に応じて拡大したり縮小していることが分かるかと思います。 PCベースのHTMLとCSSを作る ではどんな感じで作っているか具体的なコードを元に見ていきましょう！以下のようなHTML構造でシンプルな横並びレイアウトを作っています。 <section class="content"> <div class="inner"> <h2 class="head">セクションの見出し</h2> <div class="body"> <div class="body-img"> <img src="https://

dotenv の改良版である dotenvx が使ってみてめっちゃ良かったので紹介します。 特徴 特に大きいのは「環境変数の暗号化」と「複数 .env ファイルへの対応」の2つです。 環境変数の暗号化 dotenvx 経由で環境変数をセットすることで、環境変数が公開鍵暗号方式で暗号化されます。 #/-------------------[DOTENV_PUBLIC_KEY]--------------------/ #/ public-key encryption for .env files / #/ [how it works](https://dotenvx.com/encryption) / #/----------------------------------------------------------/ DOTENV_PUBLIC_KEY="03f8b376234c4f2

なぜMarkdownか 記法が簡単で表現力が高い（※１） テキストなので差分管理がしやすい QiitaもMarkdown形式を採用している ※１ プレビュー機能があるとなおよい！ VSCodeを使うならこの拡張機能を入れてみよう Markdown All in One https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) まずはこれを入れていたら間違いないと思う！ 詳細は拡張機能の公開サイトを見ていただくといいですが、とりあえずのおすすめポイントは これを入れていたら大体の機能が使える（最初に入れるべき拡張機能） 便利なショートカットが用意されている 太字：Ctrl＋B 表のフォーマット：Alt+Shift+F パスの補完をしてくれる ファイルリンク（特に画像）のパスを補完してくれる

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2019年3月⁩. * Some parts of this feature may have varying levels of support. Learn more See full compatibility Report feedback 概要 従来、ある要素の可視状態、あるいは 2 つの要素の相対的な可視状態を検出することは困難であり、その解決策は信頼性が低く、ブラウザーやアクセスするサイトの動作が重くなる傾向がありました。ウェブが成熟していくにつれて、このような情報の必要性は高まっていきます。交差情報 (Intersecti

この記事は10月1日に行われたJamstackオンラインワークショップ #4「microCMS × Next編」の内容を記事にしたものです。 microCMSとNext.jsを組み合わせて、Jamstackなブログを作成することができます。 こちらが本ワークショップのイベントページです。 Jamstackオンラインワークショップ #4「microCMS × Next編」 前提下記のバージョンで開発を行っています。バージョンの差異によって若干機能が異なる可能性があります。 Next 10.0.1react 17.0.1react-dom 17.0.11. Next.jsプロジェクトを用意するまずは、Next.jsのプロジェクトを作成していきます。プロジェクトの雛形を作成するCLIがあるので、コマンドを入力して作成していきましょう。 $ npx create-next-app microcms

Masonryレイアウトとは、画像やカード型コンテンツをレンガ状に敷き詰めて配置するレイアウトです。Pinterestなどで見かける、高さが異なるカードを順番に配置するテクニックです。 今までは、JavaScriptで実装したり、Flexboxでも少し複雑なCSSで実装したりでしたが、CSS Grid Layout Module Level 3のドラフトが先日公開され、Masonryレイアウトをたった3行のCSS Gridで簡単に実装できるようになります。

We are doing some updates on our site, and we need to be offline for a while. We will be back with you shortly! Meanwhile, follow us on Social.

You will be able to read, track and discover many active issues very flexibly by using Jasper in GitHub. It is enabled by a powerful function called "Stream" of Jasper. example repo:nodejs/node is:issue label:bug You can use the GitHub Search query to create various criteria, such as issues I created, pull requests of nodejs/node, bug labeled issues, etc. to view issues and receive update notifica

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?