最近はお客さんとの勉強会でDockerのドキュメントをつまみ食いして読むというのをやっていますが、改めて最新版を読んでみて、いろいろ思考が整理されました。2020年の20.10のマルチステージビルドの導入で大きく変わったのですが、それ以前の資料もweb上には多数あり「マルチステージビルドがよくわからない」という人も見かけるので過去の情報のアンラーニングに使っていただけるように改めて整理していきます。 仕事でPythonコンテナをデプロイする人向けのDockerfile (1): オールマイティ編で触れた内容もありますが改めてそちらに含む内容も含めて書き直しています。 本エントリーの執筆には@tk0miya氏から多大なフィードバックをいただきました。ありがとうございます。 基本的なメンタルモデル現代的な使い方を見ていくために「Dockerを使ってビルドする」というのはどのようなものか考えを整
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL はじめに 新たに書きました。 MySQLを使っても会社は潰れない 久々に記事を書いたのでどうぞお手柔らかに... 私が過去2年間で行った技術選定の成功と失敗を振り返り、その学びを共有したいと思います。 文才無いので淡々と箇条書きでいきます Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 注意 意見を押し付けるものではありません。ただ建設的な議論は大事だと思う。 自分の意見は明確に、歯切れのよい表現を意識している。人それぞれだよねみたいな感じに逃げたくない。技術選定に結論はある（過激）。 ただし技術選定にはコンテキストがあり、例えばプロダクトのフェーズや組織の事情によって当然結論は変わる可能性がある。 OSSの開発者さん達は偉大ですごい。あ
Web版VSCodeがDockerコンテナをWASM環境で起動、Webブラウザ内ローカルマシンとして利用可能に。拡張機能「vscode-container-wasm」登場
Web版VSCodeがDockerコンテナをWASM環境で起動、Webブラウザ内ローカルマシンとして利用可能に。拡張機能「vscode-container-wasm」登場 WindowsやMacなどのデスクトップPCでVisual Studio Code（以下VSCode）を利用して開発をする場合、同じローカルマシン上でDockerコンテナのLinux環境を起動し、VSCodeのターミナルで接続して操作することは、開発環境としてよくあることだと思います。 これと同じことをWebブラウザ版のVSCodeでも実現する、すなわちWeb版VSCodeが同一Webブラウザ上にWebAssembly化したDockerコンテナを起動し、Web版VSCodeからローカルマシンとして接続し利用できる、実験的実装を実現したVSCodeの拡張機能「vscode-container-wasm」が登場しました。 V
弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 目次 1.はじめに 2.VSCodeの拡張機能紹介 3.コーディングのポイント 4.よく使われる英単語一覧 5.エラーとの向き合い方 6.テストで動作確認 7.検索の極意 8.公式ドキュメントに慣れる 9.リファクタリングでさらに読みやすく 10.資料作成で気をつけること 11.Gitで管理 12.よく使うLinuxコマンド一覧 13.仕事の進め方 14.プログラム以外で意識するところ 15.初心者こそ読んで欲しい本 16.まとめ 1. はじめに プログラミングは現代のデジタル社会において重要なスキルです。 AIがコードを書いてくれる時代ですが、それでも人の手によるプログラ
プライベートでMac使うのやめた
最近、自分のプライベートの開発環境を大きく変えたので紹介する。 先にまとめ プライベートではMacを使わなくなった 家にUbuntuが入ったミニPCを置いた 外からはThinkPad X1 CarbonからTailscale経由のSSHで家のミニPCに接続 購入まで まず、自分にとって最も大きな変化はプライベートでMacを使わなくなったことだ。2013年くらいにプログラミングを始めてからずっとメインのOSはMacだったので、約10年ぶり、ほぼ初めての非Mac環境である。 自分の普段の開発のユースケースは、Webアプリケーション開発とNode.js上で動くソフトウェアの開発、WebKitへのコントリビューション、たまにRustやGoやC/C++で自分専用ツールの開発、くらいなので別にMacで困っているわけではなかった。Web開発やNode.js上のソフトウェアの開発はまあ普通にMacで困らな
ファイル比較 VSCodeのエクスプローラで、ファイル２つを選択して右クリックメニューから「選択項目を比較」で比較することができます。 また右クリックで、「比較対象の選択」をした後に「選択項目を比較」でも比較することも可能です。 VSCodeのSnippetの使い方 VSCodeのSnippetも便利です。似たような構造のクラスを実装する場合などや、プロジェクト共通で使いがちな書き方というものをSnippetに登録して、効率化することができます。 また、変数を持たせておくこともできます。この場合、Snippetを呼び出した後に変数部分にカーソルがあたるので、そこで変数部分をタイピングできます。 詳細は以下のリンクをご覧ください。 Visual Studio Codeに定型文（スニペット）を登録する方法 VSCodeのUser Snippetを活用しよう！ また後述するSnippet Gen
弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 はじめに VSCodeは世界で多くの人が使っているコードエディタです。 開発の際に使用している人も多いのではないでしょうか。 今回はそんなVSCodeの拡張機能を一挙に紹介していきます。 拡張機能 VSCodeは世界中で支持されているコードエディタですが、最大の魅力が「拡張機能」です。 機能を追加して、より自分が使いやすいコードエディタにすることができます。 拡張機能のインストール 拡張機能のインストールのやり方を説明します。 アクティビティバーの拡張機能マークをクリックする（四角が4つあるマークです） インストールしたい拡張機能を検索する 拡張機能を選ぶ インストールをク
独力でWebサービスを開発・構築できるフルスタックエンジニアへのロードマップ─幅広いスキルを「Udemy夏のビッグセール」で学ぶ！ - はてなニュース
Webで新規サービスを立ち上げる際に、UIからインフラ周りまで一人で面倒を見られるエンジニアは、少人数のスタートアップでなくとも非常に頼れる存在です。どんな課題に直面しても技術力で乗り越える、そんなスキルフルなエンジニアに憧れる方も多いでしょう。 この記事では、フロントエンドのプログラミング（JavaScript周辺）からサーバーサイド、インフラ、さらに開発手法まで、Web開発で必要になるさまざまなレイヤーのフルスタックなスキルの現在地と、関連するUdemyの講座を紹介します。 株式会社ヘンリーでVPoEを務める松木雅幸（@songmu）さんの執筆です。 フルスタックエンジニアに必要なスキル さまざまな講座でまとめて学習してみよう Udemyでは夏のビッグセールを開催中！ ※この記事は、株式会社ベネッセコーポレーションによるタイアップ広告です。記事末に、はてなブックマークした方にAmazo
上記のようにコードエディタを開くコマンドを分けるために、既にcodeコマンドをVScodeで使っている方はcursorダウンロードの際にcursorコマンドのみインストールするようにしてください。codeの方もインストールすると、codeコマンドでVScodeとCursorどちらも開いてしまうようです。 Cursor主要機能紹介 cmd + Shift + L or cmd + L でGPTとChat機能 エディタ上で画面右にGPTに質問できるサイドバーが出現する。何も選択してないと無から質問できる状態になっていて、コードを選択した状態で開くとそのコードがあらかじめ引用された状態になっている(別の部分のコードもどんどん追加できる)。 ↑10~21行目をcmd + Lした後に31~33行目を追加でcmd + Lした画像 cmd + K でAI Edit機能 コードを選択した状態でcmd +
OSS 観光名所を貼るスレ - ぽ靴な缶
これは はてなエンジニアアドベントカレンダー2023 2日目の記事です。 はてなエンジニア Advent Calendar 2023 - Hatena Developer Blog はてなエンジニアのカレンダー | Advent Calendar 2023 - Qiita トップバッターは緊張するけど、順番が回ってくるまで長い間ソワソワするのも嫌、という理由で例年2日目を狙うようにしている id:pokutuna です。今年も成功しました。 観光名所とは 目を閉じれば思い出す、あのコード... あの Issue... あなたが Web 系のエンジニアであれ、趣味で開発している方であれ、必要に応じてライブラリやフレームワークのコードを読むのはよくあることでしょう。公開の場で開発されているソフトウェアは、ソースコードだけでなく、開発コミュニティでの議論やバグ報告なども見ることができます。 リポ
最近気に入っているOSSを淡々と紹介する
はじめに こんにちは〜！皆様いかがお過ごしでしょうか？ no plan inc. CTOの @serinuntius です。 これはno plan inc.の Advent Calendar 2023の22日目の記事です。 最近気に入っているOSSとかを作者様に感謝しながら、スターを送りながら、こんなのを使用してるぜって紹介する記事です。 「OSSは使っていることを公言するだけでも貢献になる」とsongmuさんが言っていたので、私も貢献したいと思います。 紹介する順番に特に意味はありません。 rtx 個人的お気に入り度: ★★★★★ スター数: 3700 Rustで作られている💯 LICENSE: MIT 初っ端は、rtxです。あらゆるプログラミング言語環境(Runtime)のマネージャーです。 公式のデモ画像を見ていただくのが一番早いと思います。 私はこれを使う前はanyenvというも
本当は教えたくない、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というプロ
作業メモ。モダン Python 速習。 AI 周りのツールを動かしていたら TypeScript だけでやるには無理が出てきたので、久しぶりに Python の環境構築をする。 具体的には TestGen LLM を動かしたい。 Python はたまに触るけど、基本 2.x 時代の知識しかない。 基本的にこの記事を読みながら、細かいアレンジをしている。 追記 rye が ruff と pytest を同梱してるので rye fmt, rye check, rye test で良かった uvicorn を叩くより、 fastapi-cli を使って起動したほうが良さそうので変更 基本方針: Rye に全部任せる 良く出来てると噂に聞いたので、 rye に任せる。 自分が Python が苦手な点は pip を下手に使うと環境が汚れていく点で、基本的に rye で閉じて管理させる。システムの
2023年のシェル環境構築
tl;dr fig starship zsh fzf sheldon なぜ vscode の .vscode/tasks.json が fishと非常に相性が悪い。とくに fish-nvm を使っていると、fish 経由のパス実行時に node と npm へパスが通らない。 そもそも fish を使っていた理由は autocomplete を快適にするためだったが、1年ぐらい Fig を使っていて、補完はこれを任せていいと気づいた。 Fig はこういうやつ そもそも fish の拡張コマンドを使わないように生活していた。方言を覚えたくない。というか bash 拡張や zsh 拡張もあんまり覚えたくない。
はじめに こんにちは, 普段は情報科学専攻の大学院生をしながらバックエンドエンジニアをやっている @koki-algebra です. 普段は Go をよく書いているのですが, 大学でやっている機械学習の研究では Python を使うことがほとんどです. Go のエコシステムに慣れきった私は Python の混沌とした環境に耐えきれず, 最強の開発環境を整えることを決意しました. 具体的には Package Manager, Formatter, Linter, Type Checker, Test Tool を選定し, VSCode の DevContainer を用いてポータビリティに優れた開発環境を作ることを目指します. また, Deep Learning では GPU が必須である場合が多いので, GPU 環境も同時に整えたいと思います. 以下のレポジトリが今回考えた開発環境のテンプ
はじめに コードエディタ界の王様VisualStudioCode。開発の際に使っている方も多いのではないでしょうか。 本記事では、VSCode(VisualStudioCode)の定番機能を紹介していきます。 この記事を読んで、VSCodeマスターになりましょう！ 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 そもそもVSCodeって？ VSCode（VisualStudioCode)はMicrosoft社が提供する無償のコードエディタです。2015年リリースですが、着々とユーザーを増やしており、2023年現在、世界で最もポピュラーなコードエディタの1つとなっています。 コードエディタって？ 字や記号などのテキストで構
本稿は当初チーム開発時のメンバー向けにまとめたものです。 ある程度、端折っていた背景などを記載しました。 git初心者同士でのチーム開発において、git操作を詳しく知らないメンバーも含め安全に行う必要がありました。しかし、開発期間はごくわずか...この状況を回避するために、下記の対応をとりました。 Gitコマンドの基礎的な内容を理解する（私） 各種操作をGUI上で完結させる拡張機能を色々と導入する シンプルな開発フロー(Github flow)を採用し、コマンド実行に相当する操作を限定する 各操作をGUI上での操作に置き換え、チームメンバーに教える 本稿はその際の、コマンドやGUI操作に関するメモをまとめたものになります。 こういった取り組みのおかげか、チームの開発をすんなりフローに乗せることができました。 ■ 前提条件 対象とする動き Github flowを回すうえで、 cloneする
{ "editor.formatOnSave": false, "editor.formatOnPaste": false, "editor.formatOnType": false, } この記事で紹介している拡張機能のIDは、記事の最後にまとめています。また、設定の方法については設定のやり方に記述しています。 以下は、この記事で紹介する拡張機能のカテゴリ一覧です。 設定ファイル関連(Yaml, Json, Toml) Git関連 Markdown関連 カラー系 API関連 コンテナ その他便利な拡張機能 ネタ系 設定ファイル関連(Yaml, Json, Toml) 特にYamlやJsonはどのプロジェクトでも使用する可能性が高いので、必須の拡張機能となってくるかと思います。 Prettier esbenp.prettier-vscode jsonだけの設定では、VSCodeの設定ファイ
VSCodeで生産性を上げる
はじめに こんなツイートを見て執筆をしようと思いました。 実際に、VSCodeは機能の追加や拡張機能の開発が活発に行われており、かつUIもユーザーフレンドリーであるため人気のエディターだと思います。VSCodeを使いこなせるのとそうでないのではエンジニアリングの生産性に大きな差が出てしまうと思います。 パンくずの設定 '>' を入力します。 '>' preferences: Open User Settings (JSON)を入力します。 僕のsettings.jsonは以下です。 { "workbench.colorTheme": "GitHub Dark", "terminal.integrated.fontFamily": "MesloLGM Nerd Font", "terminal.integrated.profiles.osx": { "fish": { "path": "/o
GitHub Copilotが便利になったのでターミナルもVSCodeで良いのでは？という話 - Qiita
この記事はラクスアドベントカレンダー2の17日目です。 先日のVSCodeのアップデートで、GitHub Copilotを使うとターミナル操作が便利になりました。 これにより、別途ターミナルのアプリを使わずにすべてVSCode上で操作した方が便利なのでは？となりました。 アップデート前までどうしてたか MacのiTerm2上で、GitHub CopilotのCLI版（パブリックベータ）で入力補完やコマンドの意味を調べたりしていました。 それ自体は便利でしたが、いくつかの不便な点もありました。 使い方がちょっと煩雑だった 例えばコマンドをサジェストして欲しい場合、gh copilot suggest 'gitで1つ前のコミットを取り消したい'のようにタイプする文字数も多くなり、またそれが一般的なコマンド or ghコマンド or gitコマンドかの３択に答えないといけなくて面倒でした。 ss
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)
はじめに 知らない間にGitHub Copilotが結構進化していたので、それらの内容を紹介します。 GitHub Copilot Chatは知っていたのですが、単なるChatGPTみたいな会話機能を追加しただけだと思っていました。 要約 右クリックメニューや#fileのようなコマンドが登場し、それを入力するだけでChatに見てほしいコンテキストを伝えることができるようになった。 ファイル単位だけでなく、選択した行やブロックに限定することもできる。 テストコードや新しいプロジェクトをコマンド一つで生成できるようになっている。 推薦の候補も複数を同時に比較できるようになった。 一度に最大10個くらい出る上、タブで保管できる。 ターミナルや編集中のファイルからコマンド一つでChatを立ち上げることができる。 特別なプロンプトを入力しなくても、開いた場所の文脈を読み取ってくれる。 右クリックメニ
次世代エディタ6選 - Qiita
⚪︎ : 無制限のBasic、限度ありのAdvance △ : 限度ありのBasic Zed Atomの製作者達によって作成されたOSSのRust製エディタ。現状はMacOSのみで使用可能。そのほかのOSも現在対応中。パフォーマンスを重視しているので軽い。AIは搭載していないが、Copilotを使用することは可能。 Github : zed-industries/zed インストール方法 https://zed.dev/download からインストールしてください。(MacOSのみ) 使用方法 以下に詳しく書かれていました。 思考のスピードでコードを書け！！Rust製の次世代エディタ「Zed」 Positron VSCodeをベースにした次世代データサイエンスIDE。 インストール方法 https://github.com/posit-dev/positron/releases からイン
Code Tour を使ってじっくり確実にコードを読む
日々のタスクに忙殺されていると、ついつい既存コードを流し読みして、ざっと動くコードを書いてしまいたくなります。 一発でうまく動けば短期的にはいいのですが、長期的にはコードの理解が追いつかなったり、一発でうまく動かなかった場合にかえって時間がかかってしまいます。 VSCode の拡張機能である Code Tour を使うと、コード上にメモを残しながら読み進めることができるので、既存のコードを読む際に便利です。 Code Tour とは VSCode の拡張機能で、コード上にメモを残しつつ、そのメモをたどることができるツールです。 使い方 ツアーを始める コマンドパレットから「Code Tour: Record Tour」を選択すると、ツアーの記録モードになります。 ツアーの名前 どのソースに紐づけるか（紐付けなし、ブランチ、タグ） を選択すると、リポジトリ直下に .tours/${指定したツ
VScodeだけでGit操作を完結させるのだ～～ッ!!
VScodeだけでGit操作を完結させる方法について書くのだ。 👀その前に！ この記事は、以下の2つの拡張機能がインストールされている前提で進めるのだ。 Git Graph - Visual Studio Marketplace GitLens — Git supercharged - Visual Studio Marketplace インストールしておいてほしいのだ。 ✅ステージング(git add ◯） 以下のようにするのだ。 ＋ボタンをクリック：ステージングする ーボタンをクリック：ステージングを解除する ▲ステージング→解除 ✅コミット名を自動でつける 右にある✨ボタンを押すと、コミット名を自動で決めてくれるのだ👇 ▲この例だと、変更内容が意味不明すぎて変なコミット名になってるし、現状英語だけみたい？ これは、GitHub Copilotの機能なのだ。 ✅コミット(git c
VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~ - Qiita
VSCode上でシーケンス図/クラス図/フローチャートをサクッと書きたい ~Mermaid Graphical Editor~初心者umlVSCode新人プログラマ応援mermaid はじめに Mermaid Graphical EditorというVSCodeの拡張機能にとても感動したので一筆書きました こんな方におすすめ シーケンス図/クラス図/フローチャートをサクッと書きたいけどmermaidとか難しそう 😢 できること VSCode上でポチポチしながらシーケンス図/クラス図/フローチャートを描けるようになる mermaid記法のコードも自動生成されるよ 個人的メリット mermaidの学習コスト0 紙で書くよりも修正しながら書きやすい 導入手順 （簡単7steps） (1) VSCode上で「Mermaid Graphical Editor」という拡張機能をインストールする (2)
週末に自分がよく使っている技術をまとめたら反応が良かったので、テンプレートを作りました。 なにかWebサービスを作るときに、自分はこれらのライブラリを基本的には入れます。 ベースはcreate-next-appとなりますが、そこで生成された状態だと認証もDBも何もありません。 しかし、サービスを作るにあたって必要なケースがほとんどです。 このテンプレートには特定のライブラリを入れると毎回書かないといけない項目等を事前に作っておき、 開発に集中できる仕組みを作るのがゴールとなります。また、例を示しつつ削除するコード量を最小限に抑えます。 主にNext.js固有のハマるポイントや環境構築などめんどくさいけど毎回書いている点をカバーします。 linterと関連があるVSCode, pre-commit等の設定NextAuthに指定されたDB Schemaの作成やAPI routeの設置開発、テス
VSCode の新機能「built-in port forwarding」を使いローカルサーバーにインターネット側からアクセス - Qiita
VSCode の新機能「built-in port forwarding」を使いローカルサーバーにインターネット側からアクセスHTMLJavaScriptNode.jsVSCode はじめに この記事は、以下の公式ポストや、VSCode のアップデート後のリリースノートにも出ていた「built-in port forwarding」を試してみた話です。 この機能を使うと、ローカルにあるサーバにインターネットからアクセスできるようになります。 同様のことを実現するものには、有名どころの 1つに「ngrok（エングロック）」があったり、その他にもたくさんの類似サービスがあります。 実際に VSCode の built-in port forwarding を試してみる それでは、VSCode の built-in port forwarding を試してみます。 自分が試す際に参考にした情報は
Vimの思想について
ここでいくつかのルールとして motion-count-multiplied 例えば10jで十行下へ移動、d2kで上２行を削除など operator-doubled 例えばyy, dd, cc, >>とか、2回繰り返すとカーサーのある行に動作する upper case operator 例えばc->C、d->D, y->Yのように、現在のカーサーから行の最後まで動作するケースと、対になっている（逆の機能を持つ）ケース、例えばp->P, o->O, n->N, a->A, i->I, f->Fなど）に大まかに分けられる exclusive inclusive 例えば、yiw vs yaw, cib vs cabの違いで、テキストオブジェクトの内部（inner）だけか、境界線も含めるか（around） があります。これらのルールは他のプラグインにもよくみられるので、Vim wayに慣れればプラ
はじめに VS Codeでコーディングをするとき、Gitの操作やビルド、デプロイなど、決まった処理を手動で実行するのが面倒だなと思ったことがあるのではないでしょうか。tasks.jsonというファイルを使えば、そういった面倒な手順を自動化し、開発効率を上げることができます。 この記事でやること この記事では、作業ブランチにmainブランチの取り込みを行うGitコマンドを自動化してみます。mainブランチを取り込むために、以下のコマンドを毎回手で実行しているとします。 git stash git pull origin main git stash pop これをtasks.jsonに定義して自動化したいと思います。 タスクの作成 タスクを作成するには、VS CodeのメニューのTerminal⇒Configure Tasksを選択します。 Create tasks.json file fr
株式会社ゆめみの 23 卒 Advent Calendar 2023の4日目の内容です。 2022年のはじめに自分の開発環境を紹介する記事を投稿したのですが、思いのほか読んでいただいているので2023年度版を作成しました。 今回は拡張機能編です。キーバインドなどは後日公開します。 今年1年間で JetBrains 製品や、neovim を使ってみたりしましたが、紆余曲折あり現在は VSCode に落ち着いたのでいつかその辺りも紹介出来ればと思います。 VSCode 関連記事 下記にキーバインドや設定周りの記事リンクを追加していきます 汎用的な拡張機能 BracketLens 右括弧の左側にスコープの情報が表示されるようになる。 ChangeCase 選択範囲のテキストの case を変更することが出来る CodeSpellChecker スペルチェッカー EditorConfig .edi
はじめに 突然ですが、よく使うコードはどのように管理していますか？ 私はGitHubで管理していたのですが、今回VSCodeの拡張機能Gistを使って見たところ、サクッと参照ができて、かなり使い心地が良かったのでまとめておきます。 Gistとは VSCode上でGitHub Gistを連携させることができ、手軽にファイルの作成、編集、削除が可能になる拡張機能です。 導入手順 GitHub Gistの登録 GitHub上でアクセストークンの取得 拡張機能のインストール アクセストークンの設定 1. GitHub Gistの登録 2. GitHub上でアクセストークンの取得 ExpirationをNo expirationに設定します。 scopeのgistを許可して作成です。 トークンが発行されるので控えておきましょう。 3. 拡張機能のインストール VSCode上で【Gist】と検索すると
🍪🍺 @unplannedsleep 国際犯罪の被害に遭いかけたので注意喚起です！ 海外サイト(WeWorkRemotely)で良さげな案件を探していて、出会ったクライアントとビデオ通話した後「早速今の実装見てみてほしい」という話になりました。もう遅いし明日にして今日は飲むか〜と思っていたら「すぐチェックしてほしい」という連絡が pic.twitter.com/bRhXJkFEGX 🍪🍺 @unplannedsleep しょうがないにゃあ…と思いつつまずは親の顔より見た setupTest.js を見るとそこには変わり果てた姿が…… 偶然昼までMarkdown書き物をしてたためVSCodeの折り返しを有効にしていたので気づきましたが、普段無効にしてるときだったらこんなふうに見えるので気づくのは難しそう pic.twitter.com/fbk3og3Dml
久しぶりに記事を書く。最近マルス端末のUIについてツイートがあった。 この件に関して、UIについてやUXに対して日々やってきている人間は「ダメなUI」という認識の人が多いように思う。一方で、システムの開発者にとってはこれは、その認識でない人間が多いようだ。なので、この辺を私なりに意見を書いておこうと思う。 まぁ、これはいつもなのだが、書いていることが散らかってる。基本的に音声入力のメモなので、読みにくいかもしれないが読んでくれ参考になれば幸いだ。 熟練が必要なUIは基本的によくない まず、基本的に熟練が必要なUIはそもそも良くないって話をしていく。順番に話していこう、まず、熟練が必要なUIが支持される理由を考え、それに対して、批判していき、なぜ熟練が必要なUIはダメかを語ってみよう。 熟練が必要なUIが支持される理由 その前に、こういった熟練のUIが支持される理由についてかいておこう。それ
Sansanは10月25日、テストコードについての研修資料を無料公開した。4月に実施した新卒の技術研修で使った資料の一部で、入社2年目の社員が作成。Pythonのテストフレームワーク「pytest」でのテストコードの書き方や、VSCodeでのテスト方法などを解説している。 同社はテストコードの便利な点として「実行確認しやすい」「リファクタリングや修正後に実行結果や振る舞いが変わっていないことを確認できる」「コードの挙動が理解しやすい」を挙げる。テストコードの重要性を理解し、テストコードを活用できるようになることを目的に研修を行ったとしている。 関連記事 新卒向け「統計学の基礎」100ページ超 SaaS企業が無料で資料公開 ブレインパッドが、新卒研修で使った統計学の学習資料を公開した。統計学の基礎を解説したもので、ページ数は100ページ超。スライド公開サービス「Speakerdeck」から無
普段何気に使っているPostman。最近まで「手軽にGUIで疎通を試せて、設定を共有できてべんり〜」くらいで使っていました。 けどふと「実はもっと便利な機能があるのでは？」と思って調べてみたところ、色々出てきたのでせっかくなのでシェアしたいと思います。 たまたまですがちょうど10選！ 地味に便利な機能10選 VSCode拡張 PostmanにはVSCode拡張機能があります。 インストールするだけで、VSCodeのサイドバーから利用可能です。 日本語設定 日本人なので日本語で使いたい。 右上の歯車→Settingsから以下の通り選択することで日本語化が可能です。 変数の定義 複数のAPIで同じ値を使いたい場合があるとします。例えばテスト用のユーザーIDなどです。 Postmanではそんな値をAPIファイルに逐一ハードコードする必要はなく、変数に保存することが可能です。 Postman Ec
概要 Windows11のコンテキストメニューをWindows10までの従来仕様に戻すスクリプトをまとめた話です。 ググれば同じ話はいくつも出てくるのでn番煎じ感が強いですが、PowerShellだけで行ってる例は少なかったので、そこは新規性があるかも？ コンテキストメニューって？ エクスプローラやデスクトップ上などでファイルとか何もない場所を右クリックしたときに表示されるメニューのことです。 このコンテキストメニュー、Windows10までとWindows11で仕様が大きく異なります。 Windows11では表示をすっきりさせるためなのか、従来のほとんどの操作は非表示になっています。 なので、例えば7zipでの解凍・VSCodeで開く・送るなどの操作をしたい場合は「その他のオプションを確認」をクリックして従来のコンテキストメニューを表示してから対象操作を選択する必要があります。とてもつら
この記事はNuco Advent Calendar 2023の1日目の記事です。 はじめに 2023年最新のフロントエンド開発環境についての紹介記事です。 分野別に、おすすめツール群と、その特徴などを紹介していきます。 デファクトスタンダードとみなせるようなツールや、最近盛り上がりを見せているものなどをラインナップしました。 これからフロントエンド開発を始めたい人はもちろん、長くご経験のある人にもプラスになる情報がきっとあるため、ぜひ参考にしてもらえると嬉しいです。 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 フロントエンド開発おすすめツール集 エディタ エディタやIDEは好みの問題も大きいので、メジャーなものを簡単
【バックエンド】駆け出しエンジニアが目指すジュニアレベルのエンジニアとは【2024年版】 - Qiita
はじめに こんにちは。 普段はフロントエンドの開発をメインでやっておりますmamiと申します。 最近バックエンドの方の勉強や、少しずつですがDB設計やAPI作成などの業務もやらせてもらえるようになったので、自分のエンジニアとしてのレベル感や、この先目指すべき道筋を明確にしたいな〜という思いでこの記事を書いております。 これは自分のための記事であると同時に、同じように駆け出し中のエンジニアさんや、ミドル層を目指す手前のエンジニアさんにも刺さる内容になっているかと思います。 今、自分がどのようにキャリアアップしていくべきなのか、どのような道筋でスキルを磨いていけばいいのか。そんなふうに悩んでいる方は是非読んでみてください。 ※内容はバックエンドエンジニアが対象になりますが、フロントエンドの方もなにか通じるものがある…かもしれません。 ちなみにですがフロントエンドの方の記事は下記で執筆しています
2024年のCSSの書き方、ワークフローとツールについて
CSSには大きく変わるタイミングが何度かありました。レスポンシブ対応、メディアクエリ、Flexbox、CSS Gridなどはその大きく変わったタイミングでしょう。 そして、2024年もこれらと同様に大きく変わりそうです。CSSのネスト、:has()疑似クラス、subgrid、コンテナクエリ、ビューポート単位などの新機能がすべてのブラウザにサポートされました。 2024年のCSSの書き方として、より保守しやすいCSS、ワークフロー、ツールについて紹介します。 How I'm Writing CSS in 2024 by Lee Robinson 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに デザインの制約 2024年のCSS お勧めのCSSツール 終わりに はじめに 2024年のCSSは、素晴らしいの一言に尽きます。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2024年版のDockerfileの考え方＆書き方 | フューチャー技術ブログ
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
【11万文字越え】プログラミング初心者に贈る即戦力ガイド - Qiita
主にVSCodeではじめるPython開発環境構築ガイド | DevelopersIO
Visual Studio Codeに入れるべき拡張機能【2023年最新版】 - Qiita
新時代のコードエディタ、Cursorのメリット・できることを網羅的に解説した
Python + VSCode の環境構築 20240604
僕の考えた最強の Python 開発環境 (2024)
VSCode(VisualStudioCode)の定番機能を一挙解説 - Qiita
Git不慣れ勢を束ねて安全なチーム開発をするメモ - Qiita
【VSCode】オススメの拡張機能と設定 - Qiita
VSCodeのGitHub Copilotが色々便利になっていた件
Webサービスを作るときのテンプレートを作った - hiroppy's site
【VS Code】tasks.jsonで決まった作業を自動化する | DevelopersIO
VSCode のおすすめ拡張機能 2023年度版
VSCodeの拡張機能【Gist】が便利すぎて開発効率がかなり上がった話 - Qiita
【怖い】経緯を読んだらガチの国際クライムサスペンスだった→フリーのエンジニアを狙ったサイバー攻撃が増加中
熟練が必要なUIについて、それがよくない理由と、UIの慣性について
新卒向け「テストコード」の研修資料 Sansanが無料公開 Python上でのテスト方法を解説
Postmanを使い始めた時に知っておきたかった地味に便利な機能10選 - Qiita
Windows11のコンテキストメニューを旧仕様に戻す方法 - Qiita
2023年度版フロントエンド開発環境構築徹底解説 - Qiita