2025-02-08

1月の学習の振り返り

勉強できているようで、なかなか進まない進捗に戸惑いの多かった1月を振り返っていきたいと思います。

1月の学習時間

結果：87時間
11ヶ月合計：1101.75時間

1月はコロナにかかってしまい冬休みの後半戦は全く勉強できないというとても残念な経験をしましたが、なんとか約90時間勉強できました。本当は120時間くらい勉強できているはずだったのでやはり少し後悔が大きいです。
勉強時間については上昇トレンドではありますが 10-12月の勉強時間の落ち込みをまだカバーできるような爆発的な勉強量でないところが少し残念です。
改善策としては、もう一度週末に20H勉強する基本原則を守りつつ、平日は基本的に3Hを基本として勉強をして30-40Hを守るというルーティンを見直したいと思います。

1月に取り組んだ学習

GraphQL 業務で必要なインフラ関連の知識の勉強

GraohQLは現在の段階でまだ普及は一部に留まっているAPIですが、モダンなフロントエンドエンジニアにとっては登竜門のような分野で「強い」方は皆さんこのAPIを駆使してポートフォリオを作成しています。

REST APIとの記述の方法が全く異なる＆日本語の資料が非常に少なく＆あっても実務者向けで内容もかなり高度なものが多いのでわかりにくいのですがある程度理解ができてくるととても柔軟に記述をできる「さまざまな可能性のあるAPI」だと感じます。

2月はこのHCのGraphQL課題をクリアして、Next.jsのカレンダー課題に取り組んでいきたいと思います。

ここまでクリアするとバックエンド GraphQL, フロントエンドNext.js App routerと非常にモダンなポートフォリオ作成のカリキュラムが一通り終了することになり、エンジニアとしてかなり価値提供をできる存在になれるのではないかと感じています。

今年は自分にとってGo元年, インフラ元年まだ着手できていませんが、だんたんとReact, Typescriptの全体像が掴めてきたような気がします。引き続きReact, Typescriptは勉強しつつ、Goとインフラに挑戦する1年にしたいと思います。
HCでのポートフォリオ完成に向けて引き続き頑張りたいと思います。

2月の目標

GraphQL課題の完成

勉強時間 120時間勉強

2025-01-04

12月の学習の振り返り

久しぶりの勉強時間の投稿ですみません。新しい現場＆東京へ引っ越し（三軒茶屋）＆Next.jsと本気で向き合った12月の学習の振り返りをしたいと思います。

12月の学習時間

結果：70時間
10ヶ月合計：1006.75時間

10月から新しい現場になり、出社に時間のかかる勤務地ということで、平日ほぼ勉強ができない日々が続きました。プログラミング勉強はPCと向き合う時間が必要なため通勤時間が長いことは非常に大きな損失で、11月に物件を探して12月の中旬から三軒茶屋に平日は住んでいます。
その結果、平日でも4H勉強できるようになり、同時に睡眠時間も大幅に増えました。勉強時間を大幅に増やせたことがとても幸せです。不動産屋さんに聞いたところ、渋谷や六本木で働くITエンジニアで三軒茶屋を選ぶ人は非常に多いらしく同じくアクセスが良くて便利で人気の麻布十番や神楽坂、恵比寿などと比較して物価や物件価格も安いところも多いので本当におすすめです。

10-12月に取り組んだ学習- Next.js(Page Router, App Router)

Page Router

gihyo.jp

App Router nextjs.org

App Routerは個人的にもまだ実務で経験をしたことがないもので、非常に複雑かつ高機能で確実に現役エンジニアでもその複雑性に閉口すると思います。人によっては「暴れ馬」と言う人もいるくらいです。

しかし使いこなすことができれば、市場価値は爆上がりするのはもちろん、セキュリティー含めて「よりリッチでユーザー体験のよい」フロントエンドを実装できるに違いないほどの潜在的な機能を備えています。

