takayama

プログラミング学習での「質問のお作法」を理解しよう！最小限のやりとりで効率的に解決！

2020-12-31 By takayama

はじめに

プログラミング学習をしていると、必ずわからないことやどうしても解決できない問題が出てきますよね。

こんな時、プログラミング講座を受講していれば講師に質問できますし、独学の場合でもWeb上のコミュニティで質問を投げ掛ければ誰かが答えてくれるのがインターネットのいいところです。

しかし、質問をしても「もう少し詳しい状況説明がないとわかりません」等と逆質問を受けたり、何だか講師の人と噛み合わなくて何度もやりとりをしたり…といった経験はありませんか？

それ、もしかするとあなたの質問のしかたに問題があったのかもしれません。

この記事ではプログラミングにおける正しい「質問のお作法」を解説します。

質問のお作法が身に付けば、自分や相手の時間を無駄にせず効率的に問題解決できるようになるので、これまで意識したことがなかった方はぜひご一読ください。

悪い質問のしかた、していませんか？

「第○○回目講座のコードを自分でも書いて実行してみましたが、エラーになってしまいます。どうすれば解決できますでしょうか？」

よく目にするタイプの質問ですが、実はこれは悪い質問の典型例です。

何がいけないのでしょうか。

想定される実行結果が明確化されていない

「どうなっていたら成功なのか？」（何がしたいのか）の部分がありません。

この質問では講座を指定しているので講師には詳しく書かなくても伝わる可能性はありますが、自由入力に対して何らかの処理をして返すようなプログラムだったりすると、質問者が一体何を入力してどんな結果を想定していたのか見当がつきませんよね。

ここがわからないとその後の話がこじれてしまいます。

詳しいエラー内容の説明がない

ひとことに「エラー」といっても様々な種類があります。

変数への参照エラー、指定されたパスにファイルがない、無限ループ等、枚挙にいとまがありません。

プログラムに問題があるのか、実行環境に問題があるのか、その切り分けですら手がかりがないので何のアドバイスもできないことになってしまいます。

自分で行った対処とその結果がない（もしくは何もしていない）

一般的に「何かわからないことがあればすぐに人に聞く」のが良しとされる業界もありますが、プログラミングやITの業界では「検索サイトで調べてすぐに出てくるようなことは人に聞かない」「15分くらいは試行錯誤してみる」のが最低限のマナーとされています。

「知を集約してタスクを効率化し人々を単純作業から開放する」ことこそがプログラミングの最終目的であり、それに反することは好まれないからでしょう。

自分で試行錯誤した内容とその結果が書かれていないため、どこが悩みどころなのか？が伝わりにくくなっています。

質問のお作法ができていないと嫌われる？

先述のポイントを一言でまとめると、質問してから解決までの間にだらだらと時間がかかってしまうのが特徴です。

もちろん、質問した内容自体が難解なテーマでありその解説に時間がかかってしまうこともありますが、そのような場合は本質的な部分に時間をかけているので問題ありません。

質問を受けた側が「何がわからないのか？」「どんな答えを求めているのか？」を把握するための本質的でないコミュニケーションの部分に時間がかかってしまうのが問題なのです。

プログラミングの業界では特にロジカルな人が多いため、質問をした時にゴールの明確化や課題の言語化、問題の切り分けといった部分が甘いと「できないプログラマーだな」とレッテルを貼られてしまうことがあります。

教えることや説明すること自体は、それを通して自身の理解を深めたりすることもできるため好きな人が多いです。

そのためこれらがきちんとできていれば好意的に教えてくれますが、できていなければ「またこの人か…」と嫌な顔をされてしまうかもしれません。

先輩方を困らせないためにも、現場に出る前の今のうちから質問のお作法を身に付けておくのがとても重要です。

これだけ気をつけよう！質問のお作法

それでは、どんなことに気をつければいいのでしょうか。

次のポイントさえ押さえれば恐れることはありません。

先ほどの「悪い質問」にならないよう、裏返しのことをやっていくだけです。

何がしたいのかを明確化する

単に「第○○回講座のコードを実行した」だけではなく、それがどんなコードで、実行するとこういう結果になる想定である、というところまで書きましょう。

例えば「自分の姓を文字列で入力するとその文字数を返してくるプログラムで、『Nakamura』と入れたら『8』が返ってくるはずです」などと書くといいでしょう。

