Upgrade to Pro — share decks privately, control downloads, hide ads and more …

4年と半年かけてようやくフロントエンドを書けるようになった / It took me 4 y...

Hiroya-W
April 14, 2023

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

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

Hiroya-W

April 14, 2023
Tweet

More Decks by Hiroya-W

Other Decks in Technology

Transcript

  1. 自己紹介 n HN | ゆゆ ゆゆ君@Hyuyu_kun Hiroya-W • 京都工芸繊維大学 情報工学専攻

    M2 • ソフトウェア工学の研究をしています • 今日は から来ました n 好きなこと 2
  2. あくあたん工房 3 n 京都工芸繊維大学のコミュニティ • 月1のLT会 • 勉強会 / チーム開発

    • 外部イベント / コンテストへの参加 • 今日みたいなのは団体としては初(ありがとうございます) • ISUCONやCTFなどに参加するメンバーがいる • アドベントカレンダー n あくあたん • 水槽監視Bot(@sel_aquarium) これ→ • 名前を借りているだけなので、これとは 別枠の団体です(ここだけ覚えて帰って)
  3. 大学の新歓企画のWebサイト 7 n 2023年1月〜今 n 大学内の団体と連携して企画 n 相性診断 • 新入生に、相性の良い団体を推薦する

    n スタンプラリー • 説明会に参加してスタンプを集めて、 景品と交換 n 団体の一覧と詳細 https://irodori-newcomer2023.pages.dev/
  4. フロントエンド入門1回目の僕 n 描画は全部JavaScriptや! n サーバーってどうやって立てるん? • お金かかりそう、クレジットカード持ってない n え?ブラウザってローカルのファイル読み込めへんの? •

    当時の 「できらぁ!」(セキュリティガン無視)(脳筋)(絶対ダメ) 20 // Chromeではファイルの読み込みに問題あり // cd C:¥Program Files (x86)¥Google¥Chrome¥Application // chrome.exe --allow-file-access-from-files
  5. フロントエンド入門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(); });
  6. Zennのチュートリアル記事を写経 32 n Zenn、みんな使ってる? n 良いBookが多くて感謝 n React + TypeScript

    • フロントエンド開発と聞くと、カッコいい アルファベットが並ぶ技術がたくさんあるので https://zenn.dev/gunners6518/books/ 4c4672f32dd100
  7. フロントエンド入門4回目の僕 33 n 2021年4月頃 n React + TypeScriptを使った開発 を体験できた n

    写経しただけなので書けるように はならない(それはそう) • 書けるようになることよりは、開発を体験しよう と思っていた、というのもある • こう書けばこうなる、というのを確認しながら やったが、そこにたどり着く過程は分からない https://esa-pages.io/p/sharing/8538/posts/ 885/9d326749a354ca90720d.html
  8. 42

  9. 43

  10. フロントエンド入門5回目の僕 n 2023年1月〜今 n 「フロントエンド書けるようになった」 n やったけど、よく分かっていないこと • デプロイ、実行環境周りのエラー •

    今回はメンバーに自分が埋め込んだバグを含め、たくさんデバッグしてもらった • 感謝 • 状態管理 • React Hook • ロジックとビューの分離 60
  11. 今日のいい話 n 難しくて、出来なくても、何度でも入門したらええ! • 入門するたびに、ちょっとずつ知識がついて、使えるようになる n 今やっている、触っている技術、どこで役に立つかわからん • 「何かやってみたいと思っているけど、役に立つかわからない…」 •

    とりあえず、やってみたらええんちゃうかな • 今できること、好きなこと全力でやっていくのが大事だと思います n コミュニティに入ろう(もうみんな入っているが) • 出来るようになったのは、僕だけの力ではなくて、コミュニティのメンバーに教えてもらえたから • 良い環境、同じ雰囲気の人たちのところに飛び込んでいって、刺激をもらって、それが 自分の成長にもつながると思います 61