自分が調べた・調べたい技術関連の情報をまとめます。 各ジャンルごとに、使用頻度が高いものを上に表記します。
自分なりのメモなので、間違いや矛盾があるかもしれません。 もし見つけていただいた方がいらっしゃいましたら、Issueにぶち込んで頂けるとありがたいです。
また、このREADME.mdはsrc/内のファイルを結合して生成しています。
基本的な言語。
コンパイルすることでBase Languageを書き出して利用する言語。
- Web front-end
- Web back-end
- Software Programming
- Document
- Version Management
- Deploy
- Text Editor
- Shell
- Other
- til
最低限必要なファイル形式。 HTML5になってから様々なタグが追加され、同時にタグの推奨する省略規約が変更になった。
Node.js系のHTMLメタ言語。 インデントでタグの階層を表記する。 テンプレートエンジンとして用いて静的ファイルを書き出せる。
Ruby系のHTMLメタ言語。
インデントでタグの階層を表記し、タグには%をつけて表記する。
Rubyのコードを埋め込むことが出来る。
テンプレートエンジンとして用いる場合動的ファイルとしてレンダリングされることが多い。
スタイルシートの最も基本的記法。
タグの階層をインデントで表記する。
タグのネスト（階層重複）やMixin（関数）、変数、Extend（クラス化）などを行える。
Mixinの表記は定義を=、展開を+と省略できる。
- css2sass | Convert CSS Snippets to Syntactically Awesome StyleSheets code
- CSSからSass, SCSSに変換できる。
CSSの記法をほぼそのままに、Sassと同じことが直感的にできる。 CSSのコードをそのまま使うことも出来るため、初期学習コストはほぼ0。
ブラウザの初期CSSをかき消すために用いられる。
歴史のあるCSSフレームワーク。 Webサイトというより、Webアプリケーションを作成する際に使いやすい。
フォーム要素に改善されたデフォルト要素をもたらすパッケージ。
クラスの命名規則。 Block-Element_Modifierとして記述する。
どの端末でも動くJavaScript形式。
クラス定義をprototypeを用いるなどの特徴有り。
特性上json形式を扱うのが得意。
より保守性を高めたJS。
constとletで変数を管理したり、Class宣言や=>記法によるfunctionの省略記法などがある。
JavaScriptにて行われてこなかった厳格的型宣言を行うことで保守性を高めようとしている。 ただし、開発者の負担が高まる。
Ruby系メタ言語。 使ったことはまだ無い。
プロジェクトで扱うモジュールを記録するためのファイル。
すなわち、プロジェクトにおける依存モジュールを列挙する。
また、npmjs.comでモジュールを公開する際はdata repository bin などのパラメータを自分で
package.jsonから必要なモジュールを判断しオンライン上からダウンロードして環境を整えたり、package.jsonを編集したりすることができるツール。
NPMよりも高速であり、依存関係をより確実に管理できるパッケージマネージャー。
JavaScriptのための Package Manager。 Node.jsをインストールするとついてくる。 NPMネットワークから各種モジュールパッケージをダウンロード、管理できる。
npmの公式サイト。 モジュールの検索や公開等ができる。 モジュールの公開にはアカウント登録が必要。
Node.js系の直接コードに影響しないモジュールを自動で実行したりするために用いるツール。
シンプルにコードを選出（src）し、モジュールを通す（.pipe）することができる。
はじめはおすすめ。
ファイルを単純に結合する。
読み込んだファイル群をconcat(output.file)するだけで結合できる。
このリポジトリでも乱用中。
Markdownにおける目次TOCを生成する。
toc()するとMarkdown内の指定タグ部分に目次が生成される。
このリポジトリでも乱用中。
古い。 Gulpよりも遅い。 Reveal.jsにて利用した。
様々なモジュールを最低限のコードにまとめることでファイル数と容量を圧縮するツール。 極論、このツールを持ち入り始めるとソースコード全てがメタ言語的扱いになる。 様々なモジュールを有効活用したり、ファイル容量を圧縮するために用いる。
突如出現し新時代を垣間見せた化物。 設定ファイルを必要せず、自動的にバンドルするファイルを選出する。 ただし、ファイル名は自動で複雑な文字列になるため、複数ページが有りアドレスを考慮するサイトでは非推奨。 Adobeの人達が作っている。
大正義。
やたら流行っている。
webpack-dev-serverがモジュールバンドラーの役割をこなすことも有り、非常に便利。
最近その光景であるwebpack-serverが登場しつつある。
モジュールバンドラの先駆けにして実質下位互換。 元々はNode.js記法（'require'など）をブラウザが実行できる形に変換することを目的に作られた。 現状はタスクランナーとしての機能を内包するWebpackによってほぼ影が無い。
Pug->HTML変換器。
Sass/SCSS->CSS変換器。
JavaScriptにおけるes2015->es5変換器。 もともと6to5という名前だったが2015年に改名した。
画像を圧縮してくれるライブラリ。 サイズを小さくするのではなく、色情報を省くことでほとんど認知できない圧縮が行える。
コードの静的評価ができる。 きれいにコードを書くために叱ってくれる。
設定の自由度が高く、テンプレートが非常に多く存在するLinter。 JSXをサポートしているなど、多機能。
Node.js製のブログジェネレータ。 コマンドを叩くだけで必要なファイルを生成してくれる。 テンプレートエンジンはejs。 Gruntで動いている。ちょっと古いだけにこれだけは心配。
Vue.jsを拡張させたフレームワーク。
Webpackが必須。
Vue Routerをファイルの配置に伴い自動生成したり、サーバーレスな静的ファイルの書き出しを行えたり、サーバーサイドを記述できたりする。
NuxtでPWAを作るためのライブラリ。configファイルにmanifestを含む各パラメータを記述できるようになる。
Nuxtの開発環境テンプレートDL用コマンドツール。
簡単に入力変数と表示を連結させることができるMVVMフレームワーク。
パーツごとにMarkup, Style, Scriptの全てを記述してコンポーネント化するVue Componentsや、
SPA（Single-Page App）開発のためにアドレスと表示を連結させるVue Routerがある。
Vue間のデータ共有のためのストアが実装できるフレームワーク。
Vue.jsの開発環境テンプレートが簡単にDLできるコマンドツール。
簡単に入力変数と表示を連結させることができるMVVMフレームワーク。 ただし、Vue.jsと違い非常に機能がシンプルで軽量。 また、記述するコードも非常に少なく済む。
古くからある省略記法的フレームワーク。
$を用いて何でも書けるようになる。
ただし、モダン環境（モジュールバンドラなどを用いる環境）ではimportの仕方に注意が必要。
⚡Accelerated Mobile Pagesの略。 Webをモバイル端末での閲覧を前提に最適化するための技術。 指定されたHTMLの書き方とJSの挿入を行って実装する。 (使用できるタグが制限される)[https://qiita.com/fgkm/items/4fa77e94781a6d8c7a82]ことに注意。
シンプルな非同期通信モジュール。 Vueと組み合わせて幾つかのWebサイトで柔軟な表示を実装したり、メールフォームを実装したりした。 合わせてAPI実装ができれば基本的になんでもできる。
一部端末で感圧センサの数値を利用できるモジュール。
それっぽいコードエディタを実装するライブラリ。 エディタにおける行番号の表示やアクティブな行の表現のため、エディタ画面をdivの列挙で実装する。 valueの取得方法などはまだ分かっていない。
フォームがActiveな場合それを強調するためのアニメーションを追加したりするためのモジュール。
MarkdownをHTMLに変換するための便利マン。
- 以下のHighlight.jsとの連携でハマった際はこう対処した。
markedと同じだと思って使ってみたら、importが面倒な上表が描写できない。 二度と使うな。
コードにカラーハイライトシンタックスを与えるライブラリ。 JS側がクラスを付加し、CSSでスタイルを指定する。 初期からどっさりCSSテンプレートが含まれているので、そのまま使うなり編集して使うなり自由度が高い。
フォームのバリデーションを行うライブラリ。
公式が日本語訳の設定を充実させている。
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/を取っているのか等、謎が多い。動いていないのは僕の環境だけかもしれないが…
クリップボードに特定の要素を保存できるモジュール。
HTML要素に対してnewすればクリップボードに入れる要素などはHTML側で書ける。
図形を手書きテイストに描写できるモジュール。
時間を扱うためのモジュール。 公式が宣言しているとおり、Moment.jsの記法をほぼそのまま使えて、容量も軽量、その上早い。 まとめると強い。
時間を扱うためのモジュール。 元祖時間操作系モジュールだったが、DAY.JSの出現により使う頻度は減りそう。
___________.___ ________.__ __ __
\_ _____/| |/ _____/| | _____/ |_ |__| ______
| __) | / \ ___| | _/ __ \ __\ | |/ ___/
| \ | \ \_\ \ |_\ ___/| | | |\___ \
\___ / |___|\______ /____/\___ >__| /\ /\__| /____ >
\/ \/ \/ \/ \______| \/
巨大文字AAを生成するモジュール。 フォントは多数ある。figletという名称は巨大文字AA生成ツールの共通名称であり、調べるとスタイルリストが出てくるが、実際に使えるのはここにあるものであることに注意。
シンプルなDOM要素の操作を行える0.6KBの超軽量ライブラリ。 一言で言えば、軽量かつ最低限の機能を揃えたJQuery。
シンプルな記述方法で各種図を出力できるライブラリ。 オンラインエディタも有る。
タイプライターのように一文字ずつ文字を表示できるライブラリ。
画像をモーダル的に拡大表示するためのライブラリ。 非常にシンプルに使える。
カード型レイアウトを実装する2KBのライブラリ。 実装は親を指定するだけなので、ポートフォリオサイトへの有力な採用候補。
非同期通信を用いた高速ページ遷移を簡単に実装するライブラリ。 指定されたidとclassを充てるだけで実装できる。 しかし、範囲内のリンクでは対応しない模様。
Web Audio APIを簡単に扱うためのモジュール。音を生成しながら鳴らすことができる。
フロント側でMidiファイルを生成、base64経由で出力することが出来るライブラリ。
イマドキな記法でサーバーサイドが書ける。 API作成などに用いた。 データベース連携の際はSQliteが良く用いられる。
Rubyを用いた開発において、データベースの管理や最低限のコード郡を自動的に生成したりできるフレームワーク。 特に、勝手にデータベースを設計してくれるさまは感動的。 思想としてMVC（Model-View-Controller）が用いられる。
Ruby on Railsで生成されるデータベース郡を操作するための記法。 SQLで行うような操作をより直感的に行える。 Ruby on Railsが開発している。
RailsのためのシンプルなCMSフレームワーク。 いつか使って見る日が来るかもしれない。
HTMLを拡張するような形で動的サイトを記述できる。 早い。 らしい。 データベース連携の際はMySQLが良く用いられる。
大正義にして王道。 管理画面を持ち様々なサイトを作れるフレームワークCMSの1つ。 編集が簡単なのと、非常に出回っているためドキュメントが豊富。
入力画面を拡張できるプラグイン。 有料版で手に入るRepeatFieldが非常に便利なため、ライセンス所持を購入した。
Wordpressに比べて拡張性がものっそい広いCMS。 ただし、難しいのとドキュメントが見つからず挫折。
標準機能として静的ファイルの書き出しが行えるCMS。 使ったことはない。
JavaScript記法で書けるサーバー言語。 データベースはおもにMongoDBが良く用いられる。
RailsをNode.jsベースで再現したようなフレームワーク。
MVCベースではあるが、ModelとControllerをapiとしてまとめて管理している特徴がある。
ただし、Gruntを使ってたり更新頻度が低かったりとあんまりメジャーになりそうな雰囲気は少ない。
建っているローカルサーバーにグローバルアドレスを当てることができるサービス。 マインクラフトサーバー「TSURAIMEU Server」はこれで公開している。
Webサイト、Webアプリについて様々な監査ができる。 Node.jsモジュールも存在するが、Chrome拡張機能から実行できるのでこちらで十分。
JavaScript記法で様々な開発ができる開発環境。ライブラリが豊富かつ検索環境も整っている。UIをWebで実装出来るため、基本的にここではUIを持つためのアプリケーション開発環境であるElectronとその他CLI開発補助node moduleを記載する。
WebページをそのままGUIとしてアプリケーションを制作することができるフレームワーク。 テキストエディタのAtomやVSCodeなどはこれで作られている。 Mac, Windows, Linuxのそれぞれのためのアプリケーションで出力することができる。
ウィンドウ管理を簡略化したElectronのようなフレームワーク。 HTMLファイル側にNode.jsの実装を記載でき、使いやすそう。
Vueを使ったネイティブアプリ開発環境。 様々な開発環境が簡単に揃う。 React Nativeへの対抗かつ、優秀。
既存WebサイトをElectronネイティブアプリ化するためのCLIツール。 一行のコマンドで制作できてしまうことが非常に便利。
ターミナルコマンドのclearと同等の動作をする関数clear()を追加するモジュール。
チョーク。CLIにおける文字の表示色や背景色を簡単に変更することが出来る関数を追加するモジュール。
そのものに機能的な要素がないテキストベースドキュメントのための環境。
シンプルでテキストファイルでも見やすいマークアップ形式。 様々な書き出しのためのツールが存在する。
MarkdownをPDF化したり、自動で目次生成をしたりする。 つよい。
LaTeXのフロントエンド。 技術書を書くのに使えそう。
論文御用達のややこしい言語。 覚える気にならないのが不思議。
HTMLやMarkdownでプレゼンテーションをするためのフレームワーク。 プレゼン資料制作の大幅な時間短縮が見込める。 Node.js系で、Gruntで動く。
王道バージョン管理ツール。 試し開発のためにフォルダをコピーとか、開発履歴確認とかに用いる。
Gitを共有し強化するためのWebサービス。 IssueやPullRequestが良い。 学生会員であればPrivateリポジトリ作り放題。
ローカルのGitブランチをそのままGitHubに作成したりできるGitHub用強化パッチ。 Issueを操作することもできるがそれに関してはghiのほうが便利。
GitHubのIssueをCLIで操作できるようにするためのツール。 どちゃくそべんり。
ターミナルからgit openするだけでGitHubのWebサイトの該当ページを開いてくれる強者。
べんり。
.gitignoreのテンプレートをコマンド１つでgitignore.ioからDLできる。
.gitignoreファイルのテンプレートを公開しているサイト。
とりあえずアクセスして開発言語を入力すれば何のテンプレートがあるのか分かる。
Privateリポジトリが作り放題なGit共有・強化Webサービス。 使ったことはない。
Node.js, Docker, 静的Webサイトのデプロイサービス。
nowコマンド1つで簡単にデプロイできる。
ただし、無料プランではソースコードを隠せないことに加え最大3つまでしかデプロイ出来ない。
宗教。
GitHub製テキストエディタ。
行間がいい感じ。
apmコマンドが神。
非常にシンプルなテキストエディタ。 使うためにはなんでも設定しなければならない。 大変。
出現直後からやたら評価されたテキストエディタ。 カスタマイズなしでなんでもできる。 ただし、行間が狭い気がする。
あたらしくTabがつよい。 ただし、あまり強みは利用できてない（慣れてない）。
Mac標準のBasic Shell。
インターンで知った強いShell。 ただし、使おうとしたらより新しいfishを見つけてしまい二度と触ることがなさそう。
Electron製のターミナルソフトウェア。 JSでプラグインが制作できるなど、拡張性が非常に高い。 しかし、環境によっては日本語入力やfishなどでバグが発生する。
Today I Learned
© 2018 sKawashima