いまから始めるfreeCodeCamp

いまから始めるfreeCodeCamp:

明けましておめでとうございます。t-coolです。

記事のタイトルは、t-sinさんのいまから始めるCommon Lispを元に決めました。

今年はfreeCodeCampにチャレンジします。

(freeCodeCamp公式サイトより)

プログラミングと英語を一緒に学ぶイベントを企画したいと思い、英語・プログラミング教室 ツクールをつくって早３年。自分自身、英語もプログラミングもまだまだ未熟者ですが、参加者の皆さんにとって有意義なイベントになれば良いなという思いから運営しています。これまで、多くの方々に支えていただきながら、楽しいイベントを開催することができました。

本年は少し趣を変えて、freeCodeCampに挑戦しようと準備をしています。freeCodeCampについてご存知ない方が多いと思いますので手短に紹介します。

freeCodeCamp is a non-profit organization that consists of an interactive learning web platform, an online community forum, chat rooms, Medium publications and local organizations that intend to make learning web development accessible to anyone. (Wikipediaより)

freeCodeCampは、誰でもWeb開発の学習にアクセスできるようにすることを目標としている非営利団体です。Web上のインタラクティブな学習環境、オンラインのコミュニティ・フォーラム、チャットルーム、Mediumでの記事の発信、各地の組織によって構成されています。

関西でのfreeCodeCampのコミュニティーを調べてみると、京都と大阪で集まりがもたれているのが分かったので、そちらの皆さんにも合流できればいいなと思っています。

FreeCodeCamp Kyoto & Osaka In-Person Meetup

さて、freeCodeCampの学習サイトはhttps://www.freecodecamp.org/です。

メールアドレスでアカウントを登録すると、オンラインの学習サービスを無料で利用することができます。学習画面はこのような感じです。

画面が3つに分割されていて、左側に説明と演習問題、中央にコードの回答欄、右側にはコードのプレビューが表示されます。

学習コースは、次の7章に分けられています。(最近の流行のものが多いので和訳は割愛します)

• Responsive Web Design
• Javascript
• Front End Libraries
• Data Visualization
• Apis And Microservices
• Information Security And Quality Assurance
• Coding Interview Prep

今年は、次の2章を取り上げて、JavaScriptとWebアプリ開発を学ぶイベントを開催しようと考えています。

- Javascript Algorithms And Data Structures

- Front End Libraries

今後は、各レッスンの内容を補足を加えながらまとめていこうと思います。記事を更新しながら、リンク先に記事を登録するスタイルで進めていきます。

Lispらしさとしては、この2章とは別に、JSCLを用いてCommon Lispの章を付け足せればいいかなと考えています。よろしくお願いします。

Javascript Algorithms And Data Structures

Basic JavaScript

Introduction to JavaScript

