paiza開発日誌

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

Node.js入門:初心者でも10分でWebサービスを作れる!Node.jsとPaizaCloudの使い方

f:id:paiza:20180607135435p:plain
(English article is here)

f:id:paiza:20151217152725j:plainこんにちは、吉岡(@)です。

JavaScriptは、現在広く使われているプログラミング言語の一つです。

JavaScriptはブラウザ上でプログラムを動かすために作られた言語で、ネットワーク処理や非同期処理に強いといった特徴があります。

そのJavaScriptを、ブラウザの枠を飛び出して、サーバサイドでも使えるようにしたのがNode.jsです。Node.jsをサーバサイドで動作させることで、柔軟で効率よく、リアルタイム処理にも強いWebサービスが作れます。

通常Webサービスを作る場合は、ブラウザで動作するJavaScriptとサーバサイドで動作する別の言語(Ruby on Railsなど)を使う必要がありますが、複数の言語を行ったり来たりすると開発効率も下がってしまいますよね。

そんなときもNode.jsを使えば、ブラウザ側もサーバ側もJavaScriptひとつで記述できます。言語の切り替えがなくなり、サーバとブラウザで同じコードやライブラリを利用できるので、開発効率が上がります。特に、開発初期やプロトタイピングなど試行錯誤が必要で、ブラウザ側とサーバ側ではっきり役割分断することが難しい場合には大きな効果を発揮します。

実際、Node.jsは人気が高く、質問サイト「StackOverflow」でも、Node.jsは開発者に最も使われているツールとしてあげられています。

f:id:paiza:20180607135653p:plain (From Developer Survey Results 2018)

ただ、いざ開発で使おうとすると、Node.jsやデータベースを動かすための環境構築やデプロイなどが必要になります。これが意外と厄介で、手順通りにインストールしたつもりでも、OSやバージョン、他のソフトウェアなど、さまざまな原因でエラーが出たりして失敗することもあります。

そこで、今回はブラウザだけでNode.jsを使ったWeb開発ができるPaizaCloud Cloud IDEを使ってみます。

PaizaCloudは自由度が高く、さまざまなフレームワークや言語を使ったWeb開発が、初心者でも簡単にできます。PaizaCloudを使えば、最短でNode.jsを使ったWeb開発が始められます。

開発環境がクラウド上で動作しているので、自分でサーバなどを用意しなくても、作ったウェブサービスはその場で公開することもできます!

まずは簡単なプログラムからはじめて、ToDoリスト(タスクリスト)を編集するサービスをNode.jsで作ってみましょう。現時点で最新の安定板Node.js 8.xでの手順を紹介します。手順に沿って進めれば、10分程度で作れるかと思いますのでぜひ挑戦してみてください。

PaizaCloud Cloud IDEを使う

それでは、始めていきましょう。

PaizaCloud Cloud IDEのサイトはこちらです。

https://paiza.cloud/

メールアドレスなどを入力して登録すると、登録確認メールが送られてきます。GitHubやGoogle(Gmail)ログインを利用すると、ボタン一つで登録することもできます。

サーバを作る

開発環境となるサーバを作りましょう。

f:id:paiza:20171213234155p:plain

「新規サーバ作成」ボタンを押して、サーバ作成画面を開きます。

今回はデータベースにMondoDBを利用しますので、MongoDBをクリックして「新規サーバ作成」ボタンを押します。

f:id:paiza:20180607135933p:plain

3秒程度で、Node.jsを使える開発環境がブラウザ上にできあがります。

プロジェクトの作成

それでは、Node.jsを使ってWebアプリケーションを作成してみましょう。

アプリケーション作成時には、"npm init"というコマンドを使います。

PaizaCloudでは、ブラウザ上でコマンドを入力するための「ターミナル」を使うことができます。

画面左側の、「ターミナル」のボタンをクリックします。

f:id:paiza:20171213234317p:plain

ターミナルが起動しますので、"npm init -y アプリケーション名"のようにコマンドを入れます。

"アプリケーション名"というのは作るアプリケーションの名前なので、"music-app"、"game-app" みたいな感じで、好きな名前にするといいですね。