機能が膨大ですべて完全に理解をしているわけではないため詳細の説明は避けますが、Reactの最新機能とApp Routerをフル活用すれば、このような画面を実装することもできます。自分もさらに勉強をすすめて、このような「Parallel RoutesとIntercepting Routes」を活用した設定でモーダルを作成してみたいと思います。 https://developers.cyberagent.co.jp/blog/archives/49429/ developers.cyberagent.co.jp

1月の目標

GraphQLへの挑戦（REST API以外の手法を武器にして一つポートフォリオを作成する）

勉強時間 100時間勉強

お正月休みは、最低限の家族サービスをしつつほぼ全ての時間を勉強にあてているのですがとても幸せです。

2024-12-31

TypescriptとReact/Next.jsでつくる実践Webアプリケーション開発の感想

gihyo.jp

ReactとTypescriptの基礎勉強が終わった方向けに Next.js Page Routerについての知識を深める本になります。入門書というよりも、現役エンジニア向けのかなりハードな内容になっています。本書の中にReactやTypescriptの基礎的な内容は記載されていますが、この本を手に取る層はそのような基礎的知識は身につけているという前提のレベルの本になりますので、事前にTypescriptやReactの基礎については一定程度のレベルになっておく必要があります。

本の内容についてです。この本では、本格的なショッピングアプリのサンプルコードを勉強します。このサンプルコードが本当に素晴らしく、この中のコードを一つ一つ理解することができれば、Next.jsを使ったフロントエンド開発は問題ないでしょう。

『MUST READ』

特に未経験の読者が理解に励んでほしい箇所は以下になります。

（１）P113- , P117- レンダリング手法について

Java SpringBootやRuby on Railsのような MPAと言われるレンダリング手法が一般的だったWeb業界において ReactというライブラリーはSPAというレンダリング手法を提案しました。

実はSPAという手法は非常に革新的な考え方だったのですが、アプリケーションは大規模で複雑になるにつれてさまざまな問題や改善が必要になり Next.jsではさまざまなレンダリング手法を提案して開発者はもちろん、サービスの利用者がよりスムーズに、快適にユーザー体験を得ることができるような機能が備わっています。

従来のフロントエンドエンジニアの枠を超えるレベルの内容も含んでいますが、この理解なしにNext.jsの開発を進めることはできませんので、理解に努めてください。

（２）P155- Storybook

フロントエンドエンジニアの役割ってそもそも論なんでしょうか？APIを叩くロジックを書くことも大切ですが、それよりも大切だと思う職務があります。それは、「デザイナーさんのデザインをより忠実に再現できるCSSの力」になります。つまりUIを作り上げる職務はフロントエンドエンジニアにとって非常に大きな割合を占めています。

UIを作る＝CSSです。フロントエンドエンジニアはCSSから逃げることができません笑現場のPJでさまざまなエンジニアが実装した膨大な数の共通UIを管理するUI図鑑なるものがあり、それがStorybookになります。皆さんが目指しているような「技術ファースト」のようなWeb系企業の場合、共通UIの管理にStorybookを採用している企業は非常に多くこのStorybookのメンテナンスもフロントエンドエンジニアの大切な業務になります。

しかしながらStorybookはバージョンアップも激しく、また技術方法もかなり独特で、こちらもかなり初心者にとって厳しい難所になると思います。テキストの内容には多少古さはありますが、ClaudeやCopilot,ChatGPT、公式ドキュメントを利用して読み替えてください。

テキストの読み方としては、Reactで「汎用的」な独自UIをどのように実装するか一度眺めて、自分のVSCodeでそれを実際に使用してみてください。一つ一つの共通UIコンポーネントはかなり複雑になるため、すべてのUIの細かい実装内容を理解しようとすると何ヶ月あっても時間が足りません。

まずは一つのUIでいいので、そのUIの実装内容を理解できたら、自分でプロジェクトを作ってみましょう。その中にstorybookをインストールして自分でに似たようなUIを作成してstorybookに登録する作業をしてみましょう。

『HARD TO UNDERSTAND』

テキストの中で難しい箇所はStorybookと特にP322のサインインページの実装からになると思います。ロジックを追うだけでも大変ですがAPIを叩きつつ、キャッシュの管理をコントロールしていくため初心者はもちろん、まだまだ技術が一定のバーに達していないエンジニアでも相当理解に苦労すると思います。しかしながらNext.jsにおいてキャッシュの管理は最大の山場の一つになるためなんとか踏ん張りながら少しずつでも理解を進めていく必要があります。