• Comment Your JavaScript Code
• Declare JavaScript Variables
• Storing Values with the Assignment Operator
• Initializing Variables with the Assignment Operator
• Understanding Uninitialized Variables
• Understanding Case Sensitivity in Variables
• Add Two Numbers with JavaScript
• Subtract One Number from Another with JavaScript
• Multiply Two Numbers with JavaScript
• Divide One Number by Another with JavaScript
• Increment a Number with JavaScript
• Decrement a Number with JavaScript
• Create Decimal Numbers with JavaScript
• Multiply Two Decimals with JavaScript
• Divide One Decimal by Another with JavaScript
• Finding a Remainder in JavaScript
• Compound Assignment With Augmented Addition
• Compound Assignment With Augmented Subtraction
• Compound Assignment With Augmented Multiplication
• Compound Assignment With Augmented Division
• Declare String Variables
• Escaping Literal Quotes in Strings
• Quoting Strings with Single Quotes
• Escape Sequences in Strings
• Concatenating Strings with Plus Operator
• Concatenating Strings with the Plus Equals Operator
• Constructing Strings with Variables
• Appending Variables to Strings
• Find the Length of a String
• Use Bracket Notation to Find the First Character in a String
• Understand String Immutability
• Use Bracket Notation to Find the Nth Character in a String
• Use Bracket Notation to Find the Last Character in a String
• Use Bracket Notation to Find the Nth-to-Last Character in a String
• Word Blanks
• Store Multiple Values in one Variable using JavaScript Arrays
• Nest one Array within Another Array
• Access Array Data with Indexes
• Modify Array Data With Indexes
• Access Multi-Dimensional Arrays With Indexes
• Manipulate Arrays With push()
• Manipulate Arrays With pop()
• Manipulate Arrays With shift()
• Manipulate Arrays With unshift()
• Shopping List
• Write Reusable JavaScript with Functions
• Passing Values to Functions with Arguments
• Global Scope and Functions
• Local Scope and Functions
• Global vs. Local Scope in Functions
• Return a Value from a Function with Return
• Understanding Undefined Value returned from a Function
• Assignment with a Returned Value
• Stand in Line
• Understanding Boolean Values
• Use Conditional Logic with If Statements
• Comparison with the Equality Operator
• Comparison with the Strict Equality Operator
• Practice comparing different values
• Comparison with the Inequality Operator
• Comparison with the Strict Inequality Operator
• Comparison with the Greater Than Operator
• Comparison with the Greater Than Or Equal To Operator
• Comparison with the Less Than Operator
• Comparison with the Less Than Or Equal To Operator
• Comparisons with the Logical And Operator
• Comparisons with the Logical Or Operator
• Introducing Else Statements
• Introducing Else If Statements
• Logical Order in If Else Statements
• Chaining If Else Statements
• Golf Code
• Selecting from Many Options with Switch Statements
• Adding a Default Option in Switch Statements
• Multiple Identical Options in Switch Statements
• Replacing If Else Chains with Switch
• Returning Boolean Values from Functions
• Return Early Pattern for Functions
• Counting Cards
• Build JavaScript Objects
• Accessing Object Properties with Dot Notation
• Accessing Object Properties with Bracket Notation
• Accessing Object Properties with Variables
• Updating Object Properties
• Add New Properties to a JavaScript Object
• Delete Properties from a JavaScript Object
• Using Objects for Lookups
• Testing Objects for Properties
• Manipulating Complex Objects
• Accessing Nested Objects
• Accessing Nested Arrays
• Record Collection
• Iterate with JavaScript While Loops
• Iterate with JavaScript For Loops
• Iterate Odd Numbers With a For Loop
• Count Backwards With a For Loop
• Iterate Through an Array with a For Loop
• Nesting For Loops
• Iterate with JavaScript Do...While Loops
• Profile Lookup
• Generate Random Fractions with JavaScript
• Generate Random Whole Numbers with JavaScript
• Generate Random Whole Numbers within a Range
• Use the parseInt Function
• Use the parseInt Function with a Radix
• Use the Conditional (Ternary) Operator
• Use Multiple Conditional (Ternary) Operators

ES6

• Explore Differences Between the var and let Keywords
• Compare Scopes of the var and let Keywords
• Declare a Read-Only Variable with the const Keyword
• Mutate an Array Declared with const
• Prevent Object Mutation
• Use Arrow Functions to Write Concise Anonymous Functions
• Write Arrow Functions with Parameters
• Write Higher Order Arrow Functions
• Set Default Parameters for Your Functions
• Use the Rest Operator with Function Parameters
• Use the Spread Operator to Evaluate Arrays In-Place
• Use Destructuring Assignment to Assign Variables from Objects
• Use Destructuring Assignment to Assign Variables from Nested Objects
• Use Destructuring Assignment to Assign Variables from Arrays
• Use Destructuring Assignment with the Rest Operator to Reassign Array Elements
• Use Destructuring Assignment to Pass an Object as a Function's Parameters
• Create Strings using Template Literals
• Write Concise Object Literal Declarations Using Simple Fields
• Write Concise Declarative Functions with ES6
• Use class Syntax to Define a Constructor Function
• Use getters and setters to Control Access to an Object
• Understand the Differences Between import and require
• Use export to Reuse a Code Block
• Use * to Import Everything from a File
• Create an Export Fallback with export default
• Import a Default Export

