search

sKawashima / DictionaryOfDevelopmentTechnologyILearned

自分が調べた技術関連の情報をまとめてました。今はClosedなScrapboxに移行中です。
The Unlicense
2 stars 0 forks source link

readme

sKawashimaの開発技術学習目録

maker GitHub last commit

自分が調べた・調べたい技術関連の情報をまとめます。 各ジャンルごとに、使用頻度が高いものを上に表記します。

自分なりのメモなので、間違いや矛盾があるかもしれません。 もし見つけていただいた方がいらっしゃいましたら、Issueにぶち込んで頂けるとありがたいです。

また、このREADME.mdはsrc/内のファイルを結合して生成しています。

Common Terms

Base

基本的な言語。

Meta

コンパイルすることでBase Languageを書き出して利用する言語。

Index

Web front-end

Hyper Text Markup Language

Base

HTML5

最低限必要なファイル形式。 HTML5になってから様々なタグが追加され、同時にタグの推奨する省略規約が変更になった。

Meta

Pug(Jade)

Node.js系のHTMLメタ言語。 インデントでタグの階層を表記する。 テンプレートエンジンとして用いて静的ファイルを書き出せる。

Haml

Ruby系のHTMLメタ言語。 インデントでタグの階層を表記し、タグには%をつけて表記する。 Rubyのコードを埋め込むことが出来る。 テンプレートエンジンとして用いる場合動的ファイルとしてレンダリングされることが多い。

Style Sheet

Base

CSS3

スタイルシートの最も基本的記法。

Meta

Sass

タグの階層をインデントで表記する。 タグのネスト（階層重複）やMixin（関数）、変数、Extend（クラス化）などを行える。 Mixinの表記は定義を=、展開を+と省略できる。

SCSS

CSSの記法をほぼそのままに、Sassと同じことが直感的にできる。 CSSのコードをそのまま使うことも出来るため、初期学習コストはほぼ0。

Reset

ブラウザの初期CSSをかき消すために用いられる。

Framework / Package

Bootstrap

歴史のあるCSSフレームワーク。 Webサイトというより、Webアプリケーションを作成する際に使いやすい。

formbase

フォーム要素に改善されたデフォルト要素をもたらすパッケージ。

Naming convention / Design agreement

BEM

クラスの命名規則。 Block-Element_Modifierとして記述する。

Script

Base

JavaScript(ES5)

どの端末でも動くJavaScript形式。 クラス定義をprototypeを用いるなどの特徴有り。 特性上json形式を扱うのが得意。

Meta

JavaScript(ES6/ES2015)

より保守性を高めたJS。 constとletで変数を管理したり、Class宣言や=>記法によるfunctionの省略記法などがある。

Typescript

JavaScriptにて行われてこなかった厳格的型宣言を行うことで保守性を高めようとしている。 ただし、開発者の負担が高まる。

CoffeeScript

Ruby系メタ言語。 使ったことはまだ無い。

Development assistance node module

Basic

package.json

プロジェクトで扱うモジュールを記録するためのファイル。 すなわち、プロジェクトにおける依存モジュールを列挙する。 また、npmjs.comでモジュールを公開する際はdata repository bin などのパラメータを自分で

Package Management

package.jsonから必要なモジュールを判断しオンライン上からダウンロードして環境を整えたり、package.jsonを編集したりすることができるツール。

Yarn

NPMよりも高速であり、依存関係をより確実に管理できるパッケージマネージャー。

npm

JavaScriptのための Package Manager。 Node.jsをインストールするとついてくる。 NPMネットワークから各種モジュールパッケージをダウンロード、管理できる。

npmjs.com

npmの公式サイト。 モジュールの検索や公開等ができる。 モジュールの公開にはアカウント登録が必要。

Task Runner

Node.js系の直接コードに影響しないモジュールを自動で実行したりするために用いるツール。

Gulp

シンプルにコードを選出（src）し、モジュールを通す（.pipe）することができる。 はじめはおすすめ。

gulp-concat

ファイルを単純に結合する。 読み込んだファイル群をconcat(output.file)するだけで結合できる。 このリポジトリでも乱用中。

gulp-markdown-toc

Markdownにおける目次TOCを生成する。 toc()するとMarkdown内の指定タグ部分に目次が生成される。 このリポジトリでも乱用中。

Grunt

古い。 Gulpよりも遅い。 Reveal.jsにて利用した。

Module Bundler

様々なモジュールを最低限のコードにまとめることでファイル数と容量を圧縮するツール。 極論、このツールを持ち入り始めるとソースコード全てがメタ言語的扱いになる。 様々なモジュールを有効活用したり、ファイル容量を圧縮するために用いる。

