連載
» 2014年10月22日 18時00分 UPDATE

海外Webサービスのトリセツ(13):開発学習サービス「Dash(ダッシュ)」の使い方(2):プロジェクト実践編

海外Webサービスの使い方を「日本語で」分かりやすく説明するシリーズ。今日はオンライン開発学習サービス「Dash(ダッシュ)」で、HTMLの基礎を学びます。

[Nextremer 下岡聡子,@IT]
本連載「海外Webサービスのトリセツ」のインデックス

連載目次

 海外Webサービスの使い方を「日本語で」分かりやすく説明するシリーズ、今月はオンラインで開発を学習できるサービス「Dash(ダッシュ)」を紹介します。前回は概要と登録方法を紹介しました。今回は、実際に開発プロジェクトに取り組んでみます!

tori13_1.png 「Dash」ログイン後のトップページ(クリックすると、大きなサイズの画像を表示します)

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

プロジェクトとは?

 Dashはブラウザー上で楽しみながらHTML、CSS、JavaScriptを学べる学習サイトです。学習は5つの「プロジェクト」を通して、課題をクリアして進めます。

 プロジェクトは、現在5つ。どれも面白そうですね!

1. BUILD A PERSONAL WEBSITE(個人Webサイトを構築する)

tori13_2.png

2. BUILD A RESPONSIVE BLOG THEME(読者が反応しやすいブログを構築する)

tori13_3.png

3. BUILD A SMALL BUSINESS WEBSITE(小規模ビジネス用のWebサイトを構築する)

tori13_4.png

4. BUILD A CSS ROBOT(CSSロボットを構築する)

tori13_5.png

5. BUILD A MADLIBS GAME(マドリブズゲームを構築する)

tori13_6.png 「マドリブズゲーム」とは、ストーリーの空欄に言葉を埋めていくゲームのことです

プロジェクトに挑戦:個人Webサイトを構築する

 実際にDashのプロジェクトで開発を学んでみましょう。

 5つのプロジェクトのうちどれにしようか迷ってしまいますが、最も初級に近い(と思われる)「個人Webサイトを構築する」に挑戦します!

 最初に「1. Make the headline and inputs(見出しと入力項目を作成する)」をクリックします。

tori13_7.png

 すると、このような画面が表示されます。プロジェクト1のパート1は、「アンナのWebサイト HTMLの基礎」です。

tori13_8.png 右下の「Start slideshow」をクリックすると、レッスンの指示を記したスライドが1枚ずつ表示されます。
tori13_9.png 2枚目のスライド。「ミッション:アンナの個人Webサイト構築を通じて、HTMLの基礎を学びましょう!」
tori13_10.png 3枚目。「最終デザインはこのようになります」
tori13_11.png 6枚目。画面構成の説明です。スライドが表示されている部分が「レッスン」、その下のグレーの部分がコードを書き込む「エディター」、右半分の白い部分がコードの結果が反映される「プレビュー」画面です。

 10枚目のスライドからは、HTMLについての説明が始まります。

tori13_12.png 「HTML文書は、ブラウザーにコンテンツのフォーマット方法を伝えるために<タグ>を使います」
tori13_13.png 見出しタグの開始・終了の説明。<h1></h1>タグで囲まれた部分が第1見出しとなります。

 ここでチェックポイント! ミッションの中には課題に挑戦するチェックポイントがいくつか含まれており、実際にコードエディターを使って実践できます。

tori13_14.png 「次のコードを下部のエディターに記入してください:<h1>Anna Dowlin</h1>」

 エディターに文字を打ち込むと……

tori13_15.png おお、右に表示されました!

 やりがちなミスも的確に指摘してくれます。

tori13_16.png 「タグが正確に閉じられていませんよ!」(HTMLの終了タグには/(スラッシュ)が必要)

 正確にタグを入力すると……

tori13_17.png 「I DID IT(正解!)」ボタンが表示されます

 その後もHTMLのタグに関する説明とチェックポイントが続きます。

tori13_18.png

 プロジェクトを進めるごとに「スキル」が解除されていく(最初は全てのスキルがロックされた状態です)のも、Dashの面白いところです。

tori13_19.png チェックポイントを2つクリアしたら、「スキルが2つ解除されました」という表示が出てきました。

 「Skills」のタブで、解除されたスキルを確認できます。

tori13_20.png 私は「h1-h6」(見出しタグ)と、「p」(段落タグ)のスキルをゲットしました!

 次のチェックポイントは「電子メール入力フォームの作成」です。HTMLをかじったことがある方ならば、英語と日本語が頭の中で結びつくのではないでしょうか?

tori13_21.png HTMLの属性についての説明です。この場合は「type」が属性(attribute)、「email」が属性値(attribute value)となります

 「属性って何?」という方のために、次のスライドで分かりやすい説明がなされています。

tori13_22.png HTMLの属性をピザに例えたら……
<サイズ=“L”、生地=“薄い”、種類=“ペパロニ”>といった具合です。属性が1つのものの各要素、属性値はその詳細に当たるのですね。

 このようにレッスン説明とチェックポイントを繰り返して、パート1は終了です。ここでは、下記の5つのチェックポイントを学びました。

  1. <h1><h1>タグで見出しを表示
  2. <p></p>タグで段落を表示
  3. 電子メール入力フォームを表示
  4. 送信ボタンを表示
  5. フォーム入力欄の初期値を表示

tori13_23.png レッスン終了。右のプレビューページに、自分が行った作業の輝かしい軌跡が残されています

 しかも、プレビューページ右上のボタンで、「PC表示/スマートフォン表示」の切り替えができます。

tori13_24.png こちらはPC表示
tori13_25.png こちらがスマホ表示です

 コーディングは視覚的な要素が大きいため、このようにスライドの図解を見つつ実践を交えて学べると分かりやすいですね。開発環境を準備する必要がなく、PCとインターネット環境さえあれば、いつでもどこでも学習できるのも便利です。

 今回紹介したのは、Dashのプロジェクトのほんの一部分です。ぜひ自分でもプロジェクトを進めて知識をマスターしてくださいね。現役開発者の方々にはとても初歩的な内容なのですが、HTMLを新しく学ぶ方、英語×HTMLの世界を少し体験してみたい方にとてもお勧めです(課題の内容もプロジェクトを進めるごとに難易度が増していきます!)。

 次回は同じくオンライン学習Webサイトの「Code Avengers」をご紹介します。

「海外Webサービスのトリセツ」バックナンバー

筆者プロフィール

下岡聡子

Nextremer 下岡聡子

Javaプログラマー、フリー翻訳者(英語・中国語)を経て、Nextremerにてインドでのグローバル受託開発システムのマネジメント、新規ビジネス企画担当。大学ではロシア語を専攻。

ITエンジニア向けの英語サービスも提供中。


Copyright© 2017 ITmedia, Inc. All Rights Reserved.

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。