ここでは、アプリケーション名は"myapp"としておきます。"npm init -y myapp"とコマンドを入れて、エンターキーを押します。

$ npm init -y myapp

f:id:paiza:20180607142828p:plain

画面左側のファイルファインダを見ると、package.jsonというファイルが作られています。 package.jsonは、アプリケーションが利用するライブラリを管理するNode.jsのアプリケーションに必要なファイルです。

f:id:paiza:20180607140318p:plain

Node.jsでWebサービスを作成する場合、通常ExpressというWebアプリケーションフレームワークを利用しますので、Expressパッケージをインストールしておきます。パッケージをインストールするには、"npm install パッケージ名 --save"というコマンドを使います。

$ npm install express --save

インストールすると、node_modulesというディレクトリが作成されます。 この中に、アプリケーションが利用するパッケージがインストールされます。

次に、Webアプリケーションのプログラムを作成します。まずは、"Hello Node.js!"と表示するアプリケーションを作成してみましょう。

ファイルを作成するには、PaizaCloudの画面左側の"新規ファイル"ボタンをクリックするか、ファイル管理ビューの右クリックメニューから"新規ファイル"を選択します。

f:id:paiza:20180607140405p:plain f:id:paiza:20180607140439p:plain

ファイル作成ダイアログが表示されますので、ファイル名に"server.js"と入れて、作成ボタンを押します。

f:id:paiza:20180607140526p:plain

ファイル"server.js"が作成されますので、以下のようにコードを書いていきましょう。

server.js:

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

app.get('/', (req, res) => {
  res.send('Hello Node.js!');
});

app.listen(3000, () => {
    console.log("My app listening on port 3000!");
});

f:id:paiza:20180607140657p:plain

編集したら、「保存」ボタンを押すか、「Command-S」または「Ctrl-S」で保存します。

このコードを見ていきましょう。1,2行目では、利用するExpressライブラリを読み込んでいます。 4行目の"app.get('/',..."では、トップページ、つまりURLのパス名が"/"の時の動作を関数で書いていきます。ここでは、"res.send()"関数を使って'Hello Node.js'という内容を表示しています。 8行目のapp.listen(3000, ...)でサーバを3000番ポートで起動します。

アプリケーションの起動

それでは作成したアプリケーションを実際に動かしてみましょう!

"node server.js"コマンドで、作成したプログラムを起動します。

$ node server.js

f:id:paiza:20180607141032p:plain

画面の左側に、"3000"と書かれたボタンが追加されました。

f:id:paiza:20180607141059p:plain

作成したアプリケーションは3000番ポートでサーバが起動します。PaizaCloudでは、この3000番ポートに対応したブラウザ起動ボタンを自動で追加しています。

ボタンをクリックすると、ブラウザ(PaizaCloudの中で動くブラウザ)が起動して、メッセージが表示されました!

f:id:paiza:20180607141152p:plain

なお、このサーバはHTTPで動作していますが、PaizaCloudではこれをHTTPSに変換しています。またサーバはlocalhostで動作していますが、PaizaCloudでは"https://localhost-サーバ名.paiza-user.cloud:ポート番号"というURLでlocalhostに接続できるようになっています。

データベースの起動

今度はこのアプリケーションで、データベースを使ってみましょう。 サーバ作成時に"MongoDB"をチェックしたので、すでにデータベースは起動していますが、もし起動していない場合は、以下のコマンドで起動しておきます。

$ sudo systemctl enable mongod
$ sudo systemctl start mongod

PaizaCloudでは、このようにroot権限でパッケージをインストールすることもできます。

ToDoリストの作成(サーバ)

それでは、ToDoリストを作成していきます。

まずは、サーバ側のプログラムを作成します。

ToDoリストでは、一覧表示、タスクの追加、タスクの削除の3つの操作を行います。 それぞれ、以下のようなルーティングを割り当てます。

メソッド パス名 操作
GET /todos タスク一覧表示
POST /todos タスク追加
DELETE /todos/{id} タスク削除

これらの操作を実装していきます。

