17.JavaScriptって何？① ～デイトラ中級編スタート～
JavaScriptとは
フロントエンド言語、HTMLやCSSと違い「サイトに動きをつけるもの」
ブラウザ上で動く、プログラミング言語と考えて良さそうです。
中級編初日に学んだことと、追加で調べたことについてまとめていきます。
早速使ってみる
jsconsoleというサイトにアクセスして、
そこでコードを書いて実際に動かすことが出来ます。
やはり、説明だけより手を実際に動かさないと、なれないので
こうした環境はありがたいですね。
文字列を表示する
jsconsoleにアクセスして、
console.log("Hello,World")
と入力してエンターキーを押すと、
Hello,Worldと表示されます。
console.log(" ")の中のダブルクォーテーションの中に
書いた文字が表示される。という事らしいです。
今後の課題ですね。
変数って何
変数は「値をいれておく箱」という風に巷では言われているようです。
中学数学なんかで x = 2 とか、やっていた x に近いそうな。
そして、変数を使うには宣言が必要らしいです。
例えば先程のxの話だと、「変数xを宣言して、値２を定義する」ということ。
？？？
噛み砕いてみると、
この 文字列x を 値を入れておく箱 だよ と教えて、
その箱に ２ という値を入れてね と指示する
こんな感じでしょうか。
「宣言」って誰に？
これは処理をする側、ブラウザに対しての宣言ということになるのでしょうか。
まだ、ここは要領を得ないですね。
関数とは
プログラムの関連する命令をまとめて、
まとめた命令を呼び出せる仕組み。
関数も自分で書くものです。
関数を定義するときは
function 関数名 (引数){
処理
return 返り値
}
と書くそうです。
例えばこんな感じ、
function test (a){
console.log(a)
console.log("関数！")
console.log("実行！")
}
関数を使うときは
関数名(引数)
と書きます。先ほどの例にのっとれば、
test(こうやって)
とtest関数に引数"こうやって"を渡すと、結果が
こうやって
関数！
実行！
となります。
何回も使う処理をまとめて、簡単に呼び出せると考えるとこれは便利そう。
今日のまとめ
- JavaScriptはサイトに動きをつけるためのプログラミング言語
- フロントエンド言語と呼ばれることもある
- 値を扱うには変数という箱に入れる
- 関数を定義して、処理をまとめたり再利用したりできる
中級編、始まりました。
全容が掴めない感じですね。とは言え、引き続き学習を進めていきます。
では、また。
16.初級編まとめ と 当時の思い ～HTMLからBootstrapまで～
復習も兼ねての「まとめ」
本日は初級編の終わりに差し掛かったので、
復習も兼ねて「初級編」で学んだ事をおさらいしていきます。
ただ書くだけでは面白くないので、当時の自分の感想も含めて書いていきます。
初級編の内容
デイトラではweb制作コース初級編が大きく下記のように分かれています。
これらの内容を進めていけば、最終的に
自作のポートフォリオを公開するところまでたどり着けると言うわけですね。
では、それぞれの細かい内容を見ていきましょう
１．HTML/CSS基礎編
右も左もわからず、「エディタ」という言葉や「ブラウザ」が
どんなものかすら、わからない状態からのスタートでした。
- サポートを受けるためのSlack導入
- 質問する為のポイントについて
- VSCodeのインストール
- GoogleChromeのインストール
- 通過儀礼、Hello,World!を表示
を初日にやりました。懐かしい。
当たり前のように毎日VsCodeを使っていますが、
デイトラをはじめる際は存在すら知らなかった。
次にHTMLとCSSについて学びました。
この辺で躓いていましたね。
- HTMLのタグ周りの話
- CSSのとHTMLの関係
- それら２つとブラウザの関係
これらが自分の中で咀嚼できるまで、うんうんと唸っていました。
「あるルールに基づいて書かれた、ただのテキストファイル」なんだと
自分に繰り返し言い聞かせていた記憶が蘇りますね。
2.webページ主に２種類のテキストファイルでできている ～その１～ HTML編 - web制作のしおり
3.webページ主に２種類のテキストファイルでできている ～その２～ CSS - web制作のしおり
今は特に抵抗なく、彼らと触れ合えています。
振り返ってみても、やはりこの最初の単元が一番重要だと思います。
０→１にする工程とでも言いましょうか。
決して、おろそかにしてはいけないポイントだと思います。
各種ショートカットとEmmetとDeepLを毎日使おうと心に決めたのもこの頃です。
2．コーディング編
ホームページ作成用の素材を準備された上で、サイトを作っていきます。
HTML、CSSをコーディングして形にするところまでをやりました。
見て、覚えた気になって、進んでいるつもりになっていたのも、この頃です。
「ゼロからサイト作ってみよう」と題して、
メンターの動画を見ながら作成していく形式で、進んでいきます。
そして、それが終わるとHTML/CSSコーディング復習というところで、
「出来るだけ動画を見ずにゼロからコーディングしてみましょう！」
と課題が出されました。
そしてVSCodeを開いて、気づきます。
「何から手をつけて、どうやって進めたらいいのか、全然わからないぞ」
そう、わかった気になっていたのです。
ちょっとした絶望感を味わいました。
普通に手が止まるレベルで。
とは言え、そうも言ってられないので
- 基礎編の振り返り
- ヘッドに書くのは何があるか
- タグの使い分けと選定について
- どうやってレイアウトを考えていくか
- 作っていく流れ
を意識しながら復習しました。
それから、
「出来るだけ動画を見ずにゼロからコーディングしてみましょう！」に
チャレンジしました。
一度ダメポイントを洗い出してから、復習したので、
今度はすんなりと進めることができて一安心したのを覚えています。
本当に見ないで作れるかな？と自分を疑い、
３日連続でゼロから作ったのは内緒です。
3.Bootstrap学習編
BootstrapというCSSフレームワークを使って、サイトを作ることを学びました。
これは本当に衝撃でした。
今までの「学習が全て無に帰す」そんなレベル感の驚きがありました。
Emmetといい、世の中便利すぎる。
ほとんど、HTMLだけでコーディングが行えてしまうんですよ。
ざっくりいうと、
定義済みのクラスをHTMLタグのクラスに追記してデザインしていく
これですね。
上手に使えば相当の時短に繋がるなと、つくづく思いました。
特にレイアウト関連のCSSを設定せずに、思い通りに作れるというのが感動でしたね。
そして、Bootstrap編の最後の課題は
コーディング編で作ったサイトを「Bootstrapで再度書き直してみよう」という
内容で出されました。
ここは、あまり躓きませんでした。(だって３回ゼロから作ってるから暗記してる)
4.ポートフォリオ作成編
いよいよ、ポートフォリオを作成し公開することを学びました。
参考となるサイトを示してはくれますが、ほぼ、オリジナルで作成をします。
フリー素材のサイト案内や無料でフォームを作成するにはなど、
より実務で使いそうな内容を学べる回になっていました。
色使いとか、考えることが一気に増えます。
「だが、それがいい。」
やれることが増えてから、
ゼロから作るというのは最初の頃とは違うやりがいが湧いています。
何を使ってどういう風に書くかを自分で考える
これが結局、実務と同じことをするって事ですもんね。
そして最終的にサーバーを契約して、実際にサイトをアップロードし、
公開するところまでが初級編の全容となっています。
今日のまとめ
- HTML/CSSの最初の学びは本当に大事。納得行くまで突っ込んだ方が良い。
- サイトを作る「流れ」を意識しながら、学習を進めると良い
- わからなくて課題が進まない時は、素直にあきらめる
- ただし、課題の進捗スピードは諦めても、成長は諦めない。復習＆調査全力。
初級編の感想とざっくりしたまとめでした。
では、また。
15.ポートフォリオを作る ～自分のできることを伝える手段～
ポートフォリオとは？
まず、人によってイメージするものが違う。
ポートフォリオとは？と聞かれて何をイメージしますか。
調べてみると、業界によって「ポートフォリオ」が指す意味が異なります。
みなさんはどんなイメージをしましたか。
私は現金・株式・債券・不動産などの投資的なイメージを持っていました。
今回はクリエイター界隈の意味でのポートフォリオについて、まとめていこうと思います。
ポートフォリオの目的って？
ポートフォリオは自分の作品集のような物です。
その主だった目的は「実力や実績を他者に評価してもらう為」だといえます。
「webデザインができます。コーディングできます」と言葉で聞くよりも、
その人が作った物を見るほうが遥かに情報量が多いですよね。
まさに「百聞は一見に如かず」ですね
また、デイトラではポートフォリオの目的を
- できること
- スキル
- 仕事に対する想い
- 人柄
- 実績
を伝える為としています。
ポートフォリオサイトの構成
自分のアピールももちろん大事ですが、
見る人の視点で構成を考えていく必要があります。
デイトラでは基本構成を
- ファーストビュー（画像）
- わたしについて
- できること
- 実績
- お問い合わせ
上記のようにしています。
それぞれ、見ていきます。
ファーストビュー
これは、ページを見てくれる人が一番最初に目にする部分です。
絶対に見てほしい、伝えたいことを書くべきエリアということです。
「背景画像」と「強いメッセージ」を組合せて作るのが一般的なようです。
わたしについて
所謂、自己紹介ですね。
相手が共感できるポイントや、
さりげなく自分の仕事への想いを混ぜると良いそうです。
「自分が相手にどう見られたいのか」を軸に文章や写真を選定すると良いそうです。
私なら、
人生経験豊富、下からジワジワ這い上がるタイプ、寄り添える力がある
辺りを軸に考える感じでしょうか。
できること
自分が何を出来るか、どんな価値が提供できるかを書きましょう。
ここは素直に真実を書く必要があります。
ウソ、偽っても誰も幸せにならないからです。
できると思わせておいて、できません。
では、どちらも困ってしまいます。
実績
できることの証明の意味が強いです。
多くはここを見て自分の評価をしてくれるでしょう。
言葉だけの説明よりも、実際に作品としてサイトがある方が説得力がありますよね。
問い合わせ
ここは言わずもがな、連絡をもらう為の必須ポイントです。
見ている人が連絡しやすいように、作る必要があります。
なるべく煩わしくないように、注意を払って作りましょう。
私は特にそうですが、「ログイン」「入力項目が多い」など
手間が多いと離脱する傾向が強いです。
今日のまとめ
- ポートフォリオは自分の作品集のような物
- その目的は実力や実績を他者に評価してもらう事
- 最終的にはお仕事に繋がるように相手の事を考えて作るべし
今回はポートフォリオについてまとめてみました。
現在、デイトラ初級編が終盤に差し掛かり、
簡単なポートフォリオ作成を行っています。
良い復習になっていますし、
自分で「こういうことできないの？」みたいな疑問を調べて、
実際に適用したりしています。（文字に影つけるとか）
では、また。
14.Bootstrapってなんだろう？ ～CSSフレームワーク～
Bootstrapとは
フレームワーク？？
一言でいうと、
「デザインのテンプレート集」
です。
テンプレート集？
普段、CSSを用いてデザインをする場合、
CSSでクラスに対して、プロパティ、バリューを設定して
HTMLタグにクラスを書く。
それを、必要な分だけ。
そんな常識を覆すのが「Bootstrap」
用意済みのテンプレートを使用して、
時間短縮できるのです。
どんなメリットがあるの？
Bootstrapはデザインのテンプレート集といいました。
テンプレートを利用する、それはつまり
CSSを書かなくて良い！
大事なことなのでもう一度言います。
CSSを書かなくて良い！
そんなバカな…と私は思いましたが、事実だったのです。ｌ
どうやって使うの？
HTMLにBootstrapを利用する記述を書く。
HTMLタグのクラスに、Bootstrapで定義済みのクラスを設定する。
これだけです。
例えば、
div要素にmargin-bottomを付けたい場合
<div class="mb-3"></div>
とするだけで、マージンが設定されます。
いまいち、凄さがわからないんだけど？
テキストを中央寄せ、文字太さを太めに、マージンボトムを設定したい。
通常なら
CSSでは
.test{
text-align : center;
font-weight : bold;
margin-bottom : 10px;
}
HTMLでは
<div class="test">test</div>
これがBootstrapを利用して同じデザインをすると
<div class="text-center font-weight-bold mb-3">test</div>
１行で終了です。
必要なところに定義済みのクラスを書いていくだけので、
コーディングの速度が段違いです。
奥が深い
用意されているCSSがとても多いです。
興味が湧いた方はぜひ調べてみて下さい。
今日のまとめ
- Bootstrapはデザインのテンプレート集
- HTMLのタグに定義済みのクラスを書くだけ
- コーディングの速度が段違い
本日は、Bootstrapについて書きました。
こうした便利な仕組みは積極的に使いたいなと感じます。
ではまた。
13.Emmet入力候補が出てこない！？ ～大抵自分がミスってた。見直しが大事～
便利に慣れすぎた
快適に入力していたのに、突然絶望の淵に立たされたような感覚。
Emmetで思った入力が出きずに、非常に不便になった。
最初は壊れたのかと思ったが、結論そんなことはなかった。
CSSの入力でそれは起きた
前触れもなく、入力候補が出てこなくなった。
さて、どうしたものか。
何が良くて何がダメなのかを確認
何はともあれ、まず再起動。
その後、１つずつ確認していく
CSSでの入力候補→ダメ。
HTMLではできるか？
HTMLでは問題なく動作。
どうやらCSSが問題だと、あたりをつける。
何度書いても、同じ候補が表示される。
同じ候補は色関連のもの。
原因が色関連のCSSではないかとあたりをつける。
関連するプロパティの行をチェックしていく。
特定した。
color : #082b48
これだ。
おわかりいただけただろうか。
行末の「;」こいつが抜けていることに。
初心者あるあるですよね。
うまく行かない時は自分をまず疑う
私は基本的に自分を疑います。
なぜなら、私がバグを引き出せる率は低い。
情報の拡散も早いし、アップデートで改善も早い時代です。
致命的なバグは周知される速度も速いと思います。
なので、まずは自分の書いたコードを確認するクセをつけようと日々格闘しています。
１つずつ順を追って確認
先ほどのCSSの原因特定までの流れは、
何か問題が発生した時によく行っています。
ダメなところの再確認。
他のケースで発生するのか？
発生しない、ということは？
ダメなところ固有だった場合は？
このような感じで問いかけみたいに、
順を追って自分で確認しています。
誰かにすぐ聞くのは簡単ですが、
まずはこのような形であたりをつけています。
他にもミスしそうなところが見えてくる
ミスをして、すぐ聞いて解決するのと
自分であたりをつけながら解決するのだと
解決速度は前者の方が早いと思います。
ただ、後者の方が類似のミスを回避する率や
類似ミスの解決速度が変わってくるはずです。
自分で苦労して調べたり、途中で得た知識によって
＋α成長できていると思います。（思いたい）
ミスをすることは別にいい
ミスすることはいい、恥ずかしいことではない
ミスしたままにするのがダメ。
わからないのはいい、恥ずかしいことではない
わからないままにするのがダメ。
改めて、新しいことを学んでいると
こう言った当たり前の事が大事だなと感じています。
自戒を込めて。
今日のまとめ
- 大抵のうまくいかないは自分のミス
- 順を追って見直すことが大事
- ミスを自分で解決すると、類似ミスへの対応力があがる
- ミスしてもいいが、ミスしたままにするのはダメ
ではまた。
12.私のデイトラ体験記 ～初級編：3歩進んで2歩下がる～
デイトラを始めて
予備知識無しで、デイトラの学習を始めた私。
現在の学習の進捗と、普段気をつけている事を書いていきたいと思います。
初日にぶつかった壁
HTMLとかCSSとか、そういった専門用語を使った説明についていけない。
デイトラの説明は簡潔でわかりやすいはずです。
私の吸収力が足りない…。
自分の中でイメーじできて、言葉に出来ないと「？」で前へ進めない性分なのです。
それ故、わからないことが出てくると、まず調べる。
その調べた先で、わからないことに出くわしてさらに調べる。
その調べた先で…
という具合に、「わからないことが芋づる式に増える」状態でした。
また、EmmetとVsCodeのショートカットと、DeepLは毎日使おうと心に決めた日でした。
因みに、このブログのアイキャッチ画像の英文はDeepLで翻訳しています。
愚直に調べる毎日
最初の数日はわからないことを調べて、自分なりに咀嚼してイメージが固まるように
ひたすら調べて、書き留めて、整理して
みたいな事を繰り返していました。
アウトプットとして、このブログも活用しています。
イメージが固まり始めた
そうして、ある程度調べて整理し、何回も同じページを作っていました。
HTMLとかCSSがどんなものか、段々とイメージができて、掴めてきました。
ただ、動画の通りに進めてサイトが出来上がるのではなく
今、「自分が何をしているのか」を理解し、
サイトを作ることができるようになりました。（ただし、まだ初級編)
質問できる環境
デイトラはSlackを使ってメンターに質問できます。
私自身、つまずくことだらけですので、
この環境は非常に安心できます。
ただ、私は1度も質問したことがないのです。
これは、私が優秀なのではなく、
おそらく「私がする質問は既出だろう」考えているからです。
なので、まずはSlackで過去の質問を検索します。
質問の仕方のテンプレートが用意されているので、
キーワードも絞りやすいのが良いところですね。
大体、ネット検索とSlackの履歴で解決できる問題が殆どです。
（進みが遅いだけかもしれませんが…)
Emmetで展開されるのが気持ちいい
最初は全然なれずに使いこなせなかったEmmetも、今では
header>div.container>(div.header-left>h1.header-title{デイトラ})+div.header-right>ul.header-nav>li.header-nav-item*3>a
このくらいは、書けるようになりました。
HTMLテキストがズババーと展開されるのは気持ちが良いものです。
そして何より、コードを書く時間が大幅に短縮されます。
ここの辺りは毎日続けるのが大事だなと感じています。
やっぱり進捗が遅い毎日
学習動画の中で一言「さらっ」と言うような内容でも、
私の頭は「？」でいっぱいになります。
すぐに動画を止めて、調べてとやっていると
とても既定の時間で終わることができません。
とは言え、進みが遅くとも
目的地にたどり着くのが大切だと考えているのであまり気にしません。
スポンジ頭の優秀な方々を羨ましいとは思いますが（笑
今日のまとめ
- 予備知識ゼロだと進捗が遅い
- とは言え、デイトラの内容はわかりやすい
- 質問できる環境と、過去の質問が大いに役立つ
メンターの方も時間を割いて対応してくれるので、
ありがたいです。
いつか私が質問する際には、時間を奪わないように
質問力を高めておこうと思います。
では、また。
11.「float」は浮かせて寄せる ～平面なのに立体的～
floatって？
要素を横並びにしたい時に、使うCSSプロパティの１つです。
・・・
そっとページを閉じようとしている、そこのあなた！
大丈夫です。
噛み砕いて、書きますので見ていきましょう。
要素を横並びに？最初からなるんじゃないの？
要素のある性質によって、横並びになるもの、ならないものがあります。
それは以前の記事で書いた「ブロックレベル」と「インライン」のお話です。
5.昔話と侮るなかれ ～HTMLの要素には「かたさ」が存在した！？～ - web制作のしおり
参考までに。
今回のfloatに大きく関わってくるのが、ブロックレベルの性質です。
ブロックレベルの性質って？
「他の要素と縦に並ぶ」という性質があります。
その為、ブロックレベル要素はデフォルトで縦に配置されるのです。
つまり、冒頭申し上げた「要素を横並びにしたい」場合は別途設定が必要なのです。
じゃあ、どうすれば横並びになるの？
そこで登場するのが「float」です。(※横並びにする方法は他にもあります）
floatはCSSのプロパティの１つで、次のような特徴があります
- 要素が浮く
- 左か右を指定して要素を寄せる
- 要素をブロックレベルにする
3つ目はあまり知られてないと思います。
１つずつ見ていきましょう。
要素が浮く？
通常、デザインは平面に要素を配置していきます。
floatを適用すると、文字通り「要素が浮いたような状態」になります。
※目視で浮いているのはわかりません
浮いたら何が起こるのか？
通常、要素が要素の下に入り込んで重なるようなことはありません。
それが、要素が浮いてしまうので、下に入り込むような動きをするのです。
これはfloat解除の設定をするまで、維持されます。
この動きは意図しないデザイン崩れを起こすので、対応が必要です。
右か左を指定して要素を寄せる
float : leftを設定とすると、浮いた要素が左によります。
さらに別の要素にもfloat : leftを設定すると、
最初に浮いて、左に寄った要素の隣に配置されます。
要素をブロックレベルにする
インラインの要素にfloatを設定すると、自動でブロックレベルになる。
これは検証してみました。
インライン要素である<a></a>に対して、floatを設定したところ、
heightが反映されるようになりました。
※インラインheightとwidthが設定できない。参考↓
5.昔話と侮るなかれ ～HTMLの要素には「かたさ」が存在した！？～ - web制作のしおり
今日のまとめ
- floatは文字通り要素が浮くイメージ
- 要素を左右に並べたい時に使う
- floatを設定すると自動でブロックレベルになる。
今後、floatとセットでclearを使うについても整理してまとめたいと思います。
ではまた。
