「探していたのは、
 このコード。」

フロントエンドの実装を、
もっと速く、もっと便利に、
もっと安心な品質で。

KONOCODEは、フロントエンドエンジニアのためのコーディングリファレンスです。


「KONOCODE(コノコード)」とは?

制作のプロが実際の案件で使用しているHTMLやCSS、さらにはJavaScriptやCMS処理などのソースコードを有料(一部は無料)で購入利用できる、フロントエンド専門のコーディングリファレンス(Tips集、チートシート)です。

KONOCODEは主な利用目的として、以下の2点を想定して開発されたサービスです。

既存のソースコードを使い回すことで、
高速開発を可能にする
「リファレンスツール」としての利用

フロントエンド(コーディング)の実装を「既存のソースコード」から使い回す(コピペする)ことで生産性を向上させます。
また、リファレンスツールとして集約することで「自身のPC内に存在する複数のプロジェクトのどこかで使ったソースコード」を探す手間と時間を短縮します。

自身に経験のない「今、目の前の実装」や
デバッグに対応するための、
熟練エンジニアのナレッジ活用

フロントエンド(コーディング)において、未経験の実装(1回目の実装)や未経験のデバッグ(1回目のデバッグ)は解決までに時間を要するものです。ただ、経験を得ることで2回目以降はその時間が飛躍的に短くなります。
KONOCODEでは、熟練エンジニアの「経験」を共有することでその時間短縮を1回目から享受できる利点を提供します。

KONOCODEを利用するメリット

モジュールの組み合わせで、開発時間をより短く。

フロントエンドでもっとも重要なことは、「ソースコードをゼロから書き上げること」ではありません。
モジュールの共通化などサイト全体の構成設計と、それにあわせて適切にモジュール同士を組み合わせることです。
KONOCODEを使うことで「書く時間」を短くし、その重要工程に多く時間を割くことができるようになります。
結果として、開発時間全体を短くすることが可能になります。

ソースコードを統一し、より高い品質へ。

フロントエンド開発では、1つのデザインを再現するためのソースコードが無数(無限)に存在するため、一定以上の知識を得ると「どれが本当に良い書き方か選べない」という状態になってしまうことがあります。
それほどソースコードの整合性や命名規則の統一性はこだわりだすとキリがなく、また難しいものであるという事実です。
KONOCODEでは、全てBEM(getbem記法)で書かれた規則性と整合性がしっかり練られたソースコードをご提供していますので、品質の向上にも寄与します。

経験が浅い人も、熟練者が書いたソースコードを自分のものに。

フロントエンド開発の基本はパズルと同じ「組み合わせ」を考えることから始まります。
経験が浅い場合、その組み合わせるモジュールの開発自体に労力が必要なのですが、KONOCODEを使うことでモジュールの開発に苦労することがなくなります。
熟練したエンジニアが書いたモジュールを活用することで、本来の設計に注力でき、また自身の技術向上にもお役立て頂けます。

KONOCODEの特長

コーディング専業のプロが実際の案件で使用するコードをご提供します。
単発購入(100円)と、全記事閲覧可能な月額利用の2プランをご用意。
定期的な点検とアップデートで、常に「使えるコード」をご提供します。

KONOCODEでは「フロントエンドエンジニアがコーディングリファレンスとして活用すること」に特化したユーザビリティを目指しています。
できる限りシンプルなレイアウトで「すぐに目的のソースコードにたどり着け、迅速にコードをコピーして開発中の案件にペーストする」ことを何よりも大切にしています。

単発購入の均一100円、月額利用の月980円(いずれも税込)と2タイプの料金プランをご用意し、「必要な時だけ使いたい」「リファレンスツールとして常用したい」というニーズにお応えしています。

有料で提供する以上、ユーザーの皆様に安心してお使い頂けるように、最新ブラウザへの対応など、常にチェックとアップデートを心がけています。

フロントエンドの最前線でプロの熟練エンジニアが実際に使用しているソースコードを使いやすい価格で提供します。


KONOCODEのご利用料金

KONOCODEでは、無料でお使いいただけるソースコードと、有料のソースコードという2種類のソースコードをご提供しています(リファレンスツールとしての位置づけですので、基本的には有料です)。
有料のソースコードは、該当記事の一部に閲覧制限がかかっており、以下の2種類の方法によって閲覧が可能となります。

フリー会員(月額無料)
月額0
有料記事:1記事 100円均一
ナレッジ取得やデバッグ対応でKONOCODEを活用される方向け。単発購入(記事1ページずつの購入)でのご利用となり、登録無料で月額料金は発生しません。
購入した記事のみ閲覧が可能です。

※購入した記事は無制限で何度でも閲覧頂けます。
※料金は全て税込みです。
レギュラー会員(月額利用)
月額980
有料記事:全記事を閲覧可能
KONOCODEをコーディングリファレンスとして活用される方向け。月額980円で全ての記事(ソースコード)を閲覧可能(使い放題)で、1カ月ごとの更新となります。

※初月のお支払いは、月額利用開始時に課金、次回以降のお支払いは翌月の同日同時間となります。翌月に同日がない場合(例えば8/31など)は、翌月末日の同時間となります。
※料金は全て税込みです。

わたしたちがKONOCODEをつくった理由

過去案件のソースコードを使い回したいが、探すのに一苦労…

「あ、このレイアウト前作った」
「このJS処理、以前に書いたコードがそのまま使えそう」

私たちはフロントエンド開発(コーディング)を主力事業としている会社です。事業を通じてより速く、より品質の高い施工を目指していく中で、当事者として私たちが気付いたことがあります。

