2023年時点で僕のVSCode(Visual Studio Code）に入ってるプラグインや設定を紹介します - Shibajuku
こんにちは、実は久しぶりの投稿の、どうもしばおです。 さて、僕(フロントエンドよりのWebデザイナー)は普段からメインのテキストエディターにVSCodeを使っているのですが、今日は僕のVSCodeに入っている、プラグインや設定を公開したいと思います。 （2023年7月3日更新） 僕のオンラインサロンでも、VSCodeを結構使ってて、サロンメンバーには、僕が使ってるおすすめのプラグインや、僕なりの最強設定を共有しています。 そもそも、VSCode（Visual Studio Code）って？ VSCode（Visual Studio Code）はMicrosoft社が開発したオープンソースのテキストエディタです。 最近様々な高機能テキストエディタが登場していますが、その中でもこのVS Codeはかなり便利な機能がデフォルトで付いていて、かつ軽量なので、インストールするだけでも結構使えます。
VSCodeのマルチカーソル練習帳 - Qiita
VSCodeを使いこなしている人がカーソルを複数置いて手早く作業してて、カッコいいなと思ったことありませんか？こんな感じで。 私はマルチカーソル使います(キャー素敵！)。冗談はさておき、VSCode使ってる人全員がマルチカーソル使ってるわけではなさそうだと最近知ったので、基本をまとめてみました。 なお記事では、以下のテキストをサンプルとして使用しています。お手元にVSCodeを用意できる方は、サンプルを使って同じ操作を試しながら覚えてみてください！ { "id" : "12345678-1234-1234-1234-123456789012", "title" : "myTitle", "content" : "myContent", "createdAt" : "2019-09-01 00:00:00", "createdUser" : "12345678-1234-1234-1234-
Awesome Dev Tool Tips 🔥
Contents (Click to expand) ↕️ Design Mode Pretty Print Command Pallet and Super Search Snippets Live Expressions Tracking Changes Console Shorthand Find Unused Code Rendering Panel Network Paint Times Network Timings Inspect Network Requests Performance Identifying Memory Leaks Raw Memory Inspection Test bfcache Full Refresh Lighthouse Page Size Breakdown Record User Flows Advanced User Flow Opera
VSCodeの画面編集という仕事柄、テキストエディタは毎日触る大事な仕事道具です。仕事の内容にあわせて設定などを変えると非常に捗ります。しかし、日本語を書きながら同時にはてな記法やらMarkdownやらCSSやらを書くという環境のため、なかなかテキストエディタのデフォルトの設定では痛し痒しといったところで、それなりにカスタマイズをしないといい感じになりません。 半年前に、それまでかなり長いこと使ってきた秀丸エディタからVSCodeに乗り換えてみたら、案外日本語をあれこれ書いたり編集したりするのにいい案配にすることができました。そこでなんとなくなじんだ今のカスタマイズ方法を書き残しておこうと思い立ちました。たぶんもっともっと拡張機能で便利にできるはずなので、ドラクエでいう「ひのきのぼうからこんぼうにそうびを変えた」くらいの気持ちで見ていただけるとうれしいです。 テーマ アイキャッチにしたのは
【書評】『プログラマーのためのVisual Studio Codeの教科書』はVS Code使いに是非読んでいただきたい１冊！ #VSCodejp #VSCode | DevelopersIO
こんにちは、Mr.Moです。 圧倒的な人気を誇る高機能エディター Visual Studio Code（以下、「VS Code」）の使い方をまるっと習得できてしまう１冊。『プログラマーのためのVisual Studio Codeの教科書』を拝読し素晴らしい内容でしたので紹介していきたいと思います！ 書籍・著者情報 下記からも購入が可能です。電子版もありますよ！ プログラマーのためのVisual Studio Codeの教科書 | 川崎 庸市、平岡 一成、阿佐 志保 |本 | 通販 | Amazon 下記は著者の方々の情報になります。(上記のマイナビBOOKS ページより抜粋。筆者陣が錚々たる顔ぶれですね） 川崎 庸市（かわさき よういち） 株式会社ZOZOテクノロジーズ開発部所属のエンジニア。過去には、国内モバイルベンチャーや大手インターネットサービス企業にて大規模サービスの基盤プラットフ
2020年のフロントエンドエンジニアの技術スタックの一例 | potato4d D(iary) この記事と、TLで「これのバックエンド版が見たい」という発言に触発されたので書いてみます。口語体と文語体が入り乱れてるのは許してください。 冒頭のグラフはwakatimeで生成した今年1年間のプログラミング言語使用率です。2位はTypeScript、3位はTerraform、4位はYAMLでした。 立場 フリーランスで、主にRailsやAWSを使用しているサービスの運用、開発に関わっています。いくつもの会社を見てきた訳ではなく、数社に深く関わっている1都合上、視野が狭いかもしれません。 公開している成果としては クラウドゲーミング最新開発事例 - #CEDEC2020 - Speaker Deck があります。 長年RubyとRailsを書いてきたので、技術スタックがそのあたりに偏っています。
「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう！｜ハイクラス転職・求人情報サイト AMBI（アンビ）
ハイクラス求人TOPIT記事一覧「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう！ 「がんばらないTypeScript」のための現実的な設定を考える ─ 4レベルの厳しさを使い分けてTypeScript疲れを克服しよう！ エンジニアHubでは2019年に「がんばらないTypeScript」を紹介しました。JavaScriptに静的型付けなどを提供するTypeScriptは、今では実プロジェクトに採用されるプログラミング言語になっています。そこで現実的なTypeScriptの設定を、藤吾郎（gfx）さんに解説してもらいました。 2021年の現在、TypeScriptの価値はますます広く認められるところとなり、多くのJavaScriptプロジェクトがTypeScriptで開発されるようになってきました。またT
以下に示すのは、開発者環境を設定し、Windows で Python を使用し、ファイル システム操作のスクリプト作成と自動化を開始するためのステップ バイ ステップ ガイドです。 Note この記事では、Python の便利なライブラリの一部を使用するように環境をセットアップする方法について説明します。これにより、ファイル システムの検索、インターネットへのアクセス、ファイルの種類の解析など、Windows 中心のアプローチからプラットフォーム間でタスクを自動化することができます。 Windows 固有の操作の場合は、Python 用の C 互換の外部関数ライブラリである ctypes、Windows レジストリ API を Python に公開する機能である winreg、Python から Windows ランタイム API にアクセスできるようにする Python/WinRT を確
国立国会図書館デジタルコレクションは最高である。 「国立国会図書館デジタルコレクション」が面白い まずは遊んでみる 使いまくりたくなったら準備しておくと効率が良い 無料でできる 検索演算子だけ覚えておく 国立国会図書館デジタルコレクションの使い方を知っておく 国立国会図書館オンラインに登録しておく メモ環境を作る 有料でできる パソコンを用意する できれば良い椅子とモニタがあったほうがいい 速度を意識して使う 速くなるとどうなるのか そこに全てはない ものすごいものをどうでもいいことに使うということ 「国立国会図書館デジタルコレクション」が面白い 「国立国会図書館デジタルコレクション」が面白い。 dl.ndl.go.jp 「国立国会図書館デジタルコレクション」では著作権など権利状況に問題がないことが確認できた約36万点の資料が無料で公開されており、ようするに古い本が無限に読めるサービスだ。
ソフトウェアに関する記事やコラムを書くなら、Markdown 記法はとても良い選択です。見た目の統一感があり、覚えやすく、軽量です。 この「Markdown での書きやすさ」を物理書籍や電子書籍の執筆にも応用できたらな、、、 "W3C Paged Media Viewer" はそれを実現する、OSS の Visual Studio Code のエクステンションです。エクステンションを入れただけの超シンプルな環境を使って、手間いらずでサクッと技術書を執筆することができます。 以下に示すとおり導入は簡単です。 1. VS Code を起動します 2. CTRL + SHIFT + X とタイプして Extensions ビューを表⽰します 3. 検索ボックスに paged media と⼊⼒し、 W3C Paged Media Viewer あるいは abechanta.vscode-ext-
正規表現は文字列の検索や置換を行うための強力で便利なツールです。基本をマスターすれば開発から日常の事務作業までさまざまな場面でラクをできる魔法の道具ですが、見た目がちょっと分かりづらいので、避けている方もいるのではないでしょうか？ 筆者の個人的観測ですが、とりわけフロントエンドのエンジニアには正規表現に苦手意識を感じている方が多いようです。 この記事では正規表現の基本と、正規表現がどこで使えてどれだけ便利になるのかを紹介します。 正規表現の基本：正規表現ってそもそも何？ 正規表現（regular expression）は、ごく簡単にいえば「さまざまな文字列のバリエーションをひとつの文字列で表現したもの」です。たとえば、郵便番号の7桁の数字には（実際に使われていないものも含めれば）一千万通りのバリエーションがありますが、正規表現を使えば次のようにひとつの文字列で表現できます。 ▼「7桁の数字
Visual Studio Codeでついに、画像から背景を切り抜けるようになりました！ remove.bgをVS Codeで利用できる機能拡張がリリースされ、.jpg, .pngの写真画像を1クリックするだけで簡単に背景を切り抜くことができます。エディタとしても高機能なのに、画像編集までできるようになるとは！ VS Codeで、いつものぱくたそ画像から背景を1クリックで切り抜けます VS Codeで画像から背景だけを切り抜く VS Codeにremove.bgをインストールする手順 VS Codeで画像から背景だけを切り抜く VS Codeで画像から背景だけを切り抜くのは、1クリックで完了します。 まずは、ぱくたそ画像を用意し、VS Codeで開きます。
VS Code内でブラウザ画面プレビューとDevTools表示、そのままコード編集もできるVS Code拡張「Microsoft Edge Tools for VS Code」正式版に
VS Code内でブラウザ画面プレビューとDevTools表示、そのままコード編集もできるVS Code拡張「Microsoft Edge Tools for VS Code」正式版に マイクロソフトは、コードエディタのVisual Studio Code（以下VS Code）とWebブラウザのMicrosoft Edgeを組み合わせて、Webアプリケーションの開発を効率的に行えるVS Codeの拡張機能「Microsoft Edge Tools for VS Code」正式版のリリースを発表しました。 Are you a fan of the browser developer tools but not a fan of switching from editor to browser to use them? We heard you! Today we moved the "Mic
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog TL;DR:2022にフロントエンド開発で最も考慮すべきユーザー環境は、パフォーマンスでは低スペックのAndroid端末、標準仕様では2年前のSafari、そしてネットワークでは４Gです。それに対してはJSへの過剰依存などが原因で主にパフォーマンスの面でのウェブ全体の対応がよくありません。 こんにちは！LINEフロントエンド開発室のダバロス アランです。この記事のタイトルを見て「釣りタイトルですね〜」と考えている方がいると思いますが今回に限ってはそれを大目に見てください。それはなぜかと言いますと、2021年から2022年にかけて私たちフロントエンドエンジニアが全体的に考え方を改める必要が出るほど大きな変化がありました。 その変
ExcelやGoogleスプレッドシートをMarkdown出力するVS Codeの拡張機能「Excel to Markdown table」が便利すぎる件 | DevelopersIO
Markdownでテーブルを表現するにはつらみが深すぎる みなさんはMarkdownでテーブルを書くことは得意ですか? 私は苦手です。 簡単なテーブルは簡単に書けるのですが、以下のようなテーブルを書くことには抵抗感があります。 行数、列数が多い セル内に書くテキスト量が多い セル内でリストを表現する 一方、私は先日、「Markdownで手順を書いています!」とこちらの記事で伝えました。 そんな私に対して、 「オイオイオイ。 Markdownでもなんでもいいけどよォ... テーブルを使いたい場面は多いんだぜ。」 というセリフが聞こえてくる気がします。 私のようなMarkdownでテーブルを書くことにつらみを覚える方への解決策として、以下記事で紹介している「MarkdownTableMaker」があります。 このアドオンを使うことで、選択したスプレッドシートをMarkdownに出力してくれます
はじめに DeepL翻訳をはじめとしたテキストコピペ系Webサービスは機密情報の扱いに注意しよう - Qiita 長文要約生成APIを利用する前に気をつけたいこと - Qiita 記事やソースコードを公開するときに気をつけていること - テックブログガイドライン - Qiita 他、ツールの利用は社内規定を確認しましょう。以下そのうえで日常おすすめするツールです。流行り廃りあるかもなので2022春と書きました ツール達 エディタ テキストエディタはどれが良いだろうか - Qiita を参考。 サクラエディタ TeraPad 公式ダウンロードサイト Oedit Typora — a markdown editor, markdown reader. Obsidianで日々のローカル秘蔵メモを取り込んでみたらNotionより自分好みに使えそうだった - Qiita Markdownはいいぞ。脱
はじめに Markdownって便利ですよね？ README.md、PR や Issue の本文やコメント、Qiita や Zenn はもちろん、Google Docs や Trello や Notion や Jupyter Notebook でも使えるみたいです。もっといろいろな文書を Markdown で書ければいいのになあ、あらゆる文書のソースコードを Markdown にできればいいのになあ。 さあ、Markdown の可能性を広げましょう！ 本記事では「スライド」と「(電子)書籍」をMarkdownで書く方法をご紹介したいと思います。もちろん、VSCodeでMarkdownを効率よく便利に書いていくためのチップスもご紹介していきますよ。 ご参考スライド VS Code Conference Japan 2021 で発表した際の以下スライドもご参照ください。 もちろんこのスライドもV
2021 / 2020 / 2019 JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2020年に最もホットであったJavaScriptライブラリのランキングを発表しました。 選考基準は現在のスター数ではなく、『2020年の一年間で増えたスターの数』です。 過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。 ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.js、2019年の総合ランキング1位はVue.jsです。 以下は2020年のランキング、2020 JavaScript Rising Starsの日本語訳です。 JavaScript ライジングスター 2020 5回目のJavaScript ライジングスターにようこそ！ こ
VS Code Meetup #1（https://vscode.connpass.com/event/155068/ ）での発表資料です。
JavaScriptで壮大なハッキング体験を実現するWebゲーム「Bitburner」で遊んでみた！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、ブラウザ上からリアルなハッカー気分を疑似体験できるユニークな無料Webゲームをご紹介します！ PCゲームとしてSteamからもリリースされていますが、今回ご紹介するブラウザ版は手軽に遊べるのでオススメです。ターミナル風のゲーム画面が特徴で、実際にJavaScriptを使ってプログラミングもできます。 ハッキングやセキュリティなどにご興味ある方も含めて、ぜひ参考にしてください！ 【 Bitburner 】 ■「Bitburner」の遊び方 「Bitburner」は、西暦2077年のサイバーパンクをテーマにしたディストピアな世界を舞台にしています。 ゲーム画面は3Dグラフィックや派手な演出があるわけではなく、世界観にピッタリなCLIベースのターミナルを忠実に再現しているのが大きな特徴です。 遊び方ですが、面倒なユーザー登録などは必要ありませ
ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・、この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第6回目となる本記事ではウェブ業界の「HTMLコーダーにとっての2020年」と題してアンケート結果を紹介します。 HTMLのエディター HTML制作によく使われるエディターはどれでしょう？ アンケートで質問してみました。 805票の回答があり「VS Code」が64.5%、「Atom」が8.8%、「WebStorm」が8.2%、「その他」が18.5%でした。 VS Codeは圧倒的な人気ですね。ICS MEDIAでは記事『VS Codeの拡張機能7選』で紹介しているとおり、無料のソフトウェアなのに開発を便利にする機能がたくさん揃っていて魅力的です。 WebStormの回答者数は
ダミーデータ作成のお供に！ VS Code 拡張機能「vscode-random」で人名やカラーコードなどを自動生成してもらおう！ | DevelopersIO
はじめに ダミーデータを作成しなければならないときってありますよね？ テストデータやサンプル画面を作るときに値をどうするか困ったことありませんか？ そういった悩みを VS Code で解決するための拡張機能が vscode-random です。 https://marketplace.visualstudio.com/items?itemName=jrebocho.vscode-random デモ （GitHub リポジトリより引用） 拡張機能としてはカーソル位置にランダムな値を挿入するという単純なものなのですが、VS Code のマルチカーソル機能と組み合わせることで非常に強力な体験を得ることができます。 名前やメールアドレスの項目がある JSON や YAML に対し、複数の項目にまとめて値を挿入して作り上げるのは気持ちいいこと間違いなし！ 対応コマンド コマンド 説明 生成例
eslint-plugin-prettier 時代の設定をずっと使っていたので、重い腰を上げてアップデートした作業メモ。 背景 Prettier 公式ドキュメントによれば、現在 eslint-plugin-prettier は以下の問題があるとして推奨していない。 エディタが真っ赤になる（人間が気にする必要のない問題なのに！） 直接実行するより遅い（同様に prettier-eslint も遅い） ESLint と Prettier の間に間接レイヤーを追加するので、壊れやすい なるほど正しい。 一方、別々に実行することで以下のような問題も出てくるので、解決していく。 CLI とエディタを個別に設定する必要がある エディタで ESLint と Prettier の協調動作が必要 CLI (npm scripts) で ESLint と Prettier の対象ファイルが別管理になる 上記の
概要 開発中のAPIを試したり、サードパーティのAPIをサクッと叩いてみたいといった時に皆さんどのようにしますか？ 私は、curlコマンドやPostmanをよく使っています。 ただ、もっと楽にHTTPリクエストを投げ、かつその時使用した情報を残すことができる方法を以前のチームメンバーに教えていただいたので、記事にしました。 REST Client 今回、紹介するのはVS CodeのエクステンションにあるREST Clientというものになります。 このREST ClientというのはVS Code上でHTTPリクエストを送信し、レスポンスを確認できる拡張機能となっています。 使用方法 使用方法はすごく簡単で、拡張子が「.http」か「.rest」というファイルで決められた構文に従いHTTPリクエストを記述するだけです。 下記にcrudの例を載せていきたいと思います。 また今回はREST A
サッと Markdown でスライドを書いて GitHub で自動的に HTML と PDF を公開する方法
Marp というツールで Markdown から手軽にスライドを作る方法と、そのスライドを GitHub Pages で自動的に公開するためのツール Marp CLI Action というものを作ったので紹介します。 先に結論だけ述べますと、Marp のエコシステムを使ってスライドを書き、GitHub にプッシュすれば Marp CLI Action を含んだ GitHub Actions で GitHub Pages に自動でスライドを公開できます。 前置き 会社や勉強会でプレゼンをするとき、どのようにスライドを作成しているでしょうか？ PowerPoint、Keynote、Google スライドなど、さまざまなやり方があると思います。 私はとにかく楽に作りたいので Marp というツールを使っています。 Marp とは Marp は Markdown 記法でプレゼンスライドを書けるツー
Visual Studio Code と Docker コンテナを使って開発する - Pepabo Tech Portal
技術部データ基盤チームの @zaimy です。今回は、 Visual Studio Code（以下 VS Code）と Docker コンテナを使って開発環境を構築する方法を紹介します。 データ基盤エンジニアの開発環境として、Python を使用する単一コンテナを例に記述しますが、他の言語や Docker Compose を使う場合でも応用できます。 背景: M1 Mac (Monterey) に Python 3.8.12 をインストールできない 先日、業務で使用するマシンを Intel Mac から M1 Mac に切り替えたのですが、CPU アーキテクチャが異なることに加えて、OS のバージョンが上がったことで Apple Clang に下位互換性のない変更が入っており、業務上ある理由で必要な Python 3.8.12 のインストールが困難でした。 そこで、私の所属するチームは全員
こんにちは、みみぞうです。 ナビタイムジャパンで『システムや開発環境、チームの改善』を担当しています。 本記事は社内勉強会で発表した内容に沿っています。 この勉強会は、社内全エンジニアの1/4ほどが参加して好評だったため、記事を書かせていただくことになりました。 なお、Vim歴は2年半です。 読んで欲しい方以下のように感じる方を対象にしています。 ❶ VimよりVS CodeやJetBrainsのIDEを使った方が速いので使う必要がない ❷ Vimは学習コストが高いのにメリットがない ❸ Vimの勉強/スキルアップの仕方が分からない この業界に入って7年以上もの間..私も❶～❸の考えをもつ人間でした。 もし昔の自分に会えるなら..『今すぐVimの思想を取り入れよ』と言いたいですね😅 Vimは使わなくていい、されどVimの思想を取り入れよ『すべての開発をVimでせよ』なんて言うつもりはあり
ウェブ業界の当たり前だと思っていることでも、他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか……。この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載9回目となる本記事では「2023年のHTMLコーディング」をテーマとしてアンケート結果を紹介します。 imgタグの属性はちゃんと書く？ imgタグにwidth・height属性を書いているか質問しました。 4397票の回答があり「何が何でも絶対に記述する」が11.9%、「基本的に記述する（たまに記述しないことがある）」が33.2%、「面倒なので普段は記述しない（たまに記述する）」が21%、「記述しない！」が33.8%でした。 記事『【2020年夏】imgタグにはwidthとheight属性を書くのがいいらしい | Rriver』によると、レイアウトシフトの対策に有効であるためにwid
もじゃ（@s10akir）です。paizaラーニングでプログラミング学習動画制作のアルバイトをしている専門学生です。 以前こんな記事を書かせていただきました。 paiza.hatenablog.com 今回は、VSCodeとDockerを使って簡単に開発環境を構築する方法について書いてみたいと思います。 code.visualstudio.com ちなみに前回はプレビューリリースされた「Remote Development with VSCode」と「PaizaCloud」を使って、面倒な環境構築なしで快適に開発しようぜという記事だったのですが、しばらくして「Remote Development with VSCode」が正式版のVSCodeでも使えるようになりましたね！わざわざInsider版のVSCodeを入れなくてもよくなりましたね。 前提の環境について この記事の内容が試せるのは
今やTypeScriptはウェブアプリ開発時に最初に検討される言語となっているが、開発が始まった2010年頃は、まだオープンソースに恐れを抱いていたMicrosoft文化のなかで、ゆっくりと歩を進めていく必要があった。 TypeScriptの共同創案者であり、デンマークのソフトウェアエンジニアであるとともにMicrosoftのテクニカルフェローも務めているAnders Hejlsberg氏は米ZDNetに対して、Steve Ballmer氏が同社の最高経営責任者（CEO）だった2010年に、JavaScript開発者の心をつかむ唯一の道はオープンソース戦略だという決断をチームが下した際のことを語ってくれた。 Ballmer氏は2001年に、LinuxがMicrosoftの知的財産すべてを脅かす「ガン」だと発言しており、Microsoftの幹部らは2010年時点でも、オープンソースが依然とし
VS Code の画面を共有するときはキー入力が見える「スクリーンキャストモード」を有効にしてみよう | DevelopersIO
VS Code の「スクリーンキャストモード」使ってますか？ スクリーンキャストモードとは 百聞は一見に如かず。 お分かりでしょうか。どのキーを入力したのかが一目瞭然です。マウスもクリック時には赤丸が表示されるのでどこをクリックしたかが分かりやすくなっています。（マウス押下時の黄色はスクリーンキャプチャソフトが付与したものです） スクリーンキャストモードは VS Code 1.31 January 2019 で搭載された機能ですが、意外と知らない人も多く、私自身この機能の名前がパッと出てこないこともあったので今回改めて紹介してみました。 https://code.visualstudio.com/updates/v1_31#_screencast-mode スクリーンキャストモードを有効にする デフォルトではショートカットキーは割り当てられていません。コマンドパレットから Develope
この記事では、Webデザイン制作をもっと楽にする最新オンラインツール45個をまとめてご紹介します。 ウェブデザインに限らず、グラフィックなどあらゆるクリエイティブな案件、プロジェクトで活躍しそうな新しいツールを中心に揃えています。 これまで面倒だった作業をワンクリックで完了したり、人工知能が自動で行ってくれたりと、より快適にプロジェクトを進めることができる便利ツールが揃います。 自分のワークフローにうまくツールを導入することで、制作時間の短縮につながるだけでなく、ストレス少なく作業を行うことができます。 カテゴリごとに整理しているので、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. イラスト系ライブラリ 5. プロトタイプツール 6. アイコンツール 7. コラボ、リモートワークツール 8.
Intro ちょうどタコピーの原罪が流行ってるのでこのタイトルにしたけど結構気に入ってる。 d.potato4d.me この話を読んでの感想とここまで大きくなった Node.js の振り返りをしようと思う。 どんなプログラミング言語であってもみんなから使ってもらって開発者をハッピーにしたいと思ってる。ただ最初は良かったと思ってた機能がなんか古臭くなったり、他にクールな機能を持ったものが登場したことによって徐々に飽きられていき、最終的に他の言語に乗り換えられる。 まぁどんな言語も同じだと思う。C言語だって生まれた当初はすごくクールでみんなをハッピーにしてた。今丁度「戦うプログラマー」を読んでるが、C++が出てきて、周りのエンジニアが C++ を使おうとするシーンが出てくる。そこで、「あんなの使って何が良いんだ、Cで十分だろ」とWindows NT 開発リーダーのデーブカトラーが言ってたりする
TauriはRustで書かれた軽量なGUIフレームワークで、Windows、macOS、Linux向けのデスクトップアプリを開発できます。2022年6月に最初の安定版であるバージョン1.0がリリースされました。 Tauriでは、メインプロセスはRustで記述しますが、UI（User Interface）にはWeb技術を利用します。ReactやVue.jsのようなJavaScriptフレームワークがそのまま使えるので、インタラクティブで見栄えの良いUIを簡単に構築できます。同種のフレームワークにElectronがありますが、後発であるTauriにはインストーラのサイズを小さくできるなどの強みがあります。 Tauriのロゴは、おうし座の二重星であるシータタウリ（θ Tauri）をモチーフ[1]にしており、Webとネイティブアプリの相互作用を意味しています。 図1 Tauriロゴ 本稿では、Ta
はじめにTIG DXユニット 1真野です。 RESTfullとかRESTishな方針でWebA PIの横断検索を設計する際にチーム内で方針について議論したやり取りの備忘記事です。 注意としてB2C向けなWeb APIを提供するというよりは、主に企業間または企業内部で使われるようなAPIの設計のバイアスがあります。LSUDs（Large Set of Unknown Developers）かSSKDs（Small Set of Known Developers）で言えば、確実にSSKDs脳で記事が書かれています。 REST API広く使われているため日本語記事も多数です。実践RESTful HTTP - InfoQ や、0からREST APIについて調べてみた など良さそうな記事が沢山でてくるの読むと良いでしょう。一般的な設計方法はやや古いですがWeb API: The Good Parts
VS Codeの新機能がすごく便利！ JavaScriptやCSSの関数やクラスなどを上部に固定させる「スティッキー スクロール」
8/5にアップデートされた、VS Code v1.70で「スティッキー スクロール」を使用できるようになったので、紹介します。 JavaScriptやCSSで作業しているときに、関数やクラスなどが自動でスティッキーされ、エディタの上部にくっつきます。行数のある長いコードに便利ですね。 VS Codeの新機能「スティッキー スクロール」 「スティッキー スクロール」はVS Code v1.70でプレビュー機能として実装された新機能で、スクロール中にどのスコープにいるのかが分かかります。 エディタの上部にクラス/インターフェイス/名前空間/関数/メソッド/コンストラクタがスティッキーされ、常にコード内の場所を把握することができます。 Visual Studio Code July 2022 (version 1.70) 「スティッキー スクロール」を使用するのは、簡単です。 VS Codeの設
プログラミング書籍を10年ぶりに改訂して気がついたこと
はじめに 2011年に書いた良いコードを書く技術を増補改訂して出版しました。 Amazon | Rakutenブックス | honto | ヨドバシ.com | Gihyo Direct 10年ぶりに書籍を技術書を改定するという貴重な体験をさせていただいたので、執筆の中で気がついたことをご紹介します。 ちなみに初版を執筆した10年前はこんな世界です😳 VS Codeは存在せず、みんな秀丸やEmacs、vim、Eclipseでコードを書いていた Java 7が出てたけど、Java 8まではあと3年待たないと行けない TypeScriptもGo言語もSwiftもリリースされていない AWSの東京リージョンができたばかりでクラウドって何？って世界 GitはまだマイナーでSubversionでバージョン管理している人が多かった Dockerはまだない、VirtualBoxやVMwareを使ってた
はじめに こんにちはkenです。エディターはVS Codeを使ってます。 突然ですがみなさん、普段開発をしていて 「VS Code にこんな拡張機能、あったらいいのにな〜」 と思うことありませんか？ 私はあります。しょっちゅうあります。 そこで先日、予定がない休日を利用して拡張機能の開発に挑戦してみることにしました。 最初は拡張機能の開発をどのように進めていけばよいのか全くわからず、そもそも拡張機能でどこまでのことを実現できるのかすらわかりませんでした。ましてや実装についての知識なんて皆無です。 「これは完成まで1日くらい、いや下手すると3日くらいかかるかな」と考えていたのですが、いざやってみるとたった2時間で作れてしまったので今回はその経験についてお話ししたいと思います。 この記事を読んで、 「こんなにお手軽なら自分にも作れそうだ！」 と感じてくれたら幸いです。 本題 作りたかったものと
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
VSCodeをメインのエディタにして半年たったので入れてある拡張機能を紹介します - 海波パソコン
サーバーサイドエンジニアとして2020年に使った技術 | うなすけとあれこれ
スクリプト作成と自動化のための Python の使用
国立国会図書館デジタルコレクションの遊び方 - 山下泰平の趣味の方法
Markdown で技術書が書ける｜abechanta
覚えれば一生もの！ ウェブエンジニアのための正規表現活用入門 - ICS MEDIA
まじか！VS Codeでできることがまた増えた、エディタで画像から背景を1クリックで切り抜けるようになったぞ
2022年におけるフロントエンド開発のベースライン
新人さんにすすめる有益なツール達 2022春- - Qiita
「Visual Studio Code」でのリモート開発が手軽に ～リモートトンネル機能が提供開始／「SSH」は不要。「VS Code Server」で簡単セットアップ
VSCode + Markdownでスライドや書籍も書いちゃおう！ - Qiita
JavaScript ベスト・オブ・ザ・イヤー 2020 - Qiita
2年半VSCodeを使ってきて意外と知らなかったこと
型ヒントでPython開発を加速 ～Microsoft、VS Code向けの拡張機能「Pylance」を発表／“IntelliSense”による強力な入力補完や型チェック、モジュールの自動インポートが利用可能に
HTMLコーダーにとっての2020年。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA
ESLint, Prettier, VS Code, npm scripts の設定: 2021春
サクッとAPIを叩く方法 (VS CodeでHTTPリクエストが送れちゃう拡張機能) - Qiita
Vimの思想を取り入れて開発速度を2倍に｜NAVITIME_Tech
HTMLコーディングの今。アンケート結果から分析する2023年のウェブ制作 - ICS MEDIA
VSCodeとDockerで簡単に開発環境を構築＆共有する方法 - paiza times
マイクロソフト発のオープンソース言語「TypeScript」、生みの親が語る開発当初や背景
Webデザイン制作をもっと楽に！便利な最新オンラインツール45個まとめ
Node.js の原罪 - from scratch
軽量RustフレームワークTauriでデスクトップアプリ開発をはじめよう | gihyo.jp
HTTP検索条件、GETにするか？POSTにするか？ | フューチャー技術ブログ
知識0の状態からたった2時間でVSCodeの拡張機能を作った話 - Qiita