【第3週】JavaScript、Sass、jQuery

/

こんにちは!
知識ゼロからWeb制作を始める、メーカー勤務のアラサーリーマンたろです!

アラサーのサラリーマンである私たろが、副業で稼ぐことを目標に知識ゼロからWeb制作を学んでいく。
その過程を記したブログです!

 

3週目が終わりました!

今週やったことは、

  • JavaScript
  • Sass
  • jQuery

全部Progateです。

今週は本業と住宅関係の打ち合わせで忙しくていつもより時間が割けなかった(ToT)

それと今日から登山も開始!

理由は健康促進!

副業までして頑張って稼いでも早死にしちゃあもったいない!

ということで土地柄そこらじゅうにある山に登ることを趣味にし始めました。

まずは最初なので光城山という低めの山に登ってきました。

この写真は光城山から縦走して行ける長峰山の展望台から見える「安曇野」と「北アルプス」の景色。

いやー田舎ですね〜

気分転換にはもってこいです♪(´ε` )

さてさて、雑談はほどほどに今週やったことについて話していきます。

JavaScript

先週から引き続きやっている言語、JavaScript

変数を定義しての条件文や繰り返し文、配列などなどプログラミング色が強いイメージ。

でも結局のところなんだかんだやって途中は複雑になるけど、最終的にはやっぱり文字の表示に落ち着く😂

これがどうやってWebページの”動き”に繋がるのかいまだに分からない。。

そんなことを考えている間にレッスンが一通り終わってしまった!

不安の残る終わり方!

YouTubeで誰かが、「Progateは触りを体験する目的で使うのがいいから一周サラッとやればいい」って言ってた。

次、書籍などで本格的に学ぶフェーズになったらちゃんとやろっと( ´∀`)

Sass

続いてSassを学んでいく!

SassはCSSの進化版みたいなイメージで、作るファイルもCSSと同じく.cssになる。

ProgateではCSSとSassが独立してあるから別物と思ってた。

Sassは、CSSを勉強しているときに感じた「こう書けたらいいのに!」が叶う言語だった!

例えば、セレクタの指定。

CSSでは「親セレクタ 子セレクタ{ }」という形で指定すると、子セレクタと同じ名前のセレクタが他にあっても、指定のセレクタのみに変更を加えることができる。

便利は便利。ただ、親セレクタが同じであっても毎回指定する必要があり少ししつこい感じがする。

親セレクタの記載が一回のみで済み、あとはその下に子セレクタへの指示を並べていく感じにならないかなと思っていました。

Sassで叶いました!笑

他にも、指示をテンプレート化したり、指示に変数を使用できたりとかなり便利になった!

これは今後、CSSをSassを駆使しながら書いていくっていうことでいいのかな?

というか書籍とかだとCSSの中にSassが織り交ぜられているなんてことはないかな?

そうだといいな( ´∀`)

jQuery

お次はjQuery

SassがCSSの一部なら、jQueryはJavaScriptの一部!

もちろん作成するファイルの拡張子はJavaScriptと同じく.jsになる。

最初のお題目はメソッドという機能!

HTMLの要素に対してアニメーションを追加することができる!

やっときた!アニメーション!

JavaScriptのイメージこれですよ!

表示された画像をフェードアウトさせたり上にスライドさせて消したりすることができるようになったd( ̄  ̄)

とここで今週は終了。

面白くなってきたところでタイムオーバーです。

来週はjQueryの続きから。

来週でProgate卒業したい!

タイトルとURLをコピーしました