Udemyでプログラミング学習を始めました。
まだまだ超初心者のPetitですが、ちょっとずつでも成長していこうと、第一歩を踏み出しました。
今回からUdemyの「ウェブ開発入門完全攻略コース」というプログラムで学んでいきます。
副題は『プログラミングをはじめて学び創れる人へ！未経験から現場で使える開発スキルを習得！』です。全部で２８８ものコンテンツが用意されているコースになります。
プログラミングを学ぼうとしている人や学び始めた人に少しでも共有できるネタを提供できればいいなと思います。
このサイトはこんな人にお勧めしています
プログラミングを始めてみようと思っている人
プログラミングを始めて間もない人
プログラミングでどうしていいかわからなくなっている人
今回はHTMLでwebページに画像や文字を載せるところまでに取り組みます。約２９０コース中３０くらいまで学習するとここまで到達します。
完成したページはこんな感じです。
初めの１０コースくらいで基本の概念や準備するソフトのダウンロード方法・セッティングなどを解説してくれます。これでは、３０までのコースを学習していきます。
テキストエディタ
このコースでは、コードを作成するテキストエディタとして「Atom」を推奨していますが、私がお勧めするのは「Visual Studio Code」です。他にも「sublime text」というものも人気のあるエディタになります。
きっとどれも同じような感じなのだと思いますが、「Visual Studio Code」は、コードを予想していくつかの候補を出したり、頭の部分を打つと、終わりのコードも表示してくれたりと、初心者には優しい設定になっているところが好きですね。
おすすめは「Visual Studio Code」です。
それでは、早速コースに取り組んでいきます。
コースの概要
セクション１は、学習の進め方やWindowsOS・macOSでの設定の仕方などを学びます。ここは、基本的には少しでもパソコンを使うことができるなら、それほど難しいものではありませんが、コースのスピードを変えられるという設定を知ることができるのは、所見のときと繰り返し学習するときなどに活用できるよい説明だなと思います。
また、UdemyのコースにはQ&Aコーナーが設定されていて困ったら質問できる制度があるのもいいなと感じました。実際にQ&Aを見てみると、コースを発表した頃から、数時間前の質問まで様々な質問がされていました。質問とその解答を見るだけでも勉強になります。
フロントエンド開発概要
セクション２は、フロントエンドとは何かを教えてもらえます。超初心者な私はフロントエンドとバックエンド違いなども良く分かっていなかったので、詳しく説明があり学びが多い内容でした。基本的には、フロントエンドはユーザーが見ている側、バックエンドはサーバー側で見ている側ということで、見える部分か見えない裏方かという違いになります。
HTML入門
HTML入門では基本的なHTMLの作成方法を学ぶことができます。
HTMLとは、（Hyper Text Markup Language）の頭文字をとったもので、ウェブページを作成するために開発されたマークアップ言語です。
「マークアップ」とは目印をつけるという意味になるので、コンピューターに「どの文」が「どのような要素」なのかを明確に示すための言語ということになります。
また、「ハイパーテキスト」は別のページに行ける仕組みをもつ「すげーテキスト（ハイパーなテキスト）」のことです。
だから、ＨＴＭＬとは、いろいろなページに行ける様々な要素を表したテキストということになります。
HTMLの書き方としては次のようなものが基本となります。
タグには様々な意味を持たせるキーワードが入ります。これを使ってコンテンツを思うように表示させることが目的となります。
例えば、段落を意味する＜P＞のタグを使って段落1つを表現すると、このようになります。
このように書くと、「次の段落はなんだろう」という段落が表示されるようになります。
実際にHTMLを始めるにあたって、「Visual Studio Code」の場合は、ファイル名を書いてファイルを作成したら、1番初めの行に「html:5」と半角で入力すると、基本的な始めるためのプログラムが入力されます。
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
</head>
<body></body>
</html>
こんな感じに勝手に入力されます。
あとは、<html lang=”en”>となっているとことろを”en”→”ja”にすると日本語の入力に対応してくれます。
あとは、<title>タグの中身を変えると、タブの部分に表示される題が変更されます。
リストの演習では、次のようなプログラミングを行います。
<h2>イタリアンレストランメニュー</h2>
<h3>カテゴリ</h3>
<ol>
<li>料理</li>
<li>ドリンク</li>
<li>デザート</li>
</ol>
<h3>食事</h3>
<ul>
<li>サラダ</li>
<ul>
<li>おすすめサラダ</li>
<ol>
<li>ポーク</li>
<li>チキン</li>
<li>シーフード</li>
</ol>
<li>シーザーサラダ</li>
<li>わかめサラダ</li>
</ul>
<li>パスタ</li>
<li>ステーキ</li>
</ul>
このプログラムでは次のような表示をさせることができました。
<ol>（オーダードリスト）と<ul>（アンオーダードリスト）の違いと<li>の使い方が分かれば、それほど難しいことではありませんが、これができても超初心者を脱出した感じはありません。
でも、なんだかプログラミングをしている感じはあり、表示させて思って通りの画面がでてくると楽しくなりますね。
次は、画像と表示させる学習です。相対パスと絶対バスがありようですが、絶対パスの作り方は良く分かりませんでした。基本的には自分で用意したファイルを相対パスとして表示させることはできるようになりました。
同じフォルダに「meet.jpg」という画像ファイルを用意すれば、これだけのプログラムで画像を次のように表示させることができます。
画像表示の次はリンクです。リンクとは、他のページに移動するために、その表示させた文章や画像に移動先のurlを付けることをいいます。
これも、それほど難しい漢字ではなく、<a>のタグを使うというものです。
コードとしては、例えばGoogleの検索ページに移動するようにするには、次のようにコードを書きます。
これで、Googleと文章を表示させて、そこをクリックするとGoogleの検索ページに飛ぶようにすることができました。
リンクにはurlを記入するものと、自分のサイト内、ページ内でのリンクを作ることもできます。<a>タグを使って作成するのは変わりません。Hrefの中身がファイル名なのか、ID名なのかの違いで、サイト内リンクやページ内リンクを作成することができます。
演習として次のようなページを作りました。
<p>「あう」について詳しく解説します</p>
<img src=”meet.jpg”>
<h3>「合う」と「会う」の違い</h3>
<ol>
<li>「合う」は１つにピッタリ合う</li>
<li>「会う」は人と人が顔をあわせる</li>
<li>「会う」は人にしか使えません</li>
</ol>
<h3>SNS</h3>
<p>ブログで<a href=”https://ptitzblog.com”>フォロー</a>してください。</p>
表示してみると、次のようになります。
画像を入れたり、リンク先を設定したりすることができます。ここら辺までできると、なんだかホームページを作っている感じが出てきますね。
「超初心者」から「ちょっと初心者」になってきた気がします。
さすがUdemyの講座だな。と感心しますね。良く分からなかったところから、なんだか作れるようになってきました。
ここまでのまとめ
少しwebにページをアップすることができるようになりました。きっと、ここまではそこまで難しい内容ではないように感じました。
次回はさらに進めて、HTMLの基本を終わらせます。
焦らず少しずつ、しっかりと力を付けていきたいですね。
