강의

멘토링

로드맵

BEST
Programming

/

Front-end

バックエンド開発者による、バックエンド開発者のためのフロントエンド講義 - 基本編

バックエンド開発者としてポートフォリオを作成しましたが、見せてくれるのがAPIしかない就労生たちにフロントエンドを加えて1つのWebサービスにすることができる経験を提供します。

  • foo
백엔드개발자
frontend
javascript
html
css
HTML/CSS
JavaScript
Bootstrap

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

こんなことが学べます

  • バックエンド開発者向けのプロパティフロントエンド開発

  • HTML、CSS、JavaScriptの基本概念

バックエンド開発者が知っておくべきFE、
「本物のコア」だけ早くコックコックお知らせします!

初心者のバックエンド開発者に注目!
もしかしたらこんな悩んでいますか?

🤔

バックエンド開発者なのに、あえてフロントエンドを知るべきか?関連する基礎知識はまったくありません...

😥

APIはうまく作っていますが、いつもそのAPIを使用するフロントエンドコードはどのように書くのかわかりません。

🤨

バックエンド開発者就職準備中ですが、完全に動作するWebサービスを作ってみるべきだと思います。

だから、この講義では!

  • ✅バックエンド開発者が非常に迅速にフロントエンド開発に入門できるように講義を構成しました。
  • ✅必要なレベルの機能の実装だけを素早く行うことができるようにフロントエンドを学習します。

簡単なFEコードだけを書くことを知っていても
就職やキャリアに役立ちます!

長い時間バックエンド開発者として就職しようとする方々を指導して見守ってみると、多くの方々がフロントエンドに入門しにくいと感じたり、優先順位が低いと思われたようでした。しかし、ポートフォリオとしてAPIサービスを作成することと、バックエンドとフロントエンドが結合された1つの「Webサービス」を作成することは本当に大きな違いがあります。

1️⃣

私が作成したAPIサーバーを書くFEコードを書いて、1つの完全なWebサービスを作成することができます。

2️⃣

クライアント中心のAPI設計により、バックエンドの開発をより良くすることができます。

3️⃣

フロントエンド開発者とよりよく、緊密にコラボレーションできるようになります。

4️⃣

入社後に社内システムを開発するときは、バックエンド/フロントエンドを同時に高速で開発できます。

フロントエンドへのアクセスを容易にするために、バックエンドの開発者として就職または転職を準備する方がより魅力的で魅力的なポートフォリオを作成できるようになるという考えで今回の講義を企画しました。

あなたのAPI開発能力にフロントエンドを加え、一つのWebサービスを作れる経験をお届けします!


この講義だけ
特徴を見てください。

01
やる気もOK

レッスンを始める前に、バックエンド開発者がフロントエンドを知っているのが良い理由を説明します。

02
コアだけ簡潔に

フロントエンドの開発に必要な中核的な内容だけを扱い、不要な内容は思い切って取り除きました。

03
実務視点内容

経験からはじめ、知ったフロントエンド開発で注意すべきポイントを講義に溶かしました。 (エンコーディング設定など)

04
初心者の目の高さにぴったり

理論と実習の比重は4:6程度です。フロントエンドをまったくやってみなかったか、やってみたが思った通りUIを作れないFE入門~初心者の方々を対象に構成しました。

詳しく知りましょうか?

「バックエンド開発者があえてフロントエンドを知らなければならないのか?」という考えをバックエンド就職準備をしている方がたくさんいるようだと感じました。しかし、私はバックエンド開発者がフロントエンドを少しやると思うのがむしろバックエンド開発に役立つと思います。

したがって、このような考えをする皆さんに、バックエンド開発者がなぜフロントエンドを知る必要があるのか、その理由を説明します。

バックエンド開発者がフロントエンドを作成しようとするときは、Thymeleafのようなテンプレートエンジンを使うのか、それとも別の方法を使うのかを心配します。各方式の違いと推薦する方法について説明します。

開発者ツールはフロントエンド開発者の専有物だと思いますか?フロントエンド開発者だけでなく、バックエンド開発者にも必要な開発者ツールを使用する方法について説明します。

UI設定に不可欠なHTMLの基本知識とよく使われるタグについて説明します。すべてのタグを調べるわけではありませんが、よく使われるタグを知ったら、検索を通じてほとんどのUIを直接実装してみることができるでしょう。

