
こんにちは!株式会社Rabeeのデザイナーのakaneです。 今回は「Obsidian」と「Cursor」という2種類のテキストエディターを使うことで、noteをサクサク書く体制を整えてみた話です。情報収集からアウトプットまでをスムーズにしたい方、ぜひ読んでいただけたら嬉しいです。 どうぞ最後までお楽しみください🐰 参考記事ObsidianとCursor(とGitHub)の活用方法については、以下の記事を参考にさせていただきました。 ・ ・ ・ 使うツール今回使うツールは、以下の2つのエディターのみ。 Obsidian(Markdownエディター) Cursor(コードエディター) これらのツールを使うことで、Web上の気になる情報を1つの場所にどんどん蓄積していって、読んで、理解し、それらを日々アウトプットする習慣をつけよう〜✊️という試みです。 【今回の目標】 ・読みたい情報や読んだ
株式会社ハウテレビジョン様で、 質問箱サービスMondのパフォーマンス分析と改善を行いました。 内容としてはLCPの内訳の計測、その解決方法の提案、そして一番大きな問題だった GraphQL リクエストの最適化という話になります。 現時点で全ての問題の修正には至っていませんが、開発的には全ての問題の内訳が認識可能になっていて、検証が終われば段階的にリリースできる、という状態です。 以下、敬称略 相談内容 mond.how のLighthouseスコアを改善してほしい 主要な技術構成 Next.js - Page Router Hasura CE - GraphQL Server Hasura のセルフホスティング版 計測と問題 最近は Chrome が出してくれる Lighthouse スコアの推移が見れるダッシュボードがある。 ここで Mond の直近のスコアをみる。 代表例として ht
目次 1.はじめに 2.VSCodeの拡張機能紹介 3.コーディングのポイント 4.よく使われる英単語一覧 5.エラーとの向き合い方 6.テストで動作確認 7.検索の極意 8.公式ドキュメントに慣れる 9.リファクタリングでさらに読みやすく 10.資料作成で気をつけること 11.Gitで管理 12.よく使うLinuxコマンド一覧 13.仕事の進め方 14.プログラム以外で意識するところ 15.初心者こそ読んで欲しい本 16.まとめ 1. はじめに プログラミングは現代のデジタル社会において重要なスキルです。 AIがコードを書いてくれる時代ですが、それでも人の手によるプログラミングはいまだに必要です。それはAIが完璧なコードを書いてくれるわけではないからです。 この記事では、プログラミングの世界に新たに足を踏み入れた皆さんを全力でサポートします。 VSCodeの便利な拡張機能から始まり、コー
皆さんは「Cursor」というAIツールをご存じでしょうか? Cursorは、プログラミング関連の業務全般を自動化できるAIツールです。Cursorを活用すれば、コードを自動で生成できるのはもちろん、チャットで質問したりエラーを自動で修正したりもできるんです! 本記事では、Cursorの概要や料金体系、主な機能の使い方などについて詳しく解説します。 また記事の最後では、プログラミング知識ゼロの筆者が実際にCursorでコードを生成してみた様子も紹介します!ぜひ最後までご覧いただき、興味のある方はお手元のPCでCursorを試してみてください! Cursorとは?どんなAI? 参考:https://www.cursor.com/ja Cursorは、プログラミング関連の業務全般を自動化できるAIツールです。 Cursorの主な特徴は、以下の3点です。 VSCodeをフォーク:プログラミング専
この記事はNuco Advent Calendar 2023の1日目の記事です。 はじめに 2023年最新のフロントエンド開発環境についての紹介記事です。 分野別に、おすすめツール群と、その特徴などを紹介していきます。 デファクトスタンダードとみなせるようなツールや、最近盛り上がりを見せているものなどをラインナップしました。 これからフロントエンド開発を始めたい人はもちろん、長くご経験のある人にもプラスになる情報がきっとあるため、ぜひ参考にしてもらえると嬉しいです。 フロントエンド開発おすすめツール集 エディタ エディタやIDEは好みの問題も大きいので、メジャーなものを簡単に紹介だけしておきます。 Visual Studio Code もはや説明の必要が無いほどに普及しているエディタと言っても良いと思います。 フロントエンド向けの拡張機能も幅広く存在しているため、自分に合うカスタマイズが可
はじめに AI搭載コードエディターCursorが話題なので自分にとって使いやすいのか実験してみました。 まだまだCursorの実験途中ではありますが、CursorProをサブスクしてたった3日でgpt-4に332回聞いてました。 Cursorはプロンプトの会話から現在のコードにDiffで提案してくれたり、エラーを解決してくれたり本当に便利で最高なのですが、頼り過ぎも良くないなと反省することもあったので、やったこと全部と感想をシェアしていきたいと思います。 やったこととしては、Cursorのチャットに質問しながら予備知識のないChatVRMというオープンソースのチャットアプリケーションの追加実装をしました。わりと簡単に実装できたこととうまくできなかったことがあるので例を挙げて紹介していきます。 Cursorとは Cursor(カーソル)とは、VScodeをフォークして作られたOpenAIのg
1971年福井県生まれ。得意ジャンルは、パソコン・デジタルAV・家電、ネットワーク関連など「電気かデータが流れるもの全般」。主に、取材記事と個人向け解説記事を担当。 打ち間違い・変換ミスのことを「typo」ということがある。 typoは英語でタイプミスを示す俗語で、typeのeをoと打ち間違う……という話に由来する。冷静にキー配列を考えるとeとoはあんまり打ち間違えないようにも思うが、それはそれとして、だ。 ライターの仕事はtypoとの戦いだ。 理由はいくつかある。 ・本来間違えていてはいけない ・文書の生産量が多いのでtypo混入の可能性もその分上がる ・スピードが必要なのでtypoしやすさも上がる ・その割にうっかりしがち 書籍などのように何回も、複数人の手を経るものならtypoは減らしやすいのだが、日々の作業だとtypoをゼロにするのは難しい。 というわけで今回は、typoを減らすツ
はじめに コードエディタ界の王様VisualStudioCode。開発の際に使っている方も多いのではないでしょうか。 本記事では、VSCode(VisualStudioCode)の定番機能を紹介していきます。 この記事を読んで、VSCodeマスターになりましょう! そもそもVSCodeって? VSCode(VisualStudioCode)はMicrosoft社が提供する無償のコードエディタです。2015年リリースですが、着々とユーザーを増やしており、2023年現在、世界で最もポピュラーなコードエディタの1つとなっています。 コードエディタって? 字や記号などのテキストで構成されているファイルを編集するソフトのことをテキストエディタと呼びます。 その中でも、ソースコードの編集を主な目的としたものがコードエディタと呼ばれます。 VSCodeが選ばれる理由 コードエディタはたくさんリリースされ
導入経緯 当社は受注開発のIT企業である。2023年に長らくお世話になったVimの利用を辞め、VSCodeを使い始めた。 当社の実情 当社のエンジニアは2022年時点で全員がVimを使っていた。当時の案件はメインがRuby on Rails関連であったことも相まって、世に出回る便利なエディタ、IDEに関する情報感度が極めて低かった。 Rails案件ではVimを使うことに対して大きな問題はなかった。補完がある程度効けばバックエンドの実装に支障がないからである。エンジニアとしてそれでいいのかという葛藤は当然あったが、当社のエンジニアは日々の業務をこなすことに集中していた。 (設立当初から積み上げられた歴史としてのvimrc) 転機 ついにその時が来てしまった。 そう、Vue、Typescript案件が唐突に現れたのである。 当社のエンジニアは皆狼狽した。 Vimで培われた爆速タイピングは、es
VSCodeにFigmaを組み込む「Figma for VS Code」登場。コードの自動補完にも対応 昨年(2022年)、Adobeによる買収が発表され話題となったWebデザインツールを提供するFigmaは6月23日と24日の2日間、イベント「Config 2023」をサンフランシスコで開催しました。 その基調講演で、VSCodeのコードエディタ画面にFigmaの機能を組み込む「Figma for VS Code」が発表されました。 Bring Figma to VS Code Our new extension for VS Code eliminates context switching and helps you move faster with code suggestions based on your designs. Install to... → Inspect Fig
昨日の自分「今作ってる曲まじで良すぎる。天才かもしれん」 今日の自分「ナニコレ。曲作り下手すぎか~~」 この記事は新歓ブログリレー23日目の記事です。 こんにちは、カシワデと言います。サウンド班に所属していてパソコンで音楽を作っています。 皆さん、DTMってしってますか? DTMとはDeskTop Musicという和製英語の略で、パソコンで音楽を作ることを広く指します。パソコンで音楽を作ると言っても昨今の曲は大体パソコンを用いて作られているので、DTMというと特に"打ち込み"のニュアンスが出るような気がします。 でも、『パソコンで音楽を作る~』とか『打ち込み』っ… 🎉入学おめでとう🎉まずは新入生の皆さん、ご入学おめでとうございます!!!これから始まる大学生活は非常に短いですし、世間で言われる程時間に余裕があるわけでは無いので、後悔の無い充実した生活を送ってください!
8/5にアップデートされた、VS Code v1.70で「スティッキー スクロール」を使用できるようになったので、紹介します。 JavaScriptやCSSで作業しているときに、関数やクラスなどが自動でスティッキーされ、エディタの上部にくっつきます。行数のある長いコードに便利ですね。 VS Codeの新機能「スティッキー スクロール」 「スティッキー スクロール」はVS Code v1.70でプレビュー機能として実装された新機能で、スクロール中にどのスコープにいるのかが分かかります。 エディタの上部にクラス/インターフェイス/名前空間/関数/メソッド/コンストラクタがスティッキーされ、常にコード内の場所を把握することができます。 Visual Studio Code July 2022 (version 1.70) 「スティッキー スクロール」を使用するのは、簡単です。 VS Codeの設
「VS Code Meetup」は、強力かつ軽量なオープンソースのコードエディター「Visual Studio Code」のミートアップです。今年もVS Code Meetup 主催の年次カンファレンス、「VS Code Conference Japan 2021」が開催されました。招待講演では、SF作家の藤井太洋氏が登壇。VS Codeで執筆を支援する機能拡張「novel-writer」の制作について発表しました。 『Hello, World!』で吉川英治文学新人賞を受賞したSF作家 藤井:お時間いただきまして、ありがとうございます。本日、「Visual Studio Codeで小説を書く」というセッションを持たせていただく、SF作家の藤井太洋です。それでは、プレゼンテーションを進めます。 まず簡単な自己紹介から。私は、2012年に『Gene Mapper』というサイバーパンク小説をセル
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で開きます。
エクセルVBAでマクロを作ると、思い通りに動かないことがとても多いです。 そういうときには、何がおかしいのか原因を探って修正する「デバッグ」作業が必要になります。 このページでは「デバッグ」をする基本的な方法を説明していきます。 デバッグとは何か? デバッグというのは、プログラムがうまく動かないときに、原因を突き止めて修正する作業のことをいいます。 英語では「debug」と書きます。 プログラムの誤りのことをバグ(bug)というのですが、それを取り除く(=「de」)作業ということで、「debug」と呼ばれています。 また、デバッグをするツールのことをデバッガ(=「debugger」)といいます。 VBAの場合は、エディタ自体にデバッガの機能が付いているので、それを使ってデバッグをしていきます。 デバッグをするときの考え方 デバッグをするときには、次のような手順で考えていきます。 直接の原因
はじめに 本投稿は**『VSCodeが最強のエディタだ!!』などといったことを伝える記事ではありません。** 数あるエディタの中の『VSCode』に焦点を当てて、作業効率化できるための使い方をまとめたものです。 いくつかのテーマに分けて、ご紹介させていただきますので、興味のあるところを拾い読みしていただければと思います。 (スクリーンショットについては、随時更新させていただきますが、古い場合があります。ご容赦ください。) 1.ショートカット ショートカットはかなりの数があるので、今回は**『1日の作業の中で登場頻度が多そうな操作』**に焦点をあてて、効率化を目指していきます。 ショートカットを覚えることで、ある程度の操作はマウスに触らずにできるようになります。 1つ1つの効果としては微々たるものですが、操作頻度の多いものであればあるほど、効果が期待できるので、覚えることをオススメします!
3年前に、図解の基本をまとめた本『図で考える。シンプルになる。』を書きました。その内容から、エッセンスを抽出したのが本noteになります。 (1)「幕の内図解」と「イチオシ図解」 図には、大きく分けて、2つのアプローチがあります。 ひとつは、幕の内弁当のように、いろんな要素を盛り込んだ図で、もうひとつが、唐揚げ弁当のように、イチオシのおかずにフォーカスした図です。 たとえば、桃太郎の話を「幕の内図解」のアプローチでまとめてみたのが、つぎの図です。 登場人物とエピソードをフラットに扱って、網羅的に盛り込んでいます。 この図を使って、人に説明しようとすると、「まず、お婆さんですが……」「つづいて、お爺さんですが……」といった具合に、「お婆さん」「お爺さん」「桃太郎」それぞれの視点に切り替えが必要になり、話す方も話しづらければ、聞く方もまどろっこしく感じてしまいます。 相手がじっくり聞く耳を持っ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く