何度も同じ実装しているので、コードをまとめたい…
プログラミングのコードを使いまわしたいけど、何にまとめればいいんだろう…
こんな疑問に答えます。
皆さん、実装で使ったコードをちゃんとまとめていますか？
エンジニアは同様の実装を人生で何度も行うことになりますが、何度も行うことは再利用できるようにしておくべきです。
コードスニペットを有効活用することで、自分の作業時間を大きく削減することが可能です。
特定の機能を実現した短いコードのまとまりのこと
これまでプログラミングコードをまとめるアプリは多々あり、私もフリーランスエンジニアを6年やってきて、色々使ってきました。
- Evernote
- Clipy
- Boostnote(クラウドじゃなく使いにくい)
- massCode(これもおすすめ)
ただ、最終的には「Notion」が一番便利だと感じたのと、普段のプロジェクト管理もNotionで行えるので、今はNotionを使っています。
今回の記事では「Notionでのコードスニペットのテンプレを配布しつつ、その使い方」を解説します。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
Notionの雛形配布
今回紹介するNotionテンプレは以下になるので、「複製」してお使いください。
Notionのコードスニペットの見かたと使い方
Notionを開くと、以下の画面になります。
これがトップページで、その下に項目毎に下層ページがあります。
例えば「JavaScript,jQuery」という下層ページを開くと、データベース形式で情報がまとまっています。
「名前」「タグ」「概要」で分かりやすく簡潔にまとめます。
これを展開するときは、カーソルを乗せて「サイドピークで開く」をクリック。
すると、個別ページが開きます。
- 利用シーンが分かる画像
- コード
- 参考記事
の順に乗せると分かりやすいです。
コードを埋め込む際には、コードブロックを利用します。
/codeと入力すると挿入できます。
また、コードブロックでは必ず「言語」を選択してください。
画像の挿入には「画像ブロック」を用います。これも/画像を入力し、挿入してください。
ページのリンクを挿入する時は、「ブックマークを作成する」が簡潔で分かりやすくおすすめです。
また、親ページに戻る時など、ページ内の移動の際はパンくずを参照すると分かりやすいです。
既存のカテゴリを増やしたい時は、「複製」を行えば良いです。
コードスニペットはシンプルであるべき
シンプルさを追求したので、機能はこれだけです。
なんか、地味。もうちょっとキラキラに改造したい
こう思われるかもですが、更新が命なのに更新作業がめんどくさくなる仕様だとすぐに使わなくなります。
できるだけシンプルなのが大事だと思っています。
そのためにも、下記レギュレーションに則って投稿していくのがベストだと思います。
- 利用シーンが分かる画像
- コード
- 参考記事
手が自動で動くようになりますし、画像は多少面倒ですが、入れると一気に分かりやすくなります。
案件中って忙しいので、できるだけ簡単に更新できるのがミソです。
さいごに コードスニペットまとめ集が神
プロのコードスニペットとか見てみたいっす！！
こんな方へ、最後に実務で使った2年分のコーディング&WordPressメモまとめ集を紹介しておきます。
これめちゃくちゃおすすめできます！！
Web制作では同じ様な実装に出くわすことが多く、その際にコピペができれば自分の時給を大きく上げることができます。
この実務で使った2年分のコーディング&WordPressメモまとめ集では、基本的にコピペでそのまま使えるスニペットが多い上に、
実装で実際に使われたコードのみが載っているので、非常に案件での使用率が高くなるかと思います（特にWordpress）
💻 トップページに新着一覧、カスタム投稿の新着一覧
→カテゴリーの指定方法、タームの指定方法
→PCでの表示数指定方法、SPでの表示数指定方法
💻 固定ページでページネーションを実装する方法
💻 ACF、SCFの出力方法
また、制作者のじゅんぺいさんに徹底インタビューをしているので、そちらも参考になると思います。
＼今なお更新され続けるコードスニペットがそのまま使える!!／
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
