プログラミング

プログラミングのコードスニペットはNotionで管理するのがおすすめ【テンプレ配布&シンプルさが大事】

プログラミングのコードスニペットはNotionで管理するのがおすすめ【テンプレ配布&シンプルさが大事】
本ページにはプロモーションが含まれています。
まさひろくん

何度も同じ実装しているので、コードをまとめたい…
プログラミングのコードを使いまわしたいけど、何にまとめればいいんだろう…

こんな疑問に答えます。

皆さん、実装で使ったコードをちゃんとまとめていますか?

エンジニアは同様の実装を人生で何度も行うことになりますが、何度も行うことは再利用できるようにしておくべきです。

コードスニペットを有効活用することで、自分の作業時間を大きく削減することが可能です。

コードスニペット(code snippet)とは?

特定の機能を実現した短いコードのまとまりのこと

これまでプログラミングコードをまとめるアプリは多々あり、私もフリーランスエンジニアを6年やってきて、色々使ってきました。

  • Evernote
  • Clipy
  • Boostnote(クラウドじゃなく使いにくい)
  • massCode(これもおすすめ)

ただ、最終的には「Notion」が一番便利だと感じたのと、普段のプロジェクト管理もNotionで行えるので、今はNotionを使っています。

コードスニペットはNotionで管理するのがおすすめ【積み上げるにはシンプルさが大事】

今回の記事では「Notionでのコードスニペットのテンプレを配布しつつ、その使い方」を解説します。

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています!

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

コーディング課題 超実践編

超実践編をとりあえず見てみる

Notionの雛形配布

今回紹介するNotionテンプレは以下になるので、「複製」してお使いください。

コードスニペットはNotionで管理するのがおすすめ【積み上げるにはシンプルさが大事】

Notionのコードスニペットの見かたと使い方

Notionを開くと、以下の画面になります。

これがトップページで、その下に項目毎に下層ページがあります。

コードスニペットはNotionで管理するのがおすすめ【積み上げるにはシンプルさが大事】

例えば「JavaScript,jQuery」という下層ページを開くと、データベース形式で情報がまとまっています。

コードスニペットはNotionで管理するのがおすすめ【積み上げるにはシンプルさが大事】

「名前」「タグ」「概要」で分かりやすく簡潔にまとめます。

これを展開するときは、カーソルを乗せて「サイドピークで開く」をクリック。

コードスニペットはNotionで管理するのがおすすめ【積み上げるにはシンプルさが大事】

すると、個別ページが開きます。

  1. 利用シーンが分かる画像
  2. コード
  3. 参考記事

の順に乗せると分かりやすいです。

コードスニペットはNotionで管理するのがおすすめ【積み上げるにはシンプルさが大事】
コードスニペットはNotionで管理するのがおすすめ【積み上げるにはシンプルさが大事】

コードを埋め込む際には、コードブロックを利用します。

/codeと入力すると挿入できます。

プログラミングのコードスニペットはNotionで管理するのがおすすめ【テンプレ配布&シンプルさが大事】

また、コードブロックでは必ず「言語」を選択してください。

プログラミングのコードスニペットはNotionで管理するのがおすすめ【テンプレ配布&シンプルさが大事】

画像の挿入には「画像ブロック」を用います。これも/画像を入力し、挿入してください。

プログラミングのコードスニペットはNotionで管理するのがおすすめ【テンプレ配布&シンプルさが大事】

ページのリンクを挿入する時は、「ブックマークを作成する」が簡潔で分かりやすくおすすめです。

プログラミングのコードスニペットはNotionで管理するのがおすすめ【テンプレ配布&シンプルさが大事】

また、親ページに戻る時など、ページ内の移動の際はパンくずを参照すると分かりやすいです。

コードスニペットはNotionで管理するのがおすすめ【積み上げるにはシンプルさが大事】

既存のカテゴリを増やしたい時は、「複製」を行えば良いです。

コードスニペットはNotionで管理するのがおすすめ【積み上げるにはシンプルさが大事】

コードスニペットはシンプルであるべき

シンプルさを追求したので、機能はこれだけです。

まさひろくん

なんか、地味。もうちょっとキラキラに改造したい

こう思われるかもですが、更新が命なのに更新作業がめんどくさくなる仕様だとすぐに使わなくなります。

できるだけシンプルなのが大事だと思っています。

そのためにも、下記レギュレーションに則って投稿していくのがベストだと思います。

  1. 利用シーンが分かる画像
  2. コード
  3. 参考記事

手が自動で動くようになりますし、画像は多少面倒ですが、入れると一気に分かりやすくなります。

しょーご

案件中って忙しいので、できるだけ簡単に更新できるのがミソです。

さいごに コードスニペットまとめ集が神

まさひろくん

プロのコードスニペットとか見てみたいっす!!

こんな方へ、最後に実務で使った2年分のコーディング&WordPressメモまとめ集を紹介しておきます。

これめちゃくちゃおすすめできます!!

Web制作では同じ様な実装に出くわすことが多く、その際にコピペができれば自分の時給を大きく上げることができます。

この実務で使った2年分のコーディング&WordPressメモまとめ集では、基本的にコピペでそのまま使えるスニペットが多い上に、実装で実際に使われたコードのみが載っているので、非常に案件での使用率が高くなるかと思います(特にWordpress)

具体例

💻 トップページに新着一覧、カスタム投稿の新着一覧
→カテゴリーの指定方法、タームの指定方法
→PCでの表示数指定方法、SPでの表示数指定方法
💻 固定ページでページネーションを実装する方法
💻 ACF、SCFの出力方法

しょーご

載ってるコードを即利用することができるので、是非活用されることをおすすめします!!

\今なお更新され続けるコードスニペットがそのまま使える!!/

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

投げ銭機能を設置しました!

寄付とメッセージには全て目を通させていただきます!

🍺 ビールをプレゼントする

あなたに是非読んでほしい記事です!