エラー内容を詳しく説明する

原因を特定するために必要なので、最低限下記の内容は盛り込むようにしましょう。

実行したソースコード
(あれば)関連するファイル等
エラーの内容（エラーメッセージのコピペや実行結果画面のスクリーンショット等）

自分で試行錯誤し結果を明記する

これが最重要です。エラーの内容をヒントに、自分なりに調べて方法を試してみるだけでも様々な知見が得られますし、うまくいけば自力で解決できてしまうこともあるでしょう。

もし解決できなくても、「この方法を試してみたけれど今度はこんなエラーが出てダメだった」ということを質問に追記できれば、質問を受けた側にとってもより具体的なヒントになります。

まとめ

プログラミングにおける「質問のお作法」について解説しました。

お作法というと堅苦しい感じがしますが、肝要なのは「相手と自分の貴重な時間を無駄にしないよう丁寧にコミュニケーションする」ということです。

ここで説明したポイントを押さえていれば問題ありませんので、気軽に質問しながら慣れていくのがいいでしょう。

もちろん、質問前の試行錯誤のフェーズは自分の学習にも役立ちますので忘れずに行ってくださいね。

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

説明リストとは？HTMLで用語説明ページを作るのに最適！使い方を確認しよう

2020-09-26 By takayama

はじめに

HTMLの「説明リスト」をご存知ですか？

<ul>タグと<li>を使う箇条書き（順序なしリスト）や、<ol>と<li>を使う順序付きリストは知っていても、説明リストを使ったことがまだない方もいらっしゃるかもしれません。

この記事では説明リストとはどんなものか？を説明し、使い方についても解説します。

動画解説

本動画の内容を動画でも解説しています。

説明リストとは

まず、説明リストがどんなものなのかを見ていきましょう。

先にイメージがあるとわかりやすいですね。下記のようなものを説明リストと呼びます。

用語があってその下にその用語の説明がつく、このセットが３つ並んでいますね。

このように、ある用語の説明に特化したリストを説明リストと呼びます。

この説明リストを記述したHTMLは下記の通りです。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>説明リストの練習</title>
  </head>
  <body>
    <dl>
      <dt>用語1</dt>
      <dd>説明1</dd>
      
      <dt>用語2</dt>
      <dd>説明2</dd>
      
      <dt>用語3</dt>
      <dd>説明3</dd>
    </dl>
  </body>
</html>

コードの内容を紐解いていきましょう。

dl要素

dl要素は「Description List」の略で、説明リストであることを表します。

<dl>〜</dl>の中に後述の<dt>タグと<dd>タグを記述して説明リストを構成する訳です。

dt要素

dt要素は「Description Term」の略で、<dt>〜</dt>の中に説明対象となる用語や文章を記載します。

dd要素

dd要素は「Description Definition」の略で、dt要素が指す単語や用語の意味や説明を記載します。

<dd>〜</dd>の中に内容を書いてください。

使用例で確認しよう

理解を深めるために順を追って使用例を確認しましょう。

まず、完成イメージは下記の通りです。

このサイトでもよく取り上げているWebプログラミング言語の説明リストですね。

まずはエディタで新規ファイル「description-list.html」を作成してください。

下記の通りコードを記述しましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>説明リストの練習</title>
  </head>
  <body>
    <dl>
      <dt>HTML</dt>
      <dd>文章構造を定義するマークアップ言語です</dd>

      <dt>CSS</dt>
      <dd>ウェブページのスタイルを指定するための言語です</dd>

      <dt>JavaScript</dt>
      <dd>動的なウェブページを作成する事のできるプログラミング言語です</dd>
    </dl>
  </body>
</html>

ファイルを保存し、完成イメージと同じようにできていればOKです。

ここで、説明リストについてよくある質問とその答えを確認しましょう。

用語と同じ行に説明を書くことはできる？

スタイル（CSS）を適用すればそのように表示することが可能です。別の記事で取り上げます。

ただし、HTMLはあくまで文書の構造を定義するために使用すべきなので、HTMLでは実施しません。

必ず用語はdt要素、説明はdd要素で書くようにしてください。

箇条書きを使って書いてはいけないの？

<ul>と<li>を使って箇条書きにしても同じような表示はできるので、間違いではありません。