Next.jsの勉強の進め方ですが、同じ記述の箇所を何度読んでも理解できない場合、その前段階の知識（そもそものReactやWebアプリ開発の基礎、Typescript）が不足している可能性があります。その場合は都度入門書やQiitaの記事などでそれぞれの理解ができない用語を検索して、基礎的な内容を理解してからこの本に戻ってくるという勉強法がおすすめです。

Page Routerについては、この本以外の名著はないため他の本で代用がきかないため、なんとかこの本で学習を進めていくことをお勧めします。

『POINTS TO BE IMPROVED』

SWRの解説をもう少し増やして欲しかったです。実際のサンプルコードの中ではuseSWRが使用されていて、実務の現場でもCSRの際にSWRやReactQueryなどのライブラリーを使うことが多いためより実践的な内容を目指すのであれば、この箇所の記述を厚くしてほしかったです。 SWRの不明点については、適宜　スクールの先生や現役エンジニアに聞いて疑問点を解消する必要があります。

要点

学習しないといけない内容が盛りだくさんのNext.jsですが、非常に重要な箇所に限定して要点をまとめました。

「ルーティング」

純粋なReactでルーティング（画面遷移）を実現するためにはReact Routerというライブラリーをインストールしてルーティング処理を実現する必要があり、React Routerは公式ドキュメントもあまり読みやすいものではなく、初心者にとっては難しいです。

Next.js Page Routerでは pages/renderings/testpage.tsxというようにフォルダを作成すると、実際のURLは/renderings/testpageという風になります。

ホームディレクトリは page/index.tsxになります。

https://github.com/umedanaoyuki/page-router-sample-20241230/blob/main/src/pages/index.tsx

「レンダリング手法」

（１）MPA（Multiple Page Application）

Spring BootやRuby on Railsなどフルスタックのフレームワーク（SpringBootやRuby on Railsなど）の機能を全面利用する場合ブラウザからのHTTPリクエストをサーバーが受け取ってHTML/CSS/Javascriptを返します。

問題点：ブラウザーのリクエストごとに毎回リロードが実施される →ページ遷移の時に常に読み込みが発生するのでHTMl/CSS/JSが重い場合時間がかかってしまう

（２）SPA（Single Page Application）

純粋なReactで実現ページの初回起動時に、一度にすべてのJavascriptファイルと最小限のhtmlファイルがサーバーからクライアントサイドへ渡される画面遷移時は、必要な箇所だけサーバーから情報を取得する

メリット：ページ遷移が高速（すべてのHTMLファイルをクライアントサイドで保有しているため）デメリット：初回のページ描画に時間がかかる（初回アクセス時にすべてのJSファイルをサーバーサイドから受け取るため）、クライアントサイドの端末の性能が悪い場合画面の遷移や描画が遅くなる（JSの実行速度が遅くなるため）

（３）SSR（Server Side Rendering）

Next.jsで実現 SPAはクライアントサイドでJavascritpを実行するが、SSRはそれをサーバーサイドで実現する技術（Node.jsの誕生によりサーバー側でUIコンポーネントをレンダリングすることが可能になった）動きはSPAだが、をサーバーサイド側でその動きを再現している

メリット：クライアントの性能に依存しないので初回ページの描画が高速　SEO対策にも効果的デメリット：サーバーとの通信回数が多くなる（サーバーへの負荷がかかってしまう）　サーバーとの通信を行うのでページ遷移は遅くなる（キャッシュで遅延を最小限にする必要あり）

Next.jsでの実装方法（getServerSidePropsを使用）
https://github.com/umedanaoyuki/page-router-sample-20241230/blob/main/src/pages/ssr.tsx

（４）SSG（Static Site Generation）

