00:14
はい、みなさんこんにちは。keethこと桑原です。 本日もやっていきましょう、keethのエンジニア雑談チャンネルです。
この番組では、ウェブ業界に関することや、エンジニアリング、いろんな技術についての雑談などの情報を発信していきたいと思います。
で、本日ですけども、今、去年からもそうですけど、バンタンテックフォードアカデミーというところで、プログラミングの講義をしているんですけど、
正式名称は、角川土丸子情報工科学院専門部というところですね。ITプログラミングの専門校というところでお話をさせていただいています。
で、今年前半はクリエイティブコーディングですね。P5.jsを使ったジェネラティブアートというものをみなさんで作っていきましょうという作り方を勉強していきましょうというので、
ライブラリをP5.jsを使って簡単にやっていくと。他にもたくさんいろんなツールがあるんですけど、入門向けにやりやすいし、
クリエイティブコーディングの楽しさはその途中段階のクリエイティブさは楽しむ、味わうというところに、僕は醍醐味があるというふうに感じているので、そこの話をしていったんですね。
で、後期の方は、やっぱり改めてJavaScriptを教えてほしいと言われたので、第11週ですかね、合計11週に分かれて、
JavaScriptとリアクトですね、入門者向けの講義内容を半存形式でやっていこうかなという話をしています。
何回か喋ってますけども、今回からなるべく教えない講義をしていて、みなさんに手を貸していただくということをやってますけど、
絶賛苦戦しているところですね。現在4週終わって、基本的なウェブアプリケーションというか、そもそもウェブの概要ですね。
今どういう感じでウェブって動いているとか、どんなふうなアプリケーションが動いてたりするとか、そのアプリケーションはどんなふうに動いているってざっくりとした概要ですね。
話したりとか、SPAって何ですかとか、MPAって何ですかみたいな話もざっくりしたり。
APIっていうものがあって、それを叩いて動的にJavaScriptでコンテンツを書き換えていて、サーバーへのアクセス、ページ全体のリフレッシュというのはしないようにしてますよみたいなことの話をしたりとか。
それ概要から入って、HTMLとCSSの基礎的なところですね、セマンティックなHTMLを書いていきましょうとか。
HTML4と5というのは一応バージョンの違いがあって、5でいろんなものができるようになったよとかですね、その話をしたり。
CSSも基礎的なCSSの書き方から、グリッドですね、現在やっぱりグリッドで使うのは一般的なレイアウトのお話だと思うので、グリッドのとか、あとはFlexboxも一応やりましたねっていうのをやってますと。
アニメーションとかあとパララックス的なもの、テクニカルなところとか、詳細度ですねっていうのは今回ちょっと端折りました。
まあ全部教えてたらキリがないし、11週しかないので、残りは皆さんの方で調べていただくっていうのがいいと思ってます。
これもしつこいですけど、プログラミングは習うより慣れろっていうのは僕の持論であるし、これは本当正しいと思っているので、僕はそういう教え方をしています。
4週終わって、第4週目、前回ですね。
で、ペライチのHTMLとCSSだけを使ってポートフォリオ的なものを作ってみました。
03:01
で、それを今回の課題ですね、皆さんはどんな風に作りますかっていうのを、僕は今回こんな風に作って、っていうのはサンプルのページを出しておいて、あとコードも見せたんですけど。
そうではなくて、皆さんの方に課題としては自分でデザインしたりとか、自分でレイアウトを変えてみたりとかっていう課題を出して終わったんですね。
で、第5週目、今週からJavaScriptに実際入っていって、残り7週ですね。
で、リアクトを使って簡単な自分のホームページですね、みたいなものを作っていきたいと思ってます。
で、なるべくホームページを作るんですけど、やっぱりリアクトっていうとUIライブラリでSPを作るものみたいな、まだまだ嫌いが強いと思ってて。
今はサーバーコンポーネンスとかあるので、よりコントローラブルにウェブアプリケーションを作っていけると。
柔軟な設定とか書き換えもできたりするみたいなお話はもちろんあるんですけど、一旦リアクトのスタート、先書きとしてはUIのライブラリですよね。
Vue側を担当するライブラリとして、SPAっていうのがだんだん流行り始めたなぁみたいなところで、どうだっていうのが出たので、そのお話からやっていきたいと思うし、簡単でよければ本当にSPA作るぐらいでもちょうどいいんですよね。
それをガリガリと自作するとか、JQLに使ってゴリゴリ書くみたいな話はもう終わってると思うので、リアクトを使って簡単できますよっていう話を今回はしています。
もちろんそれ以外にもVueもあるし、Riot.jsって僕の大好きなやつもあるし、他にもいろんな、今だったらLimixとかあったり、たくさん他のフレームワークもありますね。
あるんですけど、僕はQuickっていうフレームワークが一番好きなんですけどね。早いからっていう理由だけです。
さておき、いろんなのあるけど、今のフロントエンドでデファクトと言っていいかはちょっと難しいですけど、ただダウンロード数、利用事例っていうのを加味すると、
あとドキュメントとかエコシステム全部加味すると、一回リアクトをやっといて全然損はないし、リアクトできれば基本的には食べていけるだろうなっていうふうに思ったりしてるので、そういうことも加味して今回リアクトを選択させていただきました。
今からそのリアクト、そもそもJavaScriptも基本的なところからスタートしなきゃいけないので、7週で全部やるって本当に大変なんですけど、
で、カリキュラムどうしようかっていうのを実はまだ悩んでます。プログラミング講義始まってるのに今悩んでるんですけど、一応前提条件を話しますと、
先ほども申し上げた通り、プログラミングの初心者も混ざってます。もちろんクロートとかやってきたことある方、今回のフロントエンドじゃない言語をやったことある方ももちろんいます。
で、できる子はもうJavaScript、HTML、CSSも一応ある程度書いたことはあります。まあリアクトサートもないけどねみたいなとか、先ほど言いましたHTMLの基礎とかCSSの基礎は一応講義済みです。
まあすごい荒い授業ですね。全部今節丁寧にやってたら、残り7週とかそもそもこの3、4週で終わるはずがもちろんないので、それはやめときます。
あとその細かくやること自体が今回の目的ではもちろんないので、あくまでゴールはリアクトで簡単な自分用のホームページ、SPAを作るところですね。
トップページとなんか自分のアバウトページとか、なんか実績ワークスページとか、もしかしたらそのブログページとかも作るかもしれません。
まあそこまでいけたら嬉しいけどねって感じですけど、などなどもSPA的に作れればいいなと思ってますので。
それを目的としているので、しっかりHTMLとCSSをがっつり理解するってことには今回重きを置いてないです。
06:04
とにかく作れましたっていう体験とか、自分でものづくりをフレームワークとかライブルで使いこなすことができたっていう体験をやっぱさせたくて、
その体験とか実績を持って、その実績ですね、作り終えたものを自分の今後の面接とかセルフブランディングに使っていただくのも全然良いと思いますし。
とにかくプログラミングでものを作るっていうことの体験と楽しさっていうのができれば伝わってほしいなっていうふうに思ってて、
なので今回あまり細かくはやらず、使えるってことだけを最優先にしてます。
なので理解は後から皆さんが手を貸す中でやっていただきたいなと思ってますね。
勉強ってそうですけど、最初に頭で理解をするけど、腹落ちするタイミングってその瞬間ではないんですよね。
後でいろいろガチャガチャやってて、初めてストンと紙が降りてくるじゃないですか、なんか降ってくる瞬間があると思うんですよね。
そこまでは多分時間がかかるんですけど、ただ腹落ちするまでは皆さんにお任せをすると。
その手ほどきだけ最初したからねっていう感じで、僕ら教師というか教える側もそこが最終的に限界値だと思ってますし、
その先を行っちゃダメだと僕も思っているので、話脱線しましたけどこんな感じで。
とりあえずHTML、CSSの基礎をやりましたと。
JavaScriptは今から1からやります。
もちろん1からって言うので、そもそも変数はとかってところから本当にスタートすると思います。
あとデータの型とか演算子制御文、いわゆるif文、for文、
while文はやらないかな、一応説明だけはしますけどみたいなところですね。
そういう座学とかでやっぱりやっていくと、基礎的な文法をなめるって思わないんですよね。
自分でも言っといて、これ絶対面白くないし眠いよねって絶対思うので、
なるべく手を動かしながら後で都度都度説明していく方向で倒したいとは思っていますが、
これまた皆さんの反応次第なのでそこがまた難しいですね。
なるべくハンズオン形式で講義はするんですけど、
本当ハンズオンですらなく皆さんにその場で課題をゴーンと渡して、
いろいろ自分でググったり調べていただいて、
都度なんか僕に質問があれば質問いただいて、
僕はその教室をぐるぐるぐるぐる回ってやっていくみたいな形を想定していますと。
でもそうしないと結局皆さんやってくんないんですよね。
難しいですね本当に。
自分の意欲があって来てくださっているはずなんですけど、
単に単位取るだけに来てる方ももちろんゼロではないと思ってて、
ただ講義とかどんな物事もそうですけど、
末端に合わせるとそこに引っ張られてしまうので、
せっかく意欲来た子がその意欲なくしちゃうってのはもったいないので、
前4週はなるべく低年下のレベルに合わせてきたんですけど、
JSからはさすがにそれはもう無理だと思うので、
ちゃんとプログラミングロジカルなことをやるってなると、
本気で向き合っていただかないと無理だと思って、
ここからは申し訳ないですけど、
ついてこれないような方っていうのは足切りじゃないけど、
ちょっとすくうことはやめようと思います。
ただ質問が来たらもちろん対応するし、
つどつど相談とかってかあればそれは対応させていただきますけど、
講義中はやらないようにしようと思います。
ハンズオンも一昨年もハンズオン形式の講義は何回かやったんですけど、
09:00
なかなか反応が悪くてですね、
最近の子ってどうやって教えればいいかすごく難しいなと思いました。
と言っても僕が学生の頃も、
プログラミングだけじゃなくて大学の授業もそうですけど、
興味ないものを単位取るためだけに参加した授業で、
確かにそんな本気で参加したかってちょっと怪しいんですよ。
とはいえ僕は何か学びたい、せっかくお金払って、
しかも自分じゃない人のお金を借りて学んでるので、
さすがに申し訳ないなっていう気持ちは僕の中にはあったので、
なるべくは学んだんですけど、そうじゃない方もたくさんいたし、
それは若いから仕方ないだって言ったらお芝居なんですけど、
まあまあ理解はできるというので、
難しいんですよねこれがハンズオンでもダメで、
課題渡しても意欲ない方はそろそろやらないので、
まあもう全員を救うことはちょっと諦めたという感じですよね。
前提条件に雑談が多いんですけど、
で、残り70でリアクト持ちで簡単なSPホームページを作っていくと。
もしできるんだったらさっき言ったマークダウンのライブラリとかを入れて、
ホームページに自分でブログを書くことができて、
そこでどんどん草を生やしていくことができるみたいなこともやりたいと思ってます。
今回正直泣く泣くカットしたんですけど、Gitの講義はやめました。
いや本当はGitやりたいんですけど、
Gitを入れると11週じゃ無理だねって正直思いましたし、
情報量多いんですけどGitまでやってしまうと。
なのでリアクトカット、リアクトやめて、
単純にHTML、JS、JavascriptとGitならまあまだちょっと考えられるんですけど、
静的なHTML、JS、Javascriptをやって面白いかっていうと多分面白くないんですよね。
わざわざこうクリエイトエレメントでドムをゴリゴリ作って、
でそれをアドして、とかイベントリスナーもアドイベントリスナーをガッと書いていって、
それをさらに状態管理を自分でやるとか。
まあ大変だし今の時代便利なツールあるのにそれを一からやることの意味はありますよ。
ちゃんと中身、裏ではそういうことをやってるけど、
それをラップして簡単に書けるようになった便利でしょっていうのを理解するために
書くのは全然いいんですけど、
そもそも入門者にそれをやらすのは、
多分今の時代はちょっと合わないんだろうなって感触があります。
それは今どんどん結果を早く求められているとか、
能力が若い方に求められすぎている嫌いはあるんですけど、
とにかくできるっていう体験をすることのがまずは大事なんだろうなっていうのはちょっと思ってて。
まあいろいろ加味してGitは今回なくなくカットしましたが、
一応お話はしてます。
世代管理、バージョン管理っていうのはすごく大事だよって話はしようと思いますし、
それをしないと結局Excelのファイルがやばいみたいなことになるのでね。
まあそういう風の歴史はちゃんと語ろうかなと。
まあでも一応やりたい、できる子はですね、
ガンガンガンガン物事を進めてくれる子っていうには、
ファイアベース使ってホスティングのところまでちょっとやりたいなと思ったりしてます。
さすがにAPIコールは今回やろうとは悩ましいんですけど、
でもJavaScriptの奥義でAPIコールしないっていうのもちょっとナンセンスなので、
ホームページ作るって時に、
最初想定したホームページの話でいくと、
API使わなくて単純なSPを作るところまでっていう風に考えてはいたんですけど、
結局フロントエンドの開発ってAPIコールしてデータを取ってきて、
で、ごにょってレンダリングをする。
で、それをやることで動的にコンテンツを書き換えるっていうのを体験できたりするし、
12:01
そこがミソではあるんだよね。
ただSPAだけだったらもちろん同じように、
サーバーにアクセスしないでJavaScriptの中身を書き換えてますっていう体験はもちろんできるんですけど、
なんでSPAできたかっていうと、
1回1回全部、HTMLすべてをサーバーに問い合わせて、
計算したHTMLをもらってそれを描画するっていうことをしなくてもよくなった。
なのでサクサクとスムースにページ要請に遷移したりとか、
アプリケーションを操作できたりとか、
なるべくユーザーブロッキングをやめましたみたいなことがSPAの本質ではあると思っているので、
それをするんだったらやっぱりAPIコールも入れなきゃなーっていうのを悩ましく思ってます。
だから最終成果物の中にAPIコールするものを入れるかっていうのもちょっと悩ましいなと思うんですけどね。
というので、どういうコンテンツをしようかというので、
どうやっても1周目はとりあえず基礎ですよね。
変数データ型っていうか、やっぱ基礎文法はどうやってでもやらなきゃいけなくて、
どこまで端緒って実際物作りながらやるかっていうのはちょっと悩ましいなと思ってます。
サンプルコードも基礎から入ると、
電卓にやっぱなるんですかね。
電卓面白くないけどなーと思いつつ、でもUIないともっと面白くないので、
電卓作るかみたいなところですね。
あとはカウントダウンアプリですね。
今年も11月になったので、
あと今年何日ですかっていうのを簡単にCSSとか使って背景画像をちょっときれいなものを作って、
JavaScriptで毎秒毎秒計算して数字を出していくっていうの。
その各数字をCSSであとスタイリングレイアウトを考えてやると、
APIは使わないですけど、一応基本的なJavaScriptの使い方ってこんな感じなんていうのが一応体験はできると思ってますが、
ここはフレームワーク使わないので、
ガリガリにブラウザー標準のAPIを使ってやるしかないと。
ディレクトなんたらかんたらとかを使う感じになるんだろうなってちょっと思ったりしてます。
応用もそこまでいくかちょっと悩ましくて、応用の時にto-doリストを作るかもちょっと悩ましいんですよね。
本来多分to-doリストはリアクトで作るから簡単にできましたってやっぱあるんですけど、
これをHDMLとCSS、JavaScriptだけでガリガリ1回は書いてもらう体験はやっぱしていただくのが良いのかなと。
なんでリアクト使うのみたいな話。
論より証拠で大変だったでしょ。
で実際これリアクト書くとこうなりましたみたいなのがわかりやすいんじゃないかと思って、
そこに1回の講義分時間を使うのをどうしようかなって今悩んでる感じですね。
でまたリアクト入門もいわゆるコンポーネントとかプロップスでデータを引き渡してそこを再利用するとか、
コンポーネントそのものを再利用するとかって話はもちろんやります。
これは当たり前ですよね。
であとは状態管理、ステートの話ですね。
まあでも大体ユーズステートを使ってそのコンポーネント内でデータを渡すとか、
子供のコンポーネントにデータを渡してそこをうまいこと同期とったり、
親が買ったら子供が買われるみたいなこと。
また子供の方からデータを変更したいけどイベントをどっちで発火するみたいなところは出てくると思います。
まあそういう基本的なやります。
で次の悩ましい種はリアクトフックスをどこまでやるかなんですよね。
ユーズステートはもう言わずもがなです。
これだけは100%やります。
でユーズエフェクトも悩ましくてですね、
まあ昨今のリアクトの流れでユーズエフェクトを実際使いますっていう、
やっぱ副作用って名前の通りなんで、
まあなるべくユーズエフェクトを使わない流れが今は来てるのかなって僕の感触としてもあるし、
15:00
実際の僕の今働いてる現場でもユーズエフェクトは使わない流れって結構あるなと思って、
それを使わないのが良い、もしくは使うことが悪いとは別に思ってはないですが、
まあデメリットとか副作用を使うことの副作用って結構あるので、
まあその中身にすると使わなくていいんだったら使わない方に倒すっていう風な流れなんだろうなっていう感じはしてます。
今回しかもAPIコールをあまり大きく使わないのであったらユーズエフェクトは必要ないかもなっていう、
まあ初期になんかデータごにょったりするんだったら、
それは親の方でデータを計算したものを子供に渡せばいいじゃんっていうのはもちろんあるし、
まあ渡した受け取ったコンポーネントの中でガチャッとやればもちろんいいと思いますけど、
それはエフェクトでやらなくてもっていうのはちょっとあったりはしますし、
難しいですけどそこでもねっていうのはあるんで、
まあとにかく状態っていうのがまず大事なのでユーズステートはやりますと、
あとユーズコンテキストもまあやるかなって子供のコンポーネントどこまでこうネストしていくかによりますけど、
3階層とか行くんだったらちょっとずつユーズコンテキストを考えて、
ずっと子供にこうデータのバケツリレーをしなきゃいけないってなるんだったらもう完全にユーズコンテキストを使いましょうみたいな、
なのでまあその2つは絶対やろうと思ってますけど、
エフェクトどうしようかっていうとカスタムフックどうしようか悩ましいんですよね、
ユーズステートとユーズコンテキストはもうわかりますと、
あとまあルーティングだ、ルーティングもやるのでリアクトルーターもしくはユーズルーターぐらいは使うかなとは思います、
まあさすがにSPAあるのにルーティングやらんって話はありえないので、まあルーティングはやりますと、
でカスタムフックスですよね、
まあ正直言うと僕何をカスタムフックスにするかっていう、
なんか線引きとかこうなったらこれはもうカスタムフックで切り出しましょうっていう基準が僕じゃなくて、
なのでカスタムフックスはちょっと概念説明とか紹介だけに留めていこうかなって閉じようかなと思ってます、
まあでもコンポーネント志向でやることに変わりはないので、
まあそれの一環としてフックスも実はコンポーネント的に切り出すんだよっていう話はしようかなと思ってました、
ただまあフックスの講義、
でもフックスだけで時間を使うかっていうと結局作ってる中でフックスやっぱ使うよねって絶対出てくると思うので、
まあ一緒にやるとは思うんですけど、
それのサンプルコードもまた悩ましいなと思ってます、
まあいわゆるトゥードゥアプリとカウントアプリですよね、
プラスマイナスで数字が単純に増減するだけ、
いやーあれ絶対面白くないじゃないですか、
でもまあ基礎的な話ではあるので、
結果トゥードゥはわかりやすくていいんですよねっていうので、
削除機能追加機能もあるし変更もあるし状態も管理できるしっていうので、
それのCSSとか使って見た目とかスタイリングもやったらより使い勝手UXいいよねって話もあるので、
結果トゥードゥはすごく使い勝手いいんですけど、
まあ今回のゴールがなるべくリアクトを使ったホームページを作るというところで、
最初ですね前回までにペラ1のホームページは作ったので、
まあそれはもうホームページ的に、トップページ的に使うとして、
ブログとかを作る方が良いのかなと思ったりはしてますね、
でもそうするとマークダウンライブラリ絶対入れたくなるんで、
まあ皆さんがライブラリ、マークダウンを使うかどうかわかんない、
最初は単純にhtmlとか、
もうなんなら普通にウィズウィグライブラリボーンとぶち込んでしまって、
まあこれ使ってそれを保存するみたいになるといいっちゃいいんですけど、
まあそうすると今度は保存をどこでやるのって話が出てくるので、
18:02
なると保存じゃなくてもう一個一個、
まあ個人ブログであるんだったら、
エタベースとかは今回持たない予定なので、
普通にファイルに書き出す方がいいってあればもうマークダウンファイルを作って、
それを読み込んでhtmlに変換をしてレンダリングをするっていうのが、
まあやりやすいよなとか思ったりします。
はい、でまあラストは単純にもう課題、最終課題は皆さんで作って、
でそれをみんなでこう発表しあって、
皆さんでこうフィードバックをしあって、
終わりにしようっていう流れでいきたいと思うんで、
結構まあ7週と言いながら割と詰め込みまくってるんですよね。
やっぱ11週でリアクトしかも最初入門者、html、cssスタートですみたいな人に、
リアクトで最後SPを作るっていうのは自分でも結構チャレンジだったなと思います。
で多分全員は作れないと思うし、
いやシビアに見て何人作り終えるんですかね、
多分5人とかじゃないかなと思いますけど、
まあまあでも5人でもいいのかなと思ったりしてます。
少なくとも入門した人が5人、
SPAがリアクトで作れるようになったっていうだけで、
まあ僕としてはかなりおんのじだと思ってるので、
まあそこをやろうと思います。
でまた会議はもうそういう悩みはあるんですけど、
また次の悩みは各会でちゃんと課題を出さなきゃいけないし、
それは出さないとみんながやらないからって正直あって、
僕の今回の契約内容とかミッションとしては、
ちゃんとものが作れましたってところまで持っていくことが僕のミッションになるんですよね。
でも強制させたところでプログラミングが面白いって体験してもらえないし、
これ僕の持論なんですけど、
意欲ない人に強制的に勉強させても時間が過ぎるだけで、
結局身にならないんだったらもったいないんですよね、人生の時間がね。
逆に言うと僕もその時間を使うことがもったいないんですよね。
意欲ある子がたった5人でもいいんで、
いるんだったらそのために時間を使うのは全然いいんですけど、
そうじゃないんだったらお互いに不幸になるので、
なるべく全員拾うことはもちろんやめようと思ってます。
とはいえ、課題出してあげないと次のステップというか、
授業の内容だけを謝教するだけだと、
プログラミング謝教ってそんな身にならないのは僕もずっと体験してるので、
自分で考えて何かをもろうと作ってもらうというような場を作るには、
やっぱ課題を渡すのが一番だと思うので、
その課題の内容も悩んでるんですよね。
講義中でやってしまうことがほとんどで、
それを次の授業までのホームワークにする内容にまた悩んだりしてるというところですね。
この辺なんか皆さんの経験値だったり知見だったり、
自分はこういうことを過去にやったことありますみたいなのが、
もしあればですね、ご意見もらえたらすごく嬉しいなと思いますけど。
はい、今回はそんなことに悩んでますよっていうのでお話ししてみました。
何か参考になったら幸いです。
はーい、じゃあそれでは終了していきたいと思います。
お疲れ様でした。
