Room IDの取得 配信者ごとに割り当てられるIDです パターン1 一人ずつ取得 ライバーのページを取得 ライバーの配信ページを取得。この時、ライバーが配信中である必要は無いです。 例：https://www.showroom-live.com/sendaiflavor_pink_BD roomId取得 取得したソース（正確にはそのソースに展開されたJavaScript）に roomId":217603 といった部分があるので適当に抜き出します。 ChromeのConsoleで試すなら、ページを開いた状態で、以下みたいな感じで抜き出せます。 // '217603' const roomId = document.body.innerHTML.match(/roomId":(\d+)/)[1]; パターン2 イベントページで一括取得 イベントページを取得 例：https://www.showroom-live.com/event/ramen_mitani roomId取得 JQueryやcheerioが使える環境ならこんな感じで抜き出します const result = []; $('.listcardinfo').each((index, value) => { // console.log(value); const name = $(value).find(".listcardinfo-main-text").text(); const id = $(value).find("a").attr("href").replace("/", ""); const roomId = $(value).find("a").attr("data-room-id"); result.push({ name: name, id: id, // 配信ページのURL roomId: roomId }) }); イベント参加情報の取得 GETする https://www.showroom-live.com/api/room/event_and_support?room_id=${roomId} を取得します 例： https://www.showroom-live.com/api/room/event_and_support?room_id=217603 なんかこんな感じのJSONが返ってきます。配信中に取得してみると、ポイントはほぼリアルタイムで反映されてそうです。 型定義はこんな感じ。SHOWROOMそんなに詳しくないのでよくわかってないところもあります。 type EventAndSupport = { support: any; regular_event: any; event: { ranking: { /** 前回の順位 */ before_rank: number; /** 最高順位 */ max_rank: number; /** ポイント数 */ point: number; /** 次の順位とのポイント差っぽい */ gap: number; /** 空文字っぽい */ text: string; sequence_num: number; /** 配信中にアニメーション表示するかどうか */ is_animation: number; next_rank: number; /** 順位 */ rank: number; }; /** イベント名 */ event_name: string; /** イベントID */ event_id: number; quest: { /** 各ユーザが投げたポイント数を見れるURL */ contributor_list_url: string; support: { /** 達成したらtrue */ is_achieved: boolean; /** 目標ポイント */ goal_point: number; /** チュートリアルのURL */ tutorial_url: string; /** 目標のタイトル */ title: string; /** 目標固有のID */ support_id: number; /** 次のレベル */ next_level: number; /** 現在のポイント */ current_point: number; }; /** 達成項目のリスト */ quest_list: { number_of_items: number; /** @example "#ff0000" */ color: string; goal_point: number; rest_items: number; title: string; quest_level: number; is_acquired: boolean; }[]; text: any; /** 現在のレベル */ quest_level: number; }; /** イベントの説明 */ event_description: string; /** * イベント種別 * @example "quest" */ event_type: string; image: string; /** 終了時刻のUnixタイム。ミリ秒は抜いてある */ ended_at: number; /** 開始時刻のUnixタイム。ミリ秒は抜いてある */ started_at: number; /** チュートリアルのURL */ tutorial_url: string; /** イベントのURL */ event_url: string; end_animation: { value: number; trigger_time: number; type: number; }[]; }; };

