Yumemi作为实习生成为暴徒的故事

前几天，8/20（周六），去Yumemi Co., Ltd.的一日前端实习！

我在实习期间做过 mob 编程。这篇文章将成为记录！

关于作者

求职研究生（M1）
我喜欢 Rust（与文章无关）

目标听众

如果你对梦美的实习感兴趣
什么是Mob编程？我能怎么做？一位名叫

我要写一个我将在过去留给自己的形象，适用于两者！

什么是梦美株式会社？

Yumemi是一家以“结束外包时代”为使命的公司，通过支持其他公司的内部生产和发展互联网服务，其商业模式被称为“BnB2C”。它旨在“重新审视'工作'的含义，消除组织扭曲”，并拥有“所有CEO”和“薪酬自决制”等大胆的制度。公司。了解更多信息梦美只能提供一个成长的环境。（公司介绍/招聘宣传资料）｜Ray Kataoka｜note请阅读代表片冈先生的说明。

如果你是经常访问Qiita的读者，可能很多人都知道“这是失业的Yametaro（@Yametaro）所属的公司！”山元太郎以他用关西风格语言撰写的互动文章而闻名。山元太郎等人¹发表了一篇文章。

作者喜欢或感激的文章摘录

Wai “什么！？包裹图书馆！？”-Qiita
使用 Haskell 的女孩 - Qiita
从标准输入安全接收字符串的各种方法-Qiita

Yumemi的另一个不寻常的地方是，公司内有很多信息（法规等）可以披露它已发布而已。我想去梦美的原因之一是，与其他公司相比，由于公开信息，我更容易想象我将如何工作。

什么是Mob编程？

我从来没有做过mob编程，更不用说结对编程了，所以在实习之前我做了一点研究。 Mercari 的博客很容易阅读。

3个或更多坐在一台电脑前，协同工作。划分如下
- 司机（打字员）：实际动手并按照导航员的想法写代码的人
- 导航员（剩下的人）：向打字员和其他导航员解释解决问题的想法的人（即侧身暴徒）
回转一起。大约 10 到 20 分钟后，司机会依次切换到另一个导航仪。
在启动 mobpro 之前提前分享实施步骤: 避免大错，高效进行

粗体部分是 MobPro 的特性。我认为让我担心的部分是“你为什么要做 mobpro？”我之前给过你梅尔卡里的文章用“资源效率”和“流量效率”的概念来解释，简单来说就是和大家一起做一个函数实现，这个函数发布的速度比共享的快。这种解释可能没有道理，但“您可以立即咨询，让您没有时间一个人担心我认为图像很接近。即使在一天的实习期间，我也有很多场景让我感到。

在这次实习期间，Mob编程实际上是如何完成的？Mob编程实践部分。因为文章的流水所以不在它的正下方，不好意思><

不过，我还是先写下我通过实习感受到的优点和缺点。². Mercari 的文章中也有一段关于优点的引述。（换句话说，感觉就像你可以实际体验到的好处）

优点

更少的时间担心和更少的时间停止

上面提到的好处。可以立即咨询所以浪费的时间更少。我的手停下的时间是导航员解释这个想法的时候。一个人开发的时候，往往需要“空闲时间”来写代码，但是 Mob Pro 有一定的专注力，所以没有空闲时间。

在与所有人分享知识的同时进行编码

这是最大的。详细地说，优点如下。

感谢其他人，我可以得到各种各样的东西和帮助
- 新知识
- 提出解决方案，发现自己无法注意到的错误（这次真的省了）
获得即时反馈
- 我可以看看它是否正确或易于理解，所以我可以更正我的写作（尤其是变量名）
可以防止代码的个性化
- 还可以解决移交编码等问题

在团队中营造团结感

但是，如果您“沉迷于模具”。如果彼此有一定的了解，或者有类似的技术能力，就可以聊各种话题，聊得很开心，每个人都能完成一项任务的成就感，加深了同志情谊。喜欢吊桥效应？

如果您不适合模具，则可能会出现后面描述的缺点。如果技术能力有差异，一定要用短语和转身，让能做的人和不能做的人都不会感到难过。但是，如果您对战斗有信心，则可以将其合并到破冰船中。（我认为梦美同学也是以此为目标，并将其纳入她的实习中。）

