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

連載目次

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

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

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

プロジェクトとは？

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

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

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

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

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

4.　BUILD A CSS ROBOT（CSSロボットを構築する）

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

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

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

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

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

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

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

右下の「Start slideshow」をクリックすると、レッスンの指示を記したスライドが1枚ずつ表示されます。

2枚目のスライド。「ミッション：アンナの個人Webサイト構築を通じて、HTMLの基礎を学びましょう！」

3枚目。「最終デザインはこのようになります」

6枚目。画面構成の説明です。スライドが表示されている部分が「レッスン」、その下のグレーの部分がコードを書き込む「エディター」、右半分の白い部分がコードの結果が反映される「プレビュー」画面です。

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

「HTML文書は、ブラウザーにコンテンツのフォーマット方法を伝えるために＜タグ＞を使います」

見出しタグの開始・終了の説明。＜h1＞＜/h1＞タグで囲まれた部分が第1見出しとなります。

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

「次のコードを下部のエディターに記入してください：＜h1＞Anna Dowlin＜/h1＞」

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

おお、右に表示されました！

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

「タグが正確に閉じられていませんよ！」（HTMLの終了タグには/（スラッシュ）が必要）

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

「I DID IT（正解！）」ボタンが表示されます

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

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

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

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

私は「h1-h6」（見出しタグ）と、「p」（段落タグ）のスキルをゲットしました！

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

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

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

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

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

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

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

こちらはPC表示

こちらがスマホ表示です

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

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

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

筆者プロフィール

Nextremer　下岡聡子

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

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