ここから「React」や「Vanilla」「Vue 3」などを選択すると、すぐにVisual Studio Code互換環境がWebブラウザ上に立ち上がります。 ここではReactを選択しました。エディタにはReactのテンプレートのコードが表示され、右側のプレビュー画面には結果が表示されています。エディタでコードを書き換えて保存すると、変更内容は瞬時にプレビューに反映されます。 このようにCodeSandboxはローカル環境に依存せず、しかも面倒なフレームワークや実行環境、ビルド環境などのインストールもすることなく、オンライン上ですぐにWebアプリケーション開発に取りかかれます。 また、Webブラウザから利用するだけでなく、Visual Studio Codeから利用するための拡張機能と、iOS用のアプリケーションも提供されています。GitHubとの連係も可能です。 CodeSandbo

ブラウザだけでDJ・VJ気分！？ この前、DJ・VJ的な遊びをするためにコーディングをしているという記事を書きました（詳細は以下参照ください）。 ただ、自分で1から作るとなると、ある程度プログラミングの知識や環境の構築が必要なので、0から始める人はなかなか気軽に楽しむのは難しいかと思います。 そこで、今回はネット環境とブラウザさえあれば、手軽にDJ・VJ的なことができてしまうサイトをいくつか紹介したいと思います。 どのサイトも、動かすだけならプログラミングの知識は不要です。自分で好きな映像・音楽を生成する場合は、多少のプログラミングの知識があった方が良いのですが、どれもそれほど難しくないのと簡単（適当でもOK）なものもあるので、自分に合っていそうなものを楽しんでみると良いかと思います。 なお、ブラウザはすべてGoogle Chromeを使って確認しました。 Hydra 上記サイトにアクセス

Tabnine is the AI code assistant that accelerates and simplifies software development while keeping your code private, secure, and compliant.

Webサービスまとめに続いて、僕が個人的に使っているVSCodeのプラグインのまとめです。 おすすめしたいプラグインを発見したら随時追加します。更新の保証はしませんが、コンテンツを更新した際に通知が欲しい方のために100円の課金の設定をしておきます（課金した場合のみ通知を受け取れる仕様）。課金したら多くのコンテンツが読めるというわけではないのでご了承ください。 (※2019.11.14 追記)当記事が「はてなブックマーク」テクノロジーカテゴリーの人気エントリーに掲載されました。ありがとうございます。 昨日投稿した「僕がおすすめするVSCodeのプラグインまとめ」がはてなブックマークのテクノロジーの人気エントリーに掲載されました。ありがとうございました。うれぴまる。#notehttps://t.co/w1pg7J3gfDhttps://t.co/LzHQfdYReZ — TAK (@tak_

TL;DR ブラウザ上でほぼVS codeが使えるクラウドIDEサービス「Coder」 他のVS codeライクのクラウドIDEと異なるのは「拡張機能がそのまま使える」。大半の拡張機能を利用可能 現在はアルファ版 ChromebookやiPadでの利用も想定している Dockerコンテナにプロジェクトを作成するので自由度が高い 無料プランでも十分に使える。他のクラウドIDEと比べて月額費用が安い Fast Time機能を使うと時間制で96CPUコア、メモリ16GBが利用可能(課金で殴る開発駆動) コラボ機能で1つのプロジェクトで複数ユーザでペアプログラミングができる(未確認) きっかけ 2019年2月28日の夜、「あれ、VS codeライクなクラウドIDEってなんて名前だっけ？」という疑問から 「Cloud IDE vs code」 でググったところ以下の検索結果が表示。 ここで目的である

フローチャート ※依存関係・フローチャートはJavaScriptのみです。 対応言語は、下記の通り。 JavaScript TypeScript Python PHP Java C++ 望む言語が他にあればIssueにどうぞ、とのことです。 Code Crumbsのデモ デモでは、JavaScriptのコードでその動作を確認できます。 デモページ 依存関係はDependenciesをオンに、フローチャートはFlowChartタブをクリックします。 Code Crumbsの使い方 セットアップ codecrumbをインストールします（yarn global add codecrumbs）。 codecrumbs -d project-src-dir -e project-src-dir/index.jsを実行し、プロジェクトに合わせてパラメータを変更します。-dはソースコードを含むディレクト

Microsoftは米国時間2018年12月13日、Visual Studio Codeの拡張機能であるPython extension for Visual Studio Codeのバージョン2018.12.0をリリースしたことを公式ブログで発表した。同社はデータサイエンティストの体験に焦点を当て、以下の2機能を実装している。 Python extension for Visual Studio Code バージョン2018.12.0 新たにリモートJupyterサーバーへの接続をサポートし、コマンドパレットからサーバーのURIを入力してトークン認証を行えば、実行結果をVisual Studio Code内で確認できる。 リモートJupyterサーバーの実行結果(公式ブログより抜粋) また、PythonファイルをJupyterノートブックとしてエクスポートする2つのコマンドを追加した。な