过失

“精神疲惫”

↑ 我想过各种各样的事情，但我认为这一切都归结为这一点。下面是一个具体的例子。

持续的专注和紧张

经常被人们监视是立即想到的缺点。这是停止手的时间减少的优点的另一面。这让我觉得我在工作，所以我不禁将其视为一种优势。

你应该适当休息。

我照顾

例如，如果一个老板和他的下属做一个 mob-pro，我认为它不会很顺利（需要引用）。在梦美，没有等级关系这种东西。（显然），所以对于 Yumemi 来说，Mob Pro 是一个非常有效的手段。但是，即使技术能力存在较大差异，似乎也可能会出现意见偏颇等问题，初学者可能会感到压力。如果您是老板或具有技术技能的人，则需要注意自己所说的内容，同时注意该领域。所以有人会累。

人际关系可能会受到影响

这几乎与“保重”相同。不能被打扰³, 和一个无论你现在说什么都没有太大变化的朋友一起做 MobPro 真的很有趣，但是如果你和一个你还没有真正敞开心扉的人一起做。通过代码间接diss对方它可能会破坏人际关系的可能性很小。

从以上的优缺点来看，我个人觉得MobPro在开始一个项目或者开始实现一个新功能的时候是非常有效的，但是考虑到脑力消耗，并不是每天都可以做的方法，似乎不太可能。我认为如果你在正确的地方使用它或定期放置它会很有效。

至于缺点，如果从“没有足够的情谊做 Mob Productions 项目就不会顺利”的角度来看，那么 Mob Productions 可能是一种晴雨表。

梦见实习生的流程

从这里，我想总结一下前端1天实习生从参与细节到当天的情况！与迄今为止的内容不同，由于包含大量日记或诗歌个人印象，可能难以阅读，但请理解。（到目前为止，我应该谈论除了 Mob Pro 练习之外的重要事情......）

实习生标题“让我们一起重构只有增长空间的代码”

这个为期一天的实习生是提前准备好的RESAS API使用可以获取各都道府县人口的API反应项目源代码让我们在 mob 编程时进行重构！它在陈述。

为了参与，有必要“提交一个自信的 React 存储库并申请”作为 React 开发经验的条件。

所以，我对 JavaScript 有点自信，但我从来没有写过 React 或 TypeScript。⁴所以，为了参加这次实习，我做了一点工作，提交了。我会在下面dyima（）

由于 N=1，我不知道需要提交什么级别才能通过，但是当我被问到是否需要能够编写 React 时，我被告知如果我有前端的基础知识，我不会没办法走那么远，我觉得你不强也没关系。

实习生参与决定

您已成功通过文件筛选！我在另一家公司实习失败了，我的暑假将是空的，所以我真的很开心。

我参加了梦美的 Discord 服务器，做了一个“自我介绍”。