しかしながら、似たような表示であっても箇条書きと説明リストでは書く側が文書に持たせたい意味合いが異なります。

例えば下記のような文書を比べてみましょう。

文書１：お買い物リスト

りんご
ぶどう
みかん

文書２：果物の説明

りんご

バラ科リンゴ属の植物。7500以上の品種が栽培されている。

ぶどう

ブドウ科の植物。果実はワインの原料ともなる。

みかん

ミカン科の植物。正式名称はウンシュウミカン。

文書１は単なる列挙、文書２では用語とそれに対する説明となっていますね。

その文書に何が書かれているのかをマークアップするのがHTMLの役割であり、ブラウザや検索エンジンはそれを頼りに機能します。

ブラウザでその文書に合った表示をさせたり、検索エンジンに正しく文書の内容を解析してもらうためにも意味合いに合ったタグを選んで記述するよう心がけましょう。

まとめ

説明リストの紹介と、HTMLでの記述方法解説を行いました。

用語の説明にぜひ活用してみてください。

本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門（Proglus）

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する

HTMLで初心者がやりがちなミスとその対処方法！困ったらとりあえずこれを確認しよう！

2020-08-10 By takayama

はじめに

プログラミングを始めたての時は、些細なミスでもつまずいてしまいますね。

慣れてくると「よくあるミス」がだんだんわかるようになり、何か問題が起きたらすぐに気付けるのですが、初心者の時は特に解決に時間がかかりがちです。

この記事では、特に初心者がやりがちなHTMLのミスとその対処方法を紹介します。

あなたの問題解決の時間短縮に少しでも役立てば幸いです。

動画解説

本記事の内容を動画でも解説しています。

コード例と正しい表示結果

まず最初に正しく書けている場合のコードと表示結果を見てみましょう。

コード例

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>よくあるHTMLの記述間違い</title>
</head>
<body>
  <h1>はじめての段落</h1>
</body>
</html>

表示結果

見出しのみのシンプルなページですが、コードにミスがあるとうまく表示できません。

ミスをするとどんな結果になってしまうのか順番に見ていきましょう。

全角文字での書き間違い

HTMLのタグ（<〜>の部分）は全て半角英数字で記述する必要があります。

全角になっているとブラウザが正しくタグとして読み込めないので想定した通りの表示にならないことがあります。

例えば見出しを意味する<h1>〜</h1>の部分で、誤ってタグを全角で下記のように書いてしまうとどうなるでしょうか。

コード例（誤り）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>よくあるHTMLの記述間違い</title>
</head>
<body>
  ＜h１＞はじめての見出し＜／h１＞
</body>
</html>

表示例

タグがそのまま表示されてしまっていますね。また「はじめての見出し」が見出しとしての表示になっていません。

これは<h1>〜</h1>が全角で書かれてしまったためにブラウザが見出し部分と理解できずにタグごとそのまま表示した結果です。

タグを書く時はきちんと半角にしてから記述するようにしましょう。

全角スペースの混入

HTMLのタグ内にはスペースを入れることがあります。このスペースも先ほどと同様、半角でなければなりません。

間違えて全角スペースにするとどうなってしまうのでしょうか。

下記コードのように、文字セットを指定するmeta要素の中で全角スペースを入れてみましょう（4行目）。

コード例（誤り）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta　charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>よくあるHTMLの記述間違い</title>
</head>
<body>
  ＜h１＞はじめての見出し＜／h１＞
</body>
</html>

表示例（macOSのSafariにて）

ブラウザによっては正しく表示されることもありますが、この例のようにmacOSのSafariブラウザで開くと文字化けしてしまいます。

これは文字セットを指定する<meta>要素内で、半角スペースの代わりに本来使ってはいけない全角スペースが使用されたため、ブラウザが使用すべき文字セットを理解できないのが原因です。

日本語で記述された「はじめての見出し」は日本語に適した文字セットであるUTF-8を指定されなかったために文字化けしてしまいました。

このように、タグだけではなくその中で記述するスペースも全角にならないように注意しましょう。

終了タグの/（スラッシュ）が無い

HTMLの基本構文は開始タグ（例：<h1>）＋コンテンツ（例：はじめての見出し）＋終了タグ（例：</h1>となっています（例外もあります）。

