【体験談】初心者がデイトラでプログラミングを学んだらどうなる？【19週間目】

当記事はデイトラでWEB制作コースを受講して19週間、どんな状況でどんな勉強をしているのかまとめています!

未経験、プログラミングの事は全く分からない私が、デイトラで学んだらプログラミングができるようになるのか？という趣旨で発信しています。

未経験でもできるの？
他の人がどんな風に勉強しているのか知りたい。
デイトラを受講したいと思っているけどどんなものなの？

そんな方の判断材料になれば幸いです！

なるべくコードや専門用語を使わないように書いているので気楽に見てくださいね。

ばく

swiper(スワイパー)と呼ばれるカードを横にスライドする機能に悩まされました！ありえない挙動をしています…。

当記事では

スワイパーでの失敗談
失敗の解決方法
javasvriptとcssは相性が悪い？

といった内容を書いています。javascriptとcssが絡むと変な挙動が起こることが多々ありました。それらに振り回されましたね！

＼デイトラを受けるならここから／

スワイパーでの失敗談
何がいけなかった？失敗の解決方法
javascriptを使ったらcssは最低限
【体験談】初心者がデイトラでプログラミングを学んだらどうなる？【19週間目】❘まとめ

スワイパーでの失敗談

今週もたくさんの失敗を繰り返していました。

中には他の方が見たことないようなものもあったらしく、検索しても出てこないため解決策もまとめていきます。

今週の失敗例！

グリッドレイアウトでスワイパーを調整しようとしてハマる
スワイパーの表示範囲を右側だけズラッと出したいけどうまくいかない
スワイパーのスライドが勝手に大きくなる
アローアイコンが消える
スワイパーが最初表示されない(動かすと表示される)
ブレイクポイントを入れるとスワイパーがマウスで動かなくなる

ちょっと多すぎますね(´・ω・｀)

同じように悩んでいる方がいるかも知れませんので、試した方法、解決方法をまとめていきます。

少し専門用語が増えます。

グリッドレイアウトでスワイパーを調整しようとしてハマる

グリッドレイアウトが便利！ということで使ってみたところ、スワイパーの位置調整をするのにはあまり良くなかったです。

ばく

最終的にはdisplay:gridをflexに変更したらできました。

スワイパーと文字を横に並べたいときにflexを使えばいいのに、gridを使ってために何時間も無駄にしました。

試したこと

中の要素をdisplay:blockやinlineにしても動かない
gridプロパティを片っ端から入れてもだめ

text-align: right;
justify-content: start;
justify-items: start;
align-items: start;

レスポンシブに対応できないのでだめ

grid-template-columns: auto 832px;//レイアウト幅を直接指定

わからん…となっていました。

スワイパーの表示範囲を右側だけズラッと出したいけどうまくいかない

スワイパーの表示を調整したいのにできませんでしたが、これもgridからflexに変えたら解決しました。

スワイパーの表示範囲は親要素の.swiperによって決められるけど、.swiper-wrapperは実質範囲がないようなものなので、.swiperの範囲を決めちゃえば表示範囲を決められます。

そのはずですが、親要素の.swiperにoverflow:hidden;(はみ出たら消えるプロパティ)

子要素の.swiper-wrapperにoverflow: visible;(親要素を突き抜けて表示するプロパティ)

これらを当ててやるとflexで並べた側にズラッとスワイパーが並びます。

スワイパーのスライドが勝手に大きくなる

loopを使ってスワイパーをループさせるときに、スライドの大きさをcssで調整するとおかしな挙動をする、相性が悪いとのことです。(デイトラのメンターさんに聞きました)

.swiper-slide{
 width:300px;
}

などではなく、slidesPerViewで調整すると良いとのこと。

cssで調整しているとサイトを読み込んだ直後、スワイパーの一部が消えていたり、当てたはずのpaddingやborder-radiusが効いていなかったりとしました。

中でも特にひどかったのがスライドが勝手に大きくなり続けるこれ↓

これを解消するために、

slideのwidthを消して、

containerを(親要素)width100%で指定して(サイズの指定をする)、slidesPerView:5.15とかで調整しました。

ブレイクポイントを入れるとスワイパーがマウスで動かなくなる

ばく

原因が謎なんですが、解決には以下のコードを足したら動くようになりました。

      breakpoints: {
    900: {
 mousewheel: true,｝

正直なぜできるようになったのか、なぜこのコードなのかはよくわかっていません。

アローアイコンが消える

swiperをcssで調整しないようにしたら、アローアイコンが消えてしまいました。

slideをwidhtで調整しないようにしたら消えてしまい、コードには問題ないため原因がわかりませんでした。

最終的には以下のコードを足して表示できるようになります。

swiper-button-lock{
display:block;
}

devtoolを延々と見ていて気づきました。

スワイパーのデフォルトでついているプロパティにswiper-button-lock{display:none;}が入っていたことが原因で、表示されなくなったため、display指定をして表示しています。

何がいけなかった？失敗の解決方法

多数の失敗をしてきましたが一応解決していきました！

解決に使った方法は

検索をする
チャットGPTに聞く
DevTool(webサイトを開いてF12で開く)でcssプロパティを片っ端から試す

という、全然スマートじゃない方法で行っています！しらみつぶしですね！

検索をする

誰もが最初からやりますが、やはり基本ですね。

文章で検索するとどうしても範囲が狭くなるので、単語をいくつか入れて検索する(and検索)のがメインです。

他にも、検索に使う技として

or検索を使う
-(マイナス)検索を使う

があります。~~大手スクールサイトの単語を-検索してみたりするとスッキリしますね~~

チャットGPTに聞く

最近ではデイトラでもおすすめにされている調べ方です。

「◯◯のコードを出力してください」といれるとものの数秒で返ってくるため、非常に便利ですね。

ただ、意外と実用的なコードは少なく使えないことが多いです。

私は無料版を使っているのですが、有料版ならもっと使いやすいのかもしれません。

またはGoogleのAIチャット「gemini」を使ったり、Microsoftの「copilot」を使ったりしています。

DevTool(webサイトを開いてF12で開く)でcssプロパティを片っ端から試す

問題がありそうなコード(今回はスワイパー)に直接cssを片っ端から当ててみて、どんな動きをするか見ることをします。

検索してもよくわからないときによくやります。

何か変化を起こすことが大事なので、動いたプロパティを色々な要素に当ててみてうまくいく場所を探しています。

javascriptを使ったらcssは最低限

swiperにてjavascriptを使って挙動がおかしくなり、

アコーディオンと呼ばれる要素でcssを使って表示、非表示を繰り返すのもおかしくなる。

まだまだ学習中の身ですが、javascriptとcssの相性はあまり良くないのかな？と思っています。

javascriptが絡んでくる要素には、cssは場所決め、大きさ決め程度にしておかないと挙動がおかしくなることがありますね。