Next.jsで実現ビルド時に静的ファイルを生成して、サーバーにデプロイをしておく方法ブログや解説記事、大衆向けのキャンペーンなど特定の客層向けにインタラクティブにする必要がないような情報ページについてはアクセスの度にページをサーバーサイドで生成するのではなく事前に用意しておくことができるため、サーバーに負荷がかからない

デメリット：リアルタイム更新などのページには向かない

Next.jsでの実装方法（getStaticProps）
https://github.com/umedanaoyuki/page-router-sample-20241230/blob/main/src/pages/ssg.tsx

（５）ISR（Incremental Static Regeneration）

ページのレンダリングはビルド時に実施（SSG）指定したタイミングでサーバーから最新情報を取得（SSR）

メリット：SSRやSSGの問題点の解消デメリット：実現にはキャッシュを管理する実装が必要になり、一定程度の勉強が必要サポートしているサーバーが基本的にVercelのみで、AWSで実現しようとなると構築にインフラやコンテナの知識が必要になる

Next.jsでの実装方法（getStaticPropsとrevalidate）
https://github.com/umedanaoyuki/page-router-sample-20241230/blob/main/src/pages/isr.tsx

「Storybook」

勉強のメモとして、このようにStorybookのプロジェクトを作ってみました。実際の現場では、Next.jsのプロジェクトの中にStorybookのディレクトリも作成してUIの管理を行なっている会社が大半になると思います。

github.com

2024-10-05

9月の学習の振り返り

Typescriptと本気で向き合った9月の学習の振り返りをしたいと思います。

9月の学習時間

結果：110時間
7ヶ月合計：812.5時間

9月は仕事の関係で、少し時間があったこともあり、平日も比較的勉強時間を確保できたため理想的な勉強時間を確保することができました。欲を言えばあと20時間くらいは勉強できたかなと思うくらいです。

7月からフロントエンドの学習を丁寧に進めています。

7月：JavaScriptともう一度向き合う
8月：React(Javascript)課題を丁寧に進めて基礎的なHooksの理解を進める
9月：Typescriptの文法の再復習とmapped type/conditional typeというTypescriptの最大の難所のトレーニング

9月に取り組んだ学習（１）- Typescript

8月に取り組んだCode MafiaさんのTypescript本
この本に取り組んだおかげで、再度Typescriptの基盤を身につけることができました。 book.mynavi.jp

9月には、フロントエンド界隈のトップエンジニアuhyoさんの「ラズベリー本」に取り組みました。

gihyo.jp

この本は非常に難しく、一度で理解できないような箇所もたくさんあります。しかしそれは、決して解説が荒いということではなく、情報量が非常に多いため自分の知識がまだ追いついていないんだと感じさせられる難しさです。

特に「6章高度な型」の部分は、最上級の難しさであると同時に、最重要かつTypescriptの強力な型システムを勉強できる良質な内容になっており、今後も実務で使用しながら何度も読んで身につけたいと思いました。

プログラミングは、座学だけでなく「手を動かす」ことが最も重要です。上記の本に取り組んで、「型の練習」をするため様々なサイトを利用して型の練習をしました。

ラズベリー本の著者 uhyoさんのQiita
TypeScriptの型演習 #TypeScript - Qiitaqiita.com
TypeSript中級者になる為に知っておくと良い108個のこと
【TypeScript】仕事で使える!TypeSript中級者になる為に知っておくと良い108個のこと | 武骨日記kenjimorita.jp
Progateのサービス
mosya<TC> | Type Challengesに挑戦して型力をつけようmosya.dev

9月に取り組んだ学習（２）- React/Typescript

非常に難しいHCのReact/Typescript課題

Reactエコシステムのライブラリーをフル活用して取り組んでおり学ぶことが多く、苦戦しております（笑）完全に業務レベルです。

なぜか？？ナメられがちなフロントエンドエンジニア。ただでさえ難しいCSSの他に、実際は細かいライブラリーの使い方を勉強しないといけないことが多いです。
しかもWeb業界の中でも、もっとも技術開発のスピードと流行が早くとても大変です。

一方で、だからこそ挫折率も高く「やり抜く」ことができるエンジニアが少ない分野でもあります。自分はReactを当面の自分のキャリアの軸にしたいと思っているため諦めずに勉強していきたいと思っています。