まず、プログラムで利用するmongooseライブラリを追加します。

$ npm install mongoose --save

次に、server.jsファイルを開いて、以下のように書き換えます。

server.js:

const express  = require('express');
const app = express();
const mongoose = require('mongoose');
const bodyParser = require('body-parser');

app.use(express.static(__dirname + '/public'));
app.use(bodyParser.json());

mongoose.connect('mongodb://localhost/mydb');

const Todo = mongoose.model('Todo', {
    text : String
});

app.get('/api/todos', (req, res) => {
    Todo.find()
        .then((todos) => {
            res.json(todos);
        })
        .catch((err) => {
            res.send(err);
        })
});

app.post('/api/todos', (req, res) => {
    const todo = req.body;
    Todo.create({
            text : todo.text,
        })
        .then((todo) => {
            res.json(todo);
        })
        .catch((err) => {
            res.send(err);
        });
});

app.delete('/api/todos/:todo_id', (req, res) => {
    Todo.remove({
            _id : req.params.todo_id
        })
        .then((todo) => {
           res.send(todo); 
        })
        .catch((err) => {
            res.send(err);
        });
});

app.get('/', (req, res) => {
    res.sendfile('./public/index.html');
});

app.listen(3000, () => {
    console.log("My app listening on port 3000!");
});

コードを見ていきましょう。 1-4行目では、利用するライブラリを読み込んでいます。

6-7行目では"app.use()"でミドルウェアを設定しています。ミドルウェアを使えばNode.jsに機能を追加できます。ここでは、"public"ディレクトリのファイルを静的ファイルとして読み込むための"express.static(__dirname + '/public')"と HTTPリクエストでJSON形式を利用するための"bodyParser.json()"を利用しています。

9行目の"mongoose.connect('mongodb://localhost/mydb')"では、Mongooseというライブラリを利用してMongoDBと接続しています。MongooseはMongoDBをNode.jsから利用するためのライブラリです。

11行目では、以下のようにMongoDBのコレクション(テーブル)をモデルとして定義していきます。

const Todo = mongoose.model('Todo', {
    text : String
});"

MongoDBはスキーマのないデータベースですので、型を定義する必要はありませんが、Mongooseを利用することで型が利用でき、データベースの整合性を保ちやすくなります。 ここでは、"todo"コレクション(テーブル)と、その中の文字列型の"text"フィールド(カラム)を定義しています。

その後、"app.get", "app.post", "app.delete"関数で、ルーティングを設定しています。Todo.find()、Todo.create()、Todo.remove()関数を使って、データベースのドキュメント(レコード)を検索、作成、追加します。これらの関数はPromiseとして利用できるので、成功したらthen()の関数が、失敗したらcatch()の関数が呼びだれます。ここでは成功した場合、res.send()で結果をJSON形式でレスポンスとして返しています。

そして、"app.get('/'..."ではトップページで"public/index.html"ファイルを返すようにしています。

ToDoリストの作成(HTML)

次に、ブラウザで表示するHTMLファイルを作成しましょう。

まず、静的ファイルを保存する"public"フォルダを作成します。 ファイル管理ビューのホームディレクトリ("/home/ubuntu")を右クリックして、「新規フォルダ」を選択し、"public"ディレクトリを作成します。

次に、"public"ディレクトリを右クリックして「新規ファイル」を選択し、"index.html"ファイルを作成します。

"public/index.html"ファイルが作成できましたので、以下のように記述します。

public/index.html:

<!doctype html>
<html>
<head>
    <title>Todo List</title>
    <link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="client.js"></script>
</head>
<body>
    <div class="container">
      <h1>Task List</h1>

      <div class="form-group">
          <input type="text" name="name" class="new-todo-text form-control" placeholder="task">
          <button type="submit" class="btn btn-default" onclick="createTodo()">Add</button>
      </div>

      <h2>Current Tasks</h2>
      <table class="table table-striped task-table">
          <thead>
              <th>Task</th><th>&nbsp;</th>
          </thead>

          <tbody class="todos">
              <tr class="todo template" style="display: none;">
                  <td>
                      <span class="text"></span>
                      <span class="id" style="display: none;"></span>
                  </td>
                  <td>
                      <button onclick="deleteTodo(this)">Delete</button>
                  </td>
              </tr>
          </tbody>
      </table>
    </div>
