00:03
ManaのWebクリエイターカフェからのお知らせです。
現在、リスナーの皆さんへ、番組に関するアンケートを期間限定で実施しています。
回答していただいた方の中から、抽選で10名様にAmazonギフト券1000円分をプレゼント。
詳細は番組概要欄のアンケートはこちらをご覧ください。
ManaのWebクリエイターカフェ
私はリスナーでWebクリエイターBOXを運営しているManaです。
Web制作を勉強中のかけだしちゃんです。
この番組では、Webコンテンツ制作で役立つ知識やノウハウ、キャリアのお話をしていきます。
今回のテーマは、jQuery・Sassを使った制作です。
正直、jQueryとSass、私自身が使う頻度はだんだん下がってきてはいるんですが、
今でもかけだしさんとか、勉強を始めた方にはお勧めしています。
なんで今でもお勧めしているのか、そして、jQueryやSassがなくならない理由はどういったところにあるのか、
あとは、jQueryとSass、今後はどういうふうに付き合っていけばいいのか、
そういったところをお話ししていければいいかなと思います。
かけだしちゃんは今回のテーマにどんなイメージを持っていますか?
プログラミングの匂いがしますね。
カリキュラムを見た時から、いつかは来るんだなって思っていたんですけれども、
ついにテックアカデミーさんのカリキュラムもここまで進んできてしまいまして、
苦手科目の匂いがするので、まだうーんという感じです。
なるほど、そうですね。
じゃあまずはjQueryのお話からしていきましょう。
jQueryですね、今まで使ったことがあるんでしたっけ?
ある気がします。
どういうことかと言いますと、昔のスクールでもらったテンプレートにもしかしたら入っていたのかもしれません。
ランディングページのボタンがミョンミョン動く仕組みが入っていたので、
もしかしたらそれがjQueryだったのかなと思っています。
なるほど、ファイルが一式になっているテンプレートを渡されて、その中に知らず知らずのうちにあったかもという。
あったかもしれません。
なるほど、なるほど。
jQueryって簡単に説明するとどんなものだと思いますか?
ウェブサイトにアニメーションを付けられるやつ?
おおむねあってます。
アニメーションだけじゃないんですけどね。
JavaScriptという言語をより簡単に使えるようにしたようなライブラリと呼ばれるもので、
私よくカレーのルーというふうに説明をしているんですが、
カレーってすごいたくさんのスパイスを調合して作っていくものなんですけど、
それを一からやっていくと大変ですよね。
03:01
なのでカレーのルーみたいな感じで、すごく親切な人たちが作ってくれて、
カレーのルーだったら食品会社の方が作ってくれていて、
それをお湯でいい感じにするとおいしいカレーが出来上がりますっていうようなものなんですが、
まさにそんな感じで、JavaScriptを一から書いていかなくてもある程度まとまったような状態にして、
必要なところだけ指定すれば、ここで使いますというふうにやれば、
アニメーションだったりとか機能が実装されますっていうようなものです。
なので、JQueryって何ですかって言われた時に、カレーのルーですっていうふうに答えれば、
分かる人には分かると思います。
分かる人には。
何の知識もない人に言われても、おいしそうって思えるかもしれないですね。
おいしそうなサイトができますね。
できます。
じゃあ、難しそうだなっていうふうに感じたかもしれないんですが、
どういったところでそういう難しそうだなって思いました?
テックアカデミーさんのカリキュラムで触りまして、やっぱり難しいなと感じてしまいました。
HTML CSSとは、まず書き方や読み方が変わっているので、そこから難しかったです。
書き方は、すごいざっくり言うと、JQueryって、こいつをこうすると、こいつがこうなるよっていう読み方だと思うんですけれども、
正直ですね、要素が4つあるだけで混乱してしまいまして、
自動車教習所で突然右と左が分からなくなったっていうあの時ぐらい、いきなり何も考えられなくなることもありまして。
とりあえずですね、JQueryの書き方は、まずはこういうものなんだよと納得するだけでもいいのかなと思うんですけども、
自分を無理やり納得させるのも一苦労しました。
なるほど。まず今の話で思うのは、車を運転しない方がいいかもしれないですよね。
はい。
右と左がってなっちゃうんですか、いまだに。
そうですね。最近は運転する機会全然なくなったんですけども、当時原付とか乗ってるときですね、ウインカー出すときに、あれ、今自分が行きたい方向右だけ左だけって。
パニックになりやすい人は、もしかしたらそういうのがあるのかもしれないですね。
きっとそうかもしれませんね。
ちょっと落ち着いて考えたらわかるけど、急かされたりしたらわかんなくなっちゃうみたいな。
確かにそういうのあるかもしれないですね。
JQueryで言うと、今おっしゃったみたいに、結構指定するものが増えてくるんですね。
ボタンっていうのをまず設定して、ボタン、クリック、画像、動くみたいな感じで、結構やることが多くなるので、そこの紐付けがちゃんとできれば面白くなってくると思うんですが、
06:05
最初は、もう動きませんけどっていうことがあったりとか、思いもよらないところが動いたりとか、そういうところもあるかもしれないですね。
そこがちょっとまだ難しいかなと。
右、左に加えて、上、下も出てきちゃったなって感じでしょうか、JQueryは。
それがさらに行くと、奥行きまで出てきますので。
上下左右、あとは奥行き、Z軸ってやつですね。
はい、突然のZ軸に惑わされたりするんですね。3Dが来ると大変になります。
その分、動かせる範囲が広くなると、アニメーションの幅も広くなるので、表現がすごくしやすくなってくるんですが、これはまた次のお話。
今はあまり考えない方が幸せになれるかもしれないですね。
そうですね。
JQueryでできること、簡単な動きをつけるのがすごく得意なので、小規模サイトでよく使われますね。
先ほどおっしゃったみたいにLPとか、1ページもののサイトとかだったら、ちょっとここをクリックしてビヨーンと動かしたいとか、っていうようなものをスピード感を持って制作できるので、そういったところはメリットになると思います。
今後も伝われることがないかなっていうのは、そういう小規模サイトですね。
大規模なサイトになってくる、何百ページもあるようなサイトになってくると、JQueryだけだとちょっと読み込みに時間がかかったりして、動きがもっさりしてきたりとか、制限が出てきたりということもあるので、JQuery以外のリアクトだったりとか、ビューだったり、そういう別のライブラリを使うことが増えてくるかなと思います。
なので、今だったら本当に半田画面にクリックして、メニューがビヨーンと上から出てくるみたいなのを作ったんでしたっけ?
はい。カリキュラムで教わりました。
そういったところから始めてみると、結構動いた時って嬉しくないです?
楽しかったです。
楽しいっていうのを実感してもらうためにも、JQueryから入るっていうのはおすすめですね。そうじゃなくて、一からじっくりJavaScriptを理解して書いていきたいですっていう方には、JQueryじゃなくてJavaScriptから書いていってもらってもいいかなと思うんですが、
ウェブ制作、ウェブデザイナーにとっては使いやすいものかなと思ってます。
なので、JQueryはもう使わなくていいよとか、学習しなくてもいいよっていう声は結構昔からあるんですが、なんやかんや続いてますので、すぐになくなることはないです。
JQueryを勉強したけど意味ないのかなっていうことはないので、安心して使ってもらって大丈夫かなと思います。
興味がある方はJavaScriptもね、一から勉強してみるといいかなという感じですね。
まなさん、まなさん。
はい、どうぞ。
JavaとJavaScriptは別物なんですよね。
09:02
はい、その通りです。
はい。
はい、これよく聞かれますね。JavaScriptを省略して、私Java今勉強してますっていう方いらっしゃるんですけど、大抵JavaScriptのことですね。
はい、これの違いが結構、メロンとメロンパンぐらい違うというふうに言われていて、JavaとJavaScriptって、その名前にJavaってついてるのと、プログラミング言語っていうところは共通なんですが、
はい。
メロンとメロンパン、メロンっていうのが名前についてるけど、食べ物っていうところも共通なんですが、全然違いますよね。そのくらいです。違います。
ありがとうございます。
Javaはね、ウェブ制作とはちょっとまたかけ離れてしまうので、混同しないように。
はい。
JavaScriptを勉強しようと思って、Javaの本を買わないように、ちょっと気をつけていただきたいですね。
はい、気をつけます。
はい。
グリーンにかけない転職裏話ラジオ、略してグリテンラジオは、転職アプリグリーンの運営メンバーが、個人的一押し企業について語ったり、現場で感じる転職や中途採用のリアルについて話す音声番組です。
毎週月曜朝6時更新です。通勤や休憩時間のお供にぜひお聞きください。詳細はカタカナでグリテンラジオと検索してチェックしてください。
では続いて、SASのお話。
昨日ちょうどメンタリングがあって、SASをちょうどお話をして勉強していたところなんですが、
カリキュラムだけ見たらちょっとわかりづらいなっていうところがあったので、実際に私が画面共有しながら、こういうふうに書いたらこうなるんだぜっていうのを説明したと思います。
どうなんですかね、やっぱり実際に見たほうがわかりやすかったりしました?
本当にありがたいです。授業していただいて。
そうなんですよね。ちょっと書き出しちゃんが苦手意識のあった入れ子、ネストっていう概念があって、親要素の中に子要素のものを入れていけるっていうようなものなんですね。
そうすることで親子関係がわかりやすくなったりとか、書き方がまとまって管理しやすくなるっていうようなものだったんですが、ちょっとまだこれ書きづらいですかね。
そうですね、書きづらいです。個人的には入れ子ではなくて、リブ括弧処理括弧閉じ、リブドット、あれ?入れ子じゃないほうがですね、私はまだ見やすいなって思ってます。
はい、言語化も難しいくらいにちょっとパニックになりがちなんですと。
入れ子難しいです。
これが何が便利かっていうと、今言ったみたいにディブなんとかディブなんとかみたいな感じでディブディブ書かなくて済むと。
12:00
同じ処理のものは全部一括して書けるので、その今言ったディブのところがセクションに変わりますってなったときに、全部変えずに一番上のセクションのところだけ変えれば全てに反映されますよっていう書き方なんですよね。
おそらくそれはわかってるはずなんですよね。
そうですね。カラーコードを何かの名前に代入しておけば、カラーコードをちょっと変えたいなっていうときも、定義した箇所だけのカラーコードを変えれば一括で置き換わるから便利だよっていうのはわかりました。
そうですね。昨日やったそれが変数の部分ですね。変数を使えば、今言ったカラーコードなんて本当にね、F、2、3、6、Bみたいな感じで記号で書かれても何色かわかりづらいので、色の名前を付けると便利だよねっていうお話をしました。
こういう本当に使いやすいものから使っていけばいいので、ネストは別にしなくてもいいですし、こういうやり方があるんだなぐらいは理解しておければいいかなと思いますので、無理して使わなくても大丈夫です。最初は今言った変数とかは使いやすいと思うので、そういったところから慣れていけるといいですね。
あとはSaaSを使うにあたって環境構築があったと思うんですが、覚えてますかね?ターミナルを使った環境構築。なんかインストールとかしたと思いますが。
コピペするだけなので、クラウドナインを構築、設定する時よりかはすごく簡単だったなと思ってます。
そうですね。ターミナルっていうものがあって、それが使えれば、あとはコピペで用意されているものを使えばできるので、そこまで難しくはなかったかなと思うんですが、SaaSからですね、形式を変えるSaaSからCSSに形式を変換するっていうのも今後出てくる。今まだやってないですかね?
そうですね。
そういったのが出てくるので、そこから結構エラーが出ましたっていうこともあるんですが、大体はエラーが出る原因ってほとんど一緒なので、なんか違う階層にいたとか、ファイル名が違ったとか、指定するところに半角スペースがないとか、本当に決まってきているので、あんまり慌てずエラーが出たな、これだなみたいな感じでやってもらって大丈夫だと思います。
わかりました。
あとは今だったらVSコード、Visual Studio Codeとか便利なプラグインもありますので、そういうのを使えばそこまで環境構築だったり、ターミナルの使い方も難しくないので、あまり最初からビクビクしなくても大丈夫だと思います。
使いやすい機能から使っていくっていうのと、便利な機能がたくさんあるので、そういうのを使っていきましょうと、その辺を胸に進んでいきましょう。
あとは、SASを使わなくても、今、素のCSS、SASじゃなくて、CSSだけでできることも増えてきているので、例えば計算式を書くとか、今言った変数とかもCSSでできたりするんですね。
15:13
なので、SASを無理に覚えなくてもいい場面は結構あるんですが、制作会社でもし働きたいっていう方がいらっしゃったら、SASを使えた方がやっぱり便利。SASを使える人を募集してますっていう制作会社もたくさんあると思うので、そういった人には勉強しておいた方がいいかなという感じです。
個人でも一人で誰とも作業しませんと、一人でやっていきますって言うんだったらどちらでもという感じなんですが、やっておいた方がいいかなという感じですね。
かけだしちゃんは、HTMLやCSSはこれまでも勉強してきたんですが、JQueryやSASなんかの新しい技術を学ぶ時ってどんな気持ちですか?
どちらかというと怖い気持ちの方が多いですね。特にJQueryやSASからはプログラミングの匂いがしましたので、そうですね。JQueryやSASについてはやっぱり怖いです。
なるほど。新しいことが怖いというよりはプログラミングが怖いという感じなんですかね。
かもしれません。
なるほど。例えばこれが新しい技術っていうのが、そうですね。3Dのイラストを描こうとか、そういうイラスト関係とかだったら怖い感じはないんですかね。
怖くないですね。
じゃあやっぱプログラミングなんですね。なるほど。見えてきましたね。
はい。
これが昔からじゃあ数学は苦手とかそういうところが来てるんですかね。
間違いないですね。数学は、はい。
そっかそっかそっか。その学生の頃の気持ちが多分ずっと繋がっていると思うので、そこでね一度つまずいたものをもう一回読み起こすってなるとやっぱ怖いですよね。
はい。
確かに確かに。私は結構楽しくてワクワクしてるんですが、それも私が数学が好きとかそういうのもあるかもしれないですね。
そういう新しい技術って本当にこのウェブ製作の業界ではたくさんあって、何を学ぶかっていうのは別にしても今どんな技術が人気なのか、逆に開発が終わった技術だとかそういうのもあるので、それがチェックした方がいいかなと思います。
サスとかでもですね、この機能はもう使えないとかいうのも実はあったりするんですね。
はい。
カリキュラムなものは最新なので大丈夫なんですが、昔のインターネットでチェックしたときに、サスで検索したときに出てきた書き方がもう実は使えないとかいうのもあるんですね。
難しいですよね。
はい。
なので、その記事がいつ書かれたのかとかいうのをチェックしてほしいですし、今はどういう書き方が正しいのかとかそういうのも気にしてみるといいかなと思います。
18:07
はい。
ツイッターとかではトレンドを追って、新しい情報をチェックできると思いますので、宣伝にはなりますがウェブクリエイターボックスのSNSもチェックしてみてください。
はい。
今日のテーマは、ジェイク・エリー、サスを使った製作でしたが、竹田さんいかがでしたか?
テックアカデミーさんのカリキュラムもこの辺りに入ってきまして、やっぱりマナさんに色々とわかりやすく教えていただいて、
思ってたよりは怖くないものかもしれないなって、ごめんなさい、思っちゃってるところもあるんですけども、
それはやっぱり簡単なところを教えてもらっているからであって、色々やりこもうって思うと、きっとこの先もコーディングの時からおーって感じだったのが、
うわーってなって、本当にマナさんがおっしゃっていたような時刻が始まってしまうのかもしれないんですけれども、
ただ、ジェイク・エリーはきちんと実装できればアニメーションもできて動いて楽しいというところもあったり、
SASもですね、HTML、CSSがきちんと組み立てられる型であれば、それがより効率化できて、
他の人が見てもわかりやすいコードが作れるかもということで、非常にメリットも大きいものなんだなっていうのも、
テックアカデミーさんで学べたので、そこは良かったと思います。
ただ、やっぱり私はHTML、CSSからまだ全然組み立てられない状態なので、新しい要素が増えてしまって対応が追いついていないという状態になっちゃってるかなと思うんですけれども、
この2つもテックアカデミーさんの今後の課題でバリバリ使用するって聞いて、正直不安でしかないんですけれども、そこはたくさんマナさんに頼って卒業できるように頑張りたいと思います。
はい、どんどん頼ってください。
今言ったみたいに、いろんなものを一気に詰め込むと、やっぱり気持ちも焦っちゃいますし、わからないわからないっていうのが強くなっちゃって楽しくなくなっちゃいますので、
要所要所でですね、復習の期間というのも設けていいかなと思いますので、今まだちょっと不安かなっていうのがありましたら、復習期間にして、それがある程度わかってきたらまた次に進むっていう形にしましょうか。
はい、じゃあ今後も楽しく使っていきましょう。
はい。
さて、この番組では感想や質問、リクエストなどお待ちしております。
番組詳細欄にあるリンクよりお気軽にご投稿ください。
Twitterではカタカナでハッシュタグウェブカフェをつけてツイートしてください。
そしてApple PodcastやSpotifyのPodcastではレビューもできますので、こちらにも感想を書いてもらえると嬉しいです。
ここで私がメンターをしているテックアカデミーについてのご紹介です。
テックアカデミーはウェブデザインやプログラミングをオンラインで学べるスクールです。
21:03
現役エンジニアや現役デザイナーからマンツーマンで学ぶことができます。
副業案件の提供を保証するテックアカデミーワークスもあるので、ぜひテックアカデミーと検索してチェックしてみてください。
またお会いしましょう。
Webクリエイターボックス マナと かけだしちゃんでした。