Parcel

突如出現し新時代を垣間見せた化物。 設定ファイルを必要せず、自動的にバンドルするファイルを選出する。 ただし、ファイル名は自動で複雑な文字列になるため、複数ページが有りアドレスを考慮するサイトでは非推奨。 Adobeの人達が作っている。

Webpack

大正義。 やたら流行っている。 webpack-dev-serverがモジュールバンドラーの役割をこなすことも有り、非常に便利。 最近その光景であるwebpack-serverが登場しつつある。

Browserify

モジュールバンドラの先駆けにして実質下位互換。 元々はNode.js記法（'require'など）をブラウザが実行できる形に変換することを目的に作られた。 現状はタスクランナーとしての機能を内包するWebpackによってほぼ影が無い。

Converter

pug

Pug->HTML変換器。

node-sass

Sass/SCSS->CSS変換器。

babel

JavaScriptにおけるes2015->es5変換器。 もともと6to5という名前だったが2015年に改名した。

imagemin

画像を圧縮してくれるライブラリ。 サイズを小さくするのではなく、色情報を省くことでほとんど認知できない圧縮が行える。

Linter

コードの静的評価ができる。 きれいにコードを書くために叱ってくれる。

ESLint

設定の自由度が高く、テンプレートが非常に多く存在するLinter。 JSXをサポートしているなど、多機能。

Static Site Generator

Hexo

Node.js製のブログジェネレータ。 コマンドを叩くだけで必要なファイルを生成してくれる。 テンプレートエンジンはejs。 Gruntで動いている。ちょっと古いだけにこれだけは心配。

Library node module

Framework

Nuxt

Vue.jsを拡張させたフレームワーク。 Webpackが必須。 Vue Routerをファイルの配置に伴い自動生成したり、サーバーレスな静的ファイルの書き出しを行えたり、サーバーサイドを記述できたりする。

@nuxtjs/pwa

NuxtでPWAを作るためのライブラリ。configファイルにmanifestを含む各パラメータを記述できるようになる。

create-nuxt-app

Nuxtの開発環境テンプレートDL用コマンドツール。

Vue.js

簡単に入力変数と表示を連結させることができるMVVMフレームワーク。 パーツごとにMarkup, Style, Scriptの全てを記述してコンポーネント化するVue Componentsや、 SPA（Single-Page App）開発のためにアドレスと表示を連結させるVue Routerがある。

Vuex

Vue間のデータ共有のためのストアが実装できるフレームワーク。

vue-cli

Vue.jsの開発環境テンプレートが簡単にDLできるコマンドツール。

Hyperapp

簡単に入力変数と表示を連結させることができるMVVMフレームワーク。 ただし、Vue.jsと違い非常に機能がシンプルで軽量。 また、記述するコードも非常に少なく済む。

jQuery

古くからある省略記法的フレームワーク。 $を用いて何でも書けるようになる。 ただし、モダン環境（モジュールバンドラなどを用いる環境）ではimportの仕方に注意が必要。

AMP

⚡Accelerated Mobile Pagesの略。 Webをモバイル端末での閲覧を前提に最適化するための技術。 指定されたHTMLの書き方とJSの挿入を行って実装する。 (使用できるタグが制限される)[https://qiita.com/fgkm/items/4fa77e94781a6d8c7a82]ことに注意。

Simple library

Axios

シンプルな非同期通信モジュール。 Vueと組み合わせて幾つかのWebサイトで柔軟な表示を実装したり、メールフォームを実装したりした。 合わせてAPI実装ができれば基本的になんでもできる。

Puressure.js

一部端末で感圧センサの数値を利用できるモジュール。

CodeMirror

それっぽいコードエディタを実装するライブラリ。 エディタにおける行番号の表示やアクティブな行の表現のため、エディタ画面をdivの列挙で実装する。 valueの取得方法などはまだ分かっていない。

Foxholder

フォームがActiveな場合それを強調するためのアニメーションを追加したりするためのモジュール。

marked

MarkdownをHTMLに変換するための便利マン。

markdown

markedと同じだと思って使ってみたら、importが面倒な上表が描写できない。 二度と使うな。

Highlight.js

コードにカラーハイライトシンタックスを与えるライブラリ。 JS側がクラスを付加し、CSSでスタイルを指定する。 初期からどっさりCSSテンプレートが含まれているので、そのまま使うなり編集して使うなり自由度が高い。

validatorjs

フォームのバリデーションを行うライブラリ。 公式が日本語訳の設定を充実させている。 importで読み込んだ際は、src/langが読み込まれず日本語訳を表示できないため、

/* import Validator from 'validatorjs'
import ja from 'validatorjs/src/lang/ja' // これが必要

Validator.useLang('ja')
Validator.setMessages('ja', ja) // これが必要 */

のように表記する必要がある。

20180324現在、import/requireともに正常に動作しない。そもそも、なんでmainでsrc/を取っているのか等、謎が多い。動いていないのは僕の環境だけかもしれないが…

meu

mymodule 文字を引数にとって実行すると語尾に「めう！」を付けるだけのネタモジュール。

clipboard.js

クリップボードに特定の要素を保存できるモジュール。 HTML要素に対してnewすればクリップボードに入れる要素などはHTML側で書ける。

Rough.js

図形を手書きテイストに描写できるモジュール。

DAY.JS

時間を扱うためのモジュール。 公式が宣言しているとおり、Moment.jsの記法をほぼそのまま使えて、容量も軽量、その上早い。 まとめると強い。

Moment.js

時間を扱うためのモジュール。 元祖時間操作系モジュールだったが、DAY.JSの出現により使う頻度は減りそう。

figlet

___________.___  ________.__          __          __
\_   _____/|   |/  _____/|  |   _____/  |_       |__| ______
 |    __)  |   /   \  ___|  | _/ __ \   __\      |  |/  ___/
 |     \   |   \    \_\  \  |_\  ___/|  |        |  |\___ \
 \___  /   |___|\______  /____/\___  >__| /\ /\__|  /____  >
     \/                \/          \/     \/ \______|    \/

