パリに住む開発者
eunjae
2019年～2022年にフランスのAlgoliaという会社で勤務しました。この会社に履歴書を入れたきっかけと、引越しまでの過程、そしていくつかの学んだ点と私の考えを共有したいと思います。 すべての人に適用される"海外就職成功の秘訣"同じ映像ではありません。ただ、私の個人的な経験を詳しく解いたこの映像が多くの方に良いヒントになることを願っています。
入門
Interview
JavaScript
JavaScript
vanilla-js
vanilla-js
学習した受講者のレビュー
学習した受講者のレビュー
4.9
5.0
damyo
100% 受講後に作成
これまで見てきた講義とは違う感じ、さっと休んでいく感じで快適に受講しました。 講義が軽かったりやすかったという意味ではありません。 かつては多くの知識と技術を打ち込んだ（？）講義が良いこともあったが（お金の値段はする気分😁）、たまには追いつきにくい時もあり、受講生のための講義なのか講師様が知ることをトロフィーのように陳列して本人の業績を積み重ねるためか混乱する場合もありました。 ウンジェ様の講義はバランスがとても良かったようです。程よく広く、程よく深い感じでした。 何より公式を暗記するのではなく、解くように思考の流れに沿って行く経験ができてよかったです。 知らなかったが、ただ当然考えて気になっていなかったこと、重要ではないと嘆いて関心も持っていなかった部分も一度ずつ言及してくれてまた考えてみるきっかけにもなったんです。 問題をどのように扱い、事故するのか、これまでどんな姿勢で働いたのかを振り返る必要があります。 機会があれば、ウンジェ様の開発者としてのヒント（どのツールを使用するのか、どのように仕事/コラボレーションするのかなど）も共有していただければとても良いと思います。 次に、良い講義でお会いできるのを楽しみにしています。ありがとうございます。
5.0
Gichul Roh
100% 受講後に作成
講義者がコードを書くのは哲学者のようです。開発とはどのように見れば面白いことなのですが、またその面白さを見つけさせてくれました。最初は講義が単価が少なくて躊躇でしたが、最後まで一次頑強でした。二、三回は見なければならないようです。アプリを作る講義はたくさんありますが、Node環境やライブラリ開発講義語のおかげで、関連開発環境の理解度が高まりました。次の講義も楽しみにしています。遠くから建ててください。最後にセクション12静的ブログを作成します。
5.0
miho2582
58% 受講後に作成
普段講師様のSNSアカウントを探索するのが好きですが、講義をご紹介いただき、冷たいカリキュラムから読んでみました。ちょうど就任をしてバニラのJavaScriptベースのプロジェクトをしていた時期でしたが、プロジェクトをしながらまだまだJavaScriptの実力が足りませんね！という考えをたくさんしたんですよ。ライブラリ＆amp;フレームワークで便利な機能をJavaScriptでどのように実装するかについてのインサイト、そしてTDDやnpm配布など、一人で勉強するには負担される概念を教えてくれる講義でした。 FEを勉強しながら漠然と知っているのですが、詳しくは難しい概念を講師様と一緒に行くので負担が少なくてよかったです。 JavaScriptですぐにリアクトに移ったり、リアクトで開発を始めたのに詰まっている部分がある人におすすめしたい講義です。この講義は就コンする今も役に立ちますが、1年前…インサイトをすごく渇望した時期の私に見せてくれたら拍手を打って見た講義だと思います。ディスコードが別々に開設されて受講者たちを管理してくれる点と、就学生割引コードを配布してくれる点まで色々と思慮深い講師の方がいらっしゃいます！おすすめです！ （そして映像の中でちょっと出てくる猫も可愛いです。☺️）
受講後に得られること
フレームワークなしでJavaScriptコアの実力を鍛える
JavaScriptエコシステムをより深く理解する
Level Up! JSの実力のコアを固めてみてください。
💡 「動くけど、なぜ動くんでしょうか？」
私たちは常に、数多くの多様なライブラリやフレームワークを使ってウェブ開発をしています。しかし、正確に何がどのように動いているのか理解できないことがよくあります。JavaScriptのエコシステムは非常に多様な要素が複雑に絡み合っており、どのようにその糸口を解けばいいのか分からないからです。
シナブロ・JavaScriptは、ジュニアからミドルレベルへ、ミドルレベルからシニアへとレベルアップするための足がかりを提供します。
「Web開発はあまりにも複雑です」
JavaScriptのエコシステムが発展するにつれて積み重なった技術負債と、互いに絡み合っている数多くの要素のせいなのです。独学で体当たりしながら学ぶこともできますが、すでにそれを経験した人とじっくり腰を据えて、落ち着いて学ぶことも良い方法です。
「できることはできるのですが、自信がありません」
使用しているフレームワークやライブラリがどのように調和して動作しているのか、その根本的な原理を理解できていないと、些細なバグでもパニックに陥りやすくなります。講義を通じて重要なテーマをライブラリなしで直接開発してみることで、動作原理を理解してみてください。
「開発スキルをレベルアップさせたいです」
同じようなトイプロジェクトを繰り返し作れば手は早くなるかもしれませんが、深く踏み込むためには別の戦略が必要です。核心となる概念を深く理解すれば、どんな新しいフレームワークや技術が登場しても簡単に理解できる基礎知識が身につくはずです。
「新しいものが次から次へと、あまりにも早く出てきます」
JavaScript、特にフロントエンド界隈は、まだ解決すべき課題が多く、多様な試みが絶えず行われています。そのため、新しいライブラリやフレームワーク、概念が次々と生み出されています。しかし、そのほとんどは既存の課題を新しい方法で解決しようとする試みです。
既存の問題をそのようなソリューションなしで直接解決してみると、新しく登場するものがどのように異なった方法で解決しているのかを比較しながら、簡単に理解できるようになります。
🙌🏻 こんにちは、イ・ウンジェです。
Daum、Kakao、Algoliaなどの企業を経て、主にフロントエンド開発業務に携わってきました。現在はStoryblokでフルスタックエンジニアとして勤務しています。
あるスタートアップで長く勤務していましたが、ある時ふと気づくと、あまりにも多くのことが変わっていました。私は2014年から2017年末までAngularJSを使っていたのですが、2018年になってようやく、それまで逃してきた数多くのことを勉強し始めました。ES6、React、Babel、…から始まって、本当に終わりがありませんでした。
.jpeg?w=960)
2019年にフランスへ移住し、Algoliaという会社に入社したことは、私にとって様々な概念を深く理解しながら仕事ができる絶好の機会でした。自らぶつかり、周囲の人たちに尋ねたりもしながら、全体像を描いていきました。かなりの時間が経ち、こうした内容がうまく整理されたコンテンツがあったらどれほど良かっただろうかと考えるようになり、最終的に講義として制作することになりました。
📖 コンテンツ一覧（計13時間16分）
1. DOM APIの基本
基本的なDOM APIを学び、フロントエンドフレームワークなしでどのようにHTMLを構成し、イベントを付与するのかを練習します。(1h 3m)
- innerHTML
- createElement
- appendChild
- addEventListener
2. ショッピングモール作り
ショッピングモールの商品リストとカート部分を実装してみます。目標は、DOM APIを直接使用して動的なインタラクションを実装することです。商品をカートに入れたり出したりする過程で、同じデータ（入れた数量）を画面のあちこち（商品リストとカート）に同時に正しくアップデートするように開発し、この過程でモダンフロントエンドフレームワークがなぜ必要なのかを体感してみます。(1h 20m)
次に、実装したショッピングモールの商品リストとショッピングカートをより管理しやすくするために、デザイン、意味、役割を考慮して複数のコンポーネントに分割し、リファクタリングを行います。(52m)
最後に、DOM要素を一つずつ探して数量を更新していた方式の代わりに、データを更新すればそれに応じてリアクティブ（reactive）にDOMが自動で更新されるように実装してみます。(52m)
3. ウェブサーバーの基礎
Express（エクスプレス）を使いながら、ウェブサーバーの基礎を学びます。最近ではVercelやNetlifyが提供するServerless Functionが簡単で便利ですが、そのようなものが登場する前はどのようにバックエンドを構成していたのか、Expressを通じて学んでいきます。
そして、Viteで起動したフロントエンドがExpressサーバーにリクエストを送り、受け取ったデータをレンダリングしてみます。その過程で直面するCORSという問題についても学んでいきます。(45m)
4. Array メソッド
様々な例題を通じて、代表的なArrayメソッドであるfilter、map、reduceを練習します。基本的な文法は習得しているという前提で、筋トレのような感覚で進めていきます。(1h 18m)
5. npmライブラリの基礎
npmライブラリがどのような構造を持つべきかを確認し、CommonJSとES Moduleにまつわる複雑な問題をじっくり理解していきます。そして、作成したライブラリを実際にnpmに配布してみます。(27m)
6. mini query作り
jQuery（ジェイクエリ）のごく小さなサブセットを作ってみます。yarn workspaceを通じてモノレポを構成する方法を学び、その中にライブラリ、サンプルアプリ、ドキュメントサイトまで作成してみることで、ライブラリ開発のための全般的なワークフローを体験します。
vitestを使用してunit test（ユニットテスト、単体テスト）を作成してみたり、ライブラリのビルドプロセスで発生する状況における難しさを体験し、Tree-shakeについても確認します。(1h 7m)
7. 映画情報サイト
映画検索サイトを作ってみます。出来上がりは非常にシンプルですが、このエピソードでは非常に重要な概念を扱います。ブラウザのHistory APIを学び、これを利用してReact RouterのようなClient-Side Routingを直接実装してみます。(45m)
続いて、Server-Side Rendering（サーバーサイドレンダリング）をExpressサーバーで直接実装し、クライアントでこれをHydrationする部分まで実装します。ここまで終えると、Next.jsのSSR + Hydrationのプロセスをかなり詳細に理解できるようになります。(1h 14m)
8. 非同期の練習
Arrayメソッドの練習エピソードと同様に、非同期をより上手く扱うためにcallback、Promise、async、awaitを練習します。(38m)
9. 静的ブログを作る
Jekyll、Gatsby、Next.jsなどを使って静的ウェブサイトを多く作りますが、そのようなツールがどのような仕組みで静的ウェブサイトを作るのかを調べ、そのビルドプロセスを模倣してみます。
この過程で、フレームワークやツールを一切使わずにNode.jsで作成したスクリプトが、マークダウンで書かれた記事を静的ブログとしてビルドし、Vercelにデプロイするところまで行います。(1h 3m)
10. CLIを作る
CLI用npmライブラリの構造がどのようになっているかを確認し、実際にCLIを自作してnpmに配布してみます。その後、npm install -g <package-name>でインストールして使用できるようになります。(48m)
11. Formライブラリ作り
<form action="/save" method="post">
以前は上記のような形式でformを作成していましたが、それがどのように動作するのか、実際に昔の方式で実装してみます。そして、現在はなぜそのような方法をとらないのかを理解します。また、最近よく使われているreact-hook-formのようなライブラリの利点を理解し、私たちも似たようなものを作ってみます。(1h 4m)
👥 受講されると
講義を購入された方は受講生専用のDiscordチャンネルに招待されます。講義を聴きながら生じた質問を投稿してみてください。他の人が投稿した質問から学ぶこともできます。
何でも「知らなくて当たり前」という空間で、自由に質問し議論しながら、一緒に学んでいければ嬉しいです。皆さんのJavaScriptに対する自信を高めることが、結局のところ最も重要な目標ですから。
❓ よくある質問
Q. 講義でTailwind CSSを使用しますか？
たった一つのエピソード、「ショッピングモール作り」でTailwind CSSを使用してデザインを行います。Tailwind CSSをご存知ない場合は、ご自身が好きな方法でCSSを記述しても構いません。もし興味があれば、私が作成した無料動画を参考にしてみてください。
Q. 私が受講しても大丈夫なレベルでしょうか？
一概に言うのは難しいですが、以下の項目に当てはまる方であれば、受講していただいても大丈夫だと思います。
- letとconstの違いを理解している。
- import/exportでモジュールを扱うことができる。
- importとrequireの違いをある程度は知っている。
const { name, address } = personこの文法を理解している。
- ReactやVue.jsを使って、データベースなしで変数にTo-Doを保存する方式で、簡単な機能のTo-Doアプリを作ることができる。
- Reactを使用する場合、useEffectとuseMemoをどのように使うか大体わかっている。
- To-Doアプリを作ると言われたら、コンポーネントをどのように分割するか大体イメージができる。
Q. 他の講義と何が違うのでしょうか？
特定のプロジェクトを作ることを目標とする講義はたくさんあります。そのような講義の場合、多様な技術、ライブラリ、サービスなどを組み合わせて、徐々に積み上げていく過程を見せることになります。多様なもの（What）とそれをどのように（How）組み合わせるかを学ぶという点では有用ですが、そのような講義の特性上、Why（なぜ）まで扱うのは容易ではありません。
「シナブロ・JavaScript」では、特定のトピックについて「以前はどうしていたことが、今はなぜこうなったのか」という変遷を学びながら、各アプローチのメリットとデメリットを理解していきます。そして、フレームワークが私たちの目に見えないところで処理してくれている機能を直接実装してみることで、なぜそのようなことが必要なのかを知ることができます。
What（何）とHow（どうやって）を知ることは非常に重要ですが、そこにWhy（なぜ）が欠けてしまうと、遠くまで行くことは難しくなります。開発をしていて自信が持てない理由は、大抵の場合Whyの欠如によるものです。バグが発生したときに状況を正確に理解できていないため、どう解決すべきか分からず、ググって得た結果を適用してバグが解決しても、なぜ解決したのかが理解できないのでスッキリしません。そして、次に同じ状況が起きたらどうしようかと不安になるのです。
だからこそ、「Why（なぜ）」を正確に学ぶことは、次のレベルへアップグレードするために不可欠なプロセスです。自らぶつかりながら学んでいく方法もありますが、すでにその過程を経験した人が詳しく紐解いて説明してくれる内容から学ぶことも、効率的な方法の一つです。実際、このようなミドルレベルをターゲットにした講義は、入門者向けの講義に比べて需要が少なくならざるを得ないため、こうしたターゲティングの講義自体が珍しいと思います。
Q. お試し講義はありますか？
あります！本講義を視聴する前に、あらかじめ見ておくと良い準備運動のような内容を短い無料動画にまとめました。リンクからもご確認いただけます。
Q. 学生や就活生向けの割引はありますか？
はい、可能です。簡単な認証手続きを経てから、割引を適用させていただきます。
Q. 他に質問があります！
私にメール、またはTwitterのDMをいただければお答えいたします。フランスに住んでいるため、時差の関係で返信が少し遅れる可能性がある点、あらかじめご了承ください。
こんな方に
おすすめです
学習対象は
誰でしょう？
「できるんですが、なぜこれができるんでしょうか？」
"ウェブ開発はとても複雑です"
「できることはできますが、自信がありません」
「開発スキルをレベルアップさせたいです。」
"新しいものが、あまりにも早くたくさん出てきます。"
前提知識、
必要でしょうか？
JavaScript入門者のための講座ではありません。ジュニアから中堅へ、中堅からシニアへとステップアップするための、コア（体幹）を鍛えるための講座です。
こんにちは
eunjaeです。
628
受講生
37
受講レビュー
17
回答
4.9
講座評価
2
講座
こんにちは。イ・ウンジェです。フランスに住んでいます。家でぼーっとしながら猫たちを眺めるのが好きで、夕食後に1時間ほど散歩するのを好みます。騒がしくて混雑した都心が苦手なので、パリ近郊の小さな街に住んでおり、バードウォッチングが好きで、野菜を育てる趣味があります。
開発に関する話をもう少しすると、2022年11月からStoryblokというHeadless CMSサービスを提供している会社で、開発者ユーザー向けのextension platformを開発しています。
2019年にAlgoliaというクラウドベースの検索ソリューション企業に入社するため、フランスに移住しました。その会社ではInstantSearchというオープンソースのUIライブラリを作る仕事をしていました。Vanilla JavaScript、React、Vue.js、Angularの計4つのバージョンでライブラリを提供するため、共通ロジックを別途管理し、各フレーバーが最小限のラッパーになるようにする作業に最も多くの時間を費やしました。その他にも、業務として様々なオープンソースプロジェクトに参加しました。
それ以前はあるスタートアップの韓国とシンガポール拠点でフルスタックとして3年ほど働き、その前はカカオとダウム・コミュニケーションズで4〜5年間、主にフロントエンド業務を担当していました。
カリキュラム
全体
118件 ∙ (19時間 56分)
講座資料（こうぎしりょう）:
授業資料
講座掲載日:
最終更新日:
受講レビュー
全体
36件
4.9
36件の受講レビュー
gichulroh6344受講レビュー 14
∙
平均評価 4.7
5
100% 受講後に作成講義者がコードを書くのは哲学者のようです。開発とはどのように見れば面白いことなのですが、またその面白さを見つけさせてくれました。最初は講義が単価が少なくて躊躇でしたが、最後まで一次頑強でした。二、三回は見なければならないようです。アプリを作る講義はたくさんありますが、Node環境やライブラリ開発講義語のおかげで、関連開発環境の理解度が高まりました。次の講義も楽しみにしています。遠くから建ててください。最後にセクション12静的ブログを作成します。
- eunjae知識共有者
とても良い評価ありがとうございました😊おっしゃった映像に長いスペースがありましたね。おかげで、取り外し後に再度上げました。ありがとうございます！
- damyo7477
受講レビュー 1
∙
平均評価 5.0
5
100% 受講後に作成これまで見てきた講義とは違う感じ、さっと休んでいく感じで快適に受講しました。 講義が軽かったりやすかったという意味ではありません。 かつては多くの知識と技術を打ち込んだ（？）講義が良いこともあったが（お金の値段はする気分😁）、たまには追いつきにくい時もあり、受講生のための講義なのか講師様が知ることをトロフィーのように陳列して本人の業績を積み重ねるためか混乱する場合もありました。 ウンジェ様の講義はバランスがとても良かったようです。程よく広く、程よく深い感じでした。 何より公式を暗記するのではなく、解くように思考の流れに沿って行く経験ができてよかったです。 知らなかったが、ただ当然考えて気になっていなかったこと、重要ではないと嘆いて関心も持っていなかった部分も一度ずつ言及してくれてまた考えてみるきっかけにもなったんです。 問題をどのように扱い、事故するのか、これまでどんな姿勢で働いたのかを振り返る必要があります。 機会があれば、ウンジェ様の開発者としてのヒント（どのツールを使用するのか、どのように仕事/コラボレーションするのかなど）も共有していただければとても良いと思います。 次に、良い講義でお会いできるのを楽しみにしています。ありがとうございます。
- eunjae知識共有者
とそんな感じをいただきましたが、とても嬉しいですね。 開発ツールとかコラボレーション方式についてもボーナスエピソード 一度悩みましょう😊
- sai
受講レビュー 4
∙
平均評価 5.0
5
58% 受講後に作成普段講師様のSNSアカウントを探索するのが好きですが、講義をご紹介いただき、冷たいカリキュラムから読んでみました。ちょうど就任をしてバニラのJavaScriptベースのプロジェクトをしていた時期でしたが、プロジェクトをしながらまだまだJavaScriptの実力が足りませんね！という考えをたくさんしたんですよ。ライブラリ＆amp;フレームワークで便利な機能をJavaScriptでどのように実装するかについてのインサイト、そしてTDDやnpm配布など、一人で勉強するには負担される概念を教えてくれる講義でした。 FEを勉強しながら漠然と知っているのですが、詳しくは難しい概念を講師様と一緒に行くので負担が少なくてよかったです。 JavaScriptですぐにリアクトに移ったり、リアクトで開発を始めたのに詰まっている部分がある人におすすめしたい講義です。この講義は就コンする今も役に立ちますが、1年前…インサイトをすごく渇望した時期の私に見せてくれたら拍手を打って見た講義だと思います。ディスコードが別々に開設されて受講者たちを管理してくれる点と、就学生割引コードを配布してくれる点まで色々と思慮深い講師の方がいらっしゃいます！おすすめです！ （そして映像の中でちょっと出てくる猫も可愛いです。☺️）
- eunjae知識共有者
こんにちは。役に立ちましたか？
- leehyunji07152667
受講レビュー 2
∙
平均評価 5.0
5
97% 受講後に作成3年目ジュニア開発者です！講座を探索して気に入ってすぐに購入後に聞いてみたところ、とても良かったです。 JSを利用して、Reactのように動作させるように、SSR直接実装されたのも印象深かったほか、バンドルやモジュールの概念も取り上げてくれてよかったです。肉を与えるのではなく、肉をつかむ方法を教えてくれる講座のようですㅎㅎ講座を聞きながら、授業構成について多くの悩みをしていたことが感じられました。すっきり復習させていただきます。ありがとうございます〜！
- eunjae知識共有者
良い言葉ありがとうございます😊私も肉ではなく肉をキャッチする方法をお知らせするのに焦点を最大限にしてみましたが、そう感じたのはとても嬉しいですね。質問が生じた場合は、いつでも残してください。ありがとうございます！
- qpyou12340482
受講レビュー 9
∙
平均評価 4.9
eunjaeの他の講座
知識共有者の他の講座を見てみましょう！
似ている講座
同じ分野の他の講座を見てみましょう！
![フルスタックのための堅実なフロントエンドブートキャンプ (HTML, CSS, バニラJavaScript + ES6) [フルスタック Part2]講義サムネイル](https://cdn.inflearn.com/public/course-326306-cover/4ea213de-f786-4af1-a9d0-b8932263885a?w=420)
![[一日10分|Web Project] HTML/JS/CSSで自分だけの心理テストサイトを作る講義サムネイル](https://cdn.inflearn.com/public/courses/326568/cover/046cf2ee-87e8-4f8b-b000-5a19ce34a1bf?w=420)