以下の内容はすでに古くなっています。いまから利用するのであれば Visual Studio Code Remote Development SSH を利用するのが正道です。ただ、この方法はポートフォワードが有効でないと使えないため、ポートフォワードが無効なサーバーでは以下の方法はいまだに有効です。 はじめに Visual Studio Codeはリモートにあるファイルをあたかも手元に存在するかのように編集することが可能です。これによりEmacsやVimに慣れてなくともSSHごしにファイルを編集できます。また、Visual Studio Codeの優秀な補完機能の恩恵に預かることもできます。 SSH FSをインストールする このSSH FSはFuseを用いたSSHFSではなく、Visual Studio CodeのプラグインとしてのSSH FSです。SSHとFSの間にスペースが入ります。まず

言語やフレームワークによらない、オススメの汎用的な拡張機能をまとめました。 Tipsは**ここ**から。 拡張機能 24 選 1. vscode-icons アイコンがついて見やすくなる。 2. GitLens とにかく強い。 「コミット単位でのファイル比較」や「最新のコミット内容とそのコミッター表示」など色々してくれる。 git blameする手間なくなる。 3. Prettier コードのフォーマットは自動でやりましょう！ 複数人のこだわりをうんたらするよりも、Prettierに委ねるのが楽。 関連のTipsはここ 4. Git History Git logが見やすい 5. Bracket Pair Colorizer カッコの対応を色付きで表示してくれる。 ものすごく読みやすくなって最高&最高！！ なおBeta版ですが、後継となるBracket Pair Colorizer 2も出

今回使ったのはこちらのRemote VSCode marketplace.visualstudio.com 今回の環境 ローカル linux mint 18.1 Visual Studio Code 1.16.1 Remote VSCode 1.1.0 リモート ubuntu 16.04 rmate 1.0.0 (shell script版) ローカルの設定 Remote VSCodeのインストール Visual Studio CodeでCtrl-pを押し、ext install remote-vscodeと入力後、Enter 拡張機能の検索結果が表示されるので、Remote VSCodeをインストール 拡張機能を再読み込みさせRemote VSCodeを有効化 Remote VSCodeの設定変更 「ファイル」-「基本設定」-「設定」からユーザ設定を開く ユーザ設定のRemote VSC

追記：VS Codeの入門書をZennでリリースしました ブログで扱ったVS Code関連の記事をまとめて、無料の電子書籍としてZennというプラットフォームでリリースしました。よければ、こちらも参考にしてみてください。 VS CodeにVimから乗り換えようと思った 普段、プログラムを書くためのエディタは3年くらい前からVimを使っています。 軽量ですし、大体どんなマシン（OS）でも入れられるので、プラグインとか色々入れて機能拡張していました。ただ、デバッグとか色々辛くなってきたので、IDEのエディタもまた使ってみようかなと思い、最近評判の良いVS Code（Visual Studio Code）に手を出しはじめてみました。 この記事では、VS Codeに入れている拡張機能を自分のメモがわりに書いておきます。 なお、VS Code自体のインストール方法は割愛します。以下公式サイト参照下さ

文章の校正チェックを自動で行うVisual Studio Codeの拡張機能「テキスト校正くん」を弊社からリリースしました。無料で利用できます。 テキスト校正くん – Visual Studio Marketplace 短い文章であれば目視でもチェックできますが、長文になるとチェックに時間がかかり見落としも多くなってしまいます。また、いくら内容のいい文章を書いても誤字や脱字が多く体裁が整っていないと、印象が悪く読みづらい文章になってしまいます。 そんなとき、「テキスト校正くん」を利用することで、文章チェックの手間を軽減でき、文章の品質を高めることができます。 ▲VS Codeの拡張機能「テキスト校正くん」 「テキスト校正くん」でできること この拡張機能は、VS CodeでテキストファイルやMarkdownファイル等の日本語の文章をチェックします。編集時に自動で校正のチェックを行い、エディタ

「Visual Studio Code（略称：VS Code）」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターにカスタマイズできます。 前回の記事では、「HTMLコーダー」「フロントエンジニア」に役立つ拡張機能を紹介しました。本記事では、開発者全般の方に役立つ拡張機能を紹介します。 エディターを強化する拡張機能 1. Clipboard Ring テキストを「コピー」や「切り取り（カット）」したものを「貼り付け（ペースト）」する場合に、この拡張機能を入れることで複数件の内容を記憶できます。ctrl+shift+v（⌘+shift+v）を押すごとに過去の情報に切り替えられます。デフォルトでは10件の情報を記憶できますが、設定を変更することで記憶する件数を増やすことも可

「Visual Studio Code（略称：VS Code）」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターへとカスタマイズできます。 本記事では、HTMLコーダーやフロントエンドエンジニアに役立つ拡張機能を紹介します。 1. IntelliCode IntelliCodeはMicrosoft謹製の公式プラグイン。AI支援による次世代のコード補完がJavaScriptやTypeScriptで利用できるようになります。APIの一覧がアルファベット順に提示されるのではなく、利用する可能性の高いAPIがAIによって予測されます。 コード補完の様子を次のスクリーションショットでご覧ください。入力候補の「★」マークが付いているところが、補完候補になっているところです。人工知

