🍟

2023年のきろく

2023/12/31に公開

時候の挨拶

2023年、お疲れ様でした!激動の一年間でしたね!!
紅白を見ながらのんびり書いています!
え?私のことが誰かわからないって??
みなさんご存知、10-uiです!(笑)
都内の学校でWeb技術を学んでいるふつうの学生です!

好きな言葉は
“Enjoy the pain if it’s inevitable.”
~避けられない苦しみならばあえてそれを楽しんでしまえ~
です!よろしくお願いします!

学んだ技術の振り返り

HTML&CSS

まずはここから入りました。基礎中の基礎ですね。
ブックマークに入れたリファレンスは10回とリンクを開いてない気がします。
一番最初に作った自己紹介サイトはいつ見てもけっこうぐちゃぐちゃですが、
動きとかの難しいことをしていないサイトを作るのさえ難しかった時代が懐かしいです(笑)
リファレンスは下記に埋め込んでおきます。
https://html.spec.whatwg.org/
https://developer.mozilla.org/ja/docs/Web/CSS/Reference

HTMLのほうは有志の方が作ってくださっている日本語版も↓
https://momdo.github.io/html/

Javascript

動きつけられるようになりました!
ちょっとわかり始めたあたりから、普段なにげなく見てたサイトの仕組みがなんとなくわかって嬉しかった記憶があります。
まだまだ思い通りに動かすのが得意じゃないけど、わかるとすごく楽しい言語です。
たくさんのリファレンスを見に行った記憶があります。
MDNさんありがとうございました。
来年もよろしくお願いします。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference

Jsライブラリたち

Swiper.js

言わずとしれたスライダー作成ライブラリ。
学校の前記課題で大変お世話になりました。
ちょっとしたスライダーを作りたいときめっちゃ便利なのでこれからもお世話になります。
https://swiperjs.com/

Particles.js

めでたい感じの演出に使えるライブラリ。
Swiperと同じで前期ではお世話になりました。
雪みたいなのを降らせることもできる、らしい?
https://vincentgarreau.com/particles.js/

jQuery

がっつり触ってないからあんまりできないけど友人の手伝いをする過程で触れたので一応。
重くなったり、他のライブラリと競合したりあんまいいことないけどめっちゃ便利だし工数も削減できるので実務ではたくさん使われているとか。
勉強するべきなのかいつも悩みながら過ごしてきました。
必要そうなら来年辺り覚えるかも?
https://jquery.com/

React

今年の半分は一緒に過ごしたと言っても過言じゃないくらいいっぱい触れてきたフレームワーク。
そのうちの半分はあとで紹介するNextjsです。
触れる前はすっごい怖かったけど触れてみると生のHTML&CSSに戻れない便利さがあります🍟
なんとなくでも使えちゃうけど極めたら最強につよつよエンジニア!と思って勉強してます。
個人的な不満点というか苦手なのはAPIの取得に時間かかることですね。
useEffectを使ってfetchする方法しか勉強できていないのでこれからも学ぶことを続けていきたいと思います!
https://ja.react.dev/

T3 Stack

12月はこちらのCLIを用いて作った雛形をもとに技術の勉強をしていました。
セキュリティも万全で、型安全なプロジェクトの作成を来年にかけて学んでいきます。
https://create.t3.gg/

T3 Stack / Next.js

Next.jsは色々最適化されていてすごいです。(小並感)
NextをいじるまではViteで作ったり、Next.jsをやってみたりとふらついていましたが、StackoverflowのSurveyにもある通り実務であんまり使うことがなさそうなのでNext.jsを本格的に学習しはじめました。
現在は絶賛チュートリアル学習中ですがわかりやすい上に楽しいのでやっていない方がいましたら是非!
https://nextjs.org/learn

T3 Stack / Typescript

Microsoftが作ったJavascriptの強化版!(って認識で合ってるはず)
静的型付け言語なのでNumber型にうっかりStringが...なんてことが起こる前に教えてくれます。
なかなかいい学習方法を知らず、(e: any)が乱発されてるコードが私のライブラリに散見されていますので知っている方がいましたらぜひとも教えていただけますと幸いです🙇‍♀
https://www.typescriptlang.org/

T3 Stack / tRPC

サーバー側とクライアント側で使う変数の型をちゃんと管理してチェックしてくれる優れものです。
zodなどを用いて行なってくれます。まだフロント側しかしっかりと開発を行っていないので、
いつの日か利便性に気づいたときの「あってよかったtRPC」を求めて日々学習しています。
https://trpc.io/

T3 Stack / Prisma

次世代オープンソースのORM。
sqlがある程度しかわかっていない状況でもなんとか使えています。
ローカルのdbから引っ張ってくる手順はなんとか分かるようになりましたが如何せんsupabaseなどとの連携が課題です。
来年にはマスターしたい技術の一つです。
なにげにロゴが可愛くて好きなのもお気に入りな技術の理由です🍷
https://www.prisma.io/

T3 Stack / Tailwind CSS

言わずとしれたCSSフレームワーク。
HTMLファイルを離れずにスタイリングができることが最大の強みです。
かなりお世話になったけど未だに名前がわかんないやつがたくさんあって公式リファレンスをちょくちょく見に行ってます。
JITが出てすごく便利だけど後で見るとなんかダサくて嫌なのでtailwindconfig.tsを編集しにいく作業をどうにかしたい今日このごろです。
https://tailwindcss.com/

Supabase

後期制作のログイン機能周りでお世話になりました。
Qiitaなどの技術記事をみて実装しただけなので知識としては0です🤡
来年にはFirebaseと一緒に学びたいです!
https://supabase.com/

Sass

こちらも言わずとしれた(ry
生のcss書くのとSass使うのとじゃ効率が違いすぎて初めて知ったときは革命を感じました。
もっと革命を感じたのはnpmにあるからコンパイルを拡張機能でやらなくてもいいこと!
Sassには驚かされた一年でした。
https://sass-lang.com/

総まとめ

こうやって振り返ってみると改めていっぱい触れたな自分って率直に思いました!
楽しかったです2023!2024でもたくさん技術学んでいきたいです!

2024の抱負と気になってる技術

今年触れられなかったものすべてに触れたい!!!

例えばT3 Stack / NextAuth.js。
これだけはちゃんと触れられなかった👿
来年は絶対触って自分のものにしていきたい所存。
https://next-auth.js.org/

Kuma UI

こちらの記事を拝見して、「やってみたい!!!!!」って思ったのがきっかけです。
やってみたい!!!!
https://www.kuma-ui.com/

Svelte

さっきのsurveyで名前が上がってたフレームワーク。コンパイラだと言われているらしいですがその実情やいかに...?
https://svelte.dev/

solidjs

Reactの機能のいいところをうまく受け継いだフレームワーク(らしい)
こちらもsurveyより。
やってみたい!欲でしかないけども楽しそうな技術はぜひともキャッチアップしたい。
https://www.solidjs.com/

来年はよろしくお願いいたします!🧸

以上が2023の振り返りと2024の抱負になります。
ここまでの駄文を読んで頂きありがとうございました!!
2023の今日(12/31)が初投稿の日なので忘れずに毎年投稿していきたいですね。
では皆さん、2024でお会いしましょう!!!

Discussion