ブラウザ上だけでプログラミングができちゃうWEBサービスまとめ10選

こんにちは！侍エンジニア塾ブログ編集部です。

ブラウザ上だけでプログラミングをサクッと勉強したい！

これからプログラミング学習をしていこうとしている方は、こんな風に思っていると思います。

プログラミングを学習するためには、本来、「プログラミング学習ができるような環境をPCの中で整える」必要があります。
これを「環境構築」といったりするのですが、これが意外と大変ですし、正直面倒ですよね。

そこで今回は、面倒な環境構築を抜きにしてサクッと「ブラウザ上だけで」プログラミングを学ぶことができちゃうサービスを厳選して10個ご紹介します。

実はもっとたくさん種類があるのですが、目的別で、なおかつ使いやすいものを厳選したので、ブラウザ上でのプログラミングにはこれらだけで十分です。

ぜひ参考にしてみてください！

ブラウザ上でWEBプログラミングをしたいなら

1.Cloud9

Cloud9

Cloud9（クラウドナイン）は、アプリケーションの開発やデータベースなどをクラウド環境で利用できるサービスです。
統合開発環境（IDE）と呼ばれるもので、様々な便利機能が集約されています。

簡単に説明すると「WEBアプリケーション開発が出来る状態を、超簡単に用意できてしまうツール」です。

ブラウザ上でプログラミングを学ぶだけでなく、開発までこれだけでできてしまう優れものです。

詳しい使い方などに関してはこちらからどうぞ

プログラミング開発環境を簡単設定！Cloud9の使い方と便利機能

http://www.sejuku.net/blog/385

「よしっ！プログラミングを勉強しよう！」と思い立っても、まずは「プログラミングを使える環境」を作らなければいけません。その事前準備を、「開発環境の設定」や「環境構築」と言います。プログラミング初心者の最初の難関になるのが、この「事前準備」ではない...

扱える言語

HTML
CSS
JavaScript
Ruby
PHP
MySQL

その他

2.Ideone

Ideone

50種類以上のとにかくたくさんの言語を実行することができるideone。

ユーザ登録しなくても実行できますが、登録をするとコードの公開範囲の設定等いろいろな機能が使えるようになります。

コードを実行すると個別URLが生成されるので、それをシェアすることもできたりします。

扱える言語

C
PHP
Python
Java
JavaScript
Go

その他

3.paiza.io

paiza.io

ITエンジニア向けの無料オンラインプログラミング実行環境サービスとしてスタートしたpaiza.IO。

もちろん日本語版で作られており、英語版に切り替えることも可能です。

paiza.IOは、24この言語に対応していますので、幅広く活用することが可能です。

複数ファイルの実行やファイルアップをすることができ、外部ネットワークへの接続も可能なため、外部APIへの接続や、スクレイピングなども可能となっています。

扱える言語

C
Java
Ruby
Perl
Scala
Objective-C

その他

4.CodePen

CodePen

フロントエンドの動作確認に最適です。

ライブプレビューができるので、いちいち保存したり実行ボタンをクリックして動作確認する必要はありません。

作成したコードをブログへ埋め込んだり、シェアするのも簡単です。

扱える言語

HTML
CSS
JavaScript
jQuery

その他

5.jsdo.it

jsdo.it

こちらもフロントエンド用動作テストサイトです。

無料ユーザーでもコードの非公開設定をすることができます。

国産サービスなので日本語で使えるのが嬉しいですね。
ヘルプページやライブラリ一覧なども充実しています。

扱える言語

JavaScript
CSS
jQuery

その他

6.codepad

codepad

プログラミングのテストができるサイトです。
対応言語はC、C++、D、Haskell、Lua、OCaml、PHP、Perl、Plain Text、Python、Ruby、Scheme、Tclとなっています。

サイトの作りもとってもシンプルになっていて、実行するとURLが生成されるようになっています。

扱える言語

C
PHP
Perl
Ruby

その他

ブラウザ上でSwiftを扱いたいなら

7.RunSwift

