こんにちは！侍エンジニア塾ブログ編集部です。
ブラウザ上だけでプログラミングをサクッと勉強したい！
これからプログラミング学習をしていこうとしている方は、こんな風に思っていると思います。
プログラミングを学習するためには、本来、「プログラミング学習ができるような環境をPCの中で整える」必要があります。
これを「環境構築」といったりするのですが、これが意外と大変ですし、正直面倒ですよね。
そこで今回は、面倒な環境構築を抜きにしてサクッと「ブラウザ上だけで」プログラミングを学ぶことができちゃうサービスを厳選して10個ご紹介します。
実はもっとたくさん種類があるのですが、目的別で、なおかつ使いやすいものを厳選したので、ブラウザ上でのプログラミングにはこれらだけで十分です。
ぜひ参考にしてみてください！
この記事の目次
ブラウザ上でWEBプログラミングをしたいなら
1.Cloud9
Cloud9（クラウドナイン）は、アプリケーションの開発やデータベースなどをクラウド環境で利用できるサービスです。
統合開発環境（IDE）と呼ばれるもので、様々な便利機能が集約されています。
簡単に説明すると「WEBアプリケーション開発が出来る状態を、超簡単に用意できてしまうツール」です。
ブラウザ上でプログラミングを学ぶだけでなく、開発までこれだけでできてしまう優れものです。
詳しい使い方などに関してはこちらからどうぞ
扱える言語
- HTML
- CSS
- JavaScript
- Ruby
- PHP
- MySQL
その他
2.Ideone
50種類以上のとにかくたくさんの言語を実行することができるideone。
ユーザ登録しなくても実行できますが、登録をするとコードの公開範囲の設定等いろいろな機能が使えるようになります。
コードを実行すると個別URLが生成されるので、それをシェアすることもできたりします。
扱える言語
- C
- PHP
- Python
- Java
- JavaScript
- Go
その他
3.paiza.io
ITエンジニア向けの無料オンラインプログラミング実行環境サービスとしてスタートしたpaiza.IO。
もちろん日本語版で作られており、英語版に切り替えることも可能です。
paiza.IOは、24この言語に対応していますので、幅広く活用することが可能です。
複数ファイルの実行やファイルアップをすることができ、外部ネットワークへの接続も可能なため、外部APIへの接続や、 スクレイピングなども可能となっています。
扱える言語
- C
- Java
- Ruby
- Perl
- Scala
- Objective-C
その他
4.CodePen
フロントエンドの動作確認に最適です。
ライブプレビューができるので、いちいち保存したり実行ボタンをクリックして動作確認する必要はありません。
作成したコードをブログへ埋め込んだり、シェアするのも簡単です。
扱える言語
- HTML
- CSS
- JavaScript
- jQuery
その他
5.jsdo.it
こちらもフロントエンド用動作テストサイトです。
無料ユーザーでもコードの非公開設定をすることができます。
国産サービスなので日本語で使えるのが嬉しいですね。
ヘルプページやライブラリ一覧なども充実しています。
扱える言語
- JavaScript
- CSS
- jQuery
その他
6.codepad
プログラミングのテストができるサイトです。
対応言語はC、C++、D、Haskell、Lua、OCaml、PHP、Perl、Plain Text、Python、Ruby、Scheme、Tclとなっています。
サイトの作りもとってもシンプルになっていて、実行するとURLが生成されるようになっています。
扱える言語
- C
- PHP
- Perl
- Ruby
その他
ブラウザ上でSwiftを扱いたいなら
7.RunSwift
iPhoneのアプリ制作などに使われる言語として「Swift」の人気が高まっています。
「RunSwift」は、文字通りSwiftでコードを入力して、すぐに実行結果を確認することが出来るサービスとなっています。
サイトを訪れると、すでにコードが入力できる状態となっており、下部の「Compile」ボタンをクリックすることで実行される仕組みです。
また、エディタだけの提供ではなく、上部メニューの「Learn」タブから「オンライン学習コース」を受けることも可能です。
Swiftの基礎から、例文を使った使用方法などを一通り学べる内容になっているので、初心者にも最適でしょう。
Swiftの学習方法に関してはこちら
ブラウザ上でビジュアルプログラミングを学びたいなら
8.Flower
プログラミングの骨組みを、視覚的に分かりやすく勉強する方法として「ビジュアル・プログラミング」を使うと便利です。
現在では、「Scratch」などが有名ですが、Flowerはデータの流れを具体的に見ることができるようになっているのが特徴です。
サイト上で、実際にブロックを組み立てながらプログラミング出来るようになっているので、ぜひ挑戦してみてください。
ビジュアルプログラミング学習に関してはこちらも
ブラウザ上でGitの基礎を学習したいなら
9.Explain Git width D3
Gitコマンドをブラウザ上から入力して、基本的な概念まで学習できるサービスとなっています。
使い方としては、トップページから、「Free Playground」のリンクをクリックします。
すると、Gitコマンドが入力できるようになります。
しかも、コマンドを入力すると、右側にアニメーションしながら現在の状態を視覚化してくれる機能が搭載されているのです。
これで、ちょっと分かりにくいGitの概念を理解しやすくなっているのが特徴です。
Git学習に関してはこちらからもどうぞ。
ブラウザ上でマークダウンを学習したいなら
10.StackEdit
マークダウン記法を学習するのに便利なサービスですが、他にもWordPressやGitHub、独自サーバーなどへ書き出すことが出来るようになっているのが非常に便利な点です。
これにより、マークダウンでサクッと文章を書いておき、そのままブログなどへ書き出すことも簡単です。
まとめ
いかがでしたか？
ブラウザ上でサクッとプログラミング学習ができるサービスを厳選して10個ご紹介しました。
プログラミング学習には便利なサービスやツールの存在が欠かせません。
これらを上手く使えるかどうかで、学習効率や、挫折率なども変わってきます。
なので、ぜひ今回の内容をプログラミング学習に活かして欲しいと思います。
33歳、未経験だった僕がフリーエンジニアになれた理由
現在フリーでWEBエンジニアをやられている濱口直行さん。33歳で、プログラミングを学び始め、約半年という短い期間で独立までされた学習ログを余すことなくインタビューさせていただきました。プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。
現役フリーランスエンジニアによる無料体験レッスン実施中！
もし、あなたが、
- 経験、年齢、学歴に不安がある
- 挫折しない学習方法が知りたい
- アプリ開発で困っている
- エンジニアの”生”の声が聞きたい！
- 仕事獲得の仕方がわからない
- エンジニアに転職したいが何をすればいいかわからない
など、プログラミング学習やキャリアのことでお困りであれば、まずは『無料体験レッスン』にお申し込み下さい。
あなたにとって、最適の解決策をご提案させていただきます。
詳しくは下の画像から詳しいサービス内容をご確認ください。
プログラミング学習者必見
専属講師に質問し放題、レッスンし放題、最短１ヶ月でフリーランスエンジニアプログラミング学習カリキュラム無料公開中
Ruby学習カリキュラム無料公開中
1記事最大11,000円！テックライター募集