10月の目標

第1-2週：React課題
第2-4週：Next.js課題

勉強時間 100時間勉強

ようやくフレームワークの勉強が射程に入ってきました。 Next.jsについてもPage Router/App Routerの過渡期であるため両方学習しなければならないこところが辛いですが、Next.js App Routerをしっかりと使いこなすことができれば、非常に価値の高いエンジニアになれることはもちろん、バックエンドについても知見が広がるために　今後もしっかりと勉強をしていきたいと思います。

2024-09-08

8月の学習の振り返り

Reactの上達へのきっかけを掴んだ8月の学習の振り返りをしたいと思います。

8月の学習時間

結果：96.25時間半年合計：705.25時間

HCに入って半年、本当に自分の時間のすべてを使って勉強して半年で700時間を達成できました。もともとの目標が600時間だったため（年間1200時間ペース）半年で700時間（年間1400時間ペース）はかなり上出来だと思っています。

しかしながら、まだロードマップは半分も進んでいません。やはりHCのロードマップは難しく最新の技術を学ぶことは並大抵のことではないと感じています。

どうしても自分のポートフォリオをモダンな技術を使ってフルスタックで作成したいという目標がありそれを達成するまでとにかく貪欲に勉強を続けていきたいと思っています。

8月に取り組んだ学習

業務ではCSSに苦しみ、個人学習ではReact、Typescriptと向き合いました。

Javascript分野で非常にお世話になっているCode Mafiaさん。 TypescriptでもCodeMafiaさんの本を購入して知識の整理を行っています。

TypescriptはJavascript同様難しいですが、通常の文法書と違い、業務で使う使い方についても解説をされていて机においておいて何度も振り返りたい一冊になっています。

book.mynavi.jp

Reactの難しさと可能性について

React/Typescriptの難しいところは、Typescriptの型だけでなく、Reactがもつ「型」もあり適時その型を調べて適用しながらコーディングをしていかないといけないというところだと思っております。

また、それに加えて Reactの難しさは「膨大なエコシステム」についての勉強も必要になることだと思っています。

フレームワークのNext.jsだけでもJava SpringBootに（個人的には）匹敵するレベルで非常に高機能で複雑を極めます。また、フロントエンドでは切っても切り離せないCSS関連のライブリーその他、開発を効率化させるための様々なライブリーなど近年（ここ5年ほど）のフロントエンド界隈は非常に難しく、勉強が必要な分野になっております。（フロントエンドDevOpsという職種のエンジニアがで出てきてしまうほど複雑になっております）

Next.js App router
Sass
TailwindCSS
CSS in JS
CSS modules
clsx
React Hook Form
Yup
各種ReactHooks
状態管理関係：Recoil/ Redux
UIライブリー：Storybook
Webpack
headless UIの考え方など

それと同時に、このような技術を使いこなせるフロントエンドエキスパートについては高い需要があり、今後はWeb系だけでなく、Sier系の会社も含めその需要は増えると思われます。

また、モバイルアプリについてもReactエコシステムが採用される機会が増えています。日本のモバイルアプリの開発において立ち上げまもないベンチャー界隈では「Swift/Kotlin」というネイティブの高パフォーマンスの言語を採用せずに一旦「Flutter」を使用してクロスプラットフォーム技術を採用し低コストでアプリを開発＆早期リリースをする会社が増えています。

日本ではFlutter一強となっていますが、アメリカではReactNative/Flutterの熾烈な採用競争が繰り広げられており、ReactNativeが若干優勢となっています。日本でもMercari USAが携帯アプリ開発にReactNativeを採用するなど大手企業でもアプリにReactエコシステムのReactNativeを採用する企業も現れており Reactエンジニアのキャリアをモバイルアプリ開発分野にまで広げる可能性も秘めていると思っています。

Facebook社が提供してくれたReactというUIを効率的に開発するライブリー。非常に複雑で、勉強のコストの高い技術になりますが、単価も面でも、技術の将来性・安定性の面でもとても可能性のある技術だと思っています。

