Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
BEST
Programming

/

Front-end

作成しながら学ぶフロントエンドDO ITコーディング(Next.js、Typescript)

一見素晴らしいサービスではなく、ユーザーに会ってフィードバックを受けることができるサービスを作成できます。 Web開発に自信をもっていただけます。

  • totuworld
Next.js

学習した受講者のレビュー

こんなことが学べます

  • Next.jsの活用法

  • Firebase の Firestore でデータを管理

  • Firebase の認証(Authentication)の活用

  • Web APIの設計と活用

自分でアプリケーションを作成して知る
プログラミングの楽しみ 🚀

開発者になりたいのですが、
どこから学ぶべきですか?

どんな内容を学ぶべきかわからないが、とてもフロントエンドのロードマップに当たって、
アルゴリズムを勉強するのに疲れた場合は、純粋にアプリケーションを作成することを楽しんでください。

楽しくなればもっと長く学習できます。


学生や就労生の方は価格が負担される場合がありますので、ぜひ私のブログの最新記事先に見てください。

あなたのための破格的な割引のクーポンがあります!

クーポン🎟️確認に行く👉 https://medium.com/@totuworld


開発環境設定から
アプリケーションの展開まで🏃

このレッスンでは、匿名の質問サービス(Blahx2)を最初からすべて作成して展開する前のプロセスについて説明します。 React.jsに触れるとき、よく聞くクライアントサイドレンダリング(CSR)ではなく、サーバーで初期htmlを作成して下げた後、ハイドレーション(hydration )プロセスを経るサーバーサイドレンダリング(SSR)をサポートするNext.jsを中心に扱います。

さまざまなソーシャルログインを実装するために時間をかけずに迅速に構築できるようにFirebase認証を活用します。 Firebase Firestoreを利用して、NoSQL方式でデータを保存/修正し、ページネーション処理する方法を学ぶことができます。


こんな方におすすめです。

プログラミングの楽しみ
探したい方

本番機能の実装
やりたい方

最新のトレンド技術
学びたい方


この講義だけの特徴
確認してください💡

  • 理論を勉強して疲れないように最初から一つずつ作っていきます。
  • JavaScriptだけに触れたら、TypeScriptの魅力を感じることができます。
  • フロントエンドを勉強してみると、幕屋に感じられるバックエンドが簡単に感じられるように段階的にコードを発展させます。
    • 同じコードが繰り返されても!
    • 太字出しやすい部分も!
    • まずは、プログラムして次々に修正する方向で説明します。
  • プログラミングの過程でよくある間違いをそのままにして、その後修正するようにしました。
    • ビジネスでデバッグする方法を少し垣間見ることができます。

学習内容✨

메인 페이지 뷰 작업

メインとユーザーのホームページを作成する

ユーザーが最もよく見るビューページをどのように構成するかを見てください。各ページで使用される共通レイアウトを作成し、GNBを追加するプロセスをすべてカバーします。

ユーザー、メッセージAPIの作成

購読後にユーザー情報を保存/照会するAPIとメッセージ登録/修正APIの両方を作成します。サーバーで API を提供する際に考慮すべき事項に対処し、Firestore にデータをどのように構造化して入れるかを確認できます。

open graph イメージジェネレータの作成

ソーシャルメディアに投稿を共有すると、衣装のイメージとテキストが追いつきます。その中で、ユーザーが気にしなくても、入力された内容だけで画像を生成できるように、playwrightとaws lambdaで動作可能なheadless chromeの利用方法を扱います。

Vercelの展開

サービスを作成してもユーザーのフィードバックを受け取る方法がない場合は、さらに学ぶことはできません。この部分を改善するために、GitHubアカウントとVercel展開環境を使用して持続展開可能な環境を作成する方法について説明します。

ボーナス:Ajvライブラリ

Web APIを作成するときにユーザーが送信した入力を毎回チェックするのは困難です。この時点でAjvライブラリとJSON SChemaの助けを借りることができます。

ボーナス: React Query

React.jsのuseEffectを利用して、ページングされたデータをロードするように実装します。そしてこれをReact Queryを使ってどのように修正できるかを見てみましょう。


予想される質問 Q&A 💬

Q. コンピュータ工学(非専攻者)を専攻しなくても聞くことができますか?