Java(Java)文法と比較して、JavaScript(JavaScript)がどのような違いを持っているかを基準に、 JavaScript文法をすばやく習得できるように構成しました。

UIを見やすくするために必要なCSSの基本について説明します。また、CSSとJavaScriptを介してHTML要素を制御するために必要なセレクタ文法の中でよく使用されるセレクタ文法も教えてくれます。

私が必要だと思うUIが何で、そのUIを適用するにはどのように検索する必要があり、検索して出たCSSプロパティを開発者ツールにテストしてからソースコードに反映するプロセスそのものについてお知らせします。この過程で進めば、最初に適用してみるUIプロパティも見つけて適用できるはずです。

もっともらしいUIは最初から自分で作るのは難しいでしょうか?広く使用されているフロントエンドフレームワークであるブートストラップ(Bootstrap)を活用してUIを飾る方法も学びます。

ChatGPTが登場した後、フロントエンドの開発が容易になりました!実務でも体感している内容だけに、フロントエンドを初めて扱う方もChatGPTを活用すれば、より簡単にUIを開発できるはずです。

もちろん、フロントエンドに関する基礎知識がなければChatGPTも活用できます。フロントエンドの基礎知識は、このレッスンでお知らせします。そして、フロントエンドの基礎知識を基にした状態で、ChatGPTを活用して簡単かつ迅速にフロントエンドコードを書いてみてください。

Fooこの講義を作った人

近年、ブートキャンプなどを通じてバックエンド開発者として就職準備をしている方が、バックエンド開発のみに専念しており、フロントエンドは均一視するようだと思いました。もちろん、バックエンド開発者を志望しているので、当然バックエンドがより重要でしょう。

しかし、私はバックエンド開発者でも最小限のフロントエンド開発ができるはずだと思います。講義でも話していますが、バックエンド開発者がフロントエンドをすることを知っていれば、いくつかの利点があるからです。

したがって、私はこのレッスンを通じて、まだフロントエンドをまったく知らないバックエンド開発者がバックエンド開発に必要な簡単なフロントエンドを「すばやく」学習できるようにしたいと思います。この講義がバックエンド開発者の就職や業務に役立つ単純なレベルのフロントエンド開発能力を習得するのに役立つことを願っています。 😄


Q&A 💬

Q. なぜバックエンド開発者はフロントエンドを学ぶべきですか?

主観的な内容も含まれていますが、いくつかの理由があります。まず、すべてのバックエンド開発者がフロントエンド開発者と働くわけではありません。第二に、UIを開発しなければ、ユーザーがどのような形でサービスを使用しているのかを知ることができます。第三に、就職準備生の場合、フロントエンドをすることを知っておくことが、ポートフォリオ準備次元でも面接でも有利です。第四に、フロントエンドにすることを知っておくと、一人で力で一つのWebサービスを作ることができます。第五に、バックエンドとフロントエンドが送受信するデータ、ヘッダ動作などを見ながら、HTTPをよりよく理解できるようになります。

カリキュラム前半の「バックエンド開発者がフロントエンドを知れば良い理由」授業をプレビューで公開しておきました。その内容を参考にすると、より詳しく説明しています。

Q. フロントエンドについてどの程度レベルまで扱いますか?

カリキュラムに示されているように、HTML、JavaScript、CSSのうち必要なものだけをすばやく簡単に把握し、簡単なAPIプロジェクトのUIを開発してみます。開発に必要なレベルについて扱っていますが、その内容を幅広く扱っているわけではありません。しかし、核となる原理は取り上げているので、一人でも追加の学習を行い、自分が作ったAPIプロジェクトのUIを作ることができるでしょう。

Q. どの程度レベルの学習者が聞ける講義ですか?

バックエンドAPIサーバーを一度でも作成した経験があるはずです。 Javaに基づいて説明していますが、JSONを使用するAPIサーバーを開発した経験があっても、フロントエンドの開発を学ぶのに役立ちます。