8月のQiita投稿履歴

8月は仕事に専念＆インプットに膨大な時間を使ってしまって全くアウトプットできなかったので反省しています。 9月はアウトプット課題が多くなると思うので、その中で有益だと思えるようなものについては週に1回ペースで投稿できたらと思っています。（特にReactHooksの実装例や最新のReact18の機能についてなどは初心者の方にも有益ではないかと考えています）

9月の目標

第1週：Reactのロードマップを一通り終了させて第2週：Typescript課題第3/4週：Next.js課題 ※できれば今、フロントエンドで最も必要とされている技術の１つであるGraphQL課題の方にも取り組めたらと考えています。

勉強時間 120時間勉強

2024-08-03

7月の学習振り返り

DB設計に初挑戦＆JavaScriptについて実りの大きかった7月学習の振り返りになります。

7月の学習時間

結果：189.5時間

目標200H達成できず→7月後半初出勤の疲れで土日勉強時間が少なかったことが原因。

勉強のステータスの推移は以下になります。

7月上旬-中旬：前職の最終日→本格的に毎日大量に勉強をできる体制が整い、ほぼ毎日猛勉強。
7月後半：フリーランス参画の初出社→非常に広く、清潔なオフィスと、とても優しい方々に感動をしながら業務スタート。定時退社だが初出勤の1週間はそれなりに緊張もあり、睡眠を優先。

7月に取り組んだ学習

DB分野の猛勉強（DB設計＆SNSのデータモデリング）
JavaScript （基本から上級レベルまでの文法）

DB分野の猛勉強（DB設計＆SNSのデータモデリング）

SQLは個人でも学習できていたのですが、DB設計にゼロから取り組むというのは人生初で課題が非常に難しかったです。 ER図は読めてもかけないという状態だったのですが、なんとか助けをかりながらもDB設計について勉強することができました。

初心者が設計を独学でマスターすることは100%不可能です。理由は「知識の暗記」ではないからです。しっかりと設計の知見のあるエンジニアにレビューをしてもらい、考え方を教えてもらえながら身体で覚えるといった要素が大きいです。設計の「実践」を学べることはスクールではほぼないですが、HappinessChainにこのカリキュラムが組み込まれていることに感謝です。

まだ基礎段階のため、今後　業務はもちろん、自作のアプリケーションを複数作ることを通して経験値を蓄えていきたいです。

JavaScript （基本から上級レベルまでの文法）

JavaScriptは個人的に一番得意な言語です。（自慢できるレベルではなく、ただ純粋に独学時代から合計して学習時間が長いだけ）
基礎文法だけで、いきなりReactに飛び込んでしまったので、「基礎がないな」と思いながらどのような勉強をしたらいいかわからずとりあえずReactとNext.jsの勉強ばかりして、チュートリアルを繰り返すだけでした。

しかし、所詮チュートリアル止まり。自分で実装に落とし込むことはできず、Reactのカスタムフックなどはなんどやっても理解することができませんでした。 React自体が曖昧なので、そのような状態で大型のフレームワークのNext.jsの勉強をしてももちろんうまくいかないですよね。

次の現場ではフロントエンドエンジニアとしてアサインされており、初出勤まで時間があったため以下のUdemyと本をじっくりと勉強することに決めました。

語彙力が足りず月並みな言葉でCodeMafiaさんには申し訳ないのですが、「本当に素晴らしい教材」でした。 Udemyの講座はあまりにも有名ですが、ぜひ書籍も買って読んでください。ほぼ100%バイブル的存在になるはずです。

JavaScriptの基礎を勉強した人、中級レベルと自負しているが原因不明の伸び悩みに苦しんでいる人にオススメしたいです。

※独習JavaScriptの「はじめに」を読むと、CodeMafiaさん級の学歴 & プログラマーレベルの方でもクセの強いJavaScriptやReactに苦しめられて伸び悩んだ時期があったんだなぁと感じました。

【JS】ガチで学びたい人のためのJavaScriptメカニズム | Udemy

独習JavaScript 新版（CodeMafia 外村将大）｜翔泳社の本

