시작하기. 무료입니다
또는 회원 가입 e메일 주소
WEB developer 저자: Mind Map: WEB developer

1. Web Basics

1.1. HTTP and HTTPS and APIs

1.1.1. HTTP

1.1.2. HTTPS

1.1.3. API

1.1.4. 説明しろと言われるとできない。

1.2. Terminal Usage

1.2.1. basics

1.2.1.1. commands

1.2.1.1.1. cd

1.2.1.1.2. ls

1.2.1.1.3. mkdir

1.2.1.2. Environment

1.2.1.2.1. 環境構築が可能だが、どこかに手順をまとめておきたい。

1.2.1.2.2. homebrew

1.2.2. shell and profile

1.2.2.1. コピペするくらいのレベル。ブランチ名表示するくらいなら可能。中身はまだ深くわかっていない。

1.3. Other Basics

1.3.1. Browser

1.3.2. Hosting

1.3.3. SSH

1.3.4. WebSecurity

1.3.5. DNS

1.3.6. Domain

1.3.7. これらはまだあまりわかっていない為、少しずつ説明できるようになる必要あり

2. Front End

2.1. HTML

2.1.1. Basics

2.1.1.1. 無駄のない基本的なコーディングが可能

2.1.2. Semantic

2.1.2.1. タグの使い分けて意味を持たせる。ol,dlタグ等、細かい使い分けはしていない

2.1.3. Form and Validations

2.1.3.1. postメソッド getメソッドの違いなど理解

2.1.4. Conversions

2.1.5. Accessibility

2.1.6. SEO

2.1.7. Template Engine

2.1.7.1. Nunjucks

2.1.7.1.1. 案件で使用した経験あり。設計について学ぶ余地あり。

2.2. CSS

2.2.1. basics

2.2.1.1. 基本的なデザインについては実装可能

2.2.2. Making Layout

2.2.2.1. css gridは使用したことがない

2.2.3. Responsive Design

2.2.3.1. SPから作成した方が設計がしやすい

2.2.4. Architecture

2.2.4.1. BEM

2.2.4.1.1. element, modifierを使い分けることが可能。

2.2.4.2. OOCS

2.2.4.3. SMACSS

2.2.4.3.1. is-active js- などの状態クラスのみ。BEMと合わせて使用可能。

2.2.5. Modern CSS

2.2.5.1. Styled Components

2.2.5.2. CSS modules

2.2.6. CSS Frameworks

2.2.6.1. Bootstarp

2.2.6.1.1. 使ったことはあるが、少しのみ。優先度は低いと考えている。

2.2.7. Animations

2.3. Javascript

2.3.1. Syntax and Base Construct

2.3.1.1. javascriptの基本的な文法や記述、エラー内容などが理解できる。

2.3.1.2. codewars 5kyu達成

2.3.2. DOM Manipulation

2.3.2.1. Document Object Model

2.3.2.1.1. HTML(XML)を操作するためのAPI。HTMLを変更したり取得することができる。documentはDocumentオブジェクトであり、最上位のNodeである。

2.3.3. FetchApi / Ajax (XHR)

2.3.3.1. Ajax

2.3.3.2. FetchApi

2.3.3.3. Promise, asyncなどの理解がまだ浅い。なんとなく使用することは可能。言葉の意味も中身がなんなのかあまり理解していない。

2.3.4. ES6+ and Modular Javascript

2.3.5. Processor (CSS in JS)

2.3.5.1. Sass

2.3.5.1.1. 基本的なsassは使用可能。sassのメソッドについてはまとめておきたい。

2.3.5.2. PostCSS

2.3.5.2.1. Autoprefixer

2.3.6. Framewroks

2.3.6.1. Vue.js

2.3.6.1.1. Vuex

2.3.6.1.2. Nuxt.js (SSR)

2.3.6.1.3. vueの細かい内部の動きなどを学習予定

2.3.6.2. React.js

2.3.7. Type Checkers

2.3.7.1. Typescript

2.4. Version Control Systems

2.4.1. Repository Hosting Services

2.4.1.1. Github

2.4.1.2. Gitlab

2.4.1.3. Backlog

2.4.2. Git

2.4.2.1. CUI (character)

2.4.2.1.1. git revert -m 1 コミットID

2.4.2.1.2. コマンド操作はまだあまりできないが、コマンドの中身は理解している。

2.4.2.2. GUI (graphical)

2.4.2.2.1. sourcetree

2.4.2.2.2. webstorm git

2.5. Package Manegers

2.5.1. npm

2.5.1.1. Node.js Package Manager

2.5.2. yarn

2.6. Build Tools

2.6.1. Task Runners

2.6.1.1. npm scripts

2.6.1.1.1. package.jsonファイルに記述可能なシェルスクリプトのエイリアス。読み取ることはできるが新しいものを加えることはまだ調べないとできない。

2.6.1.2. gulp

2.6.1.2.1. javascriptの記述でless->cssコンパイルなどを自動化することができる。(gruntはjsonで記述)

2.6.1.3. babel

2.6.1.3.1. 古いブラウザでも操作できるように変換するツール。ES6->ES5など

2.6.2. Module Bundlers

2.6.2.1. Webpack

2.6.2.1.1. バンドル化を簡単にできる。なお、gulpでもできる。

2.6.3. Linters and Formatters

2.6.3.1. Ptrettier

2.6.3.1.1. ソースコードを整形してくれるツール。ESLintで整形できないものを整形してくれる。

2.6.3.2. ESLint

2.6.3.2.1. JavaScriptの静的解析ツール・構文チェック

2.6.3.3. stylelint

2.6.3.3.1. CSSの静的解析ツール

2.6.3.4. ここら辺の設定もどこかにまとめておきたい。

2.7. Testing App

2.8. Graph QL

2.9. Mobile and DesktopApplications

2.9.1. React Native (mobile)

2.9.2. Electron

3. Back End

3.1. beginner