</body>
</html>

このHTMLファイルを見ていきましょう。ヘッダでは、Milligramという簡単に利用できるCSSフレームワークと、jQueryと、あとで作成するclient.jsファイルを読み込んでいます。

"Add ToDo"ボタンでは、クリックされたときに"createTodo()"関数を呼び出します。

ToDo一覧表示はテーブルで行います。<tr>タグの中は繰り返し表示する内容で、client.jsで処理します。"Delete"ボタンが押されたら、削除動作を行う"deleteTodo()"関数を呼び出します。

ToDoリストの作成(クライアントJavaScript)

次に、ブラウザで動作するクライアントサイドJavaScriptのコードを書いていきましょう。

PaizaCloudで"public"フォルダを右クリックし、"client.js"ファイルを作成します。

作成した"client.js"ファイルに以下のように記述します。

public/client.js:

function render(todos){
    $(".todos").children().not(".template").remove();
    const template = $(".todos").children(".template");

    todos.forEach((todo) => {
        const node = template.clone(true).show().removeClass("template")

        node.find(".text").text(todo.text);
        node.find(".id").text(todo._id);
        $(".todos").append(node);
    });
}
function getTodos(){
    fetch('/api/todos')
        .then((data) => data.json())
        .then((json) => {
            const todos = json;
            render(todos);
        });
}

function createTodo(){
    const text = $(".new-todo-text").val();
    fetch('/api/todos', {
            method:"POST",
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({text: text}),
        })
        .then(() => {
            getTodos();
        });
}

function deleteTodo(el){
    const id = $(el).closest(".todo").find(".id").text();
    fetch(`/api/todos/${id}`, {
            method: 'DELETE'
        })
        .then(() => {
            getTodos();
        });
}

$(getTodos);

コードを見ていきましょう。 render()関数では、引数で指定されたToDo一覧を表示します。一覧表示は、"template"クラスの部分をコピーし、"text", "id"クラスのテキストを置き換えて行います。

getTodos()関数では、"GET /api/todos"リクエストでサーバからToDo一覧を取得し、render()で一覧表示を行います。

createTodo()関数では、"new-todo-text"クラスのテキスト入力フォームの値を取得し、"POST /api/todos"リクエストを送信してToDoを追加します。

deleteTodo()関数では、"DELETE /api/todos/${id}"リクエストを送信し、指定IDのToDoを削除します。

ページ取得時にToDo一覧を表示できるように、$(getTodos)で、"getTodos()"関数を呼び出します。

動作確認

プログラムは以上です。実際に動かしてみましょう。

実行中の"node server.js"コマンドをCtrl-Cキーで終了し、再起動します。

$ node server.js

このように、コード変更後の再起動が必要になりますが、以下のようにnodemonを利用すれば 自動で再起動するようになります。

$ npm install nodemon --save
$ nodemon server.js

ブラウザアイコン(3000)をクリックして、PaizaCloud内のブラウザを起動します。

最初はタスクはないのですが、"Task List"ページが表示されています。

タスクの追加や削除もやってみましょう。

f:id:paiza:20180607142401p:plain

動きましたね!これでNode.jsで作ったタスクリストの完成です!

なお、PaizaCloudの無料プランでは、一定時間が経つとサーバは停止します。継続的に動かしたい場合は、ベーシックプランへアップデートしてください。

詳しくはこちら https://paiza.cloud

まとめ

というわけで、PaizaCloudを使って、開発環境を構築することなく、ブラウザだけでNode.jsのWebアプリケーションを作ってみました。

PaizaCloudを使えばすぐに作れますし、そのまま公開もできますので、みなさんもぜひ試してみてください!

(何かサービスができたらpaiza( @paiza_official )まで教えてくれるとうれしいです!)


PaizaCloud」は、環境構築に悩まされることなく、ブラウザだけで簡単にウェブサービスやサーバアプリケーションの開発や公開ができます。 https://paiza.cloud


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

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

