WEB屋のための技術ブログ

WEBの知識や勉強法、WEBアプリ、個人開発について

CLOSE

作成したアプリ

止息

息を止めて活力を上げるアプリ。

買ってよかったー

買ってよかった物をシェアするアプリ

WEB初心者掲示板

WEB初心者のための掲示板です。

みんなの宝箱

みんなの宝物を見るアプリ

初心者向け

【爆速コーディング】爆速で作業するためのテクニック&ソフト20選【プログラミング】

現役時代に培った爆速コーディング、プログラミングのためのテクニックやおすすめソフトをご紹介します。
特にWEB初心者はブックマーク推奨です。
html、cssの作業が知っているのと知らないのでスピードに違いが出ます。

この記事で伝えたいこと

・作業に必須のフリーソフト

・VScodeやスクリーンショットのショートカット

・その他コーディングやプログラミングをするのに便利なテクニック(初心者向け)

おすすめソフト

clibor(無料)

https://chigusa-web.com/clibor/

コピーした文章が36個?まで保存できる。
定型文の登録も可能。
ctrl を2回押すと起動。
スタートアップに登録推奨。

winmerge(無料)

https://winmerge.org/?lang=ja

ファイルの比較(差分チェック)が可能

qttabbar(無料)

https://www.naporitansushi.com/qttabbar/

ファイルエクスプローラーをタブ化できる

デベロッパーモード(chrome)

ctrl + f でページ内検索(html内)

ctrl + shift + f でjavascript や cssファイル なども検索

Git導入

導入方法

https://eng-entrance.com/git-install

導入後

git init
(最初だけ)

更新都度
git add .
git commit -m “コメントを入れます”
で随時バージョン管理(更新内容の管理)

windows

win + shift + s + マウスで範囲選択
部分スクリーンショット、その後文字や絵なども書けます。

VScode

HTMLemmet

例:ul>li*5(liを増やしたい数字を入れる) で下記が作成される

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

例:div.test で 下記が作成される。
<div class=”test”></div>

ショートカット

囲みたい文字を選択後 ctrl + shift + p 後 emmet ラップ変換を選択

文字をタグでラッピング(tagで包んでくれる)できる。(下記画像のように)

.(ピリオド)クラス名 でクラス名の付与も可能

ctrl + shift + p の後アクティブファイルの比較

vscode上のファイルが比較できる。

shift + 矢印
矢印上or下で複数行選択、右左で文字列検索

ctrl + p
vscodeで開いてるフォルダのファイル全検索

文字選択後 ctrl + d
同じ文字列複数選択(カーソルが増えるので複数個所にクラス名などを一気に付与できる。)

shiftで複数行選択後 alt + shift + 矢印下or矢印上
選択行コピー

alt + 矢印下or矢印上
行の移動

ctrl + h
置換(git導入推奨)

ctrl + f
検索

ctrl + shift + f
VScodeで開いているフォルダ全検索

ctrl + shift + h
VScodeで開いているフォルダ全置換(git導入推奨)

正規表現

検索or置換窓起動後下記画像の赤丸箇所クリック

例:<h1>(.*)</h1>
でh1のタグを検索できます。
例:<p>(.*)</p>
とやるとpタグを検索できる
(.*)はすべて当てはまるので、<h1>すべての文字列</h1>が検索できる
※途中で改行が入っていると検索できません。

まとめ

あなたはいくつ知っていましたか?これを身に着けるだけで今までと比べ爆速でコーディングができるようになります。他にもこんなのがある!などの情報があれば教えてもらえると嬉しいです!Twitterまでご連絡ください。

【勉強・仕事がはかどらない奴いる?】息を止めると頭がよくなる?一回息止めてみようか【簡単集中力アップ】 最強の勉強法は結局アウトプット

関連記事

個人開発 初心者向け

CM中のちょっとした時間の暇つぶし「high&low」

2021年9月5日

こんにちは!最近冷えますね。夏なのに。 またまたjavascriptを使って、アプリを作ってみました。high&lowです。 1-100の中で数字を当てる単純なゲームです。チャンスは5回、入力した数字より、高いか…

初心者向け

便利だけど難しい…Flexbox

2021年9月12日

みなさん、Flexboxをどう思いますか? 便利?分かりやすい?横並びCSSの定番?? 確かに、floatよりはシンプルかもしれません。しかし、コーディング初心者の私にはまだまだ複雑で難しい!!いろんな種類がありすぎて分…

個人開発 初心者向け

決めてくれるアプリを作った件について

2021年8月18日

JavaScriptの勉強としてアプリを作ってみた 自分は優柔不断なので、何かを決めるのがとてもおっくうに感じる。ご飯を食べに行くにも何件もの店の候補を出すんだけど、最終的にどれにするか決められない。なので今回ランダムで…

初心者向け

首凝りがなくなる?デスクワークでも簡単にできる運動3選

2022年2月9日

こんにちは!!最近は運動にはまっています。デスクワークの人はなかなか体を動かさないと思うけど運動しようね。運動不足による気になるワードを集めたから、参考にしてね!! この記事の目的 ・デスクワークで運動がなかなかしない人…