前段学习最好的教材集

1 年 ago

韵, 科

2 minutes

首先

我为前台学习整理了一些非常有用的教材。

作为简短的自我介绍，我是一名新入职的前端工程师，现在是2022年，也是我工作的第二年。

在实际工作中，有许多场景是通过这个教材顺利地进行实施，或者是通过使用这个教材能够理解。这样的场景在过去两年中发生了很多次。

我要介绍的教材是我自己亲身使用过且大多数都是免费或者价格低廉的教材。

我将介绍一份教材，目的是全面学习前端，并建立实际工作的基础。

该文章的主要受众

HTMLとCSSはある程度かける人

这篇文章的目的是什么。

実務現場でも活用できるスキルを学べる教材を知れる

JavaScript – JavaScript

JavaScript课程的Dotinstall版本

首先要介绍的是广为人知的编程教材Dotinstall的JavaScript版。

在「Dotinstall JavaScript教程」中

実際に動きを持つUIの開発(ミニアプリ開発)

按照這個步驟來進行。

在Dotinstall上学习的语法等知识可以通过实际动手操作以输出的方式来巩固，因此知识的扎实程度容易提高。

如果一个人完全没有接触过JavaScript，那么我强烈推荐在Dotinstall上全面学习基础知识。

为那些真正渴望学习的人提供的WEB开发深度实践课程 (Udemy)

接下来要介绍的是Udemy教材中的”适合真正想学习的人的WEB开发全面实践”。

在这个教材中，我们使用原生JavaScript，即Vanilla JS，来学习在Web制作过程中如何应用具体的JavaScript技巧。

你可以学习如何在网页制作的实际场景中应用你之前学过的语法和函数。

这是一个建议在进行网页制作时使用JavaScript的教材。

JavaScript初学者入门指南 (书籍)

最後要介紹的是关于学习JavaScript的书籍《JavaScript本格入门》。

根据标题写的入门，我认为这本书对于JavaScript初学者来说可能有点难以理解的程度。(个人感受)

因此，建议您在理解一定程度的语法和DOM操作基础之后再进入。

除了之前学过的基础语法，具体来说，还有以下内容。

DOMの応用的な使い方

可以学习的。

这是一个建议的教材，作为JavaScript学习的综合总结位置。

如果你想更详细地学习异步编程的原理，我推荐阅读这篇文章，它非常易懂。

反应

由于使用Class组件的React并不常见，在我看来，我选择不去学习它，尽管它有官方教程。

由于Progate的类组件解释与之前相同，因此已省略。

某个名为”トラハック的工程师学习讲座”的YouTube视频。

首先要介绍的是在学习React基础时对我最有帮助的「トラハック」先生的YouTube教程。

从React的基础开发开始，通过开发实际的应用程序，如聊天应用和电子商务网站，来巩固知识的视频构成。

由于是在YouTube上学习，因此这些都可以免费学习。

在トラハック先生的视频中，他详细解说了从环境设置开始，使得即使是初学者也不容易失去动力。

在Travis的视频中可以学到以下内容。

Reduxを用いた状態管理

由于可以学习基础知识并实践应用于工作场景中，故React未经验者非常推荐这个教材。

React入门：从JavaScript基础开始，避免挫折（Udemy）

在本课程中，您可以学习从JavaScript的基础知识到React的全部内容。

我们可以以简洁易懂的解说方式进行学习，避免留下”为什么”的疑问。

在课程中最后我们会进行一个简单的应用开发，通过学习JavaScript和React的基础知识，你可以直接应用到实际工作中。

完全版的React乐趣升级课程

这门课程提供了学习从JavaScript基础到React的教材。

从现代前端经常出现的概念解析开始，包括”什么是SPA”。

同时，由于能够在开发应用程序的过程中学习JavaScript和React，因此知识的巩固更加容易。

此外，由于视频中还进行了富有意义的闲聊，你可以在学习中不感到厌倦。

TypeScript （编程语言）

以下将介绍现代前端开发几乎必不可少的TypeScript学习教材。

“泊拉黑的TypeScript”

首先介绍的是React教程中提到的Traversy Media的视频。

在这个视频中，我们对TypeScript初学者进行了讲解，包括环境搭建、基础语法和类型定义。