動画で「受動的」に理解するだけだと完全に漏れが出る可能性があります。そのため、復習として本を読んで「能動的」に理解する中で、詰まった箇所は動画に戻り本と比較しながら実際にデバックして理解を深めます。

はじめは、「自分の理解している箇所」だけの「つまみ読み」で問題ないです。自分が理解していると思っても、「こんなに理解していなかったんだ。メカニズムはこうなっているんだ」と、中級レベルまでのエンジニアであれば確実に気づきがあります。

じっくり本気でこの本に取り組めば、理解している箇所を読む中でも、「この分野を勉強しないといけないな」と自分の中で自然と気がついてきます。その気付きに従って、「自分が理解していない新しい箇所」を読み進めていってください。

勉強は、わからない分野と勉強しなくてはならない分野をより明確に洗い出していく作業でもあります。この本のおかげで、一気にJavaScriptが楽しくなり、HappinessChainの課題も1発OKをもらいました。

7月のQiita投稿履歴

RESTについて改めて復習をする

Javascript 非同期処理について

改善点

今後ですが、転職が成功したということで、椅子とモニターを買いかえてより長時間の勉強ができるように体制を整えました。体調に気をつけながら酷暑の夏を乗り切っていきます。

8月の目標

現在は定時で帰ることができることが多いため、平日も格段に勉強できると思います。そのため週30H以上（週末合計20H + 平日合計10H）を目標にして課題を進めていきたいと思います。

勉強時間 120時間勉強

2024-07-19

Reactに取り組む前に身に着けたいモダンJavascript

いきなりですが、初級エンジニアの皆さん、「Javascript」って難しくないですか？難しいですよね笑

Javascriptは非常に歴史のある言語です。現在のJavascrriptはフロントエンドエンド領域はもちろん、Node.jsを使ってサーバーサイド側でも使用されている非常に汎用性のあり、需要のある言語です。その一方で、様々な機能や他の言語ではあまり見られないJavascript特有の考え方なども存在しており、クセも強い言語であると感じており、難しい（奥が深い）と感じております。

しかしながら、現在のフロントエンド開発でデファクトスタンダードになりつつあるNext.js（React）の開発にはJavascript または、それをより改良して作られたTypescriptで開発することがMUSTとなっております。

Javascriptを学び、Reactも学び（このReactも初心者にとっては非常に理解が苦しいクセのあるライブラリーです）、その後フレームワークのNext.jsも学ばなければならないという（もちろんCSSや各種開発のための有名なライブラリーの使い方など）、、、、最近のフロントエンド開発の現状は、非常に過酷なものとなっております。

ほとんどの初学者はJavascriptは「微経験」のままReactの勉強をスタートさせます。しかしながら、Javascriptの知識が不十分なためつまずきます。

かつての自分もそうでした。Reactが全くわかりませんでした。何をしているのか、自分でコードを書いていても理解できませんでした。その理由がJavascriptの知識が足りないからなのか、それともReact独自の考え方の箇所で理解ができていないのかまだ経験がないため判断できませんでした。

何度もWebのチュートリアルを繰り返して、Youtubeの動画を繰り返しトライしてもどうしても自分の中で「理解した」という感覚起きずに、途方にくれたのを覚えています。

同じような思いを持っている初学者も多いのではないでしょうか？その方にこのブログが届けば幸いです。やはり急がば回れです。一旦、Reactは横においてJavascriptの基礎（特にモダンJavascript）をもう一度学び直してReactに戻ってみましょう。

その時にオススメできる本は以下の２冊になります。

（１）Javascript Primer

jsprimer.net

（２）独習Javascript新板 by CodeMafia

www.shoeisha.co.jp

これらの本は非常に分厚く、内容も「完全初心者」向けではありません。完全初心者が取り組むと「全体像がつかめずに」挫折をしてしまう可能性があります。完全初心者は以下のようなサイトを通じて、Javascriptの基礎を勉強してから取り組みましょう。

Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]

【初心者向け】JavaScriptで簡単なタイピングゲームを作ってみよう！基礎文法が実践的に学べる入門講座【プログラミング】 - YouTube