現在デイトラ学習中のプログラミング初心者の僕が息抜きも兼ねてまとめを残しておきます。ドットインストールの時も書きましたが、このまとめ記事だけでレッスン内容をカバー出来るものではなく、またデイトラのコンテンツを侵害する意図はありません。初心者の目線の感想と疑問に思い調べた少しの補足もあります、「デイトラやろっかな」と悩んでいる人やデイトラ学習中の人に軽い復習程度に読んでいただきたいと思います。
DAY1「はじめに」
最初に行うのは「Slack」というチャットツールに加入です。登録したメールアドレスに招待のような形で届くので指示通りに進めていけば、出来るでしょう。
SlackはLINEのグループのように他の人とメンターさんとのやり取りも見ることができるので、「質問の仕方」「どんな箇所で悩んでいるか」「メンターからの答え」も見て応答の雰囲気を掴んでみることをお勧めします。
まず自己紹介で「こんな感じで使うのか」を体験しましょう。日によって違いますが、僕が自己紹介をした日は8人くらい「今日からデイトラ始めます、よろしくお願いします。」の人がいて同期のような感覚で「いっしょに頑張りましょう」と思ったような。
ここで一つ「Slackあるある」ですが、最初の自己紹介で改行しようとEnterキーを押すと「送信」してしまいます。「は？」ですがそういう初期設定なので直しましょう。
- 左上の「デイトラ公式サポート~~」、もしくは右上の自信のプロフィール写真をクリック
- (おそらく最初は英語表示のはず)「Preferences」→「Language & region」→Languageを「日本語」にしましょう
- 「詳細設定」→「メッセージを送信する」を「改行する」に変更で完了です。ちなみに英語だと「Advanced」の「Start a new line」
他にも多くの設定がありますが、今の段階で特に触る必要はないはずです。
続いて「上手に質問するコツ」です。「小学生じゃないんだから…」って思う方も丁寧に動画で説明されていますので見ておきましょう、けっこう大事です。動画でも言われていますが、上手に質問するのは意外と難しいですし、下手な質問を繰り返すと勉強時間の無駄ですし、(お金を払っているとはいえ)人の時間を奪っているということを認識しましょう。
その際の「質問テンプレート」がありますので、初めはそれに沿って自分でも情報を整理しながら、書けたら何度も読み返して「これで伝わるかな？」を考えてやっと送信です。
メンターなど人に書いたコードを見てもらって、間違っている箇所を教えてもらう際、「Github Gist」の使い方を使ってソースコードを共有すると、「本格的だ…プログラマーだ…」なんて思うかも。
デイトラでは「Google Chrome」を使いため、そのインストールを行います。Chrome以外のブラウザだと機能的な問題などがあって、こうした学習サービスではブラウザを揃えるのは当然、Chromeを使っていれば問題無しです。特にページ作成に必要なのが検証・デベロッパーツールです。
初回からコードを書いていきます。そこで使うのが「エディタ」です
どこにコード書く →「エディタ」
書いた結果を何で見る →「ブラウザ」
簡単にですが、こういうイメージですね、エディタも種類は様々ですが、「VScode」を使います。これを選んでおけば間違い無し、プラグインなどの機能を豊富で、利用者も多くその分情報も多く出回っていますので。
デイトラではインストールのリンクも貼ってあるので、そのリンクから飛べばいいので親切ですね。これも日本語化します、こちらは画像もあって簡単。
早速、「Hello World」です。誰が始めたのか、プログラミング界ではこうした時は「Hello World」ばっかりです。「test test」もあるかな
ここから動画で、新規フォルダ→index.htmlファイルを作る→「！」押して「TAB」→<body>内にHello Worldと入力→Chormeマークにドラッグアンドドロップ
これだけでHello Worldと表示されます。簡単…ですよね？DAY1はここで終わりです。
あとおまけで「Webサイトの仕組み」サラッと読んでおきましょう。
DAY2「HTMLのタグ」
htmlのタグの種類の説明が並び、いきなりボリューム多いので全くの初学者の方は大変だと思いますが、文章は「<>~~<>」で囲むという「タグ」の説明からなので、繰り返し読めば理解は出来るはずです。
hタグは見出し、pタグは段落(というか文章)ですね。h5,h6に(あまり使いません)が書いてありますね、確かに使わない。あとでcssのfont-sizeで文字サイズもfont-weightで文字の太さも変更できるので、「h2か？h3か？」みたいに悩む必要はないです。
リンクは基本だけ、<a href=”URL”>テキスト</a>と呪文みたいですが、VScodeなら「a」と入力すると<a href=””></a>この形が予測変換の「これですか？」のように表示されるので「TAB」を押せばポンっと一発です。
新規タブでページを開きたい時もありますよね、その時は<a href=”URL” target=”_blank”>テキスト</a>と書きます。ただtarget=”_blank”にはセキュリティ上の問題点があるとも言われていますので注意。話は複雑なので要点だけにしますが、新たに開かれたリンク先ペースからリンク元のページを「書き換えてしまうことができる」というのです。
「へえ～…で？」ですよね、例えば
- あなたの制作したページでリンクを貼っていた
- そのリンク先ページは悪意を持った制作者が作ったページだった
- あなたのページが書き換えられて詐欺などに利用される
なんてことも考えられるのです、「こっわ…」ですよね
対策はあります。<a href=”URL” target=”_blank” rel=”noopener noreferrer”>テキスト</a>と更に追加の記述が必要です。ここまではデイトラも解説していませんが、WEB制作は制作者側がいずれは「セキュリティも勉強しなければ」と考えさせられますね。DAY2の段階では深く考えずにどんどんレッスンを進めましょう。
画像は<img src=”画像のURL”>だけです、「ん？」と思ったならすごい、閉じタグ(</img>)がないですね。画像を表示するだけでテキストはなく、何も挟む物がないからです、imgはimageのことで「イメージタグ」と呼ばれます。
箇条書きリストもよく使いますので必須、ulタグで複数のliタグを挟む、と覚えておけば大丈夫です。数字付きのリストはulではなくolタグですがあまり使いませんね。ulだと「・」が付きますが、この後のデイトラのレッスンでも「reset.css」を読み込んで、ブラウザの初期設定をあえて消してコーディングを書いていきます。この「・」も消されます、可哀想に…「必要なら自分で付けてね」といった具合です
ブラウザのページには表示されませんがコメントを書いて、自分や共同の制作者向けにメモとして使います。<!– –>で囲むのですが、これもVScodeのショートカット「コマンド + /」もしくは「Ctrl + /」でカーソルのあるその行を一発でコメントアウトできます。
が、ここでも注意点。ホームページ上で右クリック→「ページのソースを表示」とするとコメントまで見えてしまいます。個人情報や炎上するようなことは書かないように気を付けましょう。
htmlは長くなるのでグループ化といって、<div>で要素をまとめます。
ニュースという項目の見出しには<div class=”news-title”></div>
サムネなどのカードの文章には<div class=”card-text”></div>
など、プログラミング全般に言えますが正解はなく、どんな名前でも結構です。「ここはどんな名前がいいだろうか…」と悩むことになるかと思います。
ブロック要素とインライン要素は使って覚えることになります。文章だけではイメージしにくいからです。特にインライン要素は「cssで幅・高さが効かない」と躓きます。それも後からdisplay:○○;と変更できるので心配せず。
タグには属性を付けることもあり、すでに使っていますが、class=””もクラス属性です。srcもhrefも属性になります。divやimgはhtmlでたくさん使うので区別するために「名前を付けておこう」というものです。id属性はJavaScript,jQueryでよく見かけることになります。
DAY2でも最後におまけ「htmlの書き方」があるので、サラッと読んでおきましょう。
「aはリンク…srcだっけ？href…?えっ~と~…」 htmlはこの段階で全てを暗記しようなんて思わなくても、レッスンを進めていくうちに使えるようになります。
長くなりますので、前編はこの辺で。レッスンの内容やそれに対するツッコミみたいになりましたが、なんとなくデイトラの雰囲気をイメージしてもらえたでしょうか？
DAY3,4は次回にします。ではまた
コメント