js-taiso-002-twitter-1200x630-v2 (1)

JavaScriptで頭の体操をしよう!『JS体操』

『JS体操』とは、面白法人カヤックが主催するJavaScriptのコードゴルフです!JavaScriptの問題をゲーム感覚で解きながら言語仕様の理解とプログラミング能力を深める、まさに頭の体操です。
出題される問題は、JavaScriptの言語仕様を駆使するものから数学や様々なアルゴリズムを使う問題まで様々。
上級者の方からJavaScriptを使い始めたという方まで、たくさんの挑戦お待ちしています!

※コードゴルフとは、与えられたアルゴリズムを可能な限り短いソースコードで記述することを競うプログラミング競技です。ソースコードの文字数が、その人のスコアとなります。

問題 No.2『どちらの画像が横長かを比較する』

Canvas2DやWebGLなどで特定の領域に任意サイズの画像をピッタリ収めたい時などに必要なロジックです(CSSではbackground-sizeの指定で簡単にできますね)
今回の問題では、以下の要件を満たすcompare.jsをできるだけ短く書き直してください!

【要件】
2つの画像AとBが与えられた時、以下を返す。

  • AよりもBのほうが横長の時は → 負の数
  • AのほうがBよりも横長の時は → 正の数
  • AもBも同じくらい横長の時は → 0

compare.jsが要件を満たしているかどうかは「main.jsでエラーが出ないかどうか?」で判断します。つまり、main.jsのテストに合格さえすればOKです。本問題における「横長」の定義は以下の例を参考にしてください。

thumb-ex-01
thumb-ex-02
thumb-ex-03
thumb-ex-04
thumb-ex-05

目標文字数

まずは200文字以下を目指してみましょう!
今回の問題は、いろいろな方法で解けるようにしているので、みなさんに挑戦してほしい方法と目安の文字数もお伝えしておきます。

  • #正攻法:縦横具合をきちんと比較する 66文字
  • #ハック部門:比較する画像の組み合わせやテスト回数、順番から解く 33文字
  • #チート部門:console.assert()をいじる 34文字
  • #チート部門:コードの文字列を取得・整形する処理をいじる 0文字
  • #チート部門:console.log()をいじる -999文字(文字数を変えられます)

参加方法

問題ファイルをダウンロードして挑戦してください。コードを書き終えたら、サイト下部の提出フォームに提出して参加完了です。

【注意事項】

  • 推奨ブラウザはGoogle Chrome(最新版)です。提出されたコードの確認はChrome上で行います。
  • 文字数のカウントについて、JS体操ではJavaScriptの文字列のlengthプロパティの値を文字数とみなします。つまり、UTF-16のコードユニットの数を文字数とします。コードポイントや書記素クラスタの数、またJSファイルのバイト数ではないことに注意してください。
問題ファイル(ZIP)をダウンロード

参加特典(学生限定)

優秀なコード・面白いコードを提出された学生さんには「カヤックの新卒採用・インターンでの書類選考免除」特典をお送りします。希望される方はフォームの「特典を希望する」にチェックを入れてください。後日、対象者にのみご連絡差し上げます。
※学生とは、大学生・大学院生・短大生・専門学校生・高等専門学校生・高校生・中学生のいずれかであることを指します

解説・次回以降のお知らせ

問題の解答・解説をこちらのサイトで公開中です!どんな風に考えるとよかったのか、今回の問題が、どのように仕事に応用できるのかなどを解説するので、ぜひご覧ください。過去の問題・解説を見たい方はこちらをご覧ください。

以下にご登録いただくと、今後の問題や解説のお知らせが届きます。リマインドが欲しい方は、ぜひ、登録ください!

詳しい進め方

①ダウンロードしたZIPファイルを解凍し、エディタで開く

thumb-03

②ローカルHTTPサーバを介してindex.htmlを開く
index.htmlをローカルファイルとしてブラウザで開くと実行できません。ローカルHTTPサーバを介してindex.htmlを開いてください。
JSモジュールやその他ファイルの読み込みのため、
XMLHttpRequestで通信できる環境で実行する必要があるためです。VS Codeをご利用の方はLive Serverプラグインが便利です!

③ブラウザの開発者コンソールを開き、文字数やエラーを確認できるようにする

thumb-01-1

④compare.jsを編集する
コンソールにエラーがでないように、compare.jsを編集して、文字数を短くしていきましょう!

thumb-02-1

⑤コンソールにエラーがない状態になり、文字数も短くしたらいよいよ提出!
下記の提出フォームにcompare.jsの内容をコピペし送信してください。文字数のスクショを撮って#JS体操 でポストしてくれたら喜びます!

提出フォーム

コードを書き終えたら、compare.jsを下記フォームにコピペして送信してください。短くできた場合や、より良いコードが書けた時は再度提出可能です!
面白い!と思ったコードは、解説ブログにて紹介させていただきます。

面白法人カヤックとは

面白法人カヤックは、「つくる人を増やす」の経営理念のもと、面白いサービスを次々にリリースするクリエイター集団です。広告やPRの受託開発を行う『面白プロデュース事業』、ゲームの開発・運用を行う『ゲーム・エンタメ事業』、持続可能なまちづくりをジブンゴト化する『ちいき資本主義事業』などの主要事業の他、新規事業を企画・運用する環境も整っています。サイコロ給や採用キャンペーンなど、面白い組織制度にも力をいれています。

ウェブサイトはこちら

download-1

新卒・中途採用も随時実施中です!

download

Copyright (c) 2024 株式会社カヤック All rights reserved.