paizaのスキルチェック

誰でも超ハイクオリティなデータの可視化が実現できるWebサービス「Flourish」を使ってみた!

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

今回は、誰でも簡単にクオリティの高いデータの可視化(データビジュアライゼーション)を実現することができる無料サービスのご紹介です!

アニメーションも自動生成されるうえ、ネット上に公開したり自分のブログやサイトに挿入することも簡単にできます。

また、上級者向けにJavaScriptを活用した独自テンプレートの作成機能が用意されているなど、自由度の高いサービスなのでご興味ある方はぜひトライしてみてください!

Flourish

f:id:paiza:20180606144239j:plain

■「Flourish」の使い方

それでは、実際に「Flourish」を触りながら、どのように始めたらいいのかを見ていきましょう!


まずは、サイトのトップページにある「Sign up」から無料のユーザー登録をしておきます。

f:id:paiza:20180606144258j:plain


メールアドレス、パスワード、ユーザー名を入力すればすぐに登録は完了します!

f:id:paiza:20180606144318j:plain


すると、自分専用の「マイページ」が作られます!

f:id:paiza:20180606144330j:plain

このページで可視化するためのデータを作成したり、各種設定などができます。

また、過去に作成したデータはすべて履歴として閲覧できるようになっており、本記事の後半でご紹介する「ストーリー」の作成もできますよ。

■データを可視化(ビジュアライゼーション)してみよう!

「Flourish」では、すぐにでもデータを可視化することが出来るように多彩なテンプレートが用意されています。

いずれもクオリティの高いモノばかりなので、実際に1つ試しながら詳細を見ていきましょう!


まずは、「マイページ」から新規データを作成するためのボタンをクリックします。

f:id:paiza:20180606144352j:plain


すると、テンプレートの一覧が表示されるので好きなモノをクリックしてみましょう。

f:id:paiza:20180606144416j:plain

今回は3Dで描かれた「地球」を使ったマッピングが可能な「Connections globe」というテンプレートを選択しました。


すると、専用の「編集エディタ」が表示されます!

f:id:paiza:20180606144431j:plain

プレビューが表示されるので、まずはどのような可視化ができるテンプレートなのかいじってみるのがオススメです。


画面右側には、デザインやレイアウトの調整などが行えるメニューが並んでいます。

f:id:paiza:20180606144448j:plain

アニメーションのタイミングやテキストの挿入など、細かいパラメータがいくつも用意されているので簡単にカスタマイズを行えます。


さらに「Data」タブに切り替えるとスプレッドシートのようなデータ編集モードが表示されます。

f:id:paiza:20180606144502j:plain

ここで、自分の独自データを入力しても良いですし、CSVやExcelファイルなどをインポートすることも可能です!


実際にテンプレートを操作するとこんな感じになります!

f:id:paiza:20180606144516g:plain

このテンプレートの場合、「出発地」と「到着地」を決めるだけでグラフィカルな描画を行えます。

なので、例えば日本を訪れるインバウンドマーケティングのデータを可視化したり、輸入・輸出の貿易データなどを分析するのに便利だと思います。


ちなみに、画面右上のボタンをクリックするだけで可視化データを公開することが可能です!

f:id:paiza:20180606144730j:plain

同時に「埋め込みタグ」も生成されるので、自分のブログやサイトに挿入するのも簡単ですよ。

■多彩な用途に使えるテンプレートたち!

「Flourish」には、さまざまな目的に応じて素早く可視化できるテンプレートが用意されているので、ほんの一部ですがいくつかピックアップしてご紹介しておきます!

【 Time map 】

f:id:paiza:20180606144806j:plain
このテンプレートは、時間の経過と共に変化するイベントなどを可視化するのに最適です。

地図にマッピングすることもできるので、例えばWebサイトのトラフィックデータを可視化するなど、タイムスタンプを持つデータを分かりやすく伝えるのに便利でしょう。


実際のアニメーションは以下のようになります。

f:id:paiza:20180606144832g:plain

