Name: コマンドパターン - デザインパターン (Command Pattern - Design Patterns)
Uploaded: 2021-01-14T10:23:09.000Z
Duration: 14 min 49 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

未来進行形

In today's video, we're gonna be talking about the command pattern, which is one of my favorite patterns because of all of the incredibly cool things it lets you do.

So let's get started now before we get started.

I want to talk about today's video sponsor, which is atlantic dot net hosting.

And this is an incredible hosting company, which is giving you an entire year of hosting completely for free.

If you sign up with the link down the description below and this isn't some cheapo server, this is actually an incredibly powerful server, which is more powerful than the server.

I even host my own website on, so you know that this is gonna be powerful enough to handle any of your needs.

On top of that, they have incredible reliability and redundancy on their servers.

So your Web page is always going to be up and always available, which is a great thing to know.

On top of that, you're gonna get an additional $50 of free credit if you sign up using the code, Kyle.

So make sure you check that out, using the link down in the description below and with that out of the way, Let's jump into the video You came here for not to get started on the left hand side of my screen.

I have some really simple code for a calculator that has a value, and then we can add, subtract, multiply and divide.

And down here I've just added 10 and then divide it by two, and we're getting her output of 10 and then five on the right hand side of the screen.

And every time I say it's going to change.

So if I divide by three, for example, you see it divides by three over here, and right now this is not using the command pattern.

This is just a basic job script class that you're probably all used to.

Now, before I go start breaking this down and implementing the command pattern for this calculator, I want to talk a little bit about what the command pattern is and why you would even use it.

And the idea of the command pattern is to take the different operations that you want something to do and encapsulate them into individual commands that have a perform and then undo method.

So essentially you can do the operation, you can do the command, and then you can undo that operation.

So if we take a look at our calculator here, you can see that we have four separate commands or operations that we can do on our calculator.

We can add, subtract, multiply and then divide.

These are our different commands, and we want to take these command out of our calculator and actually make them their own objects, their own things that haven't execute and undo function.

And the reason for this is that we can actually play back and rewind our commands so that we can add.

And then we can undo our ad, which is essentially the same a subtract so we can do and then undo all of our different commands that we want to.

Also, we can combine together different commands really easily.

So if we wanted to add and multiply something, normally you have to call ad and they'd have to call it multiply.

But you could just create a command called ad, then multiply, which will do the adding and multiplying in the correct order, and will even undo them in the correct order for you.

This is the real power of the command pattern, the ability to do and then undo as well as to make your commands separate from the actual object that you're doing the command on.

So to get started, let's abstract this ad out into its own command.

We're just gonna credit class for I want to call it here the Ad Command and this Ad Command is going to take a constructor and his constructors just going to take the amount we want to add so excited value to add.

And we'll just set the value to adhere to that value it passed in.

So now we have a reference to the value to add.

It's essentially the same thing as the value we passed to the function were already calling, then inside here, as I mentioned, we need to have an execute function and then we need to have an undue function.

And this execute function needs to take the current value essentially, this stock value.

Because this command is no longer in the calculator, it can be used for things that aren't the calculator we could do added, for example, in a game we could have some damage calculator that does.

Adding, While this could be a calculator on a desktop of a computer, they could both still use this ad command.

But they're completely different operations, while in the other example, if we did like this for the class, we would need two different classes to handle those two different types of calculations.

So now, inside this execute, like I mentioned, it needs to take our current value.

And then all we need to do is return our current value, plus our value to add.

And as you remember up here, that's very similar to this ad function.

But instead of setting our value, we're returning the value since these execute functions are going to be called on anything.

So we just need to have the result returned so we can actually use that inside.

The thing we return it to now undo is gonna be very similar.

We need to pass in the current value, and we're just doing the current value minus this stock value to add.

It's the exact same things execute just reversed.

And now what we can do is actually create a new ad command.

So we could say, const added command is equal to new ad command.

And let's say we wanted to add 10 for example, and then in order to execute that, we would just say add command dot execute And we would have to pass at the current value of zero, for example.

And if we want this out, we should get 10.

So it's logged that out and make sure we delete all of the code down here and you can see we're getting 10 printed out.

It should be 30 and someone and that's great.

And what we can do even further is we can actually log out the undue operation of that.

So if we add 10 we want to get the result of that.

This new value should be 20 what's printed out, and then we wanna undo with our new value on, we should get left back with our original value of 10.

And as you can see 20 is what happens when we add the first time and then we undo and we get put back down to 10 now, obviously, in this trivial case of adding and subtracting, having an undue functions pretty useless.

But when you can think of things such a saving users to a database, that's something that having an undue function for is incredibly useful because the undue is really complex.

But if you just have an undue method and execute method that makes working with that save functionality really easy.

So now let's actually look at how we could implement this command inside of our calculator to do that.

Let's just remove this current ad command we're gonna add in an execute command function inside of here, and this is going to take the command that we want to execute.

Essentially, we just need to call that execute function so we can say that our value is going to be equal to our command dot execute with our current value.

Is it saying, take our ad command call, execute passage in our current value, which in our case is zero to start with, add in that value that we gave to our ad command and then set that to our new value.

So now we have all of our values being properly added.

With this one execute command function, the last thing they need to do is just keep track of all the commands that we've done.

So we just call this our history and we could just say this dot history and we're going to do is push on that command.

So now we're actually keeping track of the commands that we've actually executed on.

You just say I'm due on where this is going to do.

It is going to get a command, which is going to be our most recent command.

So we'll just say, Pop, that's going to take the most recent thing off of our ray, remove it from the array and put it inside this variable.

Then we could just set the value equal to our command dot Undo, undo.

We just need to make sure you pass it in our current value.

Now, what we can do is all the way down here.

We could just say calculator hopes calculator dot Execute command.

So it's a concert at log calculator dot value and this should be 10.

If we save, we see we get 10 and then let's just try undoing that.

That's gonna undo whatever the most recent thing was.

And then we can just counsel that log our calculator dot value and you can see it brought it all the way back down to zero for us.

And now I could go through and remake every single one of these commands into its own new command so I could remove, subtract and multiply and divide.

But I'm going to do that off camera and come back to you when it's done.

And with that, I've removed all of our ads of track divide functions from a calculator.

And then I've created all of our commands.

And in the undue is the opposite of the operation, just like the ad was.