Regular Expressions

• Using the Test Method
• Match Literal Strings
• Match a Literal String with Different Possibilities
• Ignore Case While Matching
• Extract Matches
• Find More Than the First Match
• Match Anything with Wildcard Period
• Match Single Character with Multiple Possibilities
• Match Letters of the Alphabet
• Match Numbers and Letters of the Alphabet
• Match Single Characters Not Specified
• Match Characters that Occur One or More Times
• Match Characters that Occur Zero or More Times
• Find Characters with Lazy Matching
• Find One or More Criminals in a Hunt
• Match Beginning String Patterns
• Match Ending String Patterns
• Match All Letters and Numbers
• Match Everything But Letters and Numbers
• Match All Numbers
• Match All Non-Numbers
• Restrict Possible Usernames
• Match Whitespace
• Match Non-Whitespace Characters
• Specify Upper and Lower Number of Matches
• Specify Only the Lower Number of Matches
• Specify Exact Number of Matches
• Check for All or None
• Positive and Negative Lookahead
• Reuse Patterns Using Capture Groups
• Use Capture Groups to Search and Replace
• Remove Whitespace from Start and End

Debugging

• Use the JavaScript Console to Check the Value of a Variable
• Understanding the Differences between the freeCodeCamp and Browser Console
• Use typeof to Check the Type of a Variable
• Catch Misspelled Variable and Function Names
• Catch Unclosed Parentheses, Brackets, Braces and Quotes
• Catch Mixed Usage of Single and Double Quotes
• Catch Use of Assignment Operator Instead of Equality Operator
• Catch Missing Open and Closing Parenthesis After a Function Call
• Catch Arguments - in the Wrong Order When Calling a Function
• Catch Off By One Errors When Using Indexing
• Use Caution When Reinitializing Variables Inside a Loop
• Prevent Infinite Loops with a Valid Terminal Condition

Basic Data Structures

• Use an Array to Store a Collection of Data
• Access an Array's Contents Using Bracket Notation
• Add Items to an Array with push() and unshift()
• Remove Items from an Array with pop() and shift()
• Remove Items Using splice()
• Add Items Using splice()
• Copy Array Items Using slice()
• Copy an Array with the Spread Operator
• Combine Arrays with the Spread Operator
• Check For The Presence of an Element With indexOf()
• Iterate Through All an Array's Items Using For Loops
• Create complex multi-dimensional arrays
• Add Key-Value Pairs to JavaScript Objects
• Modify an Object Nested Within an Object
• Access Property Names with Bracket Notation
• Use the delete Keyword to Remove Object Properties
• Check if an Object has a Property
• Iterate Through the Keys of an Object with a for...in Statement
• Generate an Array of All Object Keys with Object.keys()
• Modify an Array Stored in an Object

Basic Algorithm Scripting

• Convert Celsius to Fahrenheit
• Reverse a String
• Factorialize a Number
• Find the Longest Word in a String
• Return Largest Numbers in Arrays
• Confirm the Ending
• Repeat a String Repeat a String
• Truncate a String
• Finders Keepers
• Boo who
• Title Case a Sentence
• Slice and Splice
• Falsy Bouncer
• Where do I Belong
• Mutations
• Chunky Monkey

Object Oriented Programming

