白圭望のクリスタル探索BLOG

こんにちは、Progateを始めて2か月。HTML／CSSは猛スピードでこなしましたが、JavaScriptを学習し始めてからガクッと学習スピードが落ちてしまいました。まあ、単純にわからなくてモチベーションが急降下しているだけなんですが。 現在の学習状況 Progate　JavaScrip学習コースII undefindまで終了 書籍『ふりがなプログラミング　JavaScrip』読破 Progate　JavaScrip学習コースI・IIを復習中 わからん過ぎてモチベーションが下がってしまったよ HTML／CSSを学んでいた時は実際にWebサイトを作りながら学んでいるので、まあわかりやすいんですよ。いったい自分が何をやっているのかが、ハッキリしているんです。 が、JavaScriptに入ったとたん、急に『これ、何のためにやってんだろう・・・？』という不安が募ってくるのです。独学者の心が折れるのってこういうところなんだな、と自ら実感した瞬間でもあります。私だけかもしれませんが、for文とか、関数とか、何に使うのかが見えなくなってしまうのです。 高校生のころ数学のサインコサインタンジェントが出てきたときに、『これ、何のためにつかうのよ？』と思ったときと同じ気分。 やっぱりかなりプログラミング学習はかなり強い動機がないと、こういうちょっとした躓きで心がボッキリ折れてしまうものなのかもしれません。 jQueryかReactを先に学習してみて わー、わからない！と思ったのでJavaScriptは一旦横に置いておいて、jQueryをやってみることにしました。 あるいはReactをやってみるといいかもしれなかったです。これらは、JavaScriptを基礎としたフレームワークということなのですが、実際にjQueryを使ってサイトを作れるので、何をやろうとしているのかが明確になるのが良かったです。 私は『わからん。』といいながら無理やり力づくでJavaScriptの講義を終わらせました。（道場編は手を付けなかった）そのまま、jQueryの学習を始めました。といっても、jQueryの学習を始めるときにJavaScriptのES6を勉強したのに、jQueryはES５を使います。と言われて、膝をつきましたが。 でも、 ES５の学習無しでも

ついにでた！Switchのフィットネスゲームの最新版 Switchのフィットネス系といえばボクササイズのできるFit Boxingが有名でした。他のソフトでもゲームしながら運動になるものっていえば、大体がリズム系という印象がありますが、今回はまた新しい形のフィットネスゲームが任天堂から登場です！いやあ、他のフィットネスゲームはいつでるんかいな？となんとなーく思っていたので、うわ！きたー！という感じです！ リングフィットアドベンチャー 公式トレーラーを見てみましょう。 リングにコントローラーをつけて、しかも、足にもコントローラーを装着するという今までにない感じですね！ Wiiの時はコントローラー振るだけでもプレイできるので実際にエクササイズにならないという話を聞いたことがあります。（楽できるなら、楽しちゃうのが人間なんでしょうかね。）このゲームはズルはできないかもしれませんね。 映像を見る限りでは、やらされるポーズやエクササイズは、いわゆるフィットネスの動きで、そりゃ運動になるし、体にいいんだろうけど、つまんないし、もう飽き飽きしているわい。というようなもの。でもその エクササイズ➕でゲームを攻略していくというのが新しいし面白い！ Bボタン連打！とか、必殺コンボ！みたいな感じで気がついたら身体中使っているという感じかな。 これだったら、『はあ、運動はしなくちゃいけないから、仕方ない。』という気分にならずに、ただゲームしてるって気分になれそうです！ どんなゲーム？ ビデオを見る限りではジャンルはアクションゲームになるのかと。コースを走って行って、出会った敵と対戦していくという感じですね。走ったり、飛んだり、なんかカッコいい乗り物に乗ったり、舟をこいだりしながら、いろんな世界を大冒険していく感じです。 映像も明るく、カラフルな感じですね！ サイレントモードがあるよ！ このビデオを見て気になったのは、ジョグ（足踏み）をさせられていること。うちはアパートなので、あのテンポだと多分ドスドスドス！！！って下の階に響いて、文句言われそうだなあ。と思っていたのですが、なんとジョグを屈伸に変えることもできるみたいですね。親切設計です。ダイエット効果を考えると、かなり効果は薄くなりそうですが。 まあ、しょうがないよね。 いやーさすが任天堂

こんにちは、現在Progateでプログラミングを学習中です。30代主婦の超初心者ですが、同じようにプログラミング学習を始めた方のために忘備録を書いてみようと思います。（ホントは自分のために） Progateのみで終わらせないように実際にエディターでプログラミングをしてみましょう！ 理解する！jQueryで作るスライダー 目標 ：PREV /NEXT　ボタンで４つのイラストを一枚ずつ表示させる 言語 ：HTML、CSS、jQuery レベル ：初心者(progateーjQuery上級編を攻略済み） 最初の一歩：HTMLを書く さて、まずはHTMLを作らねばですよね。まずは構成を考えてみようと思います。デザインはもっとカッコいいものができるようになりたいですが、まずは仕組みから理解できるようにしたいです。 １：HTMLの骨組みを作る まずは骨組みをつくります。PREVとNEXTのボタンでスライドさせます。スライドさせたいイラストはリストにします。 ２： PREV と NEXT にクラス名をつける jQueryの記述では、この２つの共有クラス名と、個々のクラス名が必要になります。 それぞれ<div>で囲みます。 赤のchangeが共有のクラス名になります 。 <div class="wrapper">    <div class=" change btn-prev "> PREV </div>    <div class=" change btn-next "> NEXT </div> </div> 3: リスト４つのクラス名をつける 4つのイラストの<img>ですが、4つとも共通のクラス名をリスト内につくります。 <ul>     <li class=" slide "><img src="...">     <li class=" slide "><img src="...">     <li class=&

さて、前回の練習サイトを作る際イラストを並べるのに非常に苦労しました。そこで色々調べているうちに出てきたワードは、グリッドレイアウトとFlexというキーワードでした。そこで今回はこの２つを使ってみることに。 今回の成果物はこちらになります。よかったら遊びに行ってみてください。 https://ponsmama.github.io/pon-and-mama/ まずはグリッドレイアウトというものを学ぼう。 グリッドレイアウトを学ぶのにとても分かりやすかったサイトはこちらです。 今度こそわかかった！CSSグリッドレイアウトの作り方と基本知識。 グリッドレイアウトを簡単に説明してみる。 グリッドレイアウトとは、サイト内に枠線を引き、その枠線を使って色々な要素を配置できるようにする方法です。この方法を使うと要素を重ねたりすることもできます。 それでは4つのアイテムをグリッドレイアウトを使って、サイト上に配置してみましょう。 まずはHTMLを書こう 4つのアイテムを、グリッドコンテイナーの中に入れ子にします。 <div class=grid-container>        <div=grid-item1>1</div>        <div=grid-item２>２</div>        <div=grid-item３>３</div>        <div=grid-item４>４</div> </div> ポイント：アイテムの中はとりあえずで良いので何か書いておくと良い。空で作るとうまくいかないことがありましたので。 CSS　グリッドコンテイナーに枠線を設定します。 .grid-container{       display:grid;       grid-template-column s : 1fr 1fr 1fr 1fr;       grid-template-row s : repeat(3, 100px); ｝ ポイント：columnsは縦の列、rowsは横の行です。列や行を増やしたい場合は、スペースで〇ｆｒ、や〇〇ｐｘなどの値を増やしていきます。アイテムの