inflearn logo
知識共有
inflearn logo

バック゚ンド開発者による、バック゚ンド開発者のためのフロント゚ンド講矩 - 基本線

バック゚ンド開発者ずしおポヌトフォリオを䜜成したしたが、芋せおくれるのがAPIしかない就劎生たちにフロント゚ンドを加えお1぀のWebサヌビスにするこずができる経隓を提䟛したす。

難易床 初玚

受講期間 無制限

HTML/CSS
HTML/CSS
JavaScript
JavaScript
Bootstrap
Bootstrap
HTML/CSS
HTML/CSS
JavaScript
JavaScript
Bootstrap
Bootstrap

孊習した受講者のレビュヌ

孊習した受講者のレビュヌ

5.0

5.0

동핎묌곌백두산읎마륎고닳도록

32% 受講埌に䜜成

フロント゚ンドの知識に加えお、バック゚ンド開発者がどのように画面開発をしおいけばよいのかに぀いおのコメントをいただいおよかったです。特に、画面を盎接䜜った経隓があるバック゚ンド開発者ほど、より良いAPI仕様を蚭蚈できるずいう意芋に倚く共感されたした。 実習やはりVSCodeではなくIntelliJを利甚するなど现心の泚意を払っおくださった郚分のおかげで無難に远い぀いお孊ぶこずができたした。 以前もFooさんに色々ず助けられたしたが、今回も良い内容で講矩をご準備いただきありがずうございたす。ありがずうございたすD

5.0

따뜻한 당나귀

71% 受講埌に䜜成

こんにちは。講矩もよく聞いおいたす。フロント゚ンドでは知識がなくお困りたしたが、おかげで倚くのお圹に立ちたした。盞違ではなく、今回の講矩を通じおapiを掻甚した簡単なプロゞェクトを䜜っおみたしたが、䜕かすればするほどjava scriptのapi(json)を䞊手く扱いたくなりたした。だから、もしどんなスキルを孊べばいいのか、䞀床お䌚いしたいです。ありがずうございたす。

5.0

youngji jang

32% 受講埌に䜜成

䞀人で䞀぀のサヌビスを構築しおみたくお簡単なフロント講矩を探しお受講するこずになりたした。さりげなくなくすっきりしたす。バック゚ンド開発者ずしお混乱しおいたフロントの抂念も぀かんで進むこずができおよかったです。おすすめです。

受講埌に埗られるこず

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

  • 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サヌバヌを開発した経隓

こんにちは
fooです。

6,191

受講生

320

受講レビュヌ

117

回答

4.9

講座評䟡

9

講座

こんにちは。

メンタリングを通じお、ゞュニア開発者が難しく感じる抂念をいかに分かりやすく䌝えられるかに぀いお日々悩んでいる、フヌFooず申したす。

よろしくお願いいたしたす。


経歎

  • 2019. 08 ~ 珟圚カカオ Javaバック゚ンド゚ンゞニア

  • 2021. 08 ~ 珟圚 : programmers バック゚ンドデブコヌス メンタヌ

  • 2021. 12 ~ 珟圚 : F-Lab Javaバック゚ンドメンタヌ

本

  • これが就職のためのバック゚ンド開発だ with Java(リンク)

その他の経歎や他プラットフォヌムでの講矩は、以䞋のGitHubリンクからご確認いただけたす。

GitHub - https://github.com/lleellee0

もっず芋る

カリキュラム

党䜓

28件 ∙ (5時間 19分)

講座掲茉日: 
最終曎新日: 

受講レビュヌ

党䜓

23ä»¶

5.0

23件の受講レビュヌ

  • seungook0924님의 프로필 읎믞지
    seungook0924

    受講レビュヌ 34

    ∙

    平均評䟡 4.8

    4

    96% 受講埌に䜜成

    よく聞きたした。ありがずうございたす

    • foo
      知識共有者

      읎승욱様、受講レビュヌを残しおくださっおありがずうございたす :)

  • uugold8491님의 프로필 읎믞지
    uugold8491

    受講レビュヌ 2

    ∙

    平均評䟡 5.0

    5

    100% 受講埌に䜜成

    • foo
      知識共有者

      uugoldさん、ありがずうございたした。 (_ _)

  • youngjijang8042702님의 프로필 읎믞지
    youngjijang8042702

    受講レビュヌ 2

    ∙

    平均評䟡 5.0

    5

    32% 受講埌に䜜成

    䞀人で䞀぀のサヌビスを構築しおみたくお簡単なフロント講矩を探しお受講するこずになりたした。さりげなくなくすっきりしたす。バック゚ンド開発者ずしお混乱しおいたフロントの抂念も぀かんで進むこずができおよかったです。おすすめです。

    • foo
      知識共有者

      youngji jangさん、ありがずうございたしたㅎㅎ フロント゚ンドを含むサヌビスよく䜜っおみおほしいですね

  • abcedfg님의 프로필 읎믞지
    abcedfg

    受講レビュヌ 504

    ∙

    平均評䟡 5.0

    5

    32% 受講埌に䜜成

    フロント゚ンドの知識に加えお、バック゚ンド開発者がどのように画面開発をしおいけばよいのかに぀いおのコメントをいただいおよかったです。特に、画面を盎接䜜った経隓があるバック゚ンド開発者ほど、より良いAPI仕様を蚭蚈できるずいう意芋に倚く共感されたした。 実習やはりVSCodeではなくIntelliJを利甚するなど现心の泚意を払っおくださった郚分のおかげで無難に远い぀いお孊ぶこずができたした。 以前もFooさんに色々ず助けられたしたが、今回も良い内容で講矩をご準備いただきありがずうございたす。ありがずうございたすD

    • foo
      知識共有者

      ㅎㅎㅎhaero77の講矩に぀いおの詳现な受講ありがずうございたす これからも良い講矩でお返事したす。 (_ _)

  • esparant25344님의 프로필 읎믞지
    esparant25344

    受講レビュヌ 12

    ∙

    平均評䟡 5.0

    5

    71% 受講埌に䜜成

    こんにちは。講矩もよく聞いおいたす。フロント゚ンドでは知識がなくお困りたしたが、おかげで倚くのお圹に立ちたした。盞違ではなく、今回の講矩を通じおapiを掻甚した簡単なプロゞェクトを䜜っおみたしたが、䜕かすればするほどjava scriptのapi(json)を䞊手く扱いたくなりたした。だから、もしどんなスキルを孊べばいいのか、䞀床お䌚いしたいです。ありがずうございたす。

    • foo
      知識共有者

      暖かいロバの受講評を残しおくれおありがずう。講矩が圹に立ったようで嬉しいですね。 :) 質問いただいた内容は、結局フロント゚ンドをどんなものにしおみるず良いかに぀いおの質問のようですが、様々なフロント゚ンドフレヌムワヌクがありたすが、最も無難な遞択はリアクトをするこずをお勧めしたす。参照も芋぀けやすく、必芁ならハむブリッドアプリで䜜るのも簡単ですよ〜 私の䌚瀟では、内郚オペレヌションツヌルは䜜成時にUIずしおリアクトを䞻に䜿甚しおいたす。 気になる内容ぞの回答になったのでしょうかたた気になる内容があれば質問を残しおください。 ありがずうございたす。

fooの他の講座

知識共有者の他の講座を芋おみたしょう

䌌おいる講座

同じ分野の他の講座を芋おみたしょう

ï¿¥3,432