バックエンド開発者が知っておくべき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年下半期に出版するバックエンド開発入門書に含まれており、本講義は本の内容でより拡張された内容を扱います。