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

eyecatch_7206

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

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

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

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

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

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

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

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

1.Cloud9

スクリーンショット 2016-06-30 17.05.59

Cloud9

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

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

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

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

扱える言語

  • HTML
  • CSS
  • JavaScript
  • Ruby
  • PHP
  • MySQL

その他

2.Ideone

スクリーンショット 2016-06-30 17.12.49

Ideone

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

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

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

扱える言語

  • C
  • PHP
  • Python
  • Java
  • JavaScript
  • Go

その他

3.paiza.io

スクリーンショット 2016-06-30 17.18.43

paiza.io

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

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

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

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

扱える言語

  • C
  • Java
  • Ruby
  • Perl
  • Scala
  • Objective-C

その他

4.CodePen

スクリーンショット 2016-06-30 17.24.03

CodePen

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

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

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

扱える言語

  • HTML
  • CSS
  • JavaScript
  • jQuery

その他

5.jsdo.it

スクリーンショット 2016-06-30 17.29.43

jsdo.it

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

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

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

扱える言語

  • JavaScript
  • CSS
  • jQuery

その他

6.codepad

スクリーンショット 2016-06-30 17.27.24

codepad

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

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

扱える言語

  • C
  • PHP
  • Perl
  • Ruby

その他

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

7.RunSwift

スクリーンショット 2016-06-30 16.37.35

RunSwift

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

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

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

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

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

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

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

8.Flower

スクリーンショット 2016-06-30 16.41.33

Flower

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

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

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

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

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

9.Explain Git width D3

スクリーンショット_2016-06-30_16_44_20

Explain Git width D3

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

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

スクリーンショット_2016-06-30_16_48_23

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

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

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

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

10.StackEdit

スクリーンショット 2016-06-30 16.54.21

StackEdit

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

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

まとめ

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

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

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

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


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

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


自分にプログラミングなんて・・・と思っていませんか?

今後10年間で今ある職業の『77%』はなくなると言われています。

人工知能や機械学習を筆頭にVR、AR、ドローンなどの最先端技術の発達はこれからのあなたの働き方に間違いなく影響を与えるでしょう。

将来を見据えてプログラミングができるようになってエンジニアになりたい、自分だけにしかできないクリエイティブな仕事がしたい、、、とお考えの方も少なくないでしょう。

と、同時に「難しそう、、自分にはできないだろう、、、」と諦めている方も多いのではないでしょうか。

弊社マンツーマンレッスンは、お一人お一人に専属のインストラクターがつくので、通常のスクールでは難しい、オリジナルアプリ開発や、フリーランスとしての仕事獲得まで支援しています。

まずは『無料体験レッスン』で弊社コンサルタントと一緒にあなた専用の学習カリキュラムを考えてみてはいかがでしょうか?

詳しくは下の画像をクリックしてください。

cta_mtm2

学習者インタビュー

23歳、早稲田中退生が3ヶ月でフリーランスエンジニアになるまで
32歳ベンチャー企業元役員が起業してプログラミングを学んだ話
元ディスクユニオン店員が33歳からプログラミングを学びエンジニアになるまで
ヨガスタジオのマネージャーだった私が3ヶ月でWeb制作をマスターするためにした”たった1つ”のこと
Uターン女子がRubyを学んで理想のライフスタイルを手に入れた話
新卒、文系出身エンジニアが語る、経験0からプログラミングができるようになった理由

プログラミング学習者必見

専属講師に質問し放題、レッスンし放題!最短1ヶ月でフリーランスエンジニア
プログラミング学習カリキュラム無料公開中
Ruby学習カリキュラム無料公開中
Python学習カリキュラム無料公開中
 1記事最大10,000円!テック系ライターさん大大大募集!!!
LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

侍エンジニア塾ブログ編集部

侍エンジニア塾ブログ編集部

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去100人以上のフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。
ホームページはこちら
ツイッターはこちら
フェイスブックはこちら