📢受講前に確認してください

  • Windows 10、Intellij Community 2023.2、Google Chrome 環境に基づいて練習を行います。
  • サンプルコードはFitHubで確認できます。
  • なるべくバックエンドAPIサーバーを作成した経験がある方に適した講義です。
  • 受講中に質問がある場合は、質問を残してください。更新する必要がある場合は、更新します。
  • 講義に使用される例と内容のいくつかは、私が執筆し、2023年下半期に出版するバックエンド開発入門書に含まれており、本講義は本の内容でより拡張された内容を扱います。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 私が作成したAPIサーバーにフロントエンドを追加して1つのサービスにしたい人

  • HTML、CSS、JavaScriptのようなフロントエンド開発に必要な内容を全く知らない人

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

  • 簡単でもAPIサーバーを開発した経験

こんにちは
です。

5,457

受講生

252

受講レビュー

116

回答

4.9

講座評価

9

講座

안녕하세요.

멘토링을 하면서 주니어 개발자들이 어려워 하는 개념들에 대해 어떻게 하면 쉽게 전달할 수 있을지에 대해서 많은 고민을 하고 있는 푸(Foo)라고 합니다.

잘 부탁 드리겠습니다.


이력

  • 2019. 08 ~ 현재 : 카카오 자바 백엔드 개발자

  • 2021. 08 ~ 현재 : programmers 백엔드 데브코스 멘토

  • 2021. 12 ~ 현재 : F-Lab 자바 백엔드 멘토

 

  • 이것이 취업을 위한 백엔드 개발이다 with 자바(링크)

 

기타 이력 및 타 플랫폼 강의들은 아래 GitHub 링크에서 확인할 수 있습니다.

GitHub - https://github.com/lleellee0

カリキュラム

全体

28件 ∙ (5時間 19分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

21件

5.0

21件の受講レビュー

  • abcedfg님의 프로필 이미지
    abcedfg

    受講レビュー 503

    平均評価 5.0

    5

    32% 受講後に作成

    In addition to the front-end knowledge, I liked the advice you gave me on how back-end developers should develop screens. In particular, I really agreed with the idea that back-end developers who have experience creating screens can design better API specifications. I was able to follow along and learn without any problems thanks to the meticulous consideration you gave, such as using IntelliJ instead of VSCode for the practical training. I have received help from Foo in many ways before, and I am grateful that you prepared a lecture with good content this time as well. I will eat well with gratitude :D

    • foo
      知識共有者

      ㅎㅎㅎ Thank you for the detailed review of haero77's lecture! I will continue to reward you with great lectures. (_ _)

  • seungook0924님의 프로필 이미지
    seungook0924

    受講レビュー 34

    平均評価 4.8

    4

    96% 受講後に作成

    Thank you, I enjoyed it!

    • foo
      知識共有者

      Thank you for leaving a course review, Lee Seung-wook! :)

  • esparant25344님의 프로필 이미지
    esparant25344

    受講レビュー 12

    平均評価 5.0

    5

    71% 受講後に作成

    Hello. I am listening to the lecture very well. I had a hard time because I had no knowledge of the front-end, but thanks to this, it was very helpful. The reason is that I created a simple project using API through this lecture, and the more I do it, the more I want to be proficient in handling Java Script API (json). So I would like to ask you what kind of technology I should learn. Thank you.

    • foo
      知識共有者

      Warm Donkey, thank you for leaving a review. I'm glad the lecture was helpful. :) I think the question you asked is ultimately about what kind of front-end would be good to use. There are many front-end frameworks, but I recommend React as the safest choice. It's easy to find references and easy to create hybrid apps if necessary. I also mainly use React as a UI when creating internal operating tools at my company. Did this answer your question? If you have any other questions, please leave a question. Thank you.

  • uugold8491님의 프로필 이미지
    uugold8491

    受講レビュー 2

    平均評価 5.0

    5

    100% 受講後に作成

    • foo
      知識共有者

      Thank you, uugold, for leaving a review. (_ _)

  • youngjijang8042702님의 프로필 이미지
    youngjijang8042702

    受講レビュー 2

    平均評価 5.0

    5

    32% 受講後に作成

    I wanted to build a service on my own, so I looked for a simple front-end course and ended up taking it. It was clean and simple. It was good because I was able to go over the front-end concepts that I was confused about as a back-end developer. I recommend it.

    • foo
      知識共有者

      Thank you, youngji jang, for taking the class. I hope you can create a good service that includes the front end!

¥3,291

fooの他の講座

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

似ている講座

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