paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

JavaScript開発はこれ1つでOK!超お手軽にWebアプリを作れる全部入りコードエディタ「Gomix」の使い方大公開!

f:id:paiza:20170312211945j:plain
どうも、まさとらん(@0310lan)です。

今回は、JavaScriptでWeb開発をされている方や、これから勉強しようという方も含めてとても便利に使える無料オンラインエディタのご紹介です!

バックエンドは「Node.js」でプログラミングして、フロントエンドは「HTML / CSS / JavaScript」で開発し、そのままホスティングもしてくれるので手軽に公開することも可能なスグレモノですよ。

Gomix

f:id:paiza:20170312212054j:plain
以前は「HyperDev」という名称でサービスが公開されていましたが、現在は「Gomix」というサービス名に変更されており、今も活発にバージョンアップが続けられています。

■基本的な使い方!

それでは、実際に「Gomix」を使いながらどのようなサービスなのかを見ていきましょう!

まずは、ブラウザから「https://gomix.com」にアクセスすると、いきなりコードエディタが起動して表示されます。
f:id:paiza:20170312212130j:plain
(初回のみ「コミュニティページ」に飛びます…)


Gomix」は、「登録」などをせずにそのままでも利用可能です。

ただし、無料のユーザー登録をしておけば「プロジェクトの保存」や「書き出し」などができて便利なので、サクッと済ませておきましょう!


登録は簡単で、「Facebook」か「Github」を連携するだけで完了します。
f:id:paiza:20170312212209j:plain
オススメは「Github」との連携です。

後述しますが、「Gomix」で作ったプロジェクトをそのままGithubリポジトリに書き出すことも可能です。(インポートも可)


また、ユーザー登録をすることでエディタの「テーマカラー(黒色)」も変更できます。
f:id:paiza:20170312212218j:plain


画面左上の「プロジェクト名」をクリックすると表示されるオプションから、さまざまな設定もできます!
f:id:paiza:20170312212228j:plain
「プロジェクト名」は好きな名称に変更でき、概要も合わせて記述できます。(プロジェクト名は、公開用のURLとしても利用されます)

また、複数のプロジェクトを保存して一覧を確認したり、新規プロジェクトを作成することも出来ます。


下段にある「Advanced Options」をクリックすると、さらに詳細なオプションが表示されます!
f:id:paiza:20170312212249j:plain
プロジェクトは初期状態だと「公開状態」になっているので、これを「①非公開」にしたり、自分のGitHubアカウントを使ってプロジェクトを「②インポート/エクスポート」することも可能です。

もちろんプロジェクト自体をパソコンに「③ダウンロード」することもできます。


ちなみに、GitHubへエクスポートする場合は…
【ユーザー名】/【リポジトリ名】
をフォームに入力して送信するようにします。


例えば、ユーザー名が「webhacck」で、リポジトリ名が「mysample」だとしたら、「webhacck/mysample」となります!
f:id:paiza:20170312212327j:plain
また、新規リポジトリの場合、1回以上のコミットが無いとうまく実行できないので、最初に「README.md」などを作ってから行うと良いでしょう。


さらに、「①share」ボタンをクリックして表示される「②URL」をシェアするだけで、複数人とコラボしながらプログラミングすることも可能!
f:id:paiza:20170312212334j:plain
ペアプログラミングなどにも有効活用できそうですね。


プロジェクトは、「Show」ボタンをクリックすることで、いつでも画面の状態を確認することが出来ます。
f:id:paiza:20170312212342j:plain
初期状態で「リアルタイムコーディング」が有効になっているので、コードをいじると画面の状態も随時反映されるようになっているので便利です。

■「Gomix」のプログラミングについて!

基本的な使い方を学んだところで、今度はプログラミングの方法について見ていきましょう!

簡単なサンプルデモとして、サーバーから画像リストを取得して表示するWebページを作りたいと思います。
f:id:paiza:20170312212359j:plain


まず最初に、「Gomix」は類似のエディタと違って、ファイル構造が「①バックエンド」と「②フロントエンド」の2種類に分かれていることを把握しておきましょう。
f:id:paiza:20170312212421j:plain
「バックエンド」のプログラミングとして、すでにNode.jsやexpressなどがインストールされているのが分かります。


また、「package.json」のファイルを選択して表示される「Add package」から、自分で好きなNode.js用パッケージを検索して追加することも簡単に出来ます!
f:id:paiza:20170312212448j:plain
もしパッケージの新バージョンがリリースされていれば、それも合わせて通知してくれるので便利です。

あとは、フレームワークの「express」を使って、どんどんサーバーサイドのプログラミングを書いていきましょう。


基本となる最小限のコードはこんな感じになるでしょう!

var express = require('express');
var app = express();




// publicフォルダを静的コンテンツとして利用
app.use(express.static('public'));




// トップページを「views」フォルダ内のindex.htmlに設定
app.get("/", function (request, response) {
    response.sendFile(__dirname + '/views/index.html');
});




// 「process.env.PORT」で[https://gomix.com:title=Gomix]のポート番号を取得して待ち受け
var listener = app.listen(process.env.PORT, function () {
    console.log('ポート番号 ' + listener.address().port + '番で待ち受け中…');
});