Yumemi 似乎主要使用 Slack (说, 好像是日本用的最多的），好像不能邀请实习生到Slack。我认为 Discord 是最方便的，因为 Discord 还带有 Zoom 等屏幕共享功能的视频对话功能。

当我加入时，我想起了我在大学时所属的游戏制作圈，有一个 Slack 主和一个 Discord 副......我们在我们的圈子中使用了 Discord 来举办欢迎活动。我觉得Nori也更近了一点。难道是Discord氛围的影响？大约一两周前，频道已经上线运行，梦美偶尔会写一些实习生的自我介绍。

实习日

这是实习的日子！ Yumemi 是完全远程的，所以在 Discord 上的实习也是完全远程的。

这一天按照以下时间表进行。

时间	分钟	地方	内容	细节
- 11:00	-	所有的	报到	在聊天栏写下你的“当前感受”，加入 Discord 语音频道
11:00 - 11:10	10	所有的	开幕	实习生描述
11:10-12:00	50	所有的	每个人都自我介绍	这是一个每人1分钟的指导方针，但每个人都很热情并推动了一点。
12:00 - 13:00	60	团队	`実装`	问题清单做mobpro
13:00 - 13:10	10		午餐准备
13:10 - 13:50	40	所有的	午餐	分成3组
13:50 - 14:00	10		短暂的休息
14:00 - 15:10	70	团队	`実装`	做mobpro
15:10 - 15:20	10	团队	短暂的休息	根据需要短暂休息
15:20-16:30	70	团队	`実装`	做mobpro
16:30 - 16:50	20	团队	创建共享材料	创建 PR 草案并将项目包含在 PR 模板中。
16:50 - 17:30	40	所有的	最后分享	每队5分钟
17:30 - 17:55	25	团队	回望	(10m) 撰写个人评论 (15m) 在团队内分享
17:55-18:00	5	所有的	关闭

我写了很多，但大部分都是 Mob Pro 的时间

实习生描述

公司介绍这是对今天实习生的知识的解释。

有两件事我记得很清楚。

让我们找点乐子！: 尤其是这次，让我们好好感受一下要重构的代码吧！他们是这么说的。
禁用词“他妈的代码”: 这次不要再调用要重构的代码了！他们是这么说的。
- “有成长空间的代码，诺比代码~~（可能是意大利面）~~”、“如果巢很漂亮……”等。
- “讨厌代码，不要讨厌人”.之前我写过 MobPro 的缺点是“用代码作为中介来否认对方”，但我想也是为了避免这种情况。他妈的代码这个词当然似乎穿透了代码并diss对手。
自我介绍

每个人都根据他们在 Discord 上发布的内容进行了自我介绍。与面试时的自我介绍不同，话题是提前准备好的，所以大家都可以很有趣地谈自己，这时候也很有趣。

自我介绍的例子
- 最喜欢的食物
- 最喜欢的操作系统
- 最喜欢的 HTML 标记
- 蘑菇学校/竹笋学校⁵
有时关于我最喜欢的操作系统问题，我觉得前端的Mac操作系统率异常高（我是一个基本的Windows + WSL2组，并且有一定数量的）。这是一个我很好奇如果它是后端或其他领域如何回答的问题。

自我介绍之后，我问他是否可以写一篇关于这次实习的文章，我得到了他的同意。（或者只是为了让自己冷静下来）

Mob编程实践

终于到了分组并开始Mob编程的时候了！我团队的成员是我自己，另一个实习生（以下简称 M-kun），以及导师 Keeth (@clown0082) 和 Tsutsui (@cubenoy22)。 Rothe 决定成为我自己、M 先生和导师（一帧中的两个人）。

顺便说一句，Mob生产是由三个或更多人“坐在一台电脑前”完成的，对吧？你用完整的遥控器做什么？

幸运的是，我团队中的每个人都能使用 VSCode，所以首先Visual Studio 实时共享我尝试在一台机器上编辑文档，感觉类似于 Google Document。

但是，多人同时编辑的时候，不仅同步了差异，而且同步了整体，把写好的部分一个接一个地删掉了。改用从那时起，驱动程序重复以下流程。
1. [仅限首发]准备一个GitHub仓库/准备一个专用分支
  - 转动转子之前问题列表做过之后
2. 从存储库中拉取
  - 我在更换驱动程序时试图从拉的角度展示它以避免愚蠢
3. 编码 10 到 20 分钟，或者直到结束，按照导航员的想法或向导航员解释
4. 操作检查
  - 由于时间关系，这次没有写测试，所以我在检查它是否按预期工作的同时实现了它。
5. 时间到了，编码完成后，放一条commit message，前缀+任务名，commit/push
6. 更改驱动程序并返回到 2。
  似乎有一种方法可以单独分叉 GitHub 存储库并执行拉取请求⁶不过一开始我是边写边写代码，考虑到速度，上面的过程似乎还不错。
  
  我使用 Discord 功能进行屏幕共享。
  
  问题列表
  
  在启动 MobPro 之前，首先
  - 重构什么
  - 重构应该以什么顺序和顺序进行？
  需要澄清。在做mob项目的过程中稍微改一下也没关系，但如果一开始就明确而坚定地决定了，你可以说：“我有这个任务，所以我会做先这个。”您可以立即咨询并更改政策，感觉必须离开它，或者您可以稍后跳过。
  
  有趣的是，在这个 React 项目中，“API 密钥已在 GitHub 上发布！！！”⁷在增长潜力之前存在增长潜力（不再是漏洞），但 I 和 M 都同时首先列出了 API 密钥分离。⁸那是w
  
  一种奇怪的团结感诞生了，从一开始就很好
  
  当两个人的名单完成后，我们进行了讨论，提取了共同的东西，并像must，better一样优先考虑它们。
  
  编码
  
  一旦确定了轮换并完成了任务列表，就可以开始编码了！
  
  因为更漂亮的设置等，每个环境都有差异，所以一开始我很困惑（我在第一次输入yarn命令之前开始编码，并且显示错误等（笑））但是，随着我们的习惯，我们每个人都成为了我们专业领域的领航员，在提供解释的同时实施进展。
  
  如前所述，过程是“Pull → Coding → Operation check → Commit/Push”。我负责司机大约3次并在那里结束，所以我在3小时内做了2或3个旋转。由于我很热情，可能花了一点时间（）
  
  编码工作中获得的其他新知识附录：我学到了什么它在该部分被描述为奖金。
  
  午休
  
  时间表上有一个“午餐”，我很惊讶，“咦？远程午餐会？”，但这真的是远程午餐会。我准备了自己的食物，并与 MobPro 成员分开了一个单独的语音频道，用于午餐聚会！
  
  幸运的是，我能和太郎太郎在一起！在两餐之间，包括我自己在内的实习生都会提出问题。（顺便说一下，不是关西方言）.
  
  问：“你们团队的规模是多少？”
  A. “视团队而定！有的每个职位一个人，有的一个职位有五个或更多人。”
  
  问：“有人全栈工作吗？”
  A. “不知道是不是全栈的，但是看时间，会有人转到其他项目！”
  
  Q. “实习有什么要注意的吗？产地你决定与”
  A. “走吧。这次是铃木 (@taka10257) 负责，而不是 Wai。”
  
  问：“其他公司有目标，比如想成为总经理或部门经理，但在你的情况下，你应该如何设定目标？”
  一个。 ”职位指南或者星图我会参考这个来决定自己的工资，所以把这个作为你的目标是个好主意！ "
  
  问：“你有 Rust 项目吗？”
  A. 似乎还在发展，但似乎有动静。⁹
  
  我只问了其中一个问题（哪一个？），但看到每个人都提出深入的问题很有趣。
  
  除此之外，还有关于人际关系的故事，例如“不要突然表达自己的观点，而是肯定对方并指出优点”。我能够听到有趣的故事，例如能够去做吧！
  
  顺便说一句，我正在吃我在便利店买的。
  
  结束/公告
  
  即使在午休后，我仍然像午休前一样继续做 Mob Pro。 Mobpro 本身一直持续到 16:30，最后将整个分支的变化总结为 pull request，并作为 Mobpro 的回顾
  - 发生了什么
  - 我不能做什么
  - Mob Pro 的印象
  在 Discord 的通用语音频道上进行了总结和公布。
  
  在其他团队的演示中，我松了一口气，有不少人说，“我相信他们会解决这个问题”，但也有一些人说，“我不知道……” （主要是由于使用 React 的经验不同）。这段时间我一直无法开始重构 CSS，但我认为有一个团队能够修复它真是太神奇了。
  
  演示结束后，团队分享了整个实习的回顾，实习结束。
  
  实习感悟
  
  还剩30分钟左右，我的司机轮到我了，但由于这里用力过猛，没能保持mob pro的形状，最后导致了一个bug，把我绊倒了稻田。原因是“即使是 Mob Pro 格式，我的行为也是自私的”。即使我是暴徒，我也玩立场而已。
  
  最后总结一下哪里出错了。
  - 我强迫自己开始，因为我真的很想修复它
    - 其他成员被留下来, 是 Mobpro 的优点彻底毁了“知识共享”
    - 如果我真的想修复它，我应该解释原因并要求优先处理它。
    - 或许在普通的mobpro中，即使是半成品，它也会优先考虑知识共享，并在以后推迟，或者决定共享。
  - 最后我做了一个错误
    - 我表现得过于自信，即使如果剩下的时间出现错误我也无法收回
  - 我的时间用完了，最后缩短了创建文档的时间
  我发布的最后一个错误非常有趣，所以我计划在不久的将来单独写一篇关于它的文章。 ↓ 顺便说一句注意到的不是我，而是其他人被 MobPro 的优点所拯救。我曾是。
  
  （TODO：总结与Highcharts相关的错误并在此处发布文章URL）
  
  说吧，这很重要。 .实习的目的不是“完成”而是“享受 Mob Pro”，所以我应该采取一种更适合 Mob Pro 的方法，即使我正在处理我想要修复的部分。
  
  作为旁注司机一定要按照导航员的思路写看来Mob Pro还有一种方法应该是原理。考虑到这些情况，最后 30 分钟应该做的是说服导航员，而不是自我满足的编码。
  
  作为一个整体的反思点，我想知道我是否更体谅M先生和我的导师。
  
  摘要/印象
  
  Yumemi 的实习和Mob编程到此结束！这个实习生是我能够学习 React 和 MobPro 的原因。曾经一度以为实习只是为了找工作，但其实这是一个学习平时不知道的知识，将新事物付诸实践的机会。
  
  至于经验法则，“让我们玩得开心！”，我能够写这篇文章是因为我很高兴能写这篇文章，因为我有新鲜的经历，比如与同龄人进行技术对话。最后，有很多事情要反思，但多亏了 MobPro 的分辨率有所提高，所以我很满意。
  
  虽然只是一天的实习，但我能想象到真正加入公司会是什么样子，也能感受到梦美的氛围。
  
  我要感谢 Yumemi 给了我宝贵的经验。感谢您阅读本文！毫米
  
  附录：我学到的新东西
  
  这首诗是我自己的回忆录。这是奖金，所以很轻。如果您能感觉到“我谈到了这个”，我将不胜感激。来实习的你是不是带着一副不知不觉就可以做前端的脸？！可能有一些项目（）
  
  更漂亮
  
  用于前端的自动代码格式化工具（代码格式化程序）。与短绒不同。我对 linter 很满意，并且从未使用过 Prettier，所以 M 先生告诉我它的存在。（Rust 也有类似的东西，但是为什么你没有注意到它的存在呢？（））
  - Prettier 简介-了解与 ESLint 的区别并结合使用-Qiita
  - 当 VScode prettier 不起作用时该怎么办 - Webis Tech LABO。
    - 如果我只是添加了一个扩展，它不起作用，所以谢谢你的帮助
    - 如果不喜欢默认的，可以移到[typescript]或者[typescriptreact]
  不言而喻，整理代码会提高可读性，但尤其是在前端，有一些宗教习俗（例如末尾是否存在分号……我是那种放它的人on)，所以很常见，开发过程中可能需要用到。
  
  这次设置的项目
  .prettierrc.json