• Create a Basic JavaScript Object
• Use Dot Notation to Access the Properties of an Object
• Create a Method on an Object
• Make Code More Reusable with the this Keyword
• Define a Constructor Function
• Use a Constructor to Create Objects
• Extend Constructors to Receive Arguments
• Verify an Object's Constructor with instanceof
• Understand Own Properties
• Use Prototype Properties to Reduce Duplicate Code
• Iterate Over All Properties
• Understand the Constructor Property
• Change the Prototype to a New Object
• Remember to Set the Constructor Property when Changing the Prototype
• Understand Where an Object’s Prototype Comes From
• Understand the Prototype Chain
• Use Inheritance So You Don't Repeat Yourself
• Inherit Behaviors from a Supertype
• Set the Child's Prototype to an Instance of the Parent
• Reset an Inherited Constructor Property
• Add Methods After Inheritance
• Override Inherited Methods
• Use a Mixin to Add Common Behavior Between Unrelated Objects
• Use Closure to Protect Properties Within an Object from Being Modified

Externally

• Understand the Immediately Invoked Function Expression (IIFE)
• Use an IIFE to Create a Module

Functional Programming

• Learn About Functional Programming
• Understand Functional Programming Terminology
• Understand the Hazards of Using Imperative Code
• Avoid Mutations and Side Effects Using Functional Programming
• Pass Arguments to Avoid External Dependence in a Function
• Refactor Global Variables Out of Functions
• Use the map Method to Extract Data from an Array
• Implement map on a Prototype
• Use the filter Method to Extract Data from an Array
• Implement the filter Method on a Prototype
• Return Part of an Array Using the slice Method
• Remove Elements from an Array Using slice Instead of splice
• Combine Two Arrays Using the concat Method
• Add Elements to the End of an Array Using concat Instead of push
• Use the reduce Method to Analyze Data
• Sort an Array Alphabetically using the sort Method
• Return a Sorted Array Without Changing the Original Array
• Split a String into an Array Using the split Method
• Combine an Array into a String Using the join Method
• Apply Functional Programming to Convert Strings to URL Slugs
• Use the every Method to Check that Every Element in an Array Meets a Criteria
• Use the some Method to Check that Any Elements in an Array Meet a Criteria
• Introduction to Currying and Partial Application

Intermediate Algorithm Scripting

• Sum All Numbers in a Range
• Diff Two Arrays
• Seek and Destroy
• Wherefore art thou
• Spinal Tap Case
• Pig Latin
• Search and Replace
• DNA Pairing
• Missing letters
• Sorted Union
• Convert HTML Entities
• Sum All Odd Fibonacci Numbers
• Sum All Primes
• Smallest Common Multiple
• Drop it
• Steamroller
• Binary Agents
• Everything Be True
• Arguments Optional
• Make a Person
• Map the Debris

JavaScript Algorithms and Data Structures Projects

• Palindrome Checker
• Roman Numeral Converter
• Caesars Cipher
• Telephone Number Validator
• Cash Register

Front End Libraries

Bootstrap

• Use Responsive Design with Bootstrap Fluid Containers
• Make Images Mobile Responsive
• Center Text with Bootstrap
• Create a Bootstrap Button
• Create a Block Element Bootstrap Button
• Taste the Bootstrap Button Color Rainbow
• Call out Optional Actions with btn-info
• Warn Your Users of a Dangerous Action with btn-danger
• Use the Bootstrap Grid to Put Elements Side By Side
• Ditch Custom CSS for Bootstrap
• Use a span to Target Inline Elements
• Create a Custom Heading
• Add Font Awesome Icons to our Buttons
• Add Font Awesome Icons to all of our Buttons
• Responsively Style Radio Buttons
• Responsively Style Checkboxes
• Style Text Inputs as Form Controls
• Line up Form Elements Responsively with Bootstrap
• Create a Bootstrap Headline
• House our page within a Bootstrap container-fluid div
• Create a Bootstrap Row
• Split Your Bootstrap Row
• Create Bootstrap Wells
• Add Elements within Your Bootstrap Wells
• Apply the Default Bootstrap Button Style
• Create a Class to Target with jQuery Selectors
• Add id Attributes to Bootstrap Elements
• Label Bootstrap Wells
• Give Each Element a Unique id
• Label Bootstrap Buttons
• Use Comments to Clarify Code

