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