A. はい、可能です。ただし、JavaScriptの文法を知っている場合は、より簡単に理解できます。

Q. 授業内容をどのレベルまで扱いますか?

A. このレッスンは、React.js、Node.js、Next.jsの理論や文法よりも実際のサービスを作成することに集中しています。作成に集中し、さらに学習するためのキーワードを提示します。

Q. 講義前に準備すべきことはありますか?

A. JavaScriptを一度も扱っていなかったら、let、constの違いやArrayのmapなどは確認すると良いでしょう。


知識共有者の紹介✒️

エレガントな兄弟たちでフロントエンドプログラマーとして働いています。
普通の人が集まって、凄まじいことができると信じています。

  • 県)エレガントな兄弟、フロントエンドプログラマー
  • 前)ヤノルザ、バックエンドプログラマー
  • 前) ArasoPandan、バックエンドプログラマ
  • 前)MobiDIX、モバイルゲームクライアントプログラマ
  • 実務に近づくNode.jsバックエンドスタディを5期目運営中です。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 初めてプログラミングを始めて恐れがある方

  • TODOリストではなく、誰かが試すことができるサービスを作りたい人

  • フロントエンドの知識はありますが、バックエンドを扱うのが大変な方

前提知識、
必要でしょうか?

  • JavaScriptの基礎

こんにちは
です。

2,332

受講生

36

受講レビュー

66

回答

4.7

講座評価

3

講座

우아한형제들에서 프론트엔드 프로그래머로 일하고 있습니다. 평범한 사람들이 모여서 비범한 일을 할 수 있다고 믿습니다.
- 현) 우아한형제들, 프론트엔드 프로그래머
- 전) 야놀자, 백엔드 프로그래머
- 전) ArasoPandan, 백엔드 프로그래머
- 전) MobiDIX, 모바일 게임 클라이언트 프로그래머

カリキュラム

全体