それは『フロントエンド開発には「たとえ見た目のデザインが大きく異なっても処理構造がほぼ同じ」であるソースコードが数多存在すること』です。

「あ、このレイアウトは前に開発したあのソースコードを転用すればすぐ実装できそう」
「この複雑なJS処理、前に苦労して開発した処理とほぼ同じだな」
「このCMSの処理は記述量が多いから、いつものあの処理を転用しよう」  …etc。

でも、そんな時によくある現象として、こんな場面にもよく遭遇します。

「あれ?どのプロジェクトで実装したソースだった?」

そして結局、ソースコードを探すのに時間がかかってしまい、ゼロから書くのとあまり変わらなくなってしまう。
コーディング専業である私たちのPCには、多数のコーディングプロジェクトのソースが眠っています。そこから探している処理を見つけるのは、意外に時間がかかるもの。熟練者であればその数は数百にも登るため、探す手間も大変です。

初心に返ってゼロから書こうとしても、「前に書いた処理の方がスマートだった気がする」思いがどうしてもよぎりますし、「ヒントにしたあのサイトのあのページ」が検索エンジンのどこを探しても見つからない(何というキーワードで探したっけ?)…などといったことも日常茶飯事です。

手元にあるはずなのに、求めているコード、探しているコードがすぐに見つからない。
この問題を解消しない限りコーディングの抜本的な高速化は実現が難しく、文字通り私たちの前に立ち塞がる「壁」となっていました。

社内の知見とソースコードを集約したリファレンスツールを作ろう!

「手元の大量のデータから必要なリファレンスを探す」手間を省き、そして隣に座る同僚エンジニアのソースコードも活用できるように。

自分のPC内のソースコードをコーディングリファレンスとして活用する場合、もっとも大きな課題は「本当に欲しい時ほど目的のソースコードが見つからない」ことです。
基本的なレイアウトや簡易な処理ならある程度の経験者であれば何も参照せずに書くことができますが、単独でも複雑な処理やレイアウトとJS処理が複雑に絡み合う組み合わせコードなどに挑む時こそ、「前の経験値を活用したい」ものです。

ただ、そんな機会は頻繁に発生するわけではありません。
ときどき探す、でもなかなか見つからない…。この問題を解決する方法は一つしかありません。

「使えるソースコードを全てインデックス(字引)化したらどうなる?」

なぜ見つからないか、その原因はインデックス化されていないからです。
目当てのソースコードが眠る場所は「探す」目的に最適化された場所ではありません(特定のサイトデータの特定のブロックのコードだったりするため)。

ではインデックス化すれば良いのではないか。
さらにはwebにアップすることで異なるエンジニア同士のそれぞれのPCに眠る「マイリファレンス」を統合すればどうなるか。
集めた知見はクラウド化の効果を発揮し、「自分以外のエンジニアが開発したソースコード」も「マイリファレンス」として使えるようになる(=知見の共有)のではないか。

それがKONOCODEをつくる主な原動力となりました。まずは自分たちのコーディング開発をもっと速く、もっと便利に、もっと安心な品質にするために。

また、同時に「マイリファレンス」から転用する際にいつも行っていた手直し(当然ですが、他のサイトで実装した処理を別のサイトでそのまま使うことはできないためです)も予め想定し、汎用性の高いソースコードに書き直してリファレンス活用することで、より有用性が高まる(=誰でも使える)のではないかという仮説もKONOCODEでは実践しました。

KONOCODEの活用で生産性が大きく改善しました。

「基本構造はゼロから作らない」「複雑な処理は転用」。
それだけで飛躍的な高速コーディングが可能になりました。

KONOCODEをきっかけとして、私たちのコーディングのあり方は大きく変わりました。
これまでは毎回ゼロから組み進めていた構築を、header・contents(wrapper)・footerといった大きな枠だけを用意して、そこにデザインに適したレイアウトモジュールをKONOCODEで探して組み込む、という方法に変わったのです。

結果は即座に現れました。コーディングの速度が飛躍的に向上し、副次効果として「時間を使って考えないといけない難度の高い処理にしっかり時間をかけられる」ことができるようになり、生産性に大きな伸びしろを実感することができました。

フロントエンドの本質はソースコードを書くことではなく、「全体設計と各モジュールの最適な組み合わせを考えること」であると改めて気づかされました。

さらには経験の浅いエンジニアでも高度な施工ができるメリットも。

KONOCODEでご提供するソースコードは、価値のない有象無象になってしまわないために「一定以上の技量を有するエンジニアが書いたコード」を、さらに当社でも「特に経験と実績が豊富なエンジニア」が汎用的な内容に書き直したものです。
そのため、以下の点が活用する上での安心材料になります。

・ソースコードにバグや初歩的なミスがない
・ソースコードがきれい
・class命名(KONOCODEでご提供するコードは全てBEM形式です)が統一されていて使いやすい

この点から、特に経験の浅いエンジニアのコーディングに大きな影響を与えました。
「熟練した先輩エンジニアのソースをそのまま自分のコードとして使える」からです。
おおよその全体像をKONOCODEのソースコードでつくりあげ、そこから細かい作り込みに入る。当然そこには技術や専門知識が必要になりますが、以前と比べてはるかに効率よく取り組めるようになりました。
結果として、エンジニアとして成長する速度もあがりました。

これらの工程で得た知見と、つくりあげてきたKONOCODEの仕組みに対して、市場からのニーズがあるのではと考え、この度正式にサービスとしてリリースすることにしました。

フロントエンドに関わるエンジニア全ての方にぜひご活用頂けますと幸いです。