「30 seconds of code」は1つ上のコードを目指す人に見てもらいたい、宝の山

  • 2018/9/10
  • 「30 seconds of code」は1つ上のコードを目指す人に見てもらいたい、宝の山 はコメントを受け付けていません。

30 seconds of code !

こんにちは!
江嵜です!

今回は 「30 seconds of code」 というレポジトリについてご紹介させていただきます!

URL は https://github.com/Chalarangelo/30-seconds-of-code になります。

README の上の方に

Curated collection of useful JavaScript snippets that you can understand in 30 seconds or less.

との記載があります。 30 秒で理解できる JavaScript のコード集なんですね!

ちなみに、ホームページの体裁になっているものもあります。
https://30secondsofcode.org/
こちらの方が見やすいので、今回はこちらを見ていきましょう。

321 ものコードを見よ!

上部の View collection ボタンからリストを見てみます。

すると…

ズラズラーっと出てきました!

2018/9 月時点で、 321 ものコードが登録されているようです!

左側を見ると、大体の内容ごとにカテゴリ分けされていますね。

一番上から見ていくのも良し、興味があるカテゴリだけ見るのもいいですね!

どのコードも数行で完結しているので、構造が分かりやすく勉強になりますよ!

折角なので、いくつかご紹介してみましょう。

Array: everyNth

https://30secondsofcode.org/array#everynth

const everyNth = (arr, nth) => arr.filter((e, i) => i % nth === nth - 1);

配列系はラムダ式的な書き方が出来る都合上、色々と面白いものがあります。
例えばこちらは N の倍数の値を取り出すコードですね。

力業でやろうとすると for を回して、別配列に該当の値を入れて行く必要がありますが、
これならシンプルでコードも分かりやすいレベルで修正できますね。

String: CSVToArray

https://30secondsofcode.org/string#csvtoarray

const CSVToArray = (data, delimiter = ',', omitFirstRow = false) =>
  data
    .slice(omitFirstRow ? data.indexOf('\n') + 1 : 0)
    .split('\n')
    .map(v => v.split(delimiter));

CSV ファイルのテキストを配列へ格納する方法ですね。
これも知らないと結構長いコードになりそうですが、
単純に改行文字で分割した配列へ変更、さらにその中の , で分割して配列にしていることで
キレイに CSV から配列を作成できていますね。

Math: average

https://30secondsofcode.org/math#average

const average = (...nums) => nums.reduce((acc, val) => acc + val, 0) / nums.length;

平均を取るのも、一行で行けますね。
ちなみに引数の所が可変長引数になっているため、何個でも引数を渡せるのがポイントです。

Array: head

https://30secondsofcode.org/array#head

const head = arr => arr[0];

こんなのもあります。
わざわざ関数にしなくても…とも思いますが、アロー関数の使い方として見せるには面白いかな?

面白いコードを発掘してみてください!

こんな感じで、 30 seconds of code には面白いコードがたくさんあります。

皆さんもいろいろ見て、面白いコードを探してみてくださいね。

ちなみに、github で管理されているので、もちろん皆さんのコードを登録するように申請することもできますよ。

また、今回紹介したのは JavaScript 版ですが、その他にも

以上のバージョンがあります。

面接は、面談時に聞かれるような基礎問題集みたいな感じですね。
読んで勉強するもよし、出す側として参考にしてみるのも面白いのではないでしょうか。

ぜひ、皆さんも色々読んでみて、楽しんでくださいね!

Takato Ezaki

Takato Ezaki小中高の塾講師からエンジニア

投稿者プロフィール

福岡で Web 系のエンジニアをしています。

中高の理科教師免許を取り、起業に 2 年間トライした後エンジニアの道へ入りました。

化学反応の中では Belousov-Zhabotinsky 反応が大好きです。

この著者の最新の記事

関連記事

コメントは利用できません。

募集中!(o゜▽゜)o

エンジャパン
求む、社長!
follow us in feedly

コッチもヨロシク!





最近のネタ!

  1. 2019-6-14

    2019年5月度社員総会&懇親会@Nagoya

    2019年5月8日(水)、名古屋社員総会&懇親会が開催されました! 今回はその様子をわたくし、おーて…
  2. 2019-6-10

    【JavaScript・小ネタ】clearTimeout と clearInterval は同じ結果になるらしい

    JavaScript 書いてると、 「○○秒ごとに実行」 みたいなことしたくなること、よくありますよ…
  3. 2019-6-4

    2019年5月度社員総会&懇親会@東京

    はじめに 2019年5月17日(金)東京オフィスの社員総会&懇親会が開催されました! 今回はその…
  4. 2019-6-3

    【JavaScript ・ライブラリなし】ユーザーの入力からプログラムを動かそう

    javascript 書いてますか? 今までいろいろな JavaScript 記事を書いていました…
  5. 2019-5-28

    【福利厚生】おすすめ✨トスラブ箱根ビオーレ体験記!!!

    こんにちは😊 2か月ぶりの投稿の、エージェントグローのかとうさんσvσです&#x…
ページ上部へ戻る

当サイトに掲載されているコンテンツ(文書、画像等)は、許可なく複製・転用等する事を禁じます。

「フェアネス方式」は、株式会社エージェントグローが日本国内において出願中の商標です。

当サイトでは最低限必要と考えられる場合において、会社名/サービス名/商品名などを記載している場合があります。
これらはあくまでも説明の必要性に応じて用いているものであり、各社の権利等を侵害を目的とするものではございません。
不適切と考えられる場合には、当社お問い合わせフォームよりご連絡ください。

当サイトでは®や™などの表記を省略させていただいております。