在后半部分，您还可以学习一些应用性较强的内容，例如泛型和异步处理。

在トラハックさん的视频中，您可以学习到「什么是TypeScript」以及「如何使用它」的内容，因此我推荐它作为一种教材。

生存模式的TypeScript。

下面要介绍的是《TypeScript生存指南》，它以基础为前提，通过亲身实践来学习TypeScript的本质。

这个教材是为了让读者能够尽快在实际工作中使用TypeScript而制作的最快捷途径。

由于精选了在实际工作中常用的功能，并进行了解释，所以可以高效地学习“可用技术”。

在掌握了之前介绍的教材中的JavaScript基础语法后，我推荐你开始学习适用于Survival TypeScript的内容。

使用React和TypeScript进行开发

在現代的React開發現場中，開發人員通常會使用TypeScript作為開發工具。

接下来，我将介绍一些可以学习”React×TypeScript”的教材。

React的乐趣升级课程完整版（Udemy）

在 React × TypeScript 中，我推薦的教材是剛才介紹的「じゃけぇさん」的 Udemy 課程——React 快樂進階全套課程。

这门课程可以全面复习并学习到过去学过的内容，同时也能掌握实际工作场景中常用的知识。

您可以学习以下内容的具体细节。

React×TypeScriptを使ったアプリ開発

通过这门课程的帮助，我能够顺利进入实际工作开发，减少了许多困难。

由于提供了初学者可以轻松理解的解说，这种教材使学习过程中不会感到挫折，可以继续学习下去。

下一个.js

下面要介绍的是基于React开发的JavaScript框架之一，即”Next.js”。

在最近的前端开发中，Next.js也变成了被采用的技术。

在我过去一年的开发中，大部分前端开发都是使用 “Next.js×TypeScript”。

公式教程

我认为对于学习Next.js基础知识，Next.js官方教程是最易于理解的学习材料。

在公式教程中，从解释“什么是Next.js”开始，你可以全面学习Next.js所使用的技术。

由于您可以通过实际的应用开发来学习，所以内容能够让您了解在实际场景中如何使用Next.js。

React(v18)入门指南全面版

在这门课程中，你可以学习React和Next.js等方面的知识。

在Next.js领域中，您可以学到以下具体内容。

API Routes

通过图解，你可以对“为什么”进行彻底而详细的概括，从而可以完整地进行学习。

这个课程也适合那些想要学习React以及函数式编程等本质内容的人，因为它详细解释了这些重要知识，可以帮助他们打下本质基础。

应用程序接口 (API)

我们将学习与前端和服务器端互通的必需的API（在开发SPA时必需的API）。

Web API的积极方面

首先介绍的是一本关于API学习的名著”Web API The Good Part”。

在这个教材中，您可以学习以下内容。

設計を変更しやすいAPI

您可以广泛学习有关API的内容，从基础知识到实际设计方法。

请务必参考我的Qiita文章中关于这个问题的总结。

总结

我将总结一些作为参考的教材，最后作为总结性的位置。

【React+TypeScript】制作Netflix克隆教程。

这个教材是在开发Netflix克隆应用的过程中学习前端开发的教材。

使用Firebase + React Hooks(TypeScript)进行Web应用开发

通过使用本教材，您可以学习React和Firebase，并同时开发一个类似Twitter的克隆应用程序。

这个课程被强烈推荐，因为它可以系统地学习在进行应用程序开发时必备的知识，如认证相关和文章发布等。

使用Next.js、Tailwind CSS和Django REST Framework学习现代React开发

在这门课程中，您可以学习到实际上的API开发以及在Nextjs（前端）中如何整合API，并了解常见的应用程序开发流程。

因此，由于最近流行的TailwindCSS在样式中使用，您也可以跟上最新的技术趋势。

最后

您对此有何感想？

本次的学习中，我整理了一些我觉得在前端学习中好用的教材集合。

这个教材的目的是全面学习并建立实践基础。

在前端方面，自从进入现场以来，一直有许多需要学习的事情，并且技术也在不断变化。

因此，进入实际开发现场后，紧跟最新技术的步伐是非常重要的。

因为我还有其他各种文章发布，所以希望您能一起读一下。

首先