見出し画像

デイトラ 中級編DAY1〜DAY6 で学んだこと

まさ

デイトラの中級編DAY1〜DAY6で学んだことを簡単にまとめてみる。

DAY1

いよいよここからはJava Scriptだ。

社会人1年目の時にJava ScriptのことをJavaと言っていたら会議で先輩にめちゃくちゃ怒られたのは良い思い出だ。

JavaとJava Scriptは全然違う言語なのだ。

静的とか動的とか、Webサービスやアプリ開発向けとかWebページの動きをつける為の開発向けだったりとか色々違いはある。

誰が言い出したのかは知らないが、非常によく言われる例えは

JavaとJava Scriptはメロンとメロンパンくらい違う

JavaとJavaScriptの「別物感」を印象づけるフレーズ集

いや、上手いこと言うな。笑

で今回勉強するのはメロンパン、いやJava Script。
画面に動きをつける言語だ。

HTML：Webページ構成や文章を記載
CSS：ページの見た目
Java Script：ページを動かす

というイメージだ。

Java Scriptからはいよいよプログラミング言語だ。
HTMLやCSSはプログラミング言語ではないからな。

Web作成ってカテゴリーを除いて考えてもJava Scriptを扱えるってだけでかなり案件は増える。
フリーランス案件でJava Scriptの案件は非常に多いですよね。
もちろんJava Script単体の案件なんてないですが。

DAY1で学んだ主なことは以下。

  • 変数と定数

  • 関数（function）

  • 条件分岐

昔エンジニアやってたころにJava Scriptを触ってたのもあるし、最近GASである会社の業務改善ツールを作成したりなどしたので、この辺は全く問題なくできた。

変数と定数　＝　const　と　let
関数　＝　function()
条件分岐　＝　if　と　else if　と　else　と　Switch

辺りを押さえておけばいいな。
Switchってあまり使ったことないけども。

DAY2

ここからが分かりにくくなる所だよな。

今日学んだことは以下

  • 配列（Array）

  • オブジェクト（Object）

  • 繰り返し

配列はindexの理解が大事。
昔エンジニアやってた頃に、先輩からindexが0からスタートすると言われた時は
「開発者はなぜ1からにしなかったんだよ…。」
と思ったっけな。笑
lengthの時、混乱するんですよね。

そしてオブジェクトも非常に重要。
配列もオブジェクトだ。

プロパティ（キー）と値（value）がセットでデータを保持する考え方。
オブジェクト思考ってやつだったな。

なんだか昔の記憶が蘇ってきたぞ。

繰り返しはfor文の書き方だ。

for...of 文の書き方だけ覚えてなかったな。
こんなのあったっけ？？笑

何にせよ、以前やっていた経験と最近のGASで頭を悩ませたことは無駄になってなのが嬉しいな。

DAY3

DAY3はDOM操作だ。
この辺から備忘録的にしっかり書こう。

DOM　＝　Document Object Model
の略。
直訳すると【ドキュメントを物として扱うモデル】ってこと。

Webページ（HTML）をドキュメントとして捉え、それぞれ構成している要素を物として捉える。
そうすることでJava Scriptを使って、物に命令を飛ばし、表示を大きくしたり、変えたりする。

そのHTMLとJava Scriptをつなぐ（翻訳？　橋渡し？）のがDOMだ。
ツリー構造で考えると分かりやすい概念だ。

JavaScript初心者でもすぐわかる！DOMとは何か？

このページが分かりやすかったのでリンク貼っておく。

そして今回学んだのは以下。

  • HTML要素の追加

  • ボタンの操作

  • イベント監視

この辺から書き方のお作法が分かりにくくなっていく。
初心者でエンジニア脱落する人が多発する危険エリアだろうな…。苦笑

HTMLのデータの取得の仕方はid、class、タグの３つ。
取得したデータはgetElementByIdで書き換えることもできる。

setAttributeやappendChildで要素の追加も可能。
これ最低限は覚え直さないとだー。
分からない所はググるけどある程度の知識がないとググりようもない。
頑張ろ。

ボタンの操作は作成したログインボタンを押下して指定したURLの先に飛ぶかどうかを確認。
エンジニア気質がある人はリンク先に飛んだ時にニヤッとするはずだ。笑

そして最後はイベント監視。
onload編とclick編。

これも面白いな。
こういう動きがある画面って分かりやすくていいよな。
初心者にはJava Scriptは処理結果が画面の見た目で分かるからおすすめな気がする。

DAY4

ここからはjQuery。
もう実務では使われていないという話もよく聞くが、Web作成の現場だと使われているらしい。
Web作成エンジニア界隈はちょっと事情が違うんだな。

jQueryはJava Scriptのライブラリ。
超頭良い人がよく使う処理を先に定義してくれていて、超簡単にプログラミングできるようにしてくれたものって感じだ。
こんな答え方したら職場では白い目で見られるんだろうな。笑

jQueryを使うメリットは3つ。

  1. 短いコードで簡単にかける

  2. ブラウザごとの対応がいらない

  3. 便利なライブラリがたくさんある

今回学んだことは以下

  • jQueryの書き方のルール

  • メソッドを使った要素の指定

  • イベントの監視

  • アニメーション

それぞれの要点を以下に書いていく。


jQueryの書き方のお作法は以下の3つ。

  1. $マークで始まり

  2. function()で囲む

  3. $("主語").動詞("補語")の文法ルールで書く

HTMLからjQueryを使うにはCDNを利用。
CDNはファイルを手元にダウンロードしなくても簡易的に活用できる仕組み。


メソッドを使った要素の指定も学んだ。
ポイントは

  • 子要素の中から探す時はfind()かchildren()を使う

  • find()とchildren()の違い

この指定の違いを理解しないとだな。
実務では使う機会多そうなイメージ。


イベントの監視は要素をクリックしたときに何か特定の処理を行う方法などだ。
代表例としてclickとhoverで実演した。

jQueryだと圧倒的にコードが短い。
凄い。


そして最後はアニメーション。
スライドのように開閉して表示は
slideUpとslideDown

フワッと浮き上がる表示は
fadeInとfadeOut

の2つを実演でやった。
画面で分かるのが面白い。

DAY5〜6

ここからは実装だ。
自分が作ったデイトラの簡易サイトで、以下の機能を実装する。

DAY5
課題①：ドロワーメニューの実装
課題②：ページトップへ戻るボタンを付ける

DAY6
課題③：モーダルで画像の拡大表示

1番てこずったのはドロワーメニューの実装だった。
子要素に入れないとドロワーメニューの内容がずれまくる。笑
気づくのに1時間以上使ってしまった…。

だが大事なのは最後に書いてあったことだと思う。

【重要】仕事において「自作 = 正義」ではない。
プログラミングは学校のテストではないし、「車輪の再発明」をするのも無価値。
プログラマーの実装力とは「＝書ける力」ではなく、「調べれば作れる力」も含めて"実装力"である。

デイトラ

これは肝に銘じよう。
よく何時間も悩んでしまうタイプなので、非常に突き刺さる。

数こなしながら、どんどん自分の中のストックを作り、良い意味で「調べれば作れる力」を育んでいこう。

この記事が気に入ったらサポートをしてみませんか？