Linuxバイナリを最適化して性能を向上させる「BOLT」、Facebookがオープンソースで公開。言語やコンパイラに依存せず高速化 Facebookは、Linuxバイナリの内部配置を最適化することによりCPUのキャッシュ効率などを向上させ、実行速度を改善する「BOLT」をオープンソースで公開しました。 BOLTは「Binary optimization and layout tool」の略とされています（もしかしたら、より速く走るという意味でウサイン・ボルト氏にかけているのかもしれません）。 BOLTは言語やコンパイラに依存せず、ソースコードも不要 BOLTのおもな効果は、Linuxバイナリの実行状況をperfコマンドで取得し、高頻度で実行されている部分などを判別した上で、そうした部分がCPUキャッシュにヒットしやすいようにバイナリの内部配置を改善することなどで実行速度を向上させることと

TL;DR Visual Studio Codeではエディタからのコマンド実行がTasksという仕組みでできてとても便利。 背景 最近エディタをVisual Studio Codeに変えた。エディタのこだわりはそんなになくて、Vim → Emacs → Atom といった順番で2年に一度くらい乗り換えている。だいたいどのエディタにもVimキーバーインドエクステンションがあるのでなんとかなる。 Visual Studio CodeはAtomと同じElectronベースだけど、なぜかAtomよりサクサク動くので気に入っている。Microsoftのリソースパワーに感謝するしかない。 テストの話に移ると、テストを書くのはもちろんソフトウェア品質の担保やリグレッションの防止が目的だけれども、TDD的な文脈では開発のリズムを作るのも目的の一つだ。リズムよくテスト実行しつつ開発するには、エディタで開いて

MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Selenium IDEが最新のFirefoxで動かなくなり、多くの代替ソフトウェアが登場し始めています。単純に操作を再現するものはあるのですが、テストコードを出力するものはまだ多くありません。 そこで使ってみたいのがSeleniumCodeBuilderです。操作した内容をRubyまたはPython用のテストコードとして出力できます。 SeleniumCodeBuilderの使い方 操作した記録です。一つ一つ区切られた形で出力されます。 プラットフォームを指定してテストコードを出力できます。 クリックやイベントの追加もできます。 ヘルプです。 SeleniumCodeBuilderでは複数のテストケースを管理できません。一旦保存しておいて、ファイルを開いて呼び出す形になります。し

もう見た？GitHub最新人気リポジトリTop25総覧【2017年9月版】 GitHubで直近1年に作成されたリポジトリの中から、スター数が多いリポジトリ上位25個を収集！読み物からソースコードまで、皆さんの開発に役立つ要素満載です！ 世界中の開発トレンドはGitHubにあり。 今回は直近1年に作成されたリポジトリの中から、スター数が多いリポジトリ上位25個を収集し、ジャンル別に整理しました。また、より内容を把握しやすくするため、各リポジトリの概要も記載しています。 上位にはソースコードだけでなく、開発に役立つ読み物系のリポジトリも多数。ぜひ参考にして、あなたの開発をブラッシュアップしてください。 読み物 Roadmap to becoming a web developer in 2017 Best websites a programmer should visit The Syste

自分だけの生態系を遺伝子レベルから構築できるシミューレーションゲーム『Intelligent Design: An Evolutionary Sandbox』には、解除条件すら分からない謎の実績が最後に存在する。先日、同作を手がけるPill Bug Interactiveの開発者がSteamのニュースページを更新し、この実績を解除できるプレイヤーが現れた暁には、ゲーム内に組み込まれているAIのソースコードを公開すると宣言した。実は同作の発売当初から、ゲーム内に謎の暗号が散りばめられていることがフォーラム内で密かな話題になり、熱心なプレイヤーが解析を続けていた。しかし、真実にたどり着いた猛者はいまだに現れていない。 遺伝子に秘められた暗号文 『Intelligent Design: An Evolutionary Sandbox』は、Pill Bug Interactiveから5月12日にP

アイデアは思いつくが、それを実現するにはどの電子部品が必要かがわからない。そこに大きな壁を感じている人は多いだろう。電子部品やコンポーネントはいつでもどこででも手に入る。コンセプトが浮かんで、部品をどこで買えばよいかまではわかっても、実際に部品を組み合わせて機能させるためには、ちょっと勉強が必要だ。 ArduinoでLEDを光らせるときは抵抗が必要（オンボードのLEDではない場合）といった、経験者なら当たり前に知っていることも、初心者にはわからない。この程度のことなら、ほぼすべての初心者向けチュートリアルで説明されているが、もう一歩進んだ回路で、電子部品同士を会話させるために何をどうすればよいかを学ぶのは、けっこう大変だ。 そこを助けてくれるのがCircuito.ioだ。かわいいインターフェイス上に使いたい部品をドラッグ・アンド・ドロップで配置すると、足りない部品を教えてくれる。そして、配