巨大文字AAを生成するモジュール。 フォントは多数ある。figletという名称は巨大文字AA生成ツールの共通名称であり、調べるとスタイルリストが出てくるが、実際に使えるのはここにあるものであることに注意。

nanoJS

シンプルなDOM要素の操作を行える0.6KBの超軽量ライブラリ。 一言で言えば、軽量かつ最低限の機能を揃えたJQuery。

mermaid

シンプルな記述方法で各種図を出力できるライブラリ。 オンラインエディタも有る。

iTyped.js

タイプライターのように一文字ずつ文字を表示できるライブラリ。

ZOOM.JS

画像をモーダル的に拡大表示するためのライブラリ。 非常にシンプルに使える。

Minigrid

カード型レイアウトを実装する2KBのライブラリ。 実装は親を指定するだけなので、ポートフォリオサイトへの有力な採用候補。

Barba.js

非同期通信を用いた高速ページ遷移を簡単に実装するライブラリ。 指定されたidとclassを充てるだけで実装できる。 しかし、範囲内のリンクでは対応しない模様。

SMF/Midi関連

Tone.js

Web Audio APIを簡単に扱うためのモジュール。音を生成しながら鳴らすことができる。

midi-writer-js

フロント側でMidiファイルを生成、base64経由で出力することが出来るライブラリ。

Web back-end

Ruby

イマドキな記法でサーバーサイドが書ける。 API作成などに用いた。 データベース連携の際はSQliteが良く用いられる。

Ruby on Rails

Rubyを用いた開発において、データベースの管理や最低限のコード郡を自動的に生成したりできるフレームワーク。 特に、勝手にデータベースを設計してくれるさまは感動的。 思想としてMVC（Model-View-Controller）が用いられる。

Active Record

Ruby on Railsで生成されるデータベース郡を操作するための記法。 SQLで行うような操作をより直感的に行える。 Ruby on Railsが開発している。

fae

RailsのためのシンプルなCMSフレームワーク。 いつか使って見る日が来るかもしれない。

PHP

HTMLを拡張するような形で動的サイトを記述できる。 早い。 らしい。 データベース連携の際はMySQLが良く用いられる。

Wordpress

大正義にして王道。 管理画面を持ち様々なサイトを作れるフレームワークCMSの1つ。 編集が簡単なのと、非常に出回っているためドキュメントが豊富。

Advanced Custom Fields

入力画面を拡張できるプラグイン。 有料版で手に入るRepeatFieldが非常に便利なため、ライセンス所持を購入した。

Drupal

Wordpressに比べて拡張性がものっそい広いCMS。 ただし、難しいのとドキュメントが見つからず挫折。

MovableType

標準機能として静的ファイルの書き出しが行えるCMS。 使ったことはない。

Node.js

JavaScript記法で書けるサーバー言語。 データベースはおもにMongoDBが良く用いられる。

Sails

RailsをNode.jsベースで再現したようなフレームワーク。 MVCベースではあるが、ModelとControllerをapiとしてまとめて管理している特徴がある。 ただし、Gruntを使ってたり更新頻度が低かったりとあんまりメジャーになりそうな雰囲気は少ない。