jQuery

• Learn How Script Tags and Document Ready Work
• Target HTML Elements with Selectors Using jQuery
• Target Elements by Class Using jQuery
• Target Elements by id Using jQuery
• Delete Your jQuery Functions
• Target the Same Element with Multiple jQuery Selectors
• Remove Classes from an Element with jQuery
• Change the CSS of an Element Using jQuery
• Disable an Element Using jQuery
• Change Text Inside an Element Using jQuery
• Remove an Element Using jQuery
• Use appendTo to Move Elements with jQuery
• Clone an Element Using jQuery
• Target the Parent of an Element Using jQuery
• Target the Children of an Element Using jQuery
• Target a Specific Child of an Element Using jQuery
• Target Even Elements Using jQuery
• Use jQuery to Modify the Entire Page

Sass

• Store Data with Sass Variables
• Nest CSS with Sass
• Create Reusable CSS with Mixins
• Use @if and @else to Add Logic To Your Styles
• Use @for to Create a Sass Loop
• Use @each to Map Over Items in a List
• Apply a Style Until a Condition is Met with @while
  
• Split Your Styles into Smaller Chunks with Partials
• Extend One Set of CSS Styles to Another Element

React

• Create a Simple JSX Element
• Create a Complex JSX Element
• Add Comments in JSX
• Render HTML Elements to the DOM
• Define an HTML Class in JSX
• Learn About Self-Closing JSX Tags
• Create a Stateless Functional Component
• Create a React Component
• Create a Component with Composition
• Use React to Render Nested Components
• Compose React Components
• Render a Class Component to the DOM
• Write a React Component from Scratch
• Pass Props to a Stateless Functional Component
• Pass an Array as Props
• Use Default Props
• Override Default Props
• Use PropTypes to Define the Props You Expect
• Access Props Using this.props
• Review Using Props with Stateless Functional Components
• Create a Stateful Component
• Render State in the User Interface
• Render State in the User Interface Another Way
• Set State with this.setState
• Bind 'this' to a Class Method
• Use State to Toggle an Element
• Write a Simple Counter
• Create a Controlled Input
• Create a Controlled Form
• Pass State as Props to Child Components
• Pass a Callback as Props
• Use the Lifecycle Method componentWillMount
• Use the Lifecycle Method componentDidMount
• Add Event Listeners
• Manage Updates with Lifecycle Methods
• Optimize Re-Renders with shouldComponentUpdate
• Introducing Inline Styles
• Add Inline Styles in React
• Use Advanced JavaScript in React Render Method
• Render with an If/Else Condition
• Use && for a More Concise Conditional
• Use a Ternary Expression for Conditional Rendering
• Render Conditionally from Props
• Change Inline CSS Conditionally Based on Component State
• Use Array.map() to Dynamically Render Elements
• Give Sibling Elements a Unique Key Attribute
• Use Array.filter() to Dynamically Filter an Array
• Render React on the Server with renderToString

Redux

• Create a Redux Store
• Get State from the Redux Store
• Define a Redux Action
• Define an Action Creator
• Dispatch an Action Event
• Handle an Action in the Store
• Use a Switch Statement to Handle Multiple Actions
• Use const for Action Types
• Register a Store Listener
• Combine Multiple Reducers
• Send Action Data to the Store
• Use Middleware to Handle Asynchronous Actions
• Write a Counter with Redux
• Never Mutate State
• Use the Spread Operator on Arrays
• Remove an Item from an Array
• Copy an Object with Object.assign

React and Redux

• Getting Started with React Redux
• Manage State Locally First
• Extract State Logic to Redux
• Use Provider to Connect Redux to React
• Map State to Props
• Map Dispatch to Props
• Connect Redux to React
• Connect Redux to the Messages App
• Extract Local State into Redux
• Moving Forward From Here