プログラミング言語をすぐに試せる「プレイグラウンド」まとめ。2024年版
新しいプログラミング言語やライブラリ、フレームワークを学ぶには、実際にそれらを試して挙動などを見てみることが大事ですが、実行環境を用意するのは手間がかかります。 そこで役立つのが、いわゆる「プレイグラウンド」と呼ばれる、Webブラウザでプログラミング言語やライブラリ、フレームワークをすぐに試すことができるサービスです。 主要なプログラミング言語の公式サイトには、実際にその言語をすぐに試せるプレイグラウンドが用意されていることも多く、また公式サイト以外にもネット上にはさまざまなプレイグラウンドがあります。 プレイグラウンドを使えば、気軽にいろんなプログラミング言語やライブラリ、フレームワークを試せます。 この記事ではそうしたプレイグラウンドをまとめてみました。ここで紹介したプレイグラウンドの他にも、あなたのお気に入りのプレイグラウンドがあればX/Twitterやブックマークのコメント、メール
神アップデート！ Win, Mac, Linux対応、クラウドでの同期機能も備えた最強のコードスニペットマネージャー -massCode
HTML, CSS, JavaScriptをはじめとしたさまざまな言語に対応、クラウドでの同期機能も備えたオープンソースのコードスニペットマネージャー「massCode」がv3に神アップデートされたので、改めて紹介します。 macOS, Windows, Linux対応、日本語の入力など日本語環境も完全サポート。クラウドで同期できるので、すべての環境で同じコードスニペットを使用できます。 非常に快適で高速に動作し、VS Codeとの連携でさらに便利になっています！ massCode massCode -GitHub massCodeの特徴 massCodeのダウンロードとインストール massCodeの使い方 massCodeの特徴 massCodeは、デベロッパー向けのコードスニペットマネージャーです。ライセンスはGNUで、オープンソースなので商用でも無料で利用できます。 macOS 1
CSSの便利ツールが登場！ レスポンシブ対応のフォントサイズを超簡単に定義できる -Modern Fluid Typography Editor
Webサイトをレスポンシブ対応にする時、フォントサイズをさまざまなスクリーンに最適なサイズにします。スマホ用のfont-size、デスクトップ用のfont-sizeを定義するのも一つの方法ですが、font-sizeの最小値と最大値とその間の値を流動的にするclamp()を使用すると簡単に定義できます。 CSSでレスポンシブ対応のフォントサイズを超簡単に定義できるオンラインツールを紹介します。 最近のやり方としてはvw, calc()を使用したフォントサイズの定義などがありますが、clamp()を使用するとかなり簡単です。最小値と最大値を決め、その間の変化の度合いも変更でき、もちろん日本語フォントのfont-sizeでも大丈夫です。 Modern Fluid Typography Editor Modern Fluid Typography Editor -GitHub Modern Flu
JavaScriptを遊び尽くす究極のWebサービス・ツールを厳選して大公開！ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、JavaScriptを使ってとにかく遊んだり楽しんだりできるインタラクティブなWebサービスやツールを厳選してご紹介します。 ゲーム体験をしたり、アート作品を作ったり、JavaScriptで開発されたユニークなサービスを利用してじっくりと遊んでみましょう。 Webの楽しい世界にご興味ある方は、ぜひ参考にしてください！ ■リアルタイムにコードを書いて戦うオンライン対戦ゲーム 【yare.io】 世界中のプレイヤーと1対1で戦うゲームなのですが、その戦い方はJavaScriptのコードをリアルタイムに書き換えながら自機を操作するというのが大きな特徴です。 見た目は簡素なシューティングゲームですが、実はかなり奥深いストラテジーゲームみたいな要素が詰まっています。 ゲームの大まかな流れとしては、以下のとおりです。 JavaScriptで自機を制
これは便利、VS Codeの設定を変更しよう！v.1.60のアップデートで、ブラケットのカラー化にネイティブ対応
VS Codeがどんどん便利になっていきますね。 先日のv.1.60のアップデートで、ブラケットのカラー化に対応しました！ VS Codeの設定を変更するだけで、開始と終了のブラケットをセットで同じカラーにします。今までは機能拡張を入れないとできなかったことが、ネイティブ対応したのは朗報です。 Visual Studio Code: August 2021 (version 1.60) 自動言語検出 - VS Codeにペーストする際にプログラミング言語を検出します。 ビルトイン高速ブラケットカラー化 - 大規模ファイルでも高速にブラケットのマッチングとカラー化。 設定エディタのシンタックスハイライト - 設定のコードブロックでリッチなシンタックスハイライトに対応。 ターミナルでグリフのレンダリング - ボックス描画とブロック要素文字の表示が改善。 デバッグウォッチ値の設定 - デバッグセ
[待望のアップデート] VSCodeの内蔵ターミナルがエディタと同様に扱えるようになりました！ | DevelopersIO
TL;DR まずはこいつをみてくれ。 左右に分割されたエディタウインドウに、テキストエディタとターミナルが並んでいるのがお分かりになられるでしょうか！！ なにそれ？ これは、先日リリースされた Version 1.58 (June 2021) に含まれる以下のアップデートによるものです。 Terminals in the editor area Terminals can now be created in or moved to the editor area, enabling a multi-dimensional grid layout that persists and remains visible regardless of panel state. Terminals in the editor area - Integrated Terminal - Visual Stu
![[待望のアップデート] VSCodeの内蔵ターミナルがエディタと同様に扱えるようになりました！ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/611914e4c074abe947efa5c820fc1646e6c60a0a/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2020%2F06%2Fvscode-2020-eyecatch-1200x630-1.png)
[Git] 自分の環境だけgitignoreする方法（2つ） - YoheiM .NET
こんにちは、@yoheiMuneです。 Gitを使って開発をしていると、時々自分だけgitignoreにしたいファイルができます（例えばエディタのメタファイルとか）。そのようなファイルを、自分の環境からバージョン管理から外す方法をブログに書きたいと思います。 特定のプロジェクトにある指定したファイルを、自分だけgitignoreしたい 掲題のような場合には、.git/info/excludeのファイルにバージョン管理外にしたいファイルを指定します。 # .git/info/exclude my-gitignore-target.txt すると、ファイルをGitレポジトリ上に追加しても、バージョン管理対象外になります。 # ファイルを追加する $ touch my-gitignore-target.txt # しかし、バージョン管理対象に入らない $ git status # On bran
![[Git] 自分の環境だけgitignoreする方法（2つ） - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/905b04391bc09f0a3d96187a1825c42be0abe94b/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F422.jpg)
社内でよく使う VSCode の機能紹介 - Techtouch Developers Blog
テックタッチのバックエンドエンジニアの taisa です。 社内勉強会で、Visual Studio Code（以降 VSCode と記載）ナレッジ共有会を実施したのでその内容を紹介します。 今回の趣旨は「VSCode で各自がよく使う機能やショートカット、ちょっとしたノウハウを共有することで開発効率を向上させたい」というものです。自分自身 VSCode を使いこなせておらず、他のメンバーの使い方に興味がありました。共有会では、みんなで順番に画面共有しながら進めていきました。 コマンドパレット編 シンボル検索編 ショートカット編 最近開いたプロジェクトを開く 最近開いたファイルを開く / ファイルを検索する サイドバーを開く/ 閉じる、パネルを開く/ 閉じる、エクスプローラを開く 指定のエディタに移動する Grep する 特定の文字列を選択して置換する 定義へ移動、直前の場所に戻る、直前の
まじか！VS Codeでできることがまた増えた、エディタで画像から背景を1クリックで切り抜けるようになったぞ
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で開きます。
Web制作者必見！ VS Codeのおすすめ機能拡張のまとめ、HTMLやCSSやJavaScriptのコードを書く時に便利
Visual Studio Code（以下、VS Code）が素晴らしいエディタである理由の一つは、デベロッパーの生産性を向上させるVS Codeの機能拡張の巨大なライブラリがあることです。 その中から、HTMLやCSSやJavaScriptのコードを書く時に便利なVS Codeの機能拡張を紹介します。 My 12 Favorite VSCode Extensions by Katherine Peterson 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 VS Codeとは VS Codeの機能拡張 VS Codeのおすすめ機能拡張 VS Codeとは VS Code(Visual Studio Code)は、Microsoftが提供する統合ツールを備えた強力で軽量なコードエディタです。MITライセンスで、商用でも完全に無料
M1 Macの開発環境 - Qiita
MacBook Pro (M1)でのメモです。インストールできるかどうか状況確認メモです。 自分がよく使うものを中心に。なるべくARMネイティブになるように。もしプライマリーで提供されているインストール手段（.dmg利用など）でARM対応が済んでいればそれを紹介しますが、もしそれで対応していない場合にはMacPortsやソースビルドなどの結果も合わせて紹介します。 PowerPC->x86->x86_64とユニバーサルバイナリを挟んで対応してきたMacPortsはこういう過渡期に強いです。 なお、ここで紹介するバージョンは最新版から古い可能性がありますが、「M1サポートが追加された前後のバージョン」を明記するのを目標にしていますので、これより新しければ問題ないと見てもらえればと思います。 編集リクエストウェルカムです。 現在の状況 IDE/エディタ Eclipseはあまりきちんと試していま
1分でも早く仕事を終わらせるためにVSCodeにできること - Qiita
はじめに 本投稿は『VSCodeが最強のエディタだ!!』などといったことを伝える記事ではありません。 数あるエディタの中の『VSCode』に焦点を当てて、作業効率化できるための使い方をまとめたものです。 いくつかのテーマに分けて、ご紹介させていただきますので、興味のあるところを拾い読みしていただければと思います。 (スクリーンショットについては、随時更新させていただきますが、古い場合があります。ご容赦ください。) 1.ショートカット ショートカットはかなりの数があるので、今回は『1日の作業の中で登場頻度が多そうな操作』に焦点をあてて、効率化を目指していきます。 ショートカットを覚えることで、ある程度の操作はマウスに触らずにできるようになります。 1つ1つの効果としては微々たるものですが、操作頻度の多いものであればあるほど、効果が期待できるので、覚えることをオススメします！ VSCodeを閉
PHPプログラミングも快適に！ VS Codeの二大拡張機能
PHPプログラミングも快適に！ VS Codeの二大拡張機能：Visual Studio Code＋PHPの可能性を探る（1/3 ページ） VS CodeとPHPでWebアプリ開発はどこまで簡単になるのかを探る新連載。今回はVS Codeを利用したPHPによるアプリ開発に必須の拡張機能を2つ紹介する。 連載「Visual Studio Code＋PHPの可能性を探る」 本連載では、Visual Studio Code（以下、VS Code）を使ってPHPプログラミングする際の基本事項を紹介していく。ただし、PHPの構文や文法については取り上げない予定だ。これらについては、＠IT内の連載「Web業界で働くためのPHP入門」やPHP公式サイトの「PHP マニュアル」などを参考にしてほしい。また、VS CodeのGUI構成や、基本的な使い方については「Visual Studio Codeの使い方
[CSS]かなり便利！スタイルシートを自分で決めたルール通りに整形する便利ツール
コードを決められたルール通りに記述するのは、素晴らしいことです。 同じクォートを使い、セミコロンの後のスペースの有無、スペースやタブの数、改行の使い方など、統一するのは大変そうですが、ツールを使用すると簡単にできます。 コードを決められたルール通りに、見やすく整形できる便利ツールを紹介します。 Prettier + Stylelint: Writing Very Clean CSS 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Prettier Stylelint 対応エディタ Stylelintを使用した時によくある事 関連 Prettier Prettierは2017年1月にローンチされた新しいプロジェクトで、すでに多くのWeb制作者が利用している人気ツールです。「頑固なコードフォーマッター」と呼ばれています。 Prett
![[CSS]かなり便利！スタイルシートを自分で決めたルール通りに整形する便利ツール](https://cdn-ak-scissors.b.st-hatena.com/image/square/65d8fd972c8e42b26e4948173c8eb784215ccfb9/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201704%2F2017103011.png)
Webアプリ、ゲーム、IoTまで！ブラウザだけでJavaScript開発環境が構築できるWebサービスまとめ - paiza times
どうも、まさとらん（@0310lan）です！ 今回は、ブラウザだけで本格的なWebアプリの開発から、ゲーム、IoTまで幅広くトライできる無料のWebサービスを厳選してみました！ それぞれの用途に特化したWebエディタをピックアップし、その特徴や機能などを解説しているのでご興味ある方はぜひ参考にしてみてください！ ■React & Angular開発に特化したWebエディタ「StackBlitz」！ 【 StackBlitz 】 JavaScript開発でのフレームワークと言えば「React」「Angular」が有名ですが、いざ開発を始めようとするとサーバーの準備や関連パッケージの導入など…環境の構築が面倒だったりします。 ところが、この「StackBlitz」はクリック1発で「React」「Angular」の開発環境が整った状態のWebエディタが即座に起動します！ コードエディタとしても優
超高機能！HTMLエディタ【入力補助付き】5選 - Findy
ホームページを作るときにHTMLを直接打ち込むことがありますが、テキストエディタではコードが長くなると見辛いですよね。 でも入力を補助してくれる機能があればかなり楽にコードを書き足したり編集したりできるようになります！ 本記事ではフリーソフトで高機能な「入力補助付きのHTMLエディタ」をご紹介します！ Aptana 商業用エディタのAdobeやDreamweaverにも負けないと言われるほどのフリーエディタです。 zen-coding、HTML5、CSS3にも対応しています。 ダークカラーを背景としたインターフェースで、非常に見やすいです。 海外で作られているエディタですが、日本語化するためのプラグインも用意されています。 詳しくは以下の記事をご覧ください。 studio-fun.net – Aptana Studio 3 Betaを日本語化して使う ⇒ Aptana Crescent E
PhpStorm: PHP IDE and Code Editor from JetBrains
Major frameworks support PhpStorm is perfect for working with Symfony, Laravel, Drupal, WordPress, Zend Framework, Magento, Joomla!, CakePHP, Yii, and other frameworks. All the PHP tools The editor actually 'gets' your code and deeply understands its structure, supporting all the PHP language features for modern and legacy projects. It provides the best code completion, refactorings, on-the-fly er
オープンソースのエディタ「Visual Studio Code 1.7」登場。ショートカットリファレンス、Goフォーマッター、Sublimeキーマップ、Atomキーマップ拡張など
オープンソースのエディタ「Visual Studio Code 1.7」登場。ショートカットリファレンス、Goフォーマッター、Sublimeキーマップ、Atomキーマップ拡張など マイクロソフトはオープンソースで開発しているコーディングに最適化したエディタ「Visual Studio Code」の最新版となる「Visual Studio Code 1.7」のリリースを発表しました（リリース直後にバグが見つかり、現在では1.7.1がリリースされています）。 Visual Studio Code 1.7での主な変更点の1つとして、上記画面のように複数のエディタ画面を縦方向に並べて表示できるようになりました。 またヘルプから「Keyboard Shortcuts Reference」メニューを選択すると、Webブラウザでショートカットキーのリファレンスが表示されるようになりました。これはPDF形
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Viola
コードエディター「Atom」が統合開発環境に ～GitHub、「Atom IDE」を発表／「Git」統合を改善した「Atom 1.20」正式版もリリース