Web Deploy Service

ngrok

建っているローカルサーバーにグローバルアドレスを当てることができるサービス。 マインクラフトサーバー「TSURAIMEU Server」はこれで公開している。

Web Audit

Lighthouse

Webサイト、Webアプリについて様々な監査ができる。 Node.jsモジュールも存在するが、Chrome拡張機能から実行できるのでこちらで十分。

Software Programming

Node.js

JavaScript記法で様々な開発ができる開発環境。ライブラリが豊富かつ検索環境も整っている。UIをWebで実装出来るため、基本的にここではUIを持つためのアプリケーション開発環境であるElectronとその他CLI開発補助node moduleを記載する。

Electron

WebページをそのままGUIとしてアプリケーションを制作することができるフレームワーク。 テキストエディタのAtomやVSCodeなどはこれで作られている。 Mac, Windows, Linuxのそれぞれのためのアプリケーションで出力することができる。

NW.js

ウィンドウ管理を簡略化したElectronのようなフレームワーク。 HTMLファイル側にNode.jsの実装を記載でき、使いやすそう。

Vue Native

Vueを使ったネイティブアプリ開発環境。 様々な開発環境が簡単に揃う。 React Nativeへの対抗かつ、優秀。

Nativefier

既存WebサイトをElectronネイティブアプリ化するためのCLIツール。 一行のコマンドで制作できてしまうことが非常に便利。

CLI開発補助node module

clear

ターミナルコマンドのclearと同等の動作をする関数clear()を追加するモジュール。

chalk

チョーク。CLIにおける文字の表示色や背景色を簡単に変更することが出来る関数を追加するモジュール。

Document

そのものに機能的な要素がないテキストベースドキュメントのための環境。

Useful

Markdown

シンプルでテキストファイルでも見やすいマークアップ形式。 様々な書き出しのためのツールが存在する。

Pandoc

MarkdownをPDF化したり、自動で目次生成をしたりする。 つよい。

Article, Magazine

ReVIEW

LaTeXのフロントエンド。 技術書を書くのに使えそう。

LaTeX

論文御用達のややこしい言語。 覚える気にならないのが不思議。

Presentation

Reveal.js

HTMLやMarkdownでプレゼンテーションをするためのフレームワーク。 プレゼン資料制作の大幅な時間短縮が見込める。 Node.js系で、Gruntで動く。

Version Management

Basic

Git

王道バージョン管理ツール。 試し開発のためにフォルダをコピーとか、開発履歴確認とかに用いる。

Web Service for Git

GitHub

Gitを共有し強化するためのWebサービス。 IssueやPullRequestが良い。 学生会員であればPrivateリポジトリ作り放題。

hub

ローカルのGitブランチをそのままGitHubに作成したりできるGitHub用強化パッチ。 Issueを操作することもできるがそれに関してはghiのほうが便利。

ghi

GitHubのIssueをCLIで操作できるようにするためのツール。 どちゃくそべんり。

git-open

ターミナルからgit openするだけでGitHubのWebサイトの該当ページを開いてくれる強者。 べんり。

gitignore

.gitignoreのテンプレートをコマンド１つでgitignore.ioからDLできる。

gitignore.io

.gitignoreファイルのテンプレートを公開しているサイト。 とりあえずアクセスして開発言語を入力すれば何のテンプレートがあるのか分かる。

GitBuckets

Privateリポジトリが作り放題なGit共有・強化Webサービス。 使ったことはない。

Deploy

Now

Node.js, Docker, 静的Webサイトのデプロイサービス。 nowコマンド1つで簡単にデプロイできる。 ただし、無料プランではソースコードを隠せないことに加え最大3つまでしかデプロイ出来ない。

Text Editor

宗教。

Atom

GitHub製テキストエディタ。 行間がいい感じ。 apmコマンドが神。

Sublime Text

非常にシンプルなテキストエディタ。 使うためにはなんでも設定しなければならない。 大変。

VSCode

出現直後からやたら評価されたテキストエディタ。 カスタマイズなしでなんでもできる。 ただし、行間が狭い気がする。

Shell

fish

あたらしくTabがつよい。 ただし、あまり強みは利用できてない（慣れてない）。

bash

Mac標準のBasic Shell。

zsh

インターンで知った強いShell。 ただし、使おうとしたらより新しいfishを見つけてしまい二度と触ることがなさそう。

Other

terminal

Hyper

Electron製のターミナルソフトウェア。 JSでプラグインが制作できるなど、拡張性が非常に高い。 しかし、環境によっては日本語入力やfishなどでバグが発生する。

til

Today I Learned