RunSwift

iPhoneのアプリ制作などに使われる言語として「Swift」の人気が高まっています。

「RunSwift」は、文字通りSwiftでコードを入力して、すぐに実行結果を確認することが出来るサービスとなっています。

サイトを訪れると、すでにコードが入力できる状態となっており、下部の「Compile」ボタンをクリックすることで実行される仕組みです。

また、エディタだけの提供ではなく、上部メニューの「Learn」タブから「オンライン学習コース」を受けることも可能です。

Swiftの基礎から、例文を使った使用方法などを一通り学べる内容になっているので、初心者にも最適でしょう。

Swiftの学習方法に関してはこちら

Swiftの学習を無駄なく効率的に！サイトや本など5つの方法まとめ

http://www.sejuku.net/blog/5443

こんにちは！兵政和です！Swiftを学習していきたいけど、なにから手をつけていけばいいのか・・・なるべくコストをかけずに、効率的に学べたらな・・・そんなことを思っていませんか？確かにSwiftを学習するにあたって、参考サイトや書籍などが多すぎて正直どうやっ...

ブラウザ上でビジュアルプログラミングを学びたいなら

8.Flower

Flower

プログラミングの骨組みを、視覚的に分かりやすく勉強する方法として「ビジュアル・プログラミング」を使うと便利です。

現在では、「Scratch」などが有名ですが、Flowerはデータの流れを具体的に見ることができるようになっているのが特徴です。

サイト上で、実際にブロックを組み立てながらプログラミング出来るようになっているので、ぜひ挑戦してみてください。

ビジュアルプログラミング学習に関してはこちらも

【完全無料】子供向けプログラミング学習サイト厳選3選

http://www.sejuku.net/blog/6749

こんにちは！女性ライターの灰猫です。突然ですがあなたは、子供にプログラミングを子供に学ばせたい！と思ったことはありませんか？そんな時は、お金をかけずに無料でできる「プログラミング学習サービス」を使うのがおすすめです。海外を中心に子供向けの学習サー...

ブラウザ上でGitの基礎を学習したいなら

9.Explain Git width D3

Explain Git width D3

Gitコマンドをブラウザ上から入力して、基本的な概念まで学習できるサービスとなっています。

使い方としては、トップページから、「Free Playground」のリンクをクリックします。
すると、Gitコマンドが入力できるようになります。

しかも、コマンドを入力すると、右側にアニメーションしながら現在の状態を視覚化してくれる機能が搭載されているのです。

これで、ちょっと分かりにくいGitの概念を理解しやすくなっているのが特徴です。

Git学習に関してはこちらからもどうぞ。

【絶対理解できる】Git入門者必見のおすすめ学習法全まとめ

http://www.sejuku.net/blog/6043

こんにちは！侍エンジニア塾ブログ編集部の兵政和です。これからGitを使っていきたいとは思っているけど、Gitの入門ってどうやってやればいいの？そういった不安を抱えている人は多いと思います。参考書籍や記事なども数が多くて、どれをどのようにやれば効果的なの...

ブラウザ上でマークダウンを学習したいなら

10.StackEdit

StackEdit

マークダウン記法を学習するのに便利なサービスですが、他にもWordPressやGitHub、独自サーバーなどへ書き出すことが出来るようになっているのが非常に便利な点です。

これにより、マークダウンでサクッと文章を書いておき、そのままブログなどへ書き出すことも簡単です。

まとめ

いかがでしたか？
ブラウザ上でサクッとプログラミング学習ができるサービスを厳選して10個ご紹介しました。

プログラミング学習には便利なサービスやツールの存在が欠かせません。

これらを上手く使えるかどうかで、学習効率や、挫折率なども変わってきます。

なので、ぜひ今回の内容をプログラミング学習に活かして欲しいと思います。

33歳、未経験だった僕がフリーエンジニアになれた理由

現在フリーでWEBエンジニアをやられている濱口直行さん。33歳で、プログラミングを学び始め、約半年という短い期間で独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。