```
{
  "trailingComma": "all",
  "semi": false,
  "singleQuote": false
}
```
  状态管理库
  
  本次要重构的代码，加入了将相关数据分为三种状态的绝妙技术，很难做到，就像我们普通人也能看懂的单例模式。（不知单例模式是不是也叫前端）
  
  在那之后，我被告知存在一个“状态管理库”。快速搜索了一下，这肯定是一个似乎来自“单例模式”这个词的流的库。
  
  还原或者畏缩¹⁰好像有一个库叫好像是一个状态管理库，扩展了Flux的思路，让处理起来更方便……不过我还没接触过，所以不太了解。
  
  它与 useState... 等 React 钩子有什么不同？
  
  interface
  
  不是我不知道interface，而是在实习开始之前，我用type定义类型，而M先生用interface，因为有区别，这次实习很好记。
  
  在检查了差异之后，似乎最大的差异在于它是否可扩展。顾名思义，interface 可以扩展，而type 似乎在没有（基本）扩展的情况下使用。
  - 关于接口和类型的区别以及使用什么
  - TypeScript中使用类型还是接口的问题
  但是，我仍然不知道该使用哪一个。 interface 似乎很适合收集道具和论据一次
  
   叉子。在 v
  
  这是筒井使用的 GUI Git 客户端工具。使用交互式变基功能通过拖动更改提交的顺序以此类推（发生冲突时像往常一样麻烦），而且它似乎工作得相当快，所以我想我想模仿它并使用它。
  
  不过好像WSL上的repository不方便打开，可能是Mac用户
  
  类型保护功能
  
  ``我不知道 API 返回的 JSON 类型，所以我想写一个验证器。''json 类型验证我正在调查。
  
  虽然没有达到引入验证器，类型保护功能这成为了一个了解“。”的存在的机会。它不是验证器，但编辑器的补全工作正常是件好事，因为您不必照原样处理 any 类型。下面是实际编写的代码。
  打字稿