週別、月別でも表示を切り替えることが可能で、独自のカテゴリを作成して表示することもできます。

【 Horserace chart 】

f:id:paiza:20180606144913j:plain

このテンプレートは、時間経過によって順位・スコアなどが変化するデータを可視化するのに最適です。


まずは、実際に使っている様子を以下のGIFで確認してみてください!

f:id:paiza:20180606144930g:plain

このように、左から右へ時間経過による順位の変化をアニメーションで表示することが可能です。

例えば、選挙のデータやサッカーなどのスポーツにおける試合データを可視化するのに便利でしょう。

もちろん、アニメーションのタイミングやエフェクトなど細かい調整も可能です。

【 Network graph 】

f:id:paiza:20180606145114j:plain

このテンプレートは、何らかの相関関係を表現するデータを可視化するのに最適です。

あるモノについて関連のある集まりだけを表示したり、そこから紐付いているネットワークがどのように形成されているのかを直感的に理解できるようになっています。


実際に使った様子は以下のとおりです。

f:id:paiza:20180606145200g:plain

例えば、無数に存在する商品群をグルーピングしたり、関連企業や人物を分析するのに役立つでしょう。

【 charts 】

f:id:paiza:20180606145256j:plain

このテンプレートは、一般的なグラフやチャートを生成するのに役立ちます。

棒グラフ、円グラフ、折れ線グラフ…など、データを分析するのによく使われるチャートを豊富に揃えています。

カラーリング、数値データ、軸の編集、デザインなど細かいカスタマイズの自由度も高いのが特徴です。


実際のアニメーションは以下のとおりです!

f:id:paiza:20180606145319g:plain

他にも、さまざまな用途に最適化されたテンプレートが用意されているので、興味のあるモノが見つかったらぜひ試してみましょう!

■可視化データを「スライド資料」に変換する!

「Flourish」の大きな特徴の1つとして、プレゼンなどで活用できる「スライド資料」の作成機能があります。

これは、自分で作成した可視化データをそのままスライドの資料に変換してくれる「ストーリー」という機能で、短時間でユニークな資料作りができるのでご紹介しておきます!


作り方は簡単で、マイページから「Create a story」ボタンをクリックします。

f:id:paiza:20180606145359j:plain


すると、スライド資料の作成画面になるので「Choose a visualisation」と書かれたボタンをクリックしましょう!

f:id:paiza:20180606145410j:plain


過去に自分が作成した「可視化データ」の一覧が表示されるので、スライド資料に変換したいデータを選びます。

f:id:paiza:20180606145421j:plain


変換されたデータには、好きなようにテキストを挿入することも可能です!

f:id:paiza:20180606145446j:plain


このように、どんどんデータを変換していくだけでスライドが追加されていくわけです。

f:id:paiza:20180606145500j:plain


また、一般的なスライド資料のようにテキスト・画像・動画などで構成することも可能です!

f:id:paiza:20180606145512j:plain

このように、「Flourish」だけでクオリティの高い可視化データを作成し、それを発表するためのスライド資料の生成まですべて完結できるのは大きな魅力と言えるでしょう。


ちなみに、気に入ったテンプレートが存在しない場合はJavaScriptでオリジナルのテンプレートを作成できるライブラリも無料で提供されています。

これにより、完全な独自テンプレートを作成できる環境が入手できるので、活用次第であらゆるデータを可視化することができるでしょう!

JavaScript入門編は全編無料!動画で学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、JavaScript入門編はもちろんPython、Java、C言語、C#、PHP、Ruby、SQL、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

JavaScript入門編」「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

■まとめ

今回は、さまざまなデータを簡単に可視化することができる「Flourish」についてご紹介しました!

非常に多機能なサービスなので、使い込むほどに細かいカスタマイズが出来ることを実感できると思います。

基本的にGUIで誰でも利用できるサービスですが、エンジニアの方であればプログラミングによるビジュアライゼーションも可能なので便利です。

ぜひ、みなさんも手持ちのデータを素早く可視化して公開してみてはいかがでしょうか。



 

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

詳しくはこちら

paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

paizaのスキルチェック