Gomix」のデフォルト状態だと、フロントエンドの静的コンテンツは「public」フォルダに収められているので、最初に「express.static(‘public’)」と指定しておきます。

「index.html」は「views」フォルダに収められているので、これをトップページとして表示する設定も行っておきましょう。


また、「Gomix」のポート番号はあらかじめ「process.env.PORT」という環境変数で取得できるようになっているのですが、他にも認証に必要な「APIキー」や「IDコード」などを外部に公開しないための「SECRET変数」も用意されています。
f:id:paiza:20170312212531j:plain
「.env」ファイルに好きな変数名で記述可能で、この内容は自分しか見れないようになっているわけですが、プログラムからアクセスするには「process.env.SECRET」のように書けばOKです!

これにより、さまざまなWeb APIと連携したサービスを開発したり、Firebaseのようなバックエンドサービスと連携してWebアプリを作っていくのも面白いでしょう。


さて、サーバー側に「画像データ」を保持する必要があるのですが、今回は簡単な配列を作って準備します。

// 画像のリストを返す
app.get("/imglist", function (request, response) {
  response.send(imgList);
});


// 画像URLリスト
var imgList = [
  'sample1.jpg',
  'sample2.jpg',
  'sample3.jpg',
        ・
        ・
        ・
]


画像ファイルなどは、「assets」フォルダにドラッグ&ドロップで保存することが可能です。
f:id:paiza:20170312212613j:plain
他にも、動画や音楽などWebページに必要なリソースはコチラに保存しておくと良いでしょう。


ここまで来たら、あとはフロントエンドのJavaScriptからサーバーの「画像リスト」を取得してWebに表示するだけです!

  // 「/imglist」にアクセスして画像リストを取得
  $.get('/imglist', function(imglist) {
    
    // 画像リストを参照して、すべての画像を表示する
    imglist.forEach(function(img) {


        $('<div class="column is-one-quarter"><img src="'+ img +'"></div>')
        .appendTo('#imgbox');


    });
    
  });


サンプルデモはコチラから確認できます!
【サンプルデモのリンク】

また、ソースコードは公開用の「Gomixエディタ」から閲覧可能です!
【サンプルデモのGomixエディタ】


今回のサンプルデモは、画像を表示するだけなのでフロントエンドだけでも同じモノが作れますが、「Gomix」の練習用としては最適かと思います。

また、今回作ったようなexpressでのミニコードを使って、バックエンドはそのままにしておいて「フロントエンド」だけをプログラミングするためのエディタとして活用しても良いでしょう。

■「Gomixコミュニティ」とは?

最後に、「コミュニティページ」について解説しておきたいと思います。


Gomix」はオンラインエディタなので、ブラウザからアクセスすればエディタが起動し、すぐにでもプログラミングを始められます。

しかし、類似サービスと違って「コミュニティ」がしっかりと作られているのが特徴で、ユーザーにとって有益な情報が簡単に得られるようになっているため、「Gomix」ってどんなサービスだろう?という時に初めて見るページとしては最適です!

【 Gomixコミュニティページ】
f:id:paiza:20170312212730j:plain
「コミュニティページ」では、プログラミングの学習で利用できる豊富なチュートリアルや、「Gomix」を使った開発事例としてさまざまな「サンプルデモ」が公開されています。


Webアプリの開発事例だけでなく、「フレームワークの基本」を学んだり「ゲーム」や「IoT」などの事例もたくさん用意されています。
f:id:paiza:20170312212740j:plain


気になった事例のプロジェクトをクリックすると、プレビューも確認できます!
f:id:paiza:20170312212751j:plain
「Show」ボタンをクリックすると、実際にWebアプリをブラウザで体験できるようになっているほか、「Gomix」を起動して実際のソースコードを閲覧することも可能です。

さらに、「Remix」ボタンをクリックすることで、自分のプロジェクトとしてカスタマイズすることもできるので便利です。


このような「コミュニティページ」があるおかげで、「Gomix」を初めて利用する人もすぐにプログラミングを楽しめるようになっており、学習教材も豊富にあるのでこれから勉強しようという人にも大きな魅力となっています。


また、「Gomix」をざっくりと解説した公式動画もあるので、ご興味ある方はぜひチェックしてみてください!

■まとめ

今回ご紹介した「Gomix」さえあれば、ReactやAngular2をはじめとするフレームワークを活用したWebアプリから、ゲーム、IoT、チャットボット…など、非常に多彩なプロジェクトを今すぐ開発することが可能になります。

また、使っていて分からない点があれば公式の「サポートフォーラム」を使って、活発な意見交換も行われているので安心です。

とにかく、無料でココまでいじれるエディタは珍しいので、ぜひみなさんも積極的にチャレンジしてみてください!

JavaScript・HTML/CSS講座も好評公開中「paizaラーニング


paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数用意しております。

もちろん今回の記事で使用したJavaScriptやHTMLなど、言語ごとに基礎を学べる入門講座も好評公開中です!

↓詳しくはこちら
paiza.jp

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza


プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編