53件 ∙ (5時間 41分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

22件

4.5

22件の受講レビュー

  • xiu15님의 프로필 이미지
    xiu15

    受講レビュー 3

    平均評価 4.7

    5

    45% 受講後に作成

    一度途中まで聞いて残します。 フロントエンドで就職しようとする就労生の方々を聞いてください。理由は 1. 混乱させない この講義は、とても上手な射手に知らないことを聞いてみると、まとめた感じで説明してくれながら5分画面を見せてくれるのです。私の席に戻って、今見たばかりグーグルしてみて、もう少し毒を探してみると見せてくれたことが理解される感じの講義です。しかし、実際に追いつくほどではありません。私のように理解できなければ、ぜひわかって進むモナンの性格でなければ、ただめくりながら講義を見ても大丈夫でしょう。私は序盤に出てくるOOPデザインパターンの1つ、firebaseドッグスを読む、chakraを読むほどを追加しました。 大きな絵を見て自分で勉強するスタイルで勉強しなければ就職しません 2. 知らないライブラリ Chakra チャクラ初めてみましたが。これもどのように使うのか詳しく知らせてくれてシャアック見せてくれ。しかし、会社で働く感じで、知ってドックスを探して少し熟して再びついてきたら大丈夫です。 実際、スタイリングライブラリの詳細を教えてくれるのがフロントエンド講義ではありません。 3. リファクタリング 講義をたどるどんなコードを書いてから少し複雑になったり、再利用する必要性が感じられたら、そのコードをすぐに移動して書き直すのが良かったです。 4. クーポン新工 講師様が medium にも投稿していますが、そこに投稿してみると割引率の高いクーポンが上がっているのは秘密ではないようです。 5. 積極推薦 私が実力が足りないフリンだと思うかもしれませんが、講義ではただ大まかに渡す内容は1もなく、編集や構成もたくさん悩んでいたようです。 そして、受講期間3ヶ月が長いようでありながら、さらっと圧迫されて遊んでいても、と戻ってきます。 Dead line Driven Developmentにぴったりの講義だと思います。 6. 質問-回答 私が面倒なこと、これそれをたくさん聞いていますが..よく説明してくださいます。良い講義をありがとうございました!

    • totuworld
      知識共有者

      チュチュさんありがとうございます。 文を読みながらたくさん笑って力もたくさん受けました。 私が意図した学習方法をとてもよくしてくれたようでいいですね。 どこで何をするのかわかりませんが、いつも応援します。

  • mihykim1368님의 프로필 이미지
    mihykim1368

    受講レビュー 4

    平均評価 5.0

    5

    100% 受講後に作成

    スピード感のあるコーディングのおかげで、楽しくよく聞きました。 私はこの講義の受講直前に これと同様に、最新の技術スタックラインナップに講師がライブコーディングしてくれる他の講義を受講しました。 その講義は講師の方がちょっと即興的に進んで、受講生の立場から流れていくのは少し大変でした。 この講義は順番に追いつくのがずっと簡単にできてよかったです。講義ひとつひとつご用意たくさんいただいたようです。 講義中にThunder Clientを使用していることを見て、私もExtensionのすぐインストールしました。ポストマンをインストールしなくてもVS Code上でリクエストを送ることができて楽ですね。 コメントを作成するときに「//」ではなく「/** */」のようにJS Doc方式で作成すると、コメントの内容がエディタ上でホバーしたときに表示されるかというジャンザンバリの蜂蜜のヒントも聞かせてくれたのですが、これはすごく良かったです。次回また講義発売されたらこんなことまたたくさん伝授してください。 + 講義レビュー中にチャクラ・ウイの学習について否定的な意見がありますが、 私は少し違うと思います。 Chacra UIはうまく作られたUIライブラリとして評価され、多くの開発者がコンポーネントを設計する際に参考にしたり、 使い方が異なるUIライブラリと大きな違いはないようです。 これまでUIライブラリを使ってみた方にはランニングカーブがほとんどないはずで、 これまでUIライブラリを見なかった方には、今回の機会によく作られたUIライブラリに触れてみると良いと思います。 楽しさと実務のヒントの両方を持って行くことができるフロントエンド講義ラ周辺におすすめしたいと思います。 良い講義ありがとうございます。

    • 私も material ui よく書いていましたが使い方がとても似ていますね。 今後会社でどんなuiを使うのか分からないが、別のuiライブラリを使ってみてよかったです。

  • eosbps4078님의 프로필 이미지
    eosbps4078

    受講レビュー 4

    平均評価 4.8

    4

    23% 受講後に作成

    客観的に評価すると、価格に対する 1. firebase と API の作成時にコードの説明が不足しています。 2. Chakra UIを使用しないという立場で別のUIフレームワークを学ぶことの不便さ 個人的には前にのみ聞いて払い戻しをしたかったのですが、不要な部分を受講して払い戻し基準を超えて払い戻しを行うことができなかった 個人的に学んだことがなく、もっと聞いても学ぶことがなくてお金を無駄にしたと思います。講師様はできるだけ親切にしようとしているのですが、私の立場では、コードに対する親切な説明よりは、これはこういうほどだけ聞かれて学んだことがありませんでした。 そして3ヶ月であれば十分に聞くことができる時間ですが、他の講義と比較した時、時間が過ぎて確認したい部分があるかもしれないので3ヶ月という時間は短いようですね。講義の費用が少ないわけでもありません。 それでも誠意を持って講義を作ったので、4点評価で残すようにします

    • totuworld
      知識共有者

      こんにちはナドゥコーディング。 指摘ありがとうございます。 どのように修正できるか心配してみましょう。

  • sorayeon님의 프로필 이미지
    sorayeon

    受講レビュー 81

    平均評価 5.0

    5

    100% 受講後に作成

    出退勤の途中で聞いたが、理解が良かった。 時間内にコーディングしましょう。 良い講義に感謝します。

    • endymion님의 프로필 이미지
      endymion

      受講レビュー 14

      平均評価 5.0

      5

      100% 受講後に作成

      頑張りました〜 実際のサービスを作りながら、簡単、素早く、きれいで楽しく勉強できました。気持ちいい気分ですねㅎㅎ たくさん学べました。ありがとうございます〜

      • totuworld
        知識共有者

        endymionさんはすでにコースを終了しました!おめでとうございます🎉🎉🎉 他の方に役立つ蜂蜜のヒントも残してくださってこうして受講坪まで残してくださると感動ですね。

    ¥11,724

    totuworldの他の講座

    知識共有者の他の講座を見てみましょう!

    似ている講座

    同じ分野の他の講座を見てみましょう!