00:06
はい、みなさんこんにちは。kkeethことくわはらです。本日もやっていきましょう。
kkeethのエンジニア雑談チャンネル。この番組では、ウェブ業界やエンジニアリング、いろんな技術についての情報を、雑談形式で発信していきたいと思います。
えーと、タイトルにあります。ネタはあるんですけど、まとまりが多分なくて。
まあ、技術的な話も一応できなくはないんですけど、技術じゃない話とか、最近知った雑学とかも、いろいろ感動することがたくさんあったので、
まあまあ、その辺の話をダラダラとやっていこうかなというところですね。
えー、まず昨晩何やってたかというと、何度もこの放送で言ってますが、
門川土案語情報工科学院、旧バンタンテックフォードアカデミーという市学校で、プログラミングの講師をしてるんですけど、
今やっているJavaScriptとReactの入門講座ですね。
11週かな、結局。12の予定が11週にちょっと減っちゃったんですけど。
JavaScript、HTML、CSSの初歩から入って、Reactをやって、で、ReactでSPAで何か作ろうというところで、
まあ、受けた学生さん全員に、自分のポートフォリオとかホームページを作ってくれと。
Reactを使って、SPAでもいいし、Pera1でもいいですし、それを最終的には皆さんで作れるようになりましょうっていうのがゴールにしてます。
で、今日の講義が最終講義で、それの発表会ですね。
今日が最終日で発表会をして、みんなでフィードバックをしあって、最後、なんか僕がおじさんらしく講説をのたまって終わるみたいな感じですけど。
まだ今日、最後に何を学生さんに喋ろうかっていうのはちょっとまだ悩んでるんですけど、まあまあそんなところをやってました。
で、最終課題はさっき言った通り、Reactで自分のポートフォリオとかを作るって話だったんですけど、
そういう課題を出しておきながら、自分自身も自分のポートフォリオを実は作ったことがなくて、今回初めてやってみようと。
厳密に言うとポートフォリオ自体を作ったことないわけではないですけど、本格的にちゃんと作り込んだなーっていうことはなかったので、やってみようというところですね。
課題を出したんだからお前もやれよっていうことで、先生と言う私もやりましたと。
で、まあなんとかそれっぽい形にはなったな。
で、今回技術選定をじゃあどうするかっていうところだったんですけど、まあ学生さんに出した課題と同じような温度感でやって、
まあとりあえず僕だったら一晩でこれぐらい作れるよっていう一つの例ですね。
をやってみました。
1日あればぶっちゃけるとSPAで自分のホームページぐらい、まあ本当に作り込みまでしてはないですけど、
簡単なもので良ければ作れるよっていうような1例を見せたかったというのは正直あるんですね。
で、一応作ってあります。
で、今まだちょっと最終コミットもまだプッシュできてないですけど、一応もうネットに上がってて、
私のGithubがもし見れる方は適当に眺めてもらえればと思います。
マジで雑なものを作ってるんですけど。
なんだっけ、サンプルホームページみたいなリポジトリを作ってそこにアップしてますね。
で、バーセルにホスティングしてます。
そんな感じですね。
で、技術選定の話でどうしようかって結構いろいろ悩んだんですけど、
まあとりあえずリアクトとSPAなんですけど、今回は僕も久しぶりに開発をするっていうところだったので、
03:06
そもそもバンドラーのアップデートからしなきゃいけなくて、
僕ずっとまだWebpack勢だったので、
いやいい加減ビートやらにはいけんやろっていうので、ビートに触りました。
まあ本当はネクストやりたいしネクストアップルートはやりたいんですけど、
さすがにHTMLからやる学生さんに対して最終的にネクスト触れっていうのはまあ鬼だなと思ったし、
まあそんな学生さん、一応1名だけそれについてこれる学生さんがいていたんですけど、
で、もう1名はもうなんかそもそもやったことあるっていう学生さんだったので、
この2名は除外でそれ以外の学生さんはまあ無理だったからリアクトの素のリアクトからやろうと思って、
で、クリエイトリアクトアップはもう公式が推奨しないと言ってるので、
じゃあ何にしようかなっていうのでビートにしましたと。
で、ビートももちろん最初からリアクトルータードームが入ってるわけではないので、
ルーティングは後からやったんですね。
まあSPAをやるんだったらルーティングは必須ではあるんですが、
ビートのリアクトテンプレートだとルーター入ってないのでリアクトルータードームも後から入れて、
どういう風に書いていくのかっていうのですね。
ルーティングの設定っていうのも一応1回講義の時間をもって皆さんでやって、で、SPAをやらせたと。
まあ僕もそれに習ってやってた感じです。
なのでリアクトとリアクトルータードームとバンドラーはビートでやりました。
で、トランスパイラーでバベルとかどうしようかっていうところは悩んだんですけど、
今回タイプスクリプトも使ってないですし、そもそもまあJavaScriptスタートからっていうところもあるので、
あえてやらないことにしましたね。
その辺はでも発展課題というか、最終的にこういう技術の、
実際にプロとしてはこういう技術使ってますよねっていうので、
まあそういう紹介をして終わる予定ではあるんですけど。
なのでTSも使ってないし、バベルも使ってないし、
あとESLintは自動で入ってるんで、皆さんも使ってるんでしょうけど多分意識してないと思いますとか、
あとはCommitLintとか何やらかんやで、そういう周辺系ですね。
静的コード解析のBlitterか、は入れてないですね。
最近でもBlitterとESLintみたいなコードチェックとコードフォーマットが一緒になったようなライブラリも、
最近どんどん出始めてるっぽくて、ちょっと覆えてないんでそれもやりたかったし、
あとBeatのテンプレートだと対話型的にSWCですね。
っていうやつもあるんですけど、これもあえて使わなくて、
そのReactをとにかくやってくれっていうのにフォーカスをした。
僕もそれに習ってやった感じですね。
で、あとなんだっけ。
スタイリングか。
CSSフレームワークが今回何するかすげえ悩みましたね。
Reactなんで、安藤デザインとか、
もしくは原点回帰してBootstrapやってみるかって思いました。
今バージョン5だったけど、僕が触ったのもっともっと前なんであれですけど、
なんだかんだState of CSSとかNPM Trendsとか見たんですけど、
ダウンロード数はやっぱりですね、Bootstrapが頭一つ出てるんですよね。
ということで、いろんなフレームワーク出てるのにまだにそんなにBootstrap使うんであれば、
改めて数年ぶりに触ってみるかってのもちょっと悩みましたね。
あと、日本人が作られているKUMA UIですね。
06:00
あれを使うのも一つかなと思ったし、
CSS in.jsのライブラリもたくさん出ているので、
その辺の一つを触ってもいいなと思ったし、
でもCSS in.jsはもうした美感はありますよね。
一応エモーションもスタイルドコンポーネントもやったので、
まあいいかなっていうところですね。
ゼロランタイムCSS in.jsもちょっと悩ましかったんですけど、
これを一晩で今からキャッチアップしながら書くのはしんどそうだなっていうので、
ちょっとやってみて、すぐに方向転換できて捨てやすいもの。
ドキュメント見たり、ある程度は似たようなことを昔もやっていたっていうこともあって、
最終的にはTailwind CSSを使いました。
Tailwind CSSのリアクト互換というかリアクト対応したものって、
ヘッドレスUIっていうものに依存するらしいですね。
Tailwind CSSの公式ドキュメントにも書いてあったんですけど、
インストールするときはヘッドレスUIっていうものも一緒にダウンロードしてくれと言われまして、
今そんな感じなんやっていうのを見て思いました。
見て結構面白かったし、かなり美しいものだったし、
単なるTailwindだと、要はユーティリティの塊みたいなライブラリなので、
それだけだと自分でレイアウト作ったりとか、
コンポーネントの流度を上げていくときとかするときに大変だなっていうのもあるので、
ある程度やっぱりコンポーネント化したり、
そのままソースコードをパッとコピってタグ配置すればそれが実装できますみたいなのは、
やっぱり多少は欲しかったんですよね。
というのもあって、TailwindがヘッドレスUIと連携してるっていうのはすごくありがたかったですね。
でも最初見たときにこいつなんぞやっていうのと、
それに依存するならもうヘッドレスUIだけでよくねとか思ったんですけど、
そこはさておきユーティリティの塊の強さはやっぱりありますよね。
CSSファイルに書くか、HTMLのアトリビューズにひたすらクラスネームで書くかっていうその葛藤はあったんですけど、
一度もちゃんと本格的に書いたことないまま、
Tailwindについてああこうだいうのもちょっとなっていうのがあったので、
チャレンジも兼ねてやってみました。
で、キャッチアップで意外と時間かかったし、書いてたけど、
ドキュメント見てああそうそうこれだって言って、
コード書いててデバッグして、
動かないぞって言ってまたドキュメント見てっていうので、
慣れるまではちょっとめんどくさいなっていうのと、
皆さんがこのCSSをわかってない人がTailwindやるとしんどいよう、
改めて肌で実感したなってすごくあるので、
CSS勉強した人がTailwind使うのは絶対良いと思いますけど、
今からやる人はマジでやめろっていうぐらいの温度感ですね。
ちゃんとCSSを一回書くか、
オルトCSSですね。
SASとかSCSSを触ってからでもいいんじゃないのっていう正直思いはあります。
で、あとそれをやっていくと、
あとなんですかね、CSSのそのレイヤーの分けの概念って、
やっぱこれ必要だなと思ったし、
人間が認識するとこと、
どこに意識を置くかっていうのと、
何を重要視するって、
あとどこをベースにして拡張していくかみたいな、
CSSって設計めちゃめちゃ考えるなって改めて実感したんですよね。
で、もちろんJavaScriptでロジカルなところやったり、
フレームワークを使って、
より反射ところとかビジネスロジックのところをやるっていうのも一つあるんですけど、
09:01
ちゃんとCSSで設計をする画面をちゃんと作り上げるって、
割と頭使うし、
すごいクリエイティブだなと思って。
改めてCSSは大変だし、
でもちゃんとやればきれいにいくはずなので、
すごく面白いかなと思いましたね。
で、CSSを本当にちゃんとやると、
たぶん設計というか組み方として、
ちゃんと俯瞰的にまずざっくりやって細かいところに行くっていう、
台から章への流れがいけると思うんで、
その学習フローというか学びの流れってのはすごく良いなと思いましたね。
最初から枝派のアトムズみたいなコンポーネントからやっていくと、
それを積み分けるのは結構大変なんですよね。
まず大きい枠組みを作るとか、
大きい枠組みのレイアウトとかCSSスタイリングをして、
そこから中にどんどん当て込めていって、
微調整をしていくみたいなのがよくあると思うんで。
当たり前ですけど、
それをちゃんと自分もやっていかなきゃいけないというか、
自覚できたっていうのは大きかったと思いますね。
逆に言うとそれを忘れるぐらいに、
最近はコードを書いてなかったなっていうのを改めて痛感して、
本当はもう深夜2時くらいには終わるだろうと思ったら、
全然終わらなかったんですよね。
サビ落としをしなきゃいけないなってすごく思いましたけど、
楽しかったですね。
そうは言うても、なんだかんだコードを書くのは楽しかった。
コードを書きつつやってたって感じですね。
惜しむらくはコードを書いてたんですけど、
開発日誌を書かないままずっとコードばっかり書いてたので、
それはやらかしたっていうのと、
熱量が高かったり、ちょっと集中してる時って、
コミットを忘れがちで、僕は特にそうなんですけど、
コミット力ザーッと眺めてたんですけど、
こいつマジでかいコミットをバンバン積んでんなって感じですね。
こまめにコミットしねえってのが、もうボロバレだな。
エンジニアとして、もう一回ちゃんと
一から出直した方がいいんじゃねえかみたいなコードを書いてて、
いやひでえなってところですね。
そんなことを思いながらコードを書いてましたと。
昨日は一晩、とにかくリアクトで自分のポートフォリオを作ってたってところですね。
一応ドメインも僕ずっと買ってて、
moomドメインですね。
で、僕は買ってるんですね。
買ってるんですけど、全然使えてないし、
せっかくここでポートフォリオ作ったので、
ちゃんとドメイン当て込んで、
自分のホームページっていうのは初めてですね、
公開したいなと思ってます。
が、まだもうちょっと微調整したかったり、
結構雑に作ってはいるので、
ちょっとリリースは遅いかもしれないですね。
とはいえ、一旦簡単でもいいので出す。
今現時点で出してるものも全然あるので、
そんな感じの構成になるんだろうなって思っただけではと思いますが、
コードは楽しかったっていうのもあるし、
一晩書いて、今でもめちゃくちゃ眠くて、
路列回ってないのももうちょっとバレバレだと思いますけど。
改めて初めて何かを触ったりする。
技術を初めてキャッチアップするって楽しいんですけど、
これ沼だなと思ってて。
あのCSSのフレームワークを技術選定してたんですけど、
軽くState of CSSとかNPM Trendsとかでダウンロード数見ながら選んだんですけど、
まあとりあえずコンセプトとかトップページでどういう更新で作ったかとか、
どういう使い方するのかってGet Startedを触るんですけど、
一個一個コンセプトがやっぱり面白くて、
僕は思想が好きなので思想もどんどん読み込んじゃうと、
12:03
今度は手が進まなくなるんですよね。
かつ一個一個がやっぱり面白くてですね。
僕らからすると技術ってやっぱりおもちゃなんですよね。
なのでそのおもちゃを触っていくと、
どんどん時間が遂げてやらなきゃいけない開発が進まんなっていうので、
どこを諦めて何を今回は捨てるかっていう判断は、
なかなかこれ経験値がないとそんなスパッと決められるもんじゃないなっていうのは
改めて実感しましたね。
なので数こなすっていうのはすごく大事ですけど、
なんでもいいから一個深みに入っていって、
それの経験値をもとに何かの取捨選択をするっていう
勘を培っていくのは大事かなっていうのはすごく思いました。
はい、今回はこんなところで終わっていきたいと思います。
いつも聞いてくださり本当にありがとうございます。
ではまた次回の主力でお会いしましょう。
バイバイ。
