エンジニアの王になる！――「Code Avengers（コードアベンジャーズ）」の使い方（2）：「Learner（学習者）」としての利用方法：海外Webサービスのトリセツ（15）

海外Webサービスの使い方を「日本語で」分かりやすく説明するシリーズ、今日はオンライン開発学習サービス「Code Avengers（コードアベンジャーズ）」の利用方法を解説します。

» 2014年11月19日 18時00分公開

[Nextremer 下岡聡子，＠IT]

　オンライン開発学習サービスの第二弾「Code Avengers（コードアベンジャーズ）」。前回は「Learner（学習者）」「Teacher（教師）」「Parents（保護者）」という、それぞれの立場に適した学習コンテンツが用意されていることを紹介しました。

　今回は「学習者編」と題して、実際にプロジェクトを進めます。

Code Avengersのトップページ（クリックすると、大きなサイズの画像を表示します）

※読み方や発音はユーザーによって異なるため、一つの参考としてください。

まずログイン

　前回、登録したアカウントでCode Avengersにログインすると、プロフィールページが表示されます。ここでプロジェクトを選択してスタートします。カテゴリは「html+css」「JavaScript」、そして応用編「Cloud IDE」の3つです。

「html+css」のコンテンツ。レベル1～3のレッスン、各レベルに適したプロジェクトに分かれます。レベル2からは有料プランです。

「javascript」のコンテンツ。レベル1～3のレッスン、導入プロジェクト、および各レベルに適したプロジェクトに分かれます。こちらもレベル2からは有料プランとなります。

レベル1のレッスンに挑戦

　レベル1のレッスンおよびプロジェクトは、無料で受講できます。基礎を学ぶ「レッスン」から始めてもよし、いきなり実際のコーディングを行う「プロジェクト」からスタートしてもよし。気分によってスタート地点を選べます。

　レベル1のプロジェクトは、「Bday Invite（誕生日に招待）」と「Player Profile（選手プロフィール）」の2つです。あなたはどちらを選びますか？

　今回は初挑戦なので、レベル1のレッスンから始めます。Html+cssの「Free Trial（無料トライアル）ボタンをクリック。すると、下記の画面が表示されます。

「レッスン1 タスク1」開始！

　初回のレッスン時にはCode Avengersの使い方を紹介するツアーが始まります。赤い「Next」ボタンをクリックしてみましょう。

レッスンページ概要

　レッスンは5つのタスクに分類され、タスクごとに異なる指示が出されます。タスクは画面の中央にあるエディターにコードを書いて進めます。

中央のエディター画面に入力したコードは、右側部分にプレビュー表示されます

　一連の操作画面を案内するツアーが終了すると、レッスンスタートです。

　左側は「タスク指示」、左下は便利ツールへのアクセスや言語切替などの「サポートエリア」です。指示部分右上の「ビデオマーク（黄色い丸で囲った部分）」をクリックすると、ビデオ学習に切り替わります。

画面左下の便利ツール

　便利ツールの内容は、「index（レッスンの目次）」「reference（参考資料）」「notes（自分のメモを入力可能）」「tools（システム内で使えるショートカットの組合せを表示）」「contact us（自分のコードとメッセージを運営チームに送付できる）」「leaderboard（スコアボード。ステータスが上がると使用範囲が広がる）」「guide（初回レッスン時に表示された説明のツアーを再生）」です。

　「index」をクリックすると、右サイドにレッスンの全体像が表示されます。

　「reference」をクリックすると、HTMLの解説画面が開きます。

　「contact us」をクリックすると、上記の画面が表れ、現在入力しているコードにメッセージを添えて運営チームに送付できます。ユーザーからの意見や要望を積極的に取り入れようとする姿勢はすばらしいですね。

　ドロップダウンで言語切替もできますが、現在は残念ながら日本語版はありません。オランダ語、ポルトガル語、ロシア語、スペイン語、トルコ語と個性的な言語がそろっています。

タスク1開始

　タスク1を開始しましょう。

　タスク1の指示は次の通りです。

エディターの1行目「TYPE_YOUR_SENTENCE_HERE」を、あなたがコーディングを学びたい理由に書き換えてください。
記述が終了したら「check」ボタンをクリックしてください。

　指示の通りに入力して、中央上の「check」ボタンをクリックします。

ふむ……コーディングを学びたい理由？ここでは「エンジニアの王になる！」と入力してみました。その上でcheckボタンをクリックしたところ、見事タスク1をクリア、10ポイントゲットとなりました

　黄色い枠内にある横向き矢印のアイコンをクリックして、次のタスクに進みます

　こちらがタスク2。タスクが進むにつれて指示が長く、複雑になっていきますが、ここからは「ヒント」ボタンが用意されています。各指示の左側にある「？」マークをクリックすると、ヒントが表示されます。

「コーディングを学んで何を開発したいのかを記述してください」という質問に対するヒント画面。例えば「I want to build awesome websites（すごいWebサイトを作りたい！）」など？

　このようにタスクを繰り返しクリアしていく形式で、レッスンは進みます。レッスンはいつでもストップ可能で、いつでも保存した箇所から再開できます。

このように、達成度が棒グラフで表示されます。まだ道のりは遠い……100％を目指して頑張るぞ！

　上の画面のように、レッスンの達成度は青いバーで表示されます。こちらはタスク2までを完了した状態です。達成度はプロフィールページで確認できます。

　今回はCode Avengersを「Learner（学習者）」として利用する方法の導入部分を紹介しました。次回（25日掲載）は「Teacher（教師）」としての使い方を、実際のプロジェクトに取り組みながら紹介します。実際に高校や大学、コンピューター専門学校などで教鞭を取っている皆さん、Code Avengersで新しいレッスンのアイデアを見つけてみませんか？