かけだしエンジニアに伝えたいTIPSいろいろ
最近、初学者の方にプログラミングを教える機会が増えた。
何回も同じことを教えてる気がするので、いつも教えてることをここにまとめておく。
Slackのコードブロック
Slackでコードやエラーメッセージ等を送信する時は、コードブロック機能を使おう。
Emmet
HTMLとCSSを高速で書けるようにする記法。
例えばCSSファイル内でmb8と入力後Tabキーを押すとmargin-bottm: 8px;に展開される。
少なくともVSCodeとCloud9ではデフォルトで使えて、デフォルトで使えないエディターでもプラグインを入れれば使える。
マークアップのスピードが大袈裟じゃなく3倍は変わる。
ライブラリを探すときはGitHubの最終更新日をみる
全然更新されていないライブラリは避けた方が良い。
シェルの入力補完
最近実行したコマンドをもう一度使いたい時は↑キーを押す。
ファイル名、ディレクトリ名の補完は、名前を途中まで入力した後にtabキーを押す。
historyコマンド
シェルで入力したコマンドの履歴を見るコマンド。
$ history #デフォルトで25件の履歴が出力される
$ history -100 #オプションで表示件数を指定できる
$ history -100 | grep git #gitという文字列が含まれるコマンドだけを抽出
$ history -100 > hoge.txt #コマンドの履歴をファイルに出力する
Qiitaの小技
日付をホバーすると投稿日が見れる
記事の更新日部分にホバーすると、記事の投稿日が見れる。
URL末尾に.mdを付けるとmarkdownで見れる
例えばこの記事の末尾に.mdをつけてアクセスすると
こうなる。
「この表現Markdownでどうやって書いてるんだろう」と思った時に使える。
html.erbファイルのシンタックスハイライト
QiitaのMarkdownは、言語を指定しなくてもファイル名の拡張子から言語を判断してシンタックスハイライトをきかせてくれる。でもhoge.html.erbのようなファイル名だとシンタックスハイライトがきかない。その場合erb:hoge.html.erbと書くことで解決できる。
Wappalyzer
Chromeの拡張機能。
今見てるサイトで、どんなプログラミング言語、ライブラリが使われているのかをざっくり確認することができる。
必ずしも正確とは限らないからあくまで参考情報だけど、それまで知らなかった技術を知ることができたりして楽しい。
こまめにCommitする & Diffをみれるようにする
これはTIPSではないかもだけど。
動かない、原因がわからない、自分がどんな変更をしたのかも把握できていない
という状態はとてもつらいので絶対に避けたい。
- 最低でも1つの機能追加が終わるごとにCommitする
- できれば機能ごとにブランチを切る
- エディターにプラグインなどを入れて、Diffをわかりやすい形で確認できるようにする
- VSCodeとかはデフォルトでDiffが見れる
- 2021年1月時点ではCloud9でdiffをきれいに表示するのは無理っぽいので、
git diffコマンドで代替するしかなさそう。 - 昔はできたっぽい
Zennのスクラップ
ある機能の実装方法について調査したい時、エラーの原因を探っている時、どこかに記録しておきたいけど記事にするほどでもないTIPSがある時、テキストを読み進めている時、Zennのスクラップ機能が便利。
記事と違って自分用の適当なメモという体裁なので、間違ったことを書いたり、説明が不足していたりしても怒られない。
頭の中にあるものをスクラップに吐き出すことで、思考が整理されて、作業が捗る。
ブラウザのブックマークバーにスクラップ作成画面のリンクを登録すると良い。
スクラップがたまったら、それをきれいにまとめて記事にするのも良い。
スクラップの例
Discussion