久々の投稿です、 現在は、派遣でエンジニアしてます。 来年の2月からフリーランスになります！！ 次の現場では、vueを使うので勉強していて 問題にぶつかりました。 npm run build時に下記のエラーが出ました。 kushiyama_makoto@MakotonoMacBook-Air udemy-vuejs % npm run build > udemy-vuejs@0.1.0 build > vue-cli-service build ⠹ Building for production...Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:67:19) at Object.createHash (node:crypto:130:10) at module.exports (/Users/kushiyama_makoto/udemy-vuejs/node_modules/webpack/lib/util/createHash.js:135:53) at NormalModule._initBuildHash (/Users/kushiyama_makoto/udemy-vuejs/node_modules/webpack/lib/NormalModule.js:417:16) at handleParseError (/Users/kushiyama_makoto/udemy-vuejs/node_modules/webpack/lib/NormalModule.js:471:10) at /Users/kushiyama_makoto/udemy-vuejs/node_modules/webpack/lib/NormalModule.js:503:5 at /Users/kushiyama_makoto/udemy-vuejs/node_modules/webpack/lib/NormalModule.js:358:12 at /Users/kushiyama_makoto/udemy-vuejs/node_modules/loader-runner/lib/LoaderRunner.js:373:3 at iterateNormalLoaders (/Users/kushiyama_makoto/udemy-vuejs/node_modules/loader-runner/lib/LoaderRunner.js:214:10) at iterateNormalLoaders (/Users/kushiyama_makoto/udemy-vuejs/node_modules/loader-runner/lib/LoaderRunner.js:221:10) at /Users/kushiyama_makoto/udemy-vuejs/node_modules/loader-runner/lib/LoaderRunner.js:236:3 at runSyncOrAsync (/Users/kushiyama_makoto/udemy-vuejs/node_modules/loader-runner/lib/LoaderRunner.js:130:11) at iterateNormalLoaders (/Users/kushiyama_makoto/udemy-vuejs/node_modules/loader-runner/lib/LoaderRunner.js:232:2) at Array.<anonymous> (/Users/kushiyama_makoto/udemy-vuejs/node_modules/loader-runner/lib/LoaderRunner.js:205:4) at Storage.finished (/Users/kushiyama_makoto/udemy-vuejs/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16) at /Users/kushiyama_makoto/udemy-vuejs/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9 /Users/kushiyama_makoto/udemy-vuejs/node_modules/loader-runner/lib/LoaderRunner.js:114 throw e; ^ Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:67:19) at Object.createHash (node:crypto:130:10) at module.exports (/Users/kushiyama_makoto/udemy-vuejs/node_modules/webpack/lib/util/createHash.js:135:53) at NormalModule._initBuildHash (/Users/kushiyama_makoto/udemy-vuejs/node_modules/webpack/lib/NormalModule.js:417:16) at handleParseError (/Users/kushiyama_makoto/udemy-vuejs/node_modules/webpack/lib/NormalModule.js:471:10) at /Users/kushiyama_makoto/udemy-vuejs/node_modules/webpack/lib/NormalModule.js:503:5 at /Users/kushiyama_makoto/udemy-vuejs/node_modules/webpack/lib/NormalModule.js:358:12 at /Users/kushiyama_makoto/udemy-vuejs/node_modules/loader-runner/lib/LoaderRunner.js:373:3 at iterateNormalLoaders (/Users/kushiyama_makoto/udemy-vuejs/node_modules/loader-runner/lib/LoaderRunner.js:214:10) at /Users/kushiyama_makoto/udemy-vuejs/node_modules/loader-runner/lib/LoaderRunner.js:186:6 at context.callback (/Users/kushiyama_makoto/udemy-vuejs/node_modules/loader-runner/lib/LoaderRunner.js:111:13) at /Users/kushiyama_makoto/udemy-vuejs/node_modules/cache-loader/dist/index.js:240:7 at /Users/kushiyama_makoto/udemy-vuejs/node_modules/neo-async/async.js:2830:7 at done (/Users/kushiyama_makoto/udemy-vuejs/node_modules/neo-async/async.js:2865:11) at /Users/kushiyama_makoto/udemy-vuejs/node_modules/neo-async/async.js:2818:7 at Array.<anonymous> (/Users/kushiyama_makoto/udemy-vuejs/node_modules/cache-loader/dist/index.js:229:9) { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' } Node.js v17.3.0 正直わからん状態でしたが、ググった結果下記のコマンドで解決しました。 export NODE_OPTIONS=--openssl-legacy-provider nodeの設定を追加したみたいですね。 一応、下記のURLを参考にしました。 https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported 確認してみてください！！！

ことの発端 ウチの会社の業務では非同期処理が多いのです。 OSやら各種ライブラリやらのAPIなどで採用されている非同期処理はノンブロッキングI/Oとか非同期I/Oになるのですが、如何せん、そのまま使うとコードが分散したり、ネストが深くなったり、そんでもってエラー処理どうするの？的な感じになるので、なんとかならんかと思いました。 そんな中、C# では async/await なるとびきり素敵なソリューションが登場した訳ですが、C++ ではどうしようと悩んで色々と非同期ライブラリを探したところ ReactiveX に出会った訳です。 まぁ、そんなこんなで ReactiveX とは永い付き合いになったのですが、ここ２〜３年で状況が変わってきました。 というのも、Observable のメソッドチェーンが千個以上になってくると、コンパイル時間が長かったり（１行変更１０分コース、フルビルドなら１時間コース）、デバッガがクラッシュするなど、ReactiveX のデバッグって結構面倒なのに、更に開発環境が悪化することでストレスを抱えることになりました。もはや、as_dynamic()だけでは改善することができなくなりました。そのうち、PCのスペックが上がれば改善されるかとたかをくくっていたのですが、PCスペックの向上よりもメソッドチェーンの増加が上回ってしまい、開発環境は悪化の一途です。 で、「元々何をしたいのか？」と自分に問うと、「非同期処理をメンテナンスしやすくしたい」ということであって、決して ReactiveX を使いたいというモチベーションではないということです。（ReactiveXは素晴らしいのですが） そこで、もう一度、非同期処理をどうしようか考えたときに、そう言えば標準ライブラリの std::feature や std::promise があるなぁ〜と思ったのですが、どうにもしっくりこない。 せめて、Javascript の Promise 的なのが無いのか調べたところ、GitHub に何種類かあったのですが、「シングルスレッドで使ってね」的なものだったり、「そもそもスレッドセーフなのか？」みたいなのが多かったので、結局自作したというオチです。 JPromise 一応、Javascript の Promise に準拠しつつ、スレッドセーフに作りました。（作ったつもりになっているだけかも？） template <typename T, typename TT = typename std::remove_const<typename std::remove_reference<T>::type>::type> auto pvalue(T&& value, int delay = 0) -> typename Promise<TT>::sp { auto _value = std::forward<T>(value); return Promise<>::create<TT>([&_value, delay](auto resolver) { if(delay == 0) resolver.resolve(_value); else{ setTimeout([resolver, _value]() { resolver.resolve(std::move(_value)); }, delay); } }); } void test_7() { const auto r = pvalue(1, 100) ->then([](const auto& x){ log() << x << std::endl; return pvalue(x + 1, 100) ->then([](const auto& x){ log() << x << std::endl; return x + 1; }) ->then([](const auto& x){ log() << x << std::endl; return pvalue(x + 1, 100) ->then([](const auto& x){ log() << x << std::endl; return pvalue(x + 1, 100); }); }); }) ->then([](const auto& x){ log() << x << std::endl; std::stringstream ss; ss << "result = " << x << std::endl; return ss.str(); }) ->wait(); log() << r << std::endl; } Promise 破棄することで、メソッドチェーンの中断処理なんかも実装しています。 あと、異なる型の Promise を型安全にしたりしてます。 { auto p1 = pvalue(1, 900); auto p2 = pvalue<double>(1.23, 1200); auto p3 = pvalue<std::string>("abc", 500); auto p = Promise<>::all_any(p1, p2, p3) ->then([](const auto& x){ /* x = std::tuple<int, double, std::string> */ std::cout << std::get<0>(x) << std::endl; /** int 1 */ std::cout << std::get<1>(x) << std::endl; /** double 1.23 */ std::cout << std::get<2>(x) << std::endl; /** string "abc" */ assert(std::get<0>(x) == 1); assert(std::get<1>(x) == 1.23); assert(std::get<2>(x) == "abc"); }); log() << "wait 2 sec" << std::endl; std::this_thread::sleep_for(std::chrono::seconds(2)); } と、まぁ、これはこれで運用で使い込んで行こうと思うのですが、Promise は値が１個しか発行することができず、やはり、連続的にデータを捌くケースでは ReactiveX 的なのが欲しい。 ということで、恐れ多いのですが、この勢いで RxCpp とは別の RxCpp 的なのを作ってみようと考えました。 another-rxcpp RxCpp で生成されるシンボルが巨大過ぎてデバッガが死ぬという原因は、間違いなくテンプレートパラメータの第２引数以降にある（主に上流のソース（observable）の型）と考え、上流の型を関数オブジェクトでくるんでしまう手法で実装してみました。つまり、多くは固定的なテンプレートパラメータになるため、テンプレートの具体化時のコストも減るし、シンボルもそう長くならないのではと夢見てます。（もしかすると関数オブジェクトの生成量が増えてしまい、結果、夢に終わるかも知れませんが。。。） template <typename T, typename TT = typename std::remove_const<typename std::remove_reference<T>::type>::type> auto ovalue(T&& value, int delay = 0) -> observable<TT> { auto _value = std::forward<T>(value); return observable<>::create<TT>([_value, delay](subscriber<TT> s) { if(delay == 0){ s.on_next(std::move(_value)); s.on_completed(); } else{ setTimeout([s, _value]() { s.on_next(std::move(_value)); s.on_completed(); }, delay); } }); } template <typename T> auto doSubscribe(T source) { log() << "doSubscribe" << std::endl; return source.subscribe({ .on_next = [](auto&& x) { log() << " [on_next] " << x << std::endl; }, .on_error = [](std::exception_ptr err) { log() << " [on_error] " << std::endl; }, .on_completed = []() { log() << " [on_completed] " << std::endl; } }); } void test_observable() { log() << "test_observable -- begin" << std::endl; { log() << "#1" << std::endl; auto ob = ovalue(123) | flat_map([](int&& x){ log() << x << std::endl; return ovalue(std::string("abc")) | map([](std::string&& x){ log() << x << std::endl; return 456; }); }); doSubscribe(ob); } { auto ob = ovalue(1) | flat_map([](int&& x){ log() << x << std::endl; return ovalue(std::string("abc"), 500); }) | flat_map([](std::string&& x){ log() << x << std::endl; return ovalue(5); }) | flat_map([](int&& x){ log() << x << std::endl; return ovalue(x + 1, 500); }) | flat_map([](int&& x){ log() << x << std::endl; return ovalue(x + 1); }); { log() << "#2 wait with notify_on_unsubscribe()" << std::endl; auto x = doSubscribe(ob); std::mutex mtx; std::unique_lock<std::mutex> lock(mtx); x.unsubscribe_notice()->wait(lock, [x](){ return x.is_subscribed(); }); } { log() << "#3 wait until is_subscribed() == true" << std::endl; auto x = doSubscribe(ob); while(x.is_subscribed()) {} } } } void test_subject() { log() << "test_subject -- begin" << std::endl; auto sbj = std::make_shared<subjects::subject<int>>(); std::weak_ptr<subjects::subject<int>> weak_sbj = sbj; std::thread([weak_sbj]() mutable { for(int i = 0; i < 100; i++){ std::this_thread::sleep_for(std::chrono::seconds(1)); auto p = weak_sbj.lock(); if(p) p->as_subscriber().on_next(i); } auto p = weak_sbj.lock(); if(p) p->as_subscriber().on_completed(); }).detach(); wait(2500); auto s1 = doSubscribe(sbj->as_observable()); wait(1000); auto s2 = doSubscribe(sbj->as_observable()); wait(1000); auto s3 = doSubscribe(sbj->as_observable()); wait(500); s1.unsubscribe(); wait(500); s2.unsubscribe(); wait(500); s3.unsubscribe(); wait(1000); auto s4 = doSubscribe(sbj->as_observable()); wait(2000); sbj.reset(); log() << "test_subject -- end" << std::endl << std::endl; } ヨチヨチですが、まぁ動いています。（苦笑） こちらは、もう少しオペレータを追加しないと業務では使い物にならないので、絶賛コーディング中になりますが、ある程度実装が終わったら現状の RxCpp と置き換えてみてコンパイル速度やデバッガの負荷などみてみたいと思います。 ただ、本家の RxCpp のデバッガに優しい感じになってきたら、元サヤに戻ろうかと。

　No　 目次 　1　 はじめに 　2　 for文とwhile文 　3　 for文を使ってループ処理を行う場合 　4　 while文を使ってループ処理を行う場合 　5　 お約束 　6　 おわり　　　　　　　　　　　 はじめに 同じような処理を毎回書いていると、はっきり言って効率が悪いです。 そんな時に繰り返し処理をしてくれるのがfor文とwhile文です。 とても便利ですが、少し怖い部分もありますので、 繰り返し処理を行う際に絶対に意識するお約束についても解説していきます。 for文とwhile文 0から10までの数字が表示されるプログラムをfor文を使った場合とwhile文を作った場合の2種類のケースを紹介します。 どちらを使ってもこちらのように表示できます↓ for文を使ってループ処理を行う場合 HTMLはこのようになっています↓ HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>for</title> </head> <body> <script src="for.js"></script> </body> </html> JavaScriptはこのようになっています↓ JavaScript for (let i = 0; i < 11; i++) { document.write(i + '<br>'); } 仕組みを見てみましょう↓ 仕組み // ------------------------------------ // for(初期化; 繰り返し; 更新処理){ // 繰り返したい処理 // } // ------------------------------------ それでは、解説をしていきます。 for (初期化; 条件; 更新処理;) と記載します。 初期化は、ループをカウントする変数を基本的に定義します。 ここで定義した変数はその for 文内でしか使えません。 条件は、どこまでループするのかを定義します。 この条件が満たされればループは終了します。 又、満たされなければ無限にループを続けます。 変化は、1回ループが完了する毎に実行されます。 現在は、10より大きい値が出力されていませんので正しくwhile文の条件式を処理し終了したことがわかります。 while文を使ってループ処理を行う場合 HTMLはこのようになっています↓ HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>while</title> </head> <body> <script src="while.js"></script> </body> </html> JavaScriptはこのようになっています↓ JavaScript let i = 0; while (i < 11) { document.write(i + '<br>') i++; } 仕組みを見てみましょう↓ 仕組み while (条件式) { 実行する処理; } それでは解説していきます。 whileのカッコ内にある条件式が正（true)の間はwhile内の処理を繰り返し実行します。 条件式が誤り(false)になった場合にはwhile文を抜けて次の処理に移ります。 又、for文と同じで10より大きい値が出力されていませんので、 正しくwhile文の条件式を処理し終了したことがわかります。 お約束 ⚠️ i++のように数値を増やす処理を絶対に書き忘れないようにしてください 「i++」という後値インクリメントを使い、変数の値を一ずつ増やします。 書き忘れると無限にループが起こり、パソコンに負担がかかり、 最悪の場合パソコンがクラッシュします。 必ずtrueがfalseになる(更新処理が終わる)ようにしましょう。 それでも無限ループが起きた際にはブラウザを強制終了しましょう！ おわり ご覧いただきありがとうございました。 また他の記事でお会いしましょう〜?

タイトル通りです．筆者過去まとめ記事と趣旨は同じなのですが，一説に『ネット上のエラトステネスの篩のプログラムの大半がエラトステネスの篩じゃない』というのがあるらしく，その割合を少しでも減らす，という目論見もあったりします．なにそれ． 初版で用意した各言語記述例については，とりあえずWikipediaの説明に沿っているつもりですが，上記の記事の趣旨から，それちげーよというツッコミ大歓迎．また，最初にPython版を作成してそれを基に各言語に書き換えたという経緯から，各言語の特徴を活かした，よりシンプルでわかりやすい記述例も大募集．ただし，次の条件を満たすプログラムとします． アルゴリズムが『エラトステネスの篩』であること． 1から一億までの範囲の素数を一旦求め，その中で最大の素数（99999989）を出力すること． 差し替える際には，当方の次の環境で実行を確認することにしています．なお，非力なハードウェアなのはわざとです(^^;)．この環境で実行できる限り，他のプログラミング言語の記述例も募集中． ASUS Zenfone 5: Qualcomm Snapdragon 636 1.8GHz, 6GBメモリ Android 9 + Termux + Debian GNU/Linux 10 + 各言語処理系 $ uname -a Linux localhost 4.4.141-perf+ #1 SMP PREEMPT Fri Jul 10 17:48:58 CST 2020 aarch64 GNU/Linux 各言語記述例 Python sieve.py from numpy import ones, sqrt, arange x = int(input()) a = ones(x+1, dtype=bool) a[0:2] = False for i in range(2, int(sqrt(x))+1): if a[i]: a[i*i::i] = False print((arange(x+1)[a])[-1]) Python3.7.3+NumPy1.16.2 $ time python3 sieve.py <<< 100000000 99999989 real 0m6.905s user 0m5.260s sys 0m2.140s Ruby sieve.rb x = gets.to_i a = Array.new(x+1, true) a[1] = false 1.upto(x**0.5) { |i| if a[i] (i*i).step(x, i) { |j| a[j] = false } end } r = [] 1.upto(x) { |i| if a[i] then r.push(i) end } p r[-1] Ruby2.5.5 $ time ruby sieve.rb <<< 100000000 99999989 real 0m55.606s user 0m53.630s sys 0m0.870s JavaScript sieve.js let x; if (process.argv.length < 3) x = 10000000; else x = Number(process.argv[2]); let a = new Array(x+1).fill(true); a[1] = false; for (i = 1; i*i <= x; i++) if (a[i]) for (j = i*i; j <= x; j += i) a[j] = false; let r = []; for (i = 1; i <= x; i++) if (a[i]) r.push(i); console.log(r.slice(-1)[0]); Node.js10.24.0 $ time node sieve.js 100000000 99999989 real 0m35.230s user 0m33.300s sys 0m1.310s C言語 sieve.c #include <stdio.h> #include <stdlib.h> #include <stdbool.h> int main(int argc, char *argv[]) { int x = 100000000; if (argc > 1) x = atoi(argv[1]); bool *a = calloc(sizeof(bool), x + 1); a[1] = true; for (int i = 1; i * i <= x; i++) if (!a[i]) for (int j = i * i; j <= x; j += i) a[j] = true; unsigned int c = 0; for (int i = 1; i <= x; i++) if (!a[i]) c++; unsigned int *r = calloc(sizeof(unsigned int), c + 1); for (int i = 1; i <= x; i++) if (!a[i]) { r[c] = i; c--; } printf("%u\n", r[1]); return 0; } gcc8.3.0 $ gcc -O2 -o sieve sieve.c $ time ./sieve 100000000 99999989 real 0m4.061s user 0m3.920s sys 0m0.090s Scheme sieve.scm (define (sieve x) (let ((a (make-vector (+ x 1) #t)) (s (sqrt x))) (vector-set! a 1 #f) (let loop1 ((i 1)) (if (<= i s) (if (vector-ref a i) (let loop2 ((j (* i i))) (cond ((<= j x) (vector-set! a j #f) (loop2 (+ j i))) (else (loop1 (+ i 1))))) (loop1 (+ i 1))))) (let loop ((i 0) (r '())) (if (<= i x) (if (vector-ref a i) (loop (+ i 1) (cons i r)) (loop (+ i 1) r)) r)))) (display (car (sieve (read)))) (newline) Gauche0.9.11-p1 $ time gosh sieve.scm <<< 100000000 99999989 real 0m32.206s user 0m31.180s sys 0m0.550s Julia sieve.jl x = parse(Int, readline()) a = trues(x) a[1] = false for i in 2:isqrt(x) a[i] && (a[i*i:i:x] .= false) end println((1:x)[a][end]) Julia1.0.3 $ time julia sieve.jl <<< 100000000 99999989 real 0m3.354s user 0m2.950s sys 0m1.460s R sieve.r f <- file("stdin", "r") x <- as.numeric(readLines(f, 1)) a <- 1:x a[1] <- 0 for (i in 2:floor(sqrt(x))) if (a[i]) a[i:(x %/% i)*i] <- 0 r <- a[a > 0] r[length(r)] R3.5.2 $ time R -f sieve.r --slave <<< 100000000 [1] 99999989 real 0m18.204s user 0m14.550s sys 0m4.180s 備考 更新履歴 2021-12-31：各言語間で変数名を可能な限り統一 2021-12-31：C言語版の実行確認を修正（コメントより） 2021-12-31：R版を追加（コメントより） 2021-12-31：添字の扱い等について各言語版に修正 2021-12-31：実行確認を『1から一億までの範囲の素数』に変更 2021-12-31：Julia版を追加（コメントより） 2021-12-30：Python版を変更（コメントより） 2021-12-30：初版公開（Python，Ruby，JavaScript，C言語，Scheme）

タイトル通りです．筆者過去まとめ記事と趣旨は同じなのですが，一説に『ネット上のエラトステネスの篩のプログラムの大半がエラトステネスの篩じゃない』というのがあるらしく，その割合を少しでも減らす，という目論見もあったりします．なにそれ． 初版で用意した各言語記述例については，とりあえずWikipediaの説明に沿っているつもりですが，上記の記事の趣旨から，それちげーよというツッコミ大歓迎．また，最初にPython版を作成してそれを基に各言語に書き換えたという経緯から，各言語の特徴を活かした，よりシンプルでわかりやすい記述例も大募集．ただし，次の条件を満たすプログラムとします． アルゴリズムが『エラトステネスの篩』であること． 1から一億までの範囲の素数を一旦求め，その中で最大の素数（99999989）を出力すること． 差し替える際には，当方の次の環境で実行を確認することにしています．なお，非力なハードウェアなのはわざとです(^^;)．この環境で実行できる限り，他のプログラミング言語の記述例も募集中． ASUS Zenfone 5: Qualcomm Snapdragon 636 1.8GHz, 6GBメモリ Android 9 + Termux + Debian GNU/Linux 10 + 各言語処理系 $ uname -a Linux localhost 4.4.141-perf+ #1 SMP PREEMPT Fri Jul 10 17:48:58 CST 2020 aarch64 GNU/Linux 各言語記述例 Python sieve.py from numpy import ones, sqrt, arange x = int(input()) a = ones(x+1, dtype=bool) a[0:2] = False for i in range(2, int(sqrt(x))+1): if a[i]: a[i*i::i] = False print((arange(x+1)[a])[-1]) Python3.7.3+NumPy1.16.2 $ time python3 sieve.py <<< 100000000 99999989 real 0m6.905s user 0m5.260s sys 0m2.140s Ruby sieve.rb x = gets.to_i a = Array.new(x+1, true) a[1] = false 1.upto(x**0.5) { |i| if a[i] (i*i).step(x, i) { |j| a[j] = false } end } r = [] 1.upto(x) { |i| if a[i] then r.push(i) end } p r[-1] Ruby2.5.5 $ time ruby sieve.rb <<< 100000000 99999989 real 0m55.606s user 0m53.630s sys 0m0.870s JavaScript sieve.js let x; if (process.argv.length < 3) x = 10000000; else x = Number(process.argv[2]); let a = new Array(x+1).fill(true); a[1] = false; for (i = 1; i*i <= x; i++) if (a[i]) for (j = i*i; j <= x; j += i) a[j] = false; let r = []; for (i = 1; i <= x; i++) if (a[i]) r.push(i); console.log(r.slice(-1)[0]); Node.js10.24.0 $ time node sieve.js 100000000 99999989 real 0m35.230s user 0m33.300s sys 0m1.310s C言語 sieve.c #include <stdio.h> #include <stdlib.h> #include <stdbool.h> int main(int argc, char *argv[]) { int x = 100000000; if (argc > 1) x = atoi(argv[1]); bool *a = calloc(sizeof(bool), x + 1); a[1] = true; for (int i = 1; i * i <= x; i++) if (!a[i]) for (int j = i * i; j <= x; j += i) a[j] = true; unsigned int c = 0; for (int i = 1; i <= x; i++) if (!a[i]) c++; unsigned int *r = calloc(sizeof(unsigned int), c + 1); for (int i = 1; i <= x; i++) if (!a[i]) { r[c] = i; c--; } printf("%u\n", r[1]); return 0; } gcc8.3.0 $ gcc -O2 -o sieve sieve.c $ time ./sieve 100000000 99999989 real 0m4.061s user 0m3.920s sys 0m0.090s Scheme sieve.scm (define (sieve x) (let ((a (make-vector (+ x 1) #t)) (s (sqrt x))) (vector-set! a 1 #f) (let loop1 ((i 1)) (if (<= i s) (if (vector-ref a i) (let loop2 ((j (* i i))) (cond ((<= j x) (vector-set! a j #f) (loop2 (+ j i))) (else (loop1 (+ i 1))))) (loop1 (+ i 1))))) (let loop ((i 0) (r '())) (if (<= i x) (if (vector-ref a i) (loop (+ i 1) (cons i r)) (loop (+ i 1) r)) r)))) (display (car (sieve (read)))) (newline) Gauche0.9.11-p1 $ time gosh sieve.scm <<< 100000000 99999989 real 0m32.206s user 0m31.180s sys 0m0.550s Julia sieve.jl x = parse(Int, readline()) a = trues(x) a[1] = false for i in 2:isqrt(x) a[i] && (a[i*i:i:x] .= false) end println((1:x)[a][end]) Julia1.0.3 $ time julia sieve.jl <<< 100000000 99999989 real 0m3.354s user 0m2.950s sys 0m1.460s R sieve.r f <- file("stdin", "r") x <- as.numeric(readLines(f, 1)) a <- 1:x a[1] <- 0 for (i in 2:floor(sqrt(x))) if (a[i]) a[i:(x %/% i)*i] <- 0 r <- a[a > 0] r[length(r)] R3.5.2 $ time R -f sieve.r --slave <<< 100000000 [1] 99999989 real 0m18.204s user 0m14.550s sys 0m4.180s Common Lisp sieve.lisp (defun sieve (x) (let ((a (make-array (+ x 1) :initial-element t)) (s (sqrt x))) (setf (aref a 1) nil) (do ((i 1 (+ i 1))) ((> i s)) (if (aref a i) (do ((j (* i i) (+ j i))) ((> j x)) (setf (aref a j) nil)))) (do ((i 0 (+ i 1)) (r '() (if (aref a i) (cons i r) r))) ((> i x) r)))) (princ (car (sieve (read)))) (terpri) SBCL1.4.16 $ time sbcl --script sieve.lisp <<< 100000000 99999989 real 0m21.725s user 0m18.960s sys 0m1.740s 備考 更新履歴 2021-01-01：Common Lisp版を追加 2021-12-31：各言語間で変数名を可能な限り統一 2021-12-31：C言語版の実行確認を修正（コメントより） 2021-12-31：R版を追加（コメントより） 2021-12-31：添字の扱い等について各言語版に修正 2021-12-31：実行確認を『1から一億までの範囲の素数』に変更 2021-12-31：Julia版を追加（コメントより） 2021-12-30：Python版を変更（コメントより） 2021-12-30：初版公開（Python，Ruby，JavaScript，C言語，Scheme）

SymbolのテストネットでフルオンチェーンNFTを作る方法を解説します。 この記事で解説しないこと トークンの作成方法 ウォレットで作成してください NFTデータのエンコード方法 Base64でエンコードしてください テストネット アカウント準備 alice = sym.Account.generateNewAccount(sym.NetworkType.TEST_NET); "https://testnet.symbol.tools/?recipient=" + alice.address.plain() +"&amount=10" データ分割 Base64でエンコードされたNFTデータを分割してmessagesという配列に格納します。 nftdata = "UGGUGUUAUUAAUGGUUU"; let messages = []; for (let i = 0; i < nftdata.length / 3; i++) { messages.push(nftdata.substr(i * 3, 3)); } console.log(messages); 今回はサンプルとして"UGGUGUUAUUAAUGGUUU"という文字列を3文字ずつに分割しています。 直接RawDataを扱いたい場合はこちらの記事を参考にしてください。 トランザクション作成 配列の数だけトランザクションを作成して、アグリゲートトランザクションに集約させます。 createTx = function(publicAccount,message){ return sym.TransferTransaction.create( sym.Deadline.create(epochAdjustment), publicAccount.address, [], sym.PlainMessage.create(message), networkType ); } aggregateArray = Array(); for(message of messages){ 　　　tx = createTx(alice,message); aggregateArray.push(tx.toAggregate(alice.publicAccount)); } console.log(aggregateArray); aggregateTx = sym.AggregateTransaction.createComplete( sym.Deadline.create(epochAdjustment), aggregateArray, networkType,[] ).setMaxFeeForAggregate(100,0); 今回はaliceがalice自身にNFTデータを送信するトランザクションにしています。 一般的にNFTはメタデータにNFT本体のハッシュ値を記録しますが、今回は改ざんできないトランザクションメッセージ内にNFTデータを記録します。 署名＆アナウンス トランザクションに署名して、ネットワークに通知します。 signedTx = aggregateTx.signTransactionWithCosignatories( alice,[],generationHash); txRepo.announce(signedTx); "https://testnet.symbol.fyi/transactions/" + signedTx.hash; 結果

はじめに javascriptで時間を表示するプログラムの作り方です。 時間を取得するメソッド まず、今回使用するメソッドを確認しましょう。 項目 メソッド名 時 getHours( ) 分 getMinutes( ) 秒 getSeconds( ) ↑の3種類のメソッドを変数の中に入れ込んで時間を取得していきます。 次にHTMLはこのようになっています↓ HTML <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="time.js"></script> </body> </html> JavaScriptはこのようになっています↓ javascript // 現在の時間を表示 //---------------------------------------------------------------------------- //Dateインスタンスを作成すると、現在の時刻を示すDateオブジェクトのインスタンスが作成されます↓ //---------------------------------------------------------------------------- const now = new Date(); const hours = now.getHours(); const minutes = now.getMinutes(); const seconds = now.getSeconds(); document.write(hours + ':' + minutes + ':' + seconds); それでは解説していきます。 まず、変数名nowの中にnew Date( )を代入します。 次に変数名hoursを作ってnow.getHours();を代入します。 変数名minutesにはnow.getMinutes();を代入し、 変数名secondsにはnow.getSeconds();を代入します。 最後にdocument.write(hours + ':' + minutes + ':' + seconds);の部分は、 「ドキュメントの中に(時:分:秒)を書き出してくださいね」という指示をしているということです。 そして、このように時間が表示されていて、ブラウザを読み込むたびに変化します↓ おわり ご覧いただきありがとうございました。 また他の記事でお会いしましょう〜?

はじめに JavaScriptのイベント処理の一例をご紹介します。 内容 今何時？と記されているボタンをクリックすると、 私の名前はDOMですの文章が13時ですに変わるイベントです。 HTMLはこちらになります↓ html <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>event</title> </head> <body> <p id="message"></p> <div><button id="btn1">今何時?</button></div> <script src="event.js"></script> </body> </html> 次にJavaScriptはこちらになります↓ 説明も合わせて記載しています。 JavaScript // ---------------------------------------------------------------------------- // ↓ドキュメントの中にあるid名messageをquerySelectorで取得してHTMLの内容を書き換えた // ---------------------------------------------------------------------------- document.querySelector('#message').innerHTML = '私の名前はDOMです'; // --------------------------------------------------------- // ↓btn1がクリックされた時にmessaを13時ですに書きかえる処理 // --------------------------------------------------------- document.querySelector('#btn1').addEventListener('click', () => { document.querySelector('#message').innerHTML = '13時です'; }); おわり ご覧いただきありがとうございました。 また別の記事でお会いしましょう〜?

はじめに 先輩から「オブジェクトフリーズしておいて」と言われハテナ過ぎたので調べました。 こちらの記事↓を見たら分かりやすいのですが、constでオブジェクトを定義してもオブジェクトの子要素は追加・削除したりできちゃうのって、罠ですよね。。 それを'Object.freeze'メソッドが解決してくれるようです！ https://qiita.com/hosomichi/items/093aadcd8891c86e9dda#%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E5%A4%89%E6%9B%B4 Object.freezeとは Object.freeze() メソッドはオブジェクトを凍結します。凍結されたオブジェクトは変更できなくなります。オブジェクトを凍結すると、新しいプロパティを追加したり、既存のプロパティを削除したりすることができなくなり、既存のプロパティに対する列挙可否、構成可否、書き込み可否の変更ができなくなり、既存のプロパティの値が変更できなくなります。 なるほどつまり、定数みたいな以降値を変更したくないものは凍結しておくと良いのかな。 とりあえず、使ってみよう。 ◆Object.freezeなし const FRUITS = { FIRST: 'banana', SECOND: 'apple', }; console.log(FRUITS.FIRST); // => banana // 変更する FRUITS.FIRST = 'minion'; console.log(FRUITS.FIRST); // => minion // 追加する FRUITS.THIRD = 'grape'; console.log(FRUITS.THIRD); // => grape ◆Object.freezeあり const FRUITS_FREEZE = Object.freeze({ FIRST: 'banana', SECOND: 'apple', }); // 変更する FRUITS_FREEZE.FIRST = 'minion'; console.log(FRUITS_FREEZE.FIRST); // => banana // 追加する FRUITS_FREEZE.THIRD = 'grape'; console.log(FRUITS_FREEZE.THIRD); // => undefind おー！Object.freezeメソッドを使うことで 一度constで定義した定数の変更ができなくなりました！ 参考: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze

はじめに こんにちは！ 今回は前回の記事の続き、midllewareを使用してのログイン判別についてアウトプットしていきます！ 対象 ・未ログインではアクセスできないページの設定を行いたい方 ・firebaseを使用してのユーザー登録、ログイン/ログアウト機能の実装を行いたい方 ・前回の記事までの内容がお済みの方 今回の記事の参考記事はこちら 使用環境 使用技術 バージョン nuxt.js 2.15.7 firebase 9.6.1 firebase-tools 9.23.3 @nuxtjs/tailwindcss 4.2.0 使用ファイル,概要 ファイル名 概要 middleware/authenticated.js ログイン前後のリダイレクト処理 pages/diagonse.vue 診断ページ pages/recordlist.vue メモ一覧ページ pages/record.vue メモページ pages/result.vue 診断結果表示ページ pages/top.vue ログイン後表示TOPページ plugins/firerbase.js firebase導入 store/index.js ログインデータの管理&保持 middlewareとは middleware（ミドルウェア）には、ページをレンダリングする前に実行する関数を指定します。 一番初めに実行される処理です。（ライフライクルは、nuxtServerInitの後、asyncDataの前に実行されます。） ファイルは「PORTFOLIOファイル?middlewareファイル?authenticated.js」で管理します。 middlewareの指定方法 middlewareの指定方法は全部で３つあります。 ①プロジェクト全体で指定する ②特定のページで指定する ③特定のページで関数を指定する 今回は多くのページ遷移で呼び出すので①プロジェクト全体で指定する方法で実装していきます。 nuxt.config.js router: { middleware: "authenticated" // 複数ファイル指定の場合は配列で // middleware: ['authenticated', 'stats'] } ①プロジェクト全体で指定する方法で呼び出す場合は、nuxt.config.jsに登録します。 登録方法は、router.middlewareプロパティにファイル名を文字列で指定します。 実装 middleware/authenticated.js export default function ({ store, route, redirect }) { const userLogin = store.state.user.login console.log(userLogin) if (userLogin) { //ログインしているとき if (route.name === "login") { return redirect("/top") } } else { //ログインしていないとき → diagnose, recordlist, result, top, recordは入れない if (route.name === "diagnose" || route.name === "recordlist" || route.name === "result" || route.name === "top" || route.name === "record") { return redirect("/login") } } } ・定数userLoginを定義し、store.state.user.loginを代入。console.logで状態を確認できるようにする。 ・ログインに成功していて、routeの名前がloginの時、TOPページにリダイレクトされる。 ?この時stateにはlogin: tureとなっている。 ・もしログインしていない状態(false)だった場合、diagnose, recordlist, result, top, recordページには入れず、loginページへリダイレクトされる。 動作確認 login: trueの場合 ①ログインページへアクセスし、ログインを成功させTOPページへリダイレクト ②ヘッダーにあるメモをクリックしメモページへアクセス アクセス成功の処理が確認されました！ login: falseの場合 ①console.logでlogin:falseが確認されました ②loginページのURLを書き換え、recordページ（メモページ）にアクセスしてみる ③login: falseのためmiddleware/authenticated.jsのelse文が働き、メモページにアクセスしようとしてもログインページへリダイレクトされる アクセス失敗の処理が確認できました！ まとめ 今回はログイン前後のリダイレクト処理をmiddlewareで実装について記事にしました。 今後も引き続きQiitにポートフォリオ制作での学びをアウトプットしていきます！ 今回の記事を読んで質問、間違い等あればコメント等頂けると幸いです。 最後までご愛読ありがとうございました！

Android端末でChromeのデベロッパーツールを使いたいとき、USBデバッグでパソコンから操作する方法が一般的に有名です。 Chrome DevToolをスマホだけで使う方法を紹介します。出先でパソコン開くスペース無い！ってときに参考に… 概要 Chromium系のカスタムブラウザKiwi Browserを使うだけ！ kiwi browserは拡張機能をAndroidで動かす際に使うアプリで有名ですが、実はChrome DevToolが標準で搭載されています。 使いみち Webサイトで気になるアニメーションとかあったら調べたくなりますよね？ そんなとき、 電車の中… 手打ちHTMLじゃなくてview-source:じゃ確認できない コードがMinifyされてる こんな時に使えると思います。覚えておいて皆さん電車でドヤ顔でDevTool開きましょう。 使い方 普通にページにアクセスして、三点リーダーのメニューを出すとあらまぁ「Developer Tools」があります。以上。 タブもちゃんと押せるますし、なんなら律儀にダークテーマにも対応してます。 Lighthouseは割と高確率で使えないです。 良いお年を。私はコミケに行けません

やっぱり失敗しちゃいますよね？ stackoverflow, Qiita記事のコピぺ エラーを解決できずに、数時間死にたくなる ゴミコードを書いてしまい、デバックで苦労する。などなど。 こんにちは！新米エンジニアのりゅうです。今日から、新年の抱負の一つである、エンジニアとしてのスキル、知名度をあげる。それを達成するためのto doとして、キータ記事の週一更新をやっていこうと思います（まだ、新年ではないのにフライングしている事はすみません笑） 記念すべき、第一投稿としましては、僕がエンジニアとして働いていた中での失敗点を列挙させていただきます。 技術的な失敗 1. チュートリアルやstackoverflow記事のコピぺ エンジニアなら一度は経験があると思う コピペ 問題点 + コードを説明できない。 + エラーが発生した時に、なぜエラーになったのかわからない。 + コピペしたので、コードの書き方、意味を憶えない。同じ課題に直面した時にまた調べないといけない。 改善点 + ライブリー、フレームワークを使用する時は一度公式のdocumentをしっかりと読む。 + エラーが発生した時にstackoverflowなどで解決策をしらべるのはいいが、なぜ、それがエラーになったのか、どのように解決したのかをしっかりと理解する。 2. 雑なエラーハンドリング、ログを残さない。 独自エラーの作成が一番めんどくさくないですか？ 問題点 + ログを書かかないと、コードが長くなった時にどのコードの前後にエラーが発生して処理が止まったのかがわからない。 + エラーをしっかり書かないと、チーム開発の際に、発生したエラーが無視していいものなのか、そうでないのかがわからず無駄に時間をかけてしまう。 改善点 + 複雑or大事な処理を行う際はlogを残すようにする。 + 発生したエラーに対して、どのようなエラーなのかを簡単にざっくりと理解できるようなエラーメッセージを残す。 + Not implementedを使用する。 3. 型を指定しない、docsを書かない docsを書くのめんどくさいですよね。 問題点 + 型を指定せず、関数の引数を定義する。 + docsを書かかないで関数を定義すると、どのようなデータを入力して、何が帰って来るのかがわからないので、エラーになった時、解決に時間がかかる。 + 複雑な関数の場合、理解するのに時間がかかる。 改善点 + 常に型を指定する(Typescriptの使用など） + Docs generatorを使用して、短時間にわかりやすいdocsを書く。 精神的な失敗 1. 質問を怖がる 質問するのって勇気がいると思いませんか？ 問題点 + エラーが発生した時など、質問するのを躊躇って、無駄に時間を消費してしまう。 改善点 + とにかく、具体的でわかりやすく、解決方を提示しやすい質問を作成して、質問をする相手が嫌がらないような質問をする。 + 勇気を出す。 2. 100点のものを最初から作ろうとする。 完璧を目指したいですよね...。 問題点 + 時間がかかってしまう。 + 自分の視点で完璧なものは他の視点から見た時に完璧でないことが多い。 改善点 + 70点のものができたら、一度feedbackをもらうようにする。 + 一度に完璧なものを作るのではなく、徐々に完璧にしていくようにする。 最後に 拙い文章ですが、以上で締めたいと思います。最後まで読んでいただきありがとうございました！ 本当に僕個人の反省点のまとめになったのですが、僕の失敗が誰かのやく立つことを祈っています。

私にとって、本やオンラインコースは、Webデザインと開発の専門性を学び改善する上で非常に役立つリソースと見なすことができます。 それは、学習プロセスにおける著者の経験の統合であり、その知識を実際のプロジェクトに適用するためです。 価格を見ずにスキルを伸ばすための最高のコーディング本やコースを購入できるのであれば、これ以上の方法はありません。 でも、例えば、学生の頃は最初は収入がなかったので、プログラミングの本を買うのにお金をかけるのは大変でした。 そのため、私たちは通常、経済を気にせずに専門家から無料の電子書籍やコーディングコースを収集しています。 私の投稿では、私が収集した無料のHTML、CSS、およびJavascriptの電子書籍を紹介します。 うまくいけば、それはWeb開発プロセスであなたを助けるでしょう。 （余裕があれば、本を購入するか、これらの電子書籍の著者をサポートする必要があります！） Free HTML, CSS Ebooks Learn to Code HTML & CSS Link Website HTML5 Notes for Professionals book Link Website Htmldog Link Website CSS Animation Link Website Web Visual Effects with CSS3 Link Website The Magic Of CSS Link Website HTML & CSS Is Hard Link Website DIVE INTO HTML5 Link Website Dash Link Website MaintainableCSS Link Website MarkSheet Link Website Enduring CSS Link Website HTML Canvas Deep Dive Link Website Code Guide Link Website A Guide to HTML5 and CSS3 Link Website Understanding Flexbox Link Website Free Ebooks Javascript Eloquent JavaScript Link Website JavaScript (ES2015+) Enlightenment Link Website JavaScript® Notes for Professionals book Link Website JavaScript Garden Link Website JavaScript Info Link Website The Odin Project Link Website JS Books Link Website Robust Client-Side JavaScript Link Website Front-End Web Apps with Plain JavaScript Link Website Human JavaScript Link Website Learn JS Link Website Courses HTML, CSS, Javascript Free Foundations of Front-End Web Development Link Website Web Development By Doing: HTML / CSS From Scratch Link Website Master the Basics of HTML5 & CSS3: Beginner Web Development Link Website Learn HTML5 and CSS3 From Scratch Link Website Learn JavaScript (Code Cademy) Link Website Computer programming (Khan Academy) Link Website Javascript Essentials Link Website 詳細については、en.niemvuilaptrinh.comをご覧ください。

はじめに クロージャーの概念や実装をまとめます。 定義 クロージャー:外的スコープの変数を関数が参照を保持する仕組みのこと 具体例 main.js const incrementCountFactory = () => { let count = 0; const incrementCount = () => { count++; console.log(`${count}回目です`) } return incrementCount; } const incrementCount = incrementCountFactory(); incrementCount(); // 1回目です incrementCount(); // 2回目です incrementCount(); // 3回目です incrementCountFactory:countという変数とincrementCount関数を定義。戻り値はincrementCount関数を返す incrementCount:外的スコープの変数countを使用してcountに1を追加する関数 おわりに メモリやガベージコレクションのことも追記していきたい。 参考

目次 　No　 目次 　1　 はじめに 　2　 if文（条件分岐）って？ 　3　 if , else , else if 　4　 if文の例 　5　 比較演算子 　6　 終わり　　　　　　　　　　　 はじめに JavaScriptにこの記事では触れていきます。 比較演算子の種類と実例も記しています。 if文（条件分岐）って？ JavaScriptで条件の分岐処理を記述するにはif文を使います。 if文を使うことにより、 「もし○○だったらパターンA、○○だったらパターンB、それ以外はパターンC」 　　　　　　　　　　　　　　↑ このように条件によって処理を分岐することが出来るのがif文です。 条件はif , else , else ifの3種類を使い分けて分岐します。 (else ifはいくつでも使えます。) 下の(例)は1+1の問題に対してユーザが入力をした数字に対し、 ・2なら正解 ・1ならまさかの掛け算！？ ・1と2以外の数字がユーザから入力された時に不正解です... 下の例は上の3パターンの回答をユーザに伝えるためのプログラムをわかりやすくしたものです。 ↓（例） (1+1の答えは？) もし (答え == ユーザが2と入力した時) { 表示('正解!'); } それとも (答え == ユーザが1と入力した時){ 表示('まさかの掛け算！？'); } それ以外 { 表示('不正解です...'); } 上の(例)をしっかりとJavaScriptの構文にした場合はこのようになります↓ const answer = prompt('1+1の答えは？'); if (answer == 2) { alert('正解!'); } else if (answer == 1){ alert('まさかの掛け算！？'); } else { alert('残念...'); } それでは細かく説明をしていきます。 まず、answerはprompt('1+1の答えは？');のことだと考える。 (この記事では定数についての説明は省略します) answerをif, else if , elseの中にそれぞれ入れ込んで、 ユーザが入力する値と比較をします。 比較が終わると異なる回答をユーザに伝えるという仕組みです。 比較する為には、 比較演算子を使います。 こちらが比較演算子の種類一覧です。 比較演算子 説明 ==, === 等しい A < B AがBより小さい A <= B BがA以下 A >= B AがBより大きい A > B BがA以下 A != B, A !==B　 AとBが等しくない こちらを使い分けて条件分岐を行いましょう。 おわり 最後までご覧いただきありがとうございました。 それではまた別の記事でお会いしましょう〜?