【RaiseTech】超初心者が1から学ぶプログラミング記〜その8〜

公開日:2020/8/5 最終更新日:2021/2/20

こんにちは!ナガタロックです!

このブログでは2020年6月より

RaiseTech 〜WordPress副業コース〜

を受講し、プログラミング超初心者の著者の成長の記録や感じた事を記録して行ってます。

このブログでは

・学習の記録

RaiseTechの学習内容

RaiseTechを受けて感じた事

をまとめています

今回で8回目!

今回のテーマはjQueryプラグインを使ったスライダーの実装です!

内容としては第5回講義の続きです。

スライダーとは

一つの領域で複数の画像や要素を表示するUI

最近様々なサイトで見ます。

ファッション通販のサイトだと、

セール情報やシーズン製品などへのリンクへ飛ぶ写真仕様になっているのを

よく見ますね!

メリット:限られた領域で複数のコンテンツを見せられる

デメリット:ユーザーがすぐにスクロールするとじっくり見られない

ナガタロック)本当実装していないサイトないんじゃない?

というくらいよく見ますね!

伊藤智仁の鬼スライダーを何年かに一度YouTubeで見たくなるのは

私だけでしょうか?

jQueryプラグインを使ったSlickの実装

Slickとは

スライダーを実装するためのプラグイン。

以前よりスライダーを実装するのにポピュラーに使われているそう。

githubにて公開されている公式サイトよりダウンロードして

使用する。

様々な動きのオプションがあるので、

用途に合わせてダウンロードしてhtml&cssにコーディングしていく。

Slickの特徴

・jQueryを利用したプラグイン
・レスポンシブに対応している
・ブレイクポイントごとの設定の振り分けが可能
・タッチデバイスに対応
・縦・横カーセルに対応
・画像遅延ロード機能
・MITライセンス




ナガタロック)プログラミングを学習しだして、

よく耳にする「プラグイン」

このブログもそうですが、本当に便利で楽が出来る物がたくさんある!

開発者様達に感謝感謝ですね(≧▽≦)

プラグインなので、特別に知識を積んで実装というよりは

公式サイトから引用でほぼほぼ実装出来るので、

お手軽に使えちゃうわけです!

どうでもいいけど、「jQuery」って

めっちゃタイピングしづらい…

この気持ち、誰かと共有したい。

jQuery不要のSwiper実装

Swiperとは

jQueryを使わないスライダー。

近年はSlickよりもよく使われているそう。

こちらも公式サイト

よりダウンロードして使用する。

実装方法はSlickとほぼ同じ!

Swiperの特徴

・jQuery不要(重たくならない)
・レスポンシブ対応
・ブレイクポイントごとの設定振り分けが可能
・タッチデバイスに対応
・3Dエフェクト
・Flexboxレイアウト
・画像遅延ロード機能

赤字部分がSlickにはない特徴。

ナガタロック)素人目線ではSlickとそこまでの差はない印象

だが、3Dエフェクトのオプションの豊富さが

現代的というか、洗練された印象を与え

近年人気を博しているのかなと感じました!

質疑応答

今回の講義は短め!

その分質疑応答の時間に多くを割り当てられました。

Q
レスポンシブのサイズの目安がサイトによって様々ですが、オススメのサイズはありますか?
A

近年様々なデバイスがあるので、明確な正解はない。
流行などの情報はググって調べよう!
ちなみに講師のYATさんは

スマフォ〜640px タブレット〜768px PC〜960px 大画面用PC 961px〜

で去年から設定しているそう

Q
FLOCSS設計において、@importでファイルを細分化する必要があるか?
A

必要あります!情報量が多くなってくると、行数も長くなって管理が大変になってくる。
コーディングしやすいというより、管理・修正しやすいようにファイルを細分化する癖をつけておきましょう!

Q
FLOCSSにおける命名規則について
A

まずはサイトの内容(コンテンツ)を考え振り分ける。
projectsなのかcomponentなのか?
振り分けた中で「p-○○」とか「c-○○」とか命名していく。
○○の部分は、それが何を意味するのか?を考えて決める。

今日の感想

今回の講義では、jQueryのスライダーSlickとSwiperの解説のみだったので、

講義時間は短め。

その分、現在取り組んでいる

ハンバーガーサイトのコーディングの課題

についての質問が多く出来て良かった。

RaiseTechの講義や課題をしていて感じるのが

課題をするための技術や知識を教えるのではなくて、

実践を想定した技術、知識、考え方

を教えてくれていると強く感じます。

正直FLOCSSって何?

って感じで課題に取り組んでいってますが、

課題レベルではなくて、

案件レベルで考えていった時に

必要なやり方や考え方なのだろうということが

課題を進めていくなかで、少しずつ感じてこれています。

実際に現役エンジニアの方達が必要だと思って

教えてくれている事なので、

最初はチンプンカンプンでも

いつか

「あの時覚えていてよかった〜」

と思える日がくるのでしょう!

FLOCSSだけでなく、sassやSLACKやgithub等も

リモートワークやチームでの作業を想定しているから

しっかりやり方覚えておけよ!と言ってもらえているのだと

ここ最近感じるようになりました!!

何事も目的というものを見失わないように

講義を受けていこうと思います\(^o^)/

そしてRaiseTechが気になるという方は

是非公式サイトより無料体験会or受講のお申し込みを(●´ω`●)


ABOUT US

この記事を書いた人

ナガタロック

このサイト作成者の写真

アパレルメーカーに勤める30代男
2020年より「RaiseTech」にてプログラミング学習を開始
講義内容の学習記録
副業に関する情報を発信しています

  • カテゴリー