フレームワークなしでJavaScriptコアのスキルを向上させる
JavaScriptのエコシステムをより深く理解する
レベルアップ！ JSの実力のコアを固めてみてください。
私たちはいつもたくさんの様々なライブラリやフレームワークを使ってWeb開発をしています。ところで、正確に何がどのように戻るのか理解できない時が多いです。 JavaScriptのエコシステムは、多様な要素に複雑に絡み合っており、どのように糸口を解くのか分からないのです。
シナブロのJavaScriptは、ジュニアからミッドレベルへ、ミッドレベルからシニアへレベルアップするための足場を設けています。
「ウェブ開発は複雑すぎる」
JavaScriptの生態系が発展しつつ積み上げられた技術負債と互いに絡み合っている数多くの要素のためです。地面にヘディングして自分で学ぶこともできますが、既にそれを経験した人と真得だから座ってじっくり学ぶのも良い方法です。
「できますが、自信がありません」
使用しているフレームワークとライブラリがどのように調和して戻るのか、根本的な原理を理解できないと、マイナーなバグにもパニックしやすくなります。講義を通じて、重要なトピックをライブラリなしで直接開発し、動作原理を理解してください。
「開発実力レベルアップをしたい」
似たようなトイプロジェクトを繰り返し作れば手は早くなることがありますが、深く入るためには別の戦略が必要です。重要な概念を深く理解したら、どんな新しいフレームワークや技術が登場しても簡単に理解できる基礎知識が生まれます。
「新しいものが早すぎる」
JavaScript、特にフロントエンド陣営はまだ解決しなければならない問題が多く、様々な試みが絶えず起こっています。それで、新しいライブラリ、フレームワーク、概念が数え切れないほど注がれます。しかし、既存の問題を新しい方法で解決しようとする試みがほとんどです。
既存の問題をそのようなソリューションなしで直接解決してみると、新しく出てくるものがどのように異なって解決するかを比較し、簡単に理解できるようになります。
Daum、Kakao、Algoliaなどの会社を経て主にフロントエンド開発業務を行ってきました。現在Storyblokでフルスタック開発者として働いています。
あるスタートアップで長く働いている ある瞬間目を浮かべると、あまりにも多くが変わっていたんですよ。私は2014年から2017年末までにAngularJSを書いていましたが、2018年になってこそ見逃した多くのことを勉強し始めました。 ES6、React、Babel、…から始めて本当に終わりはありませんでした。
.jpeg?w=960)
2019年にフランスに引っ越してAlgoliaという会社に入社したのは、私に様々な概念を深く理解して働く良い機会でした。直接ぶつかり、周りの人々に聞いてみたり、全体的な絵を描いていきました。しばらく時間が経って、こういう内容がよくまとめられたコンテンツがあったらどれだけ良かったかという考えをするようになり、結局は講義にすることになりましたね。
基本的なDOM APIを学び、フロントエンドフレームワークなしでどのようにHTMLを設定し、イベントを添付するかを練習します。 (1h 3m)
ショッピングモール商品リストとカート部分を実装してみます。目標はDOM APIを直接使用し、動的なインタラクションを実装することです。商品を買い物かごに入れて取り除く過程で、同じデータ（入れた数量）を画面上下（商品リストと買い物かご）に同時にうまく更新するように開発し、この過程でモダンなフロントエンドフレームワークがなぜ必要なのか体感してみます。 (1h 20m)
次に、実装したショッピングモール商品リストやショッピングカートをもう少し管理しやすく、デザイン、意味、役割を考慮して複数のコンポーネントに分けてリファクタリングしてみます。 (52m)
最後に、DOM要素を毎日見つけて数量を更新した方法の代わりに、データを更新すると、それに合わせて再アクティブにDOMが自然に更新されるように実装してみます。 (52m)
Express（Express）を試して、Web サーバーの基礎を学びます。最近、VercelやNetlifyが提供するServerless Functionが簡単で快適です。そうする前に、どのようにバックエンドを設定したのかExpressで学びます。
また、viteで浮かび上がったフロントエンドがExpressサーバーに要求を送ったデータをレンダリングしてみて、その過程で経験するCORSという問題についても学びます。 (45m)
さまざまな例を使用して、代表的なArrayメソッドであるfilter、map、reduceを練習します。基本的な文法は、熟知されたという仮定のもと、体力鍛練感で進めます。 (1h 18m)
npmライブラリはどの構造を持つべきかを見て、CommonJSとESモジュールに絡み合った複雑な問題をゆっくりと理解します。そして、作業したライブラリをnpmに直接配布してみます。 (27m)
jQuery（ジェイクエリ）の非常に小さなサブセットを作成します。 yarn workspaceでmonorepoを構成する方法を学び、その中にライブラリー、サンプルアプリ、ドキュメントサイトまで作業することでライブラリー開発のための全体的なワークフローを体験してみます。
vitestを使ってunit test（ユニットテスト、ユニットテスト）を作成してみたり、ライブラリビルドプロセスを経て起こる状況での難しさを体験し、Tree-shakeについても調べます。 (1h 7m)
映画検索サイトを作成します。結果は非常に簡単ですが、このエピソードでは非常に重要な概念を扱います。ブラウザのHistory APIを学び、それを使用してReact RouterなどのClient-Side Routingを直接実装します。 (45m)
その後、Server-Side Rendering（サーバーサイドレンダリング）をExpressサーバーに直接実装し、クライアントからそれをHydrationする部分まで実装します。ここまで終わったら、Next.jsのSSR + Hydrationのプロセスをかなり詳細に理解できるようになります。 (1h 14m)
Arrayメソッドの練習エピソードと同様に、非同期をよりよく扱うためにcallback、Promise、async、awaitを練習してみます。 (38m)
Jekyll、Gatsby、Next.jsなどを使って静的ウェブサイトをたくさん作っています。そのようなツールがどのように静的ウェブサイトを作成するかを見て、そのビルドプロセスをまねてみます。
この過程で、フレームワークやツールなしでNode.jsで書かれたスクリプトが、マークダウンで書かれたポストを静的ブログでビルドさせ、Vercelに配布までしてみます。 (1h 3m)
CLI用のnpmライブラリの構造はどのようなものかを見て、直接CLIを直接作成してnpmに配布してみます。その後、 npm install -gでインストールして使用できるようになります。 (48m)
講義を購入された方は、学習者専用のDiscordチャンネルに招待されます。講義を聞くことができる質問を投稿してください。他の人が投稿した質問から学ぶこともできます。
何でも知らなくても大丈夫な空間で自由に質問して議論しながら一緒に学べるといいですね。あなたのJavaScriptの自信を高めることが最終的に最も重要な目標です。
Q.講義でTailwind CSSを使用しますか？
ちょっとしたエピソード、「ショッピングモール作り」でTailwind CSSを使ってデザインをします。 Tailwind CSSがわからない場合は、自分で好きな方法でCSSを作成できます。もし、興味があれば、私が作った無料のビデオを参照してください。
Q. 私が聞くことができる実力でしょうか？
コック拾って言うのは難しいですが、次の項目に該当するなら受講してもいいようです。
const { name, address } = personこの文法を理解する。 Q. 他の講義とどう違うのですか？
特定のプロジェクトを作ることを目指す講義が多いです。そのような講義の場合、さまざまな技術、ライブラリ、サービスなどを組み合わせて徐々に積み重ねていく過程を見せてくれます。さまざまなもの（What）とそれをどのように（How）組み合わせるかを学ぶという点で有用ですが、そんな川の特性上、Whyまで扱うのは容易ではありません。
シナブロのJavaScriptでは、特定のテーマについて以前にどのようにしていたのか、今はなぜこのようになったのか、変天使を学びながら、各アプローチの長所と短所を理解することになります。そして、フレームワークが私たちの目に見えないようにする機能を直接実装してみて、なぜそんなことをするのかがわかります。
WhatとHowを知っていることは本当に重要ですが、そこにWhyが抜けていれば、遠くへ行くのは難しいです。開発をしながら自信が不足した理由は、通常Whyの欠乏によるものです。バグが生じたときに状況を正確に理解できないので、どのように解決すべきかわからず、グーグルで得た結果を適用したところ、バグが解決されたが、それがなぜ解決されたのか理解できないので、蒸しして次に同じ状況がまた起きればどうでも心配になります。
だからWhyを正確に学ぶのは、次のレベルにアップグレードするために不可欠なプロセスです。直接ぶつかって学ぶ方法もありますが、すでにその過程を経験した人が詳しく解いて説明してくれることで学ぶのも効率的な方法です。実は、このようなミッドレベルを狙う講義は、入門者のための講義に比べて需要が少なくなければならず、こういうターゲティングの講義自体が珍しいと思います。
Q. 味見講義はありますか？
あります！本講義を見る前にプレビューしてみると、良い方法の準備運動のような内容を短い無料映像で作っておきました。 リンクでも確認可能です。
Q. 学生や就学生割引になりますか？
はい可能です。簡単な認証手続きを経た後、割引を提供します。
Q.別の質問があります！
私に電子メール、またはTwitter DMを与えてください。私がフランスに住んでおり、時差のため回答が少し遅れることがある点、予めご了承ください。
学習対象は
誰でしょう？
＆quot;なるのに、なぜこれが起こるのですか？＆quot;
"Web開発は複雑すぎます"
＆quot;できますが、自信がありません＆quot;
＆quot;開発のスキルをレベルアップしたいです。＆quot;
＆quot;新しいものがとても速く出てきます。＆quot;
前提知識、
必要でしょうか？
JavaScriptの入門者のためのコースではありません。ジュニアから中ニアへ、中ニアからシニアへ行くためのコア運動のための講座です。
607
受講生
30
受講レビュー
15
回答
4.9
講座評価
2
講座
안녕하세요. 이은재입니다. 프랑스에서 살고 있어요. 집에서 멍 때리고 냥이들 바라보는 걸 좋아하고, 저녁 식사 후에 한 시간 정도 산책하는 걸 즐깁니다. 시끄럽고 붐비는 도심이 부담돼서 파리 인근 소도시에 살고 있고, 새 구경을 좋아하고, 채소를 키우는 취미가 있어요.
좀 더 개발 관련 얘길 하자면, 2022년 11월부터 Storyblok 이라는 Headless CMS 서비스를 만드는 곳에서 개발자 유저들을 위한 extension platform 을 만들고 있어요.
2019년에 Algolia 라는 클라우드 기반의 검색 솔루션 회사에 입사하기 위해 프랑스로 이주했어요. 그 회사에서 InstantSearch 라는 오픈소스 UI 라이브러리를 만드는 일을 했어요. Vanilla JavaScript, React, Vue.js, Angular 총 네 가지 버전으로 라이브러리를 제공하기 위해 공통 로직을 따로 관리하고 각 flavor 는 최소한의 wrapper 이도록 하는 작업에 시간을 가장 많이 썼어요. 그 외에도 업무적으로 여러 오픈 소스 프로젝트에 참여했어요.
그전에는 한 스타트업에서 한국과 싱가폴에서 풀스택으로 3년 정도 일했고, 그 전에는 카카오와 다음 커뮤니케이션에서 4-5년간 주로 프론트엔드 업무를 했어요.
全体
118件 ∙ (19時間 56分)
講座資料（こうぎしりょう）:
全体
29件
4.9
29件の受講レビュー
受講レビュー 1
∙
平均評価 5.0
5
It felt different from the lectures I've seen so far, and I felt like I was taking a break, so I took the class comfortably. It doesn't mean that the lectures were light or easy. In the past, I liked the lectures that crammed in a lot of knowledge and skills(?) (I felt like I was getting my money's worth😁), but sometimes it was hard to keep up, and I was confused whether the lectures were for the students or if the lecturers were just displaying what they knew like trophies and building up their own achievements. Eunjae's lectures seemed to have a good balance. They were moderately wide and moderately deep. Above all, it was good because I could experience following the flow of thought as if I was solving a problem, rather than memorizing formulas. It also gave me a chance to think again about things I didn't know, but just took for granted and didn't wonder about, and things I didn't care about because I considered them unimportant. I need to look back on how I deal with and think about problems, and what kind of attitude I've had so far. If you have the chance, it would be great if you could share Eunjae's tips as a developer (what tools you use, how you work/collaborate, etc.). I look forward to seeing you again with another great lecture. Thank you.
Wow, I'm so glad you felt that way. I really thought from the time I was planning the lecture that it would be nice to learn each topic "step by step", and I'm so happy that you felt that way. I'll think about the bonus episode about development tools and collaboration methods 😊
受講レビュー 14
∙
平均評価 4.7
5
The lecturer seems like a philosopher who codes. Development is a fun thing in some ways, and it helped me find that fun again. At first, I hesitated because the lecture was a bit pricey, but I finished the first session. I think I should watch it two or three times. There are many lectures on making apps, but thanks to the Node environment and library development lectures, my understanding of related development environments has increased. I look forward to the next lecture. I hope you do well from afar. Finally, in the video of Section 12, Creating a Static Blog, Deployment, there is a blackout for about a minute.
Thank you so much for the great review 😊 There was a long gap in the video you mentioned. Thanks to you, I was able to remove it and reupload it. Thank you!
受講レビュー 4
∙
平均評価 5.0
5
I usually like to spy on the instructor's SNS account, and when he introduced the lecture, I quickly read the curriculum. I was doing a vanilla JavaScript-based project while preparing for a job, and while doing the project, I often thought that my JavaScript skills were still not enough! This lecture provided insight into how to implement convenient functions in libraries & frameworks in JavaScript, and concepts that are difficult to study alone, such as TDD and npm distribution. While studying FE, I vaguely knew about the concepts but wanted to learn them in detail, so it was good to follow along with the instructor, which helped ease the burden. This lecture is recommended for those who quickly moved from JavaScript to React or started developing with React but are stuck. This lecture is useful even now that I am preparing for a job, but if it had been shown to me a year ago... when I was desperately craving insight, I think it would have been a lecture that I would have applauded. The instructor is very considerate in many ways, from the fact that he manages students through a separate Discord to the fact that he distributes discount codes for job seekers! I recommend it! (And the cat that appears briefly in the video is cute too. ☺️)
Hello. I'm so glad it was helpful 🥹 Thank you so much for your kind words, and I hope you do well in your job search!
受講レビュー 2
∙
平均評価 5.0
5
I'm a junior developer in my third year! I was browsing through the courses and I liked it so much that I bought it and listened to it. It was so good. Since my company focuses on functional development, it was hard for me to learn about project setup or core JS concepts. It was so helpful and good to learn such diverse and essential knowledge. I was impressed by how you implemented SSR yourself and made it work like React using JS. I also liked how you covered bundlers and module concepts. It seems like a course that teaches you how to catch fish, not give them fish. I felt like you put a lot of thought into the course structure while listening to the course. I'll review it from time to time. Thank you~!
Thank you for your kind words 😊 I also tried my best to teach you how to catch fish, not the fish, so I'm so glad you felt that way. If you have any questions, please leave them anytime. Thank you!
受講レビュー 9
∙
平均評価 4.9
￥16,752
知識共有者の他の講座を見てみましょう！
同じ分野の他の講座を見てみましょう！
![Solid Frontend Bootcamp for Full Stack (HTML, CSS, Vanilla JavaScript + ES6) [Full Stack Part2]Course Thumbnail](https://cdn.inflearn.com/public/course-326306-cover/4ea213de-f786-4af1-a9d0-b8932263885a?f=avif&w=420)