この終了タグには/（スラッシュ）が必要ですが、初心者のうちはこれを忘れてしまうことが多いです。

例えば下記のようにtitle要素で終了タグのスラッシュを忘れてしまうとどうなるでしょうか。

コード例（誤り）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta　charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>よくあるHTMLの記述間違い<title>
</head>
<body>
  ＜h１＞はじめての見出し＜／h１＞
</body>
</html>

表示例

白紙になってしまいましたね。

その代わり、ブラウザのタブにカーソルを合わせるとタイトル部分が出るのですが、ここに</html>までの残りのコードが入っていることがわかります。

title要素の終了タグでスラッシュを書き忘れると、タイトル部分の終了をブラウザが認識できずに、最後までタイトルが続いていると解釈してしまうためこのようになった訳です。

たかがスラッシュなのですが、忘れると大変なことになってしまうので注意してください。

終了タグの書き忘れ

終了タグにスラッシュを書き忘れるとそれ以降のコード全てがタイトルだと認識され、本文が白紙になってしまうことがわかりました。

では、終了タグそのものを書き忘れるとどうなるのでしょうか。結果はスラッシュ忘れのケースと同様になります。

コード例（誤り）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta　charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>よくあるHTMLの記述間違い
</head>
<body>
  ＜h１＞はじめての見出し＜／h１＞
</body>
</html>

表示例

終了タグは要素によっては必要のない場合もあるので、ついうっかり必要なのに書き忘れてしまうことがあるかもしれません。

必要ないと思い込んでしまっている場合もあるので、表示がおかしいなと感じたら怪しい部分の終了タグについて改めて確認してみるのが良いでしょう。

タグのスペルミス

タグそのものをスペルミスしてしまうこともよくあります。

例えば<title>を<titla>と書いてしまうとどうなるでしょうか。

コード例（誤り）

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta　charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <titla>よくあるHTMLの記述間違い</titla>
</head>
<body>
  ＜h１＞はじめての見出し＜／h１＞
</body>
</html>

表示例

タイトル部分も含めて本文エリアに表示されてしまいました。

スペルミスによりタイトルを意味する<title>タグが認識できなかったため、ブラウザが<titla>以降を全て本文として解釈してしまったためです。

特にVSCodeなど、便利なブラウザには開始タグを書くとその後ろに自動的に終了タグを記述してくれる機能がありますね。

この時、開始タグをスペルミスすると終了タグもスペルミスされた状態で入力されることがあるので気付きにくく、注意が必要です。

ファイルの保存忘れ

「きちんと間違いがないか何度も確認して入力したのに、やっぱりエラーが出たまま…」

「新しく段落を追加したのに、出てこない…一体何が間違っているの？」

こんな時、あなたが書いたコードには一切間違いがない可能性があります。

しかし、ブラウザが見ているのは保存前のコードのままかもしれません。

試しに下記の画面（VSCodeでの入力例）のように段落を追加して、保存をしない状態でブラウザに表示させてみましょう。

すでに開いている場合はリロードでもかまいません。

コード例

保存をしないと、VSCodeの場合は下図のようにファイル名横に白丸マークがつきます。

表示例

せっかく追加した「はじめての段落」が出てきませんね。コード変更する前の表示と変わりません。

ファイルが保存されない限り、ブラウザは最後に保存された状態のコードしか参照できないためです。

単純なことなのですが、一番不可解な現象となりやすいのがこのパターンです。

こまめな保存を心がけ、エラーが起きた場合も保存忘れがないかどうか真っ先に確認しましょう。

まとめ

初心者がハマりやすい、よくあるHTMLの記述間違いとその対処方法を紹介しました。

どれもカラクリがわかると「なーんだ」と感じるかもしれませんが、慣れない内は焦ってしまうものばかりですね。

同じミスが原因でも、書くコードが違う以上は発生する現象は人それぞれです。

ここで紹介したような現象が起きていなくても、一つ一つ心当たりのあるミスがないか確認するだけでも何か解決の糸口になるかもしれません。

ぜひ試してみてくださいね。

本記事の内容は下記の講座からの抜粋です。HTMLについてより体系的に学びたい方はぜひチェックしてみてください。

新HTML入門（Proglus）

動画で学ぶプログラミング入門

オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！

在宅学習応援！今なら複数の基礎コースが無料！！

今すぐ詳細を確認する