```
function isPrefectureResponse(data: any): data is PrefectureResponse {
  if (!("message" in data) || !("result" in data)) return false
  return true
}
```
  原来data: any的参数部分的类型改为unknown，而isObjectLike(lodash的方法之一? )... 似乎写得更严格了，但是由于实习生的时间限制，和预期的一样，如果你想解决这个问题，如上所述json 类型验证我没有走那么远，因为它似乎更好地介绍。（可能是这个区域附近的故事）
  
  如果您希望类型保护函数充当验证器，您可能需要将console.log 等放在中间以输出捕获的部分。
  
  自定义挂钩
  
  在 React 钩子中，我只知道 useState 和 useEffect，但可以只将 useState 和 useEffect 部分作为逻辑部分剪切到单独的文件中，然后只导入视图中的钩子。我了解到在实习中有一个自定义钩子。
  
  诚然，useState 和useEffect 都是逻辑，容易臃肿复杂。下次我在 React 项目上工作时，我想使用它。
  
  基本网址
  
  通过将baseUrl 字段添加到tsconfig.json 的compilerOptions，您可以将相对路径描述为从为baseUrl 指定的值的绝对路径。是M告诉我的。
  
  比如"baseUrl": "."，项目根目录就是绝对路径的起点，可以写成import hoge from "src/components"。
  
  到目前为止，我认为相对路径会很好，但似乎绝对路径更好，因为即使您复制和粘贴它也不会破坏依赖关系。我想在将来设置它。
  
  摘要在哪里？你用鼠标滚动了吗？这是附录。这里 →摘要/印象
  1. 将提到出现在文章中并在 Qiita 上拥有帐户的 Yumemi。至于姓氏，我不认识汉字，所以我用平假名写了它们（我只是碰巧觉得这样更方便）。抱歉通知 ()↩
  2. 最近沉迷于Splatoon 2，因为是在Splatoon 3发布之前，但是感觉团队齐心协力，专心致志的情况下胜率更高，感觉接近Mob的优点亲，我是↩
  3. 不能使用“不可靠的人”这个词的负面影响，或者“还不是很开放的人”或“需要谨慎的人”的完全相反的含义。似乎有，但这里用的是对公众开放的人的本义。我想记下一些东西↩
  4. 我不在乎，但有一点我避免使用 React，因为它是由 Meta（以前的 Facebook）开发的。如果你是做 VR 的人，不知何故猜测我想他们会的。我不喜欢梅塔。 ...我非常感谢梦美给我机会触摸它。↩
  5. 对了，我回答说我是 Emacs 人，我松了口气……我没办法，因为我真的不吃巧克力（）↩
  6. 我正在写这个，但毕竟我没有用pull request方法尝试过一次，所以我没有比较它，它可能是一个不好的做法。如果您能在评论中告诉我，我将不胜感激。↩
  7. 我认为其中 90% 是故意这样编写的（并且由于您可以在不构建环境的情况下使用 yarn 命令立即尝试它，因此似乎需要权衡取舍）。 API 密钥当前已禁用。↩
  8. 列表是通过 Live Share 完成的↩
  9. Tsukkomi自言自语“你在问前端人什么？” 似乎有很多闲散的渠道，似乎很难掌握所有项目。作为旁注10%/20% 规则在那个页面上，20% 的规则给予了优惠待遇......我很好奇↩
  10. 第一次里科里科与很有趣，如果你还没有看，请↩

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308624512.html

什么是梦美株式会社？

什么是Mob编程？

优点

更少的时间担心和更少的时间停止

在与所有人分享知识的同时进行编码

在团队中营造团结感

过失

“精神疲惫”

持续的专注和紧张

我照顾

人际关系可能会受到影响

梦见实习生的流程

实习生标题“让我们一起重构只有增长空间的代码”

实习生参与决定

实习日

实习生描述

自我介绍

Mob编程实践

问题列表

编码

午休

结束/公告

实习感悟

摘要/印象

附录：我学到的新东西

更漂亮

状态管理库

interface

叉子。在 v

类型保护功能

自定义挂钩

基本网址

`interface`