강의

멘토링

로드맵

Inflearn brand logo image
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,278

受講生

228

受講レビュー

105

回答

4.9

講座評価

9

講座

안녕하세요.

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

잘 부탁 드리겠습니다.


이력

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

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

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

 

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

 

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

GitHub - https://github.com/lleellee0

カリキュラム

全体

28件 ∙ (5時間 19分)

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

受講レビュー

全体

20件

5.0

20件の受講レビュー

  • abcedfg님의 프로필 이미지
    abcedfg

    受講レビュー 503

    平均評価 5.0

    5

    32% 受講後に作成

    Ngoài kiến ​​thức về front-end, thật tốt khi các nhà phát triển back-end đưa ra ý kiến ​​​​của họ về cách phát triển màn hình. Đặc biệt, tôi hoàn toàn đồng ý với quan điểm cho rằng các nhà phát triển back-end có kinh nghiệm tự tạo màn hình có thể thiết kế các thông số API tốt hơn. Tôi có thể theo dõi và học hỏi một cách dễ dàng nhờ sự cân nhắc kỹ lưỡng trong quá trình thực hành, chẳng hạn như sử dụng IntelliJ thay vì VSCode. Trước đây tôi đã nhận được sự giúp đỡ từ Foo về nhiều mặt và một lần nữa xin cảm ơn bạn vì đã chuẩn bị bài giảng với nội dung hay. Tôi sẽ ăn nó với lòng biết ơn :D

    • foo
      知識共有者

      Hahaha cảm ơn bạn đã đánh giá chi tiết khóa học của haero77! Tôi sẽ thưởng cho bạn những bài giảng hay trong tương lai. (_ _)

  • rebugs님의 프로필 이미지
    rebugs

    受講レビュー 34

    平均評価 4.8

    4

    96% 受講後に作成

    Nghe hay quá, cảm ơn bạn!

    • foo
      知識共有者

      Cảm ơn anh 이승욱 đã để lại đánh giá khóa học! :)

  • esparant25344님의 프로필 이미지
    esparant25344

    受講レビュー 12

    平均評価 5.0

    5

    71% 受講後に作成

    Xin chào. Tôi thực sự thích thú với bài giảng. Tôi gặp khó khăn với front end vì không có kiến ​​thức nhưng nó giúp ích cho tôi rất nhiều. Cũng không khác gì qua bài giảng này, tôi đã tạo ra một dự án đơn giản sử dụng API và càng làm tôi càng muốn thành thạo hơn trong việc xử lý API (json) của tập lệnh Java. Vì vậy, tôi muốn hỏi nên học những kỹ năng nào thì tốt. Cảm ơn

    • foo
      知識共有者

      Cảm ơn Donkey vì đã để lại đánh giá ấm áp. Tôi rất vui vì bạn thấy bài giảng hữu ích. :) Tôi nghĩ câu hỏi cuối cùng của bạn là về loại giao diện người dùng nào nên được sử dụng. Có một số khung giao diện người dùng, nhưng tôi khuyên dùng React là lựa chọn dễ dàng nhất. Thật dễ dàng tìm thấy tài liệu tham khảo và dễ dàng tạo một ứng dụng kết hợp nếu cần thiết. Tôi cũng chủ yếu sử dụng React làm UI khi tạo các công cụ vận hành nội bộ tại công ty của mình. Điều này đã trả lời câu hỏi của bạn? Nếu bạn có thắc mắc gì thêm xin vui lòng để lại câu hỏi. Cảm ơn

  • uugold8491님의 프로필 이미지
    uugold8491

    受講レビュー 2

    平均評価 5.0

    5

    100% 受講後に作成

    • foo
      知識共有者

      Cảm ơn bạn, uugold, đã để lại đánh giá. (_ _)

  • youngjijang8042702님의 프로필 이미지
    youngjijang8042702

    受講レビュー 2

    平均評価 5.0

    5

    32% 受講後に作成

    Tôi muốn tự mình xây dựng một dịch vụ nên đã tìm kiếm một khóa học front-end đơn giản và cuối cùng đã tham gia khóa học đó. Nó sạch sẽ và không lộn xộn. Thật tuyệt khi có thể xem xét các khái niệm front-end vốn gây nhầm lẫn với tư cách là một nhà phát triển back-end. Khuyến khích.

    • foo
      知識共有者

      Cảm ơn Youngji jang vì đã tham gia lớp học haha Tôi hy vọng bạn có thời gian vui vẻ khi tạo một dịch vụ bao gồm giao diện người dùng!

¥3,179

fooの他の講座

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

似ている講座

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