4年と半年かけてようやくフロントエンドを書けるようになった / It took me 4 years and 6 months to be able to write the frontend

エンジニア 来るか来やんか 2023/04/14

Transcript

1. ೥ͱ൒೥͔͚ͯ Α͏΍͘ ϑϩϯτΤϯυΛ ॻ͚ΔΑ͏ʹͳͬͨ ゆゆ君(@Hyuyu_kun) in エンジニア来るか来やんか 2023/04/14
2. 自己紹介 n HN | ゆゆ ゆゆ君@Hyuyu_kun Hiroya-W • 京都工芸繊維大学 情報工学専攻 M2 • ソフトウェア工学の研究をしています • 今日は から来ました n 好きなこと 2
3. あくあたん工房 3 n 京都工芸繊維大学のコミュニティ • 月1のLT会 • 勉強会 / チーム開発 • 外部イベント / コンテストへの参加 • 今日みたいなのは団体としては初（ありがとうございます） • ISUCONやCTFなどに参加するメンバーがいる • アドベントカレンダー n あくあたん • 水槽監視Bot(@sel_aquarium) これ→ • 名前を借りているだけなので、これとは 別枠の団体です（ここだけ覚えて帰って）
4. 最近の開発 4
5. 大学の新歓企画のWebサイト 5
6. 先日、リリースしました 🎉🎉🎉 6
7. 大学の新歓企画のWebサイト 7 n 2023年1月〜今 n 大学内の団体と連携して企画 n 相性診断 • 新入生に、相性の良い団体を推薦する n スタンプラリー • 説明会に参加してスタンプを集めて、 景品と交換 n 団体の一覧と詳細 https://irodori-newcomer2023.pages.dev/
8. 詳しい技術的な話は交流会で（後日公開する予定） 8
9. フロントエンド、書けるようになった n 僕はフロントエンドを担当していました • 3ヶ月くらいコミットしてきた n この開発を通してフロントエンドが書けるようになりました 9
10. 10 経験 自信 少 多 低 「完全に理解した」 イマココ
11. 11 経験 自信 少 多 低 「完全に理解した」 イマココ ではなくて
12. 12 経験 自信 少 多 低 「ﾁｮｯﾄﾜｶﾙ」 イマココ
13. 13 経験 自信 少 多 低 「ﾁｮｯﾄﾜｶﾙ」 イマココ ではなくて
14. 14 経験 自信 少 多 低 「書けるようになった」 イマココ
15. 「書けるようになった」とは n 良い設計かどうかは問わない n 「ある程度の自走力がついていること」を指す • 作りたいデザインがあれば、8割再現出来る • コードはコピペでも、そのコードが何をやっているかを読んで理解出来る 15
16. ちょっと振り返ってみる 16
17. 入門1回目 17
18. フロントエンド入門1回目 n 2018年8月頃 • とあるプロジェクトでブラウザで動くものを作ることに n 作品 • チュートリアルはMDNのブロック崩しやった記憶がある • anime.jsを使ってモーショングラフィックス • phina.jsを使ってRPGゲームの演出、ビンゴカードの演出 18
19. 19 フロントエンド入門1回目の作品
20. フロントエンド入門1回目の僕 n 描画は全部JavaScriptや！ n サーバーってどうやって立てるん？ • お金かかりそう、クレジットカード持ってない n え？ブラウザってローカルのファイル読み込めへんの？ • 当時の 「できらぁ！」（セキュリティガン無視）（脳筋）（絶対ダメ） 20 // Chromeではファイルの読み込みに問題あり // cd C:¥Program Files (x86)¥Google¥Chrome¥Application // chrome.exe --allow-file-access-from-files
21. 入門2回目 21
22. フロントエンド入門２回目 n 2019年11月頃 n Qiitaでポートフォリオサイトを作るのがなんか流行ってた（？） 22 https://qiita.com/turmericN/items/ 76559f0b70983469e7c7 https://qiita.com/musou1500/items/ 24ed32d7f5b0a6377bc5 https://qiita.com/turmericN/items/ 37c3fbe00ee6bbc7e201
23. 「ポートフォリオサイトほしい」 23
24. 「1から書いてたらいつ完成するかわからん…」 24
25. フロントエンド入門２回目の僕 25 n 無料テンプレートを利用して ポートフォリオサイトを作成 n 目的は達成出来たが、HTML、 CSS、JavaScriptはほぼ変更せず • コンテンツをひたすら用意する n GitHub Pagesでホスティング • サイトを公開する方法を初めて知った https://hiroya-w.github.io/
26. 入門3回目 26
27. 過去のLT（2020年6月頃） n ローマ字入力に特化したキーボード配列の紹介をした 27 https://speakerdeck.com/hyuyukun/introduction-of-the-eucalyn-layout-and-my- impressions-after-one-year-of-use
28. Eucalyn配列を触れるサイトを作った n 良さを感じてもらうには触ってもらうのが一番ええやろ！ 28 https://hiroya-w.github.io/works/typing_site/index.html
29. フロントエンド入門3回目の僕 n 2020年6月頃 n サイト自体はほぼ素のHTML、CSS、JavaScriptで出来てる • キーボードのCSSはコピペ n でも、JavaScriptが書けたので タイピングゲームとして自分がやりたいものは実現出来た n GitHub Pagesでホスティングして、みんなに触ってもらえた 29
30. フロントエンド入門3回目の僕 n タイピング用文字列のデータを柔軟に変えられるようにしたい • 「三日坊主」と「mikkabouzu」の対応とか n でも、ローカルにあるファイルを読めないのを知ってる n Gistにデータを置いて、JavaScriptからAPIを叩いて取得した 30 function queryGistAsync(gid, callback) { $.ajax({ type: "GET", url: "https://api.github.com/gists/" + gid, dataType: "jsonp", success: function (json) {callback(json.data);} }); } queryGistAsync("cbbbd01c63e4fb3db6da217dedf9db3f", function (gist) { // gist.files[ファイル名].content にファイルの内容が入ってる console.log(gist.files["typing-data"].content); json = gist.files["typing-data"].content; word_data = JSON.parse(json); createText(); });
31. 入門4回目 31
32. Zennのチュートリアル記事を写経 32 n Zenn、みんな使ってる？ n 良いBookが多くて感謝 n React + TypeScript • フロントエンド開発と聞くと、カッコいい アルファベットが並ぶ技術がたくさんあるので https://zenn.dev/gunners6518/books/ 4c4672f32dd100
33. フロントエンド入門4回目の僕 33 n 2021年4月頃 n React + TypeScriptを使った開発 を体験できた n 写経しただけなので書けるように はならない（それはそう） • 書けるようになることよりは、開発を体験しよう と思っていた、というのもある • こう書けばこうなる、というのを確認しながら やったが、そこにたどり着く過程は分からない https://esa-pages.io/p/sharing/8538/posts/ 885/9d326749a354ca90720d.html
34. 入門5回目（？） 34
35. 「ポートフォリオサイトを作り直したいんじゃ〜」 35
36. 静的サイトジェネレータブーム 36 n Markdownで書いてHugoで HTMLを吐かせる • テーマもたくさんある • ブログも書けて良さそうじゃね？ n と思ったが、 https://gohugo.io/
37. 「CSS書けないけど、デザインは自分でやりたい」 37
38. どうしたか 38
39. フロントエンド入門5回目に失敗した僕 39 n Notionで作成して外部公開 • Notionのデータベースに蓄積 • Markdownっぽい書き味で、デザインも調整 出来る • ドメインも決められる https://hiroya-w.notion.site/
40. ついに時代はノーコードや！ 40 （もうこれでいいのでは、と思い始める）
41. ここまでか…。 41
44. 44 「企画持ってきたやで。大学の新歓やるぞ」
45. 「おもしろそうやんけ」 45
46. 入門5回目リベンジ 46
47. （最終的な）フロントエンドの技術スタック 47 TypeScript Emotion Jotai Next.js Storybook Cloudflare Pages +α
48. 基本的な進め方 48
49. 開発の進め方 n 僕は基本的にDiscordで画面共有をしておく • 今どんな感じや〜とか、どこで詰まってるんや〜とか、それやりたいなら〜とかを 突っ込んでもらう • 今までフロントエンド入門してきてよく分からなかったこと聞きつつ、調べて、試してをやる 49
50. のガチでエライ話 50
51. ほぼ同じ技術スタックでWebサイトを作ってくれてた 51 n 技術検証も兼ねて • （正直いつもこれは出来ないと思うけど） n 僕にとってはリファレンス実装 • 同じことやりたい→これのここを見て • 舐め回すように見た
52. こんなところで、あの時の経験が…！ 52
53. スタンプカードのデザイン、どこかで見たような…。 53
54. フロントエンド入門1回目の作品 54
55. 入門1回目のビンゴカードのやつじゃん…！ 55
56. 入門1回目のビンゴカードのやつじゃん…！ 56 n 前回はゲームエンジンでcanvas に描く形で n 今回はHTML, CSS, JavaScriptで レスポンシブに n あぁ、こうすれば良かったのか、 という学び
57. 開発期間中にバックエンドのインターンに参加 57 （昨年12月上旬に決まっていたので、まだ新歓企画でフロントエンドをやるとは思っていない）
58. フロントエンドのコードが読める…読めるぞ…！ 58
59. インターン先でフロントエンドのコードを読む機会 n バックエンドエンジニア、バックエンドだけやっていれば いいということはない • フロントエンドのコードも読んだり、時には書いたり。 • インターン先では、バックエンドにもフロントエンドにも手を入れさせてもらった n 個人開発レベルの規模より遥かに大規模なサービスのコード • こうやって書けばいいんだ • これでいいんかな、と思っていた書き方で実際に動いているプロダクトがある • そういった視点でも見れるインターンの期間になった 59
60. フロントエンド入門5回目の僕 n 2023年1月〜今 n 「フロントエンド書けるようになった」 n やったけど、よく分かっていないこと • デプロイ、実行環境周りのエラー • 今回はメンバーに自分が埋め込んだバグを含め、たくさんデバッグしてもらった • 感謝 • 状態管理 • React Hook • ロジックとビューの分離 60
61. 今日のいい話 n 難しくて、出来なくても、何度でも入門したらええ！ • 入門するたびに、ちょっとずつ知識がついて、使えるようになる n 今やっている、触っている技術、どこで役に立つかわからん • 「何かやってみたいと思っているけど、役に立つかわからない…」 • とりあえず、やってみたらええんちゃうかな • 今できること、好きなこと全力でやっていくのが大事だと思います n コミュニティに入ろう（もうみんな入っているが） • 出来るようになったのは、僕だけの力ではなくて、コミュニティのメンバーに教えてもらえたから • 良い環境、同じ雰囲気の人たちのところに飛び込んでいって、刺激をもらって、それが 自分の成長にもつながると思います 61
62. ありがとうございました