初心者でもゲーム感覚でプログラミング練習問題を解きまくれるサイト6選

f:id:paiza:20180606133155j:plain
Photo by Paris Buttfield-Addison
f:id:paiza:20140916135428p:plainこんにちは。谷口です。

ITエンジニアやプログラミングを勉強中の皆さんは、プログラミング問題を解くのはお好きですか?

プログラミングが好きな方の中には

  • 業務とは直接関係ないけどプログラミング問題をもっと解きたい!
  • プログラミング初心者で勉強中だから、練習問題をたくさん解きたい!

という方も多いかと思います。

プログラミング入門者にとって、練習問題を解きまくるのは非常によい勉強方法です。

そこで今回は、プログラミングの勉強に使える、練習問題をたくさん解けるサイトを6件ご紹介いたします。


【目次】

■プログラミングの練習問題をたくさん解けるサイト

Codecademy

f:id:paiza:20150203192239p:plain
Codecademyは、問題を解きながら実際にWebサイトを作ったりする実践的で本格的なコースで学習をすることができます。JavaScript、HTML/CSS、Ruby、Python、PHPなど多数の言語が学べます。

サイト内は一部のみ日本語対応していますが、ほとんどは英語のみの表示となっています。

CodinGame

f:id:paiza:20151214182233p:plain
CodinGameは対応言語が大変多く、ビジュアルも美しいゲームで、多数の言語に対応しています。

f:id:paiza:20151214182528p:plain
シューティングやアクション、パズル等いろいろなゲームがあり、レベルもトレーニングコースから応用コースまであるので、初心者から中・上級者まで楽しく遊びながらたくさんの問題を解けます。

CodingBat

f:id:paiza:20150902150700p:plain
CodingBatでは、JavaとPythonの問題をオンラインで練習することができます。英語にしか対応していませんが、その場で回答コードを書けば結果を判定してくれますので、とにかくたくさん問題を解いて練習がしたい人にはぴったりだと思います。

CheckiO/Empire of Code

f:id:paiza:20180606133650j:plain
CheckiOとEmpire of Codeは、JavaScriptかPythonでプログラミング問題を解きながら進めていくゲームです。問題は段階的に難しくなっていくので、初心者でも始めやすいかと思います。

Elevator Saga

f:id:paiza:20160530175817p:plain
ちょっと変わり種ですが、Elevator Sagaは、エレベーターのアルゴリズムをJavaScriptで書くゲームです。

何秒間のうちに何人を運ぶなどといった条件がステージごとに決まっているので、クリアを目指してコードを追記・修正したりしながら、エレベーターの動きを制御します。

実際に画面に表示されたエレベーターの動きで実行結果がわかるので、シンプルですが意外にハマります。

paizaのスキルチェック問題


paizaでは、Ruby、Python、JavaScript、Java、PHP、C、C++、C#など多数の主要言語に対応したスキルチェック問題を公開しています。

プログラミング問題を解いた結果によりS・A・B・C・D・Eの6段階で自分のスキルのランクが分かります。問題はレベルごとに分かれており、初心者から上級者の方まで挑戦していただけますので、「自分のプログラミングスキルを客観的に知りたい」「とにかくたくさん問題が解きたい」という方はぜひチャレンジしてみてください。

paizaのスキルチェック問題では、本日からもうすぐ累計100万受験突破記念キャンペーンを開始しました。

スキルチェック問題を解くと、100万人目ジャスト賞・ニアピン賞、もしくはチャレンジ賞として抽選でAmazonギフト券が当たります!

「まだ解いていないスキルチェック問題がある!」という方は、ぜひこの機会に挑戦してみてください!

100万受験突破記念キャンペーンについて詳しくはこちら

■まとめ

プログラミング問題を解くことは勉強になりますし、何より自分のレベルに合ったプログラミング問題が解けるとプログラミングの楽しさを実感することができると思います。

問題が公開されているサイトはたくさんありますので、ぜひプログラミング問題に挑戦して、スキルアップにつなげていただければと思います。



 

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

詳しくはこちら

paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

paizaのスキルチェック