何問正解できる？JavaScriptの学習アプリ「JavaScript暗記カード」でクイズに挑戦してみたら自信を無くしました！
どうやら私は雰囲気だけのJavaScriptエンジニアだったようです。
先日なんとなくAppStoreを検索していたところ「JavaScript暗記カード」というアプリを発見しました。JavaScriptの学習を促進するために「文字列」「配列」「数値」などの処理方法を学べたり関連するメソッドをクイズ形式で出題しています。
AppStore/GooglePlayのリンクを貼っておきますのでダウンロードしてみてください。
◼︎AppStore
◼︎GooglePlay play.google.com
言うても私、Vanilla JSやPure JS(どちらも普通のJavaScriptをかっこよく言っているだけです。)の扱いについては業務も含めて慣れておりますので、楽勝にクリアしてやろう！という思いでダウンロードしました。
今回はアプリの使い方の紹介とクイズに挑んでみた結果を恥ずかしげもなくブログに記したいと思っています。
使い方
アプリを立ち上げるとコアJavaScriptとクライアントサイドJavaScriptを選択できます。
コアJavaScriptはNode.jsやReact Nativeでも使えるようなJavaScriptのデータ構造の扱い方や、PromiseやJSONの処理方法について学ぶことができます。
クライアントサイドJavaScriptは今だけ無料のようですが、主にWebサービスで使用するようなDOM操作やCanvasの描画、Windowオブジェクトの処理などを学習することができます。
今後、jQueryやReactについてもコンテンツが追加されるようなので楽しみですね。個人的にはVue.jsやNuxt.jsなども覚えたいので追加されると嬉しいなぁと思っています。
学習コンテンツについて
2019年9月時点でコアJavaScriptの学習コンテンツは以下のようになっています。
- String(文字列の処理)
- Number(数値の処理)
- Array(配列の処理)
- Object(オブジェクトの処理)
- Function(関数の処理)
- Math(数値の計算)
- Date(日付の処理)
- Promise(非同期処理の処理)
- グローバル関数(JavaScriptに組み込まれている内部関数)
- JSON(JSONの処理)
各コンテンツは暗記モードとクイズモードの2つが用意されています。
暗記モード
暗記モードは最初に処理したい内容がかかれています。
タップすると正解が表示されます。
便利なのが、それぞれのメソッドに対してサンプルコードも紹介しているところです。
2文字分0埋めしていて、埋まってる場合は何もしない。というのがサンプルコードから読み解けます。理解しやすくていいですね。
クイズモード
クイズモードは制限時間内にメソッド名を答えていき、最終的に何問正解したかで自分の理解力を知ることができます。
制限時間が結構あせります。
アニメーションが触ってて気持ちいい
スクショを見てもらうとわかりますが、デザインがとても綺麗です。操作している時のアニメーションも気持ちがいいので、触ってて楽しいです。
gifアニメーションなので伝わりにくいですが操作時の効果音も聞いてて気持ちいい！
クイズに挑戦
最初に書いたように、私は「配列処理」のクイズに挑戦してみました。
結果は・・・
心、ボキィッ！！
100点中39点というなんとも情けない結果に終わってしまいました。いかに自分がGoogle検索という外部ストレージに頼っているかがわかりました。
というか皆さんこれ全問正解できるんですか？！
まとめ
私は「楽しく遊んで学べるサービス」をいつか作りたいなと思っていたのですが、とても良い取り組みのアプリでした。
- JavaScript専用学習アプリ
- デザインや効果音にもこだわっていて触っていて楽しい
- 少しJavaScriptを使っている人たちの学び直しに最適
- 知らなかったメソッドとの出会い
- 入力中にキーボードの予測変換が勝手に入って焦る
- 問題文の理解が少し難しいかも。出力結果が書いてあると良いかもなと思いました。
「文字列を先頭から延長する。 出力例:"7" → "07"」
みなさんがどれだけJavaScript知っているかとても気になるので是非ダウンロードしてみてください！
宇宙空間をブラウザ上で視覚化できるJavaScript製OSS / 「Spacekit」で宇宙を創造する
宇宙にいきたいと思ったことは無いだろうか。私は行きたいとは思わない。しかし手軽に宇宙目線の人間を超越した存在になれるとしたら面白そうではないだろうか？そんなことを可能にするのが「Spacekit」というJavaScriptライブラリである。
概要
タイトルにほとんど書いている通りだが、地球や月・太陽系などの宇宙空間をインタラクティブに作成できるJavaScriptライブラリである。いくつかのサービスの描画エンジンとして使用されているようだ。
- 古代の地球を見るサービス
- 小惑星のデータベース
- 流星群可視化サービス
インストール方法
今の所、npmなどでインストールできる方法はない。公開されているGitHubのファイルを読み込むか、生のファイルをダウンロードして設置するかのどちらかになる。
次の事例ではGitHubのファイルを読み込む方法で宇宙を創造する方法を紹介している。
Webサイトで宇宙を表現する
太陽と地球を創造する
まずは太陽と宇宙を創造しよう。そのための一番シンプルなコードがこんな感じになると思う。
<!DOCTYPE html> <html lang="ja"> <head> <style> html,body{ height: 100%; } #main-container { width:100%; height: 100%; } </style> </head> <body> <div id="main-container"></div> <script src="https://typpo.github.io/spacekit/build/spacekit.js"></script> <script src="./main.js"></script> </body> </html>
scriptファイルのmain.jsの中身はこのような状態になっている。
const viz = new Spacekit.Simulation(document.getElementById('main-container'), {}); viz.createObject('sun', Spacekit.SpaceObjectPresets.SUN); viz.createObject('earth', Spacekit.SpaceObjectPresets.EARTH);
完了してみたらhtmlファイルを開いてみよう。これが本当の「Hello, World!」かもしれない。。
余談ではあるが、DOCTYPE宣言時のhtmlとbodyはheightが0になってしまうので100%を指定すると画面全体に宇宙が描画される。うまく画面が表示されない時は確認してほしい。
他の惑星を追加する
他の惑星の追加の仕方は、上記のコードをみれば創造できると思うがcreateObjectメソッドにて追加ができる。
viz.createObject('mercury', Spacekit.SpaceObjectPresets.MERCURY);
オリジナルの惑星を作成する
オリジナルの惑星は静止状態のものと、他の惑星と同じように太陽を周回するオブジェクトを作成できる。
- 静止オブジェクトの作成
const obj = viz.createObject('myobj', { position: [1, 1, 1], });
- 周回オブジェクトの作成
このサンプルは人工惑星になったテスラロードスターが軌道を周回する情報になっているらしい。
const roadster = viz.createObject('spaceman', { labelText: 'Tesla Roadster', ephem: new Spacekit.Ephem({ // These parameters define orbit shape. a: 1.324870564730606E+00, e: 2.557785995665682E-01, i: 1.077550722804860E+00, // These parameters define the orientation of the orbit. om: 3.170946964325638E+02, w: 1.774865822248395E+02, ma: 1.764302192487955E+02, // Where the object is in its orbit. epoch: 2458426.500000000, }, 'deg'), });
Ephemクラスに渡すプロパティについては下記を参考にパラメーターを調整する。
太陽・水金地火木土天海冥・テスラのロードスターを視覚化してみたのがこちら。
天王星/海王星/冥王星を画面に映そうとすると地球が小さく見える。
背景のデザインを宇宙にする
今のままだと惑星の背景が黒いままなので宇宙感のある背景を追加する。背景を宇宙の写真にするには簡単に2つの関数が用意されている。
- createSkybox
- createStars
createSkyboxはライブラリが用意している画像を読み込んで表示される。createStarsは画像ではなく星のデータを読み込んで、実際に画面上に反映させる方法である。そのためcreateStarsの方が処理速度が早いが、繊細な部分は表現しきれない。
個人的には両方ともセットすると綺麗な宇宙ができるのでオススメしたい。
viz.createStars(); viz.createSkybox(Spacekit.SkyboxPresets.NASA_TYCHO);
できあがった宇宙がこちら
createSkyboxに渡す引数のデータを変更すると違う背景になってこちらもとても美しいので紹介したい。
viz.createStars(); viz.createSkybox(Spacekit.SkyboxPresets.ESO_GIGAGALAXY);
まとめ
今回紹介したSpacekitは紹介した機能以外にも色々な機能があり、今回は省いたのだが興味のある方は是非公式のドキュメントやGitHubのソースコードを追ってみてほしい。
個人的には宇宙関連のサイト構築が会った時に使える日が来たらいいなと思って待つことにする。
また宇宙旅行に行ってみたいけど怖い・お金が無い。みたいな人は是非こちらで宇宙を体感してほしい。
参考サイト
- ドキュメント
- 惑星の軌道要素について
漫画から技術を学ぼう！技術書典7で頒布予定のマンガ技術書まとめました
技術書同人誌を販売する日本最大のイベント「技術書典7」が2019/09/22(日)に開催します。今回も楽しそうな技術書が盛りだくさんですね！
7回目の開催となる技術書典ですが、技術書典6の直前に書いた「技術書典6で販売されるマンガ技術書まとめ」記事がいろんな方に読んでいただけましたので今回もご紹介したいなと思っております！
- 協04 | paiza
- う38C | パルヒコさん
- お01C | おとうふ工房
- お43C | 湊川あいの、わかば家。
- か03C | みさきとミギー
- き07D | Rotelstift
- き46D | GrabTF
- し20D | ふりにち
- し24D | ロボット修業中
- し26D | オサルのロボットラボ
- せ01D | ほっぺ食堂
- せ18D | ゴロゴロカヤック
- お願い
- まとめ
- 宣伝
協04 | paiza
paiza開発エンジニアによるTechbookと、ITエンジニアを目指す女子高生たちの学園ライフ4コマ漫画本を無料配布します！
オンライン学習サイトで有名なPaizaさんが4コマ漫画本を無料配布されるようですね！無料配布なので早めに手に入れないと無くなっちゃうかもしれませんね！
う38C | パルヒコさん
Webディレクターマンガ
前回のブログでもご紹介しました。技術書典6では見に行くことができなかったので、今回はリベンジしたいと思います！
お01C | おとうふ工房
- まんがではじめるGo
私は前回の技術書典6で「まんがではじめるKubernetes」購入しましたが、中々の混み具合でしたね！今回の「まんがではじめるGo」も難しい技術を漫画でわかりやすく解説している感じで非常にいいテーマですね！早く買いに行かなければ！
お43C | 湊川あいの、わかば家。
- マンガでわかるRuby② 〜オブジェクト指向編〜
- 【無料頒布】マンガでわかるBtoBアプリエンジニア
- マンガでわかる痩せる技術【2ヶ月半で−8kg】実録！原始人ダイエットやってみた
- マンガでわかるRuby 番外編 gem・CSS組版 制作秘話
「マンガでわかる〇〇」で有名な湊川あいさんのサークルです。技術書典初頒布の本がこれだけあるようですね！
個人的に「マンガでわかるRuby② 〜オブジェクト指向編〜」は、何年エンジニアやってても一向に理解が進まない「オブジェクト指向」の手がかりとして購入したいと思います！
既刊の「マンガでわかるDocker①〜③」も購入しましたが、なんちゃってDocker使いには新しい学びがたくさんあってよかった！
か03C | みさきとミギー
とのことです。マンガでわかるRubyシリーズはこちらのサークルでも購入できそうですね！
き07D | Rotelstift
主人公である男子中学生がPC部の入部試験としてFizzBuzz問題を解いていく物語です。
入稿〆切に向けてまだ作画を続けているようです。続報を期待したいですね！
き46D | GrabTF
- VRoidとクリスタでマンガを作る本
という本を頒布されるようです。紹介しているリンクを見てみると、この本自体もVRoid(VRoid Studio)とクリスタ(CLIP STUDIO)というソフトを利用してマンガで描かれているページがあるようです。
し20D | ふりにち
- マンガでわかる画像の基本
- 残業を減らし定時で帰る仕事術〜定時退社はエンジニアのキャリア形成と両立できるのか〜
これらの本でマンガで描かれている箇所があるようですね！
「dpi」についてもマンガで分かりやすく解説します！
dpiはAndroidアプリ開発ででてきますが、ちゃんと理解していないので興味があります。
し24D | ロボット修業中
- ロボットマスターへの道
というシリーズの「電子回路についての解説本」のようです。部分的に4コマ漫画で描かれているようですね。
私的には電子回路の技術を学ぶ機会がなかった（独学ではなかなか学びづらいですよね？）のでとても興味深いテーマです
し26D | オサルのロボットラボ
- ロボット作りたい息子とそのハハのはなし
ロボット作りたい息子オサルと、技術についてド素人のハハの、ドタバタの毎日。
という内容のエッセイ風マンガのようです。
せ01D | ほっぺ食堂
VTuber稼業の暴露話漫画を描いていきます
なんとも怖そうなテーマですが、私の周りにもVTuberを始めている人がいるので共有したいと思います！
せ18D | ゴロゴロカヤック
ちょっと変わった技術の活用法や、漫画コンテンツもあります。
面白法人で有名なカヤックさんが頒布される本に漫画コンテンツが掲載されるようです。詳細情報を期待したいですね！
お願い
現在時点で12のサークルで漫画技術書が頒布予定ということがわかりました。サークル数が前回より多いのに、漫画が少なくなっているのは少し気になる傾向ですね！
もしこの記事に掲載されていない、マンガで描かれている技術書を技術書典7で掲載されているサークルの方がいらっしゃいましたらぜひコメントやツイートいただけると大変嬉しいです！
まとめ
前回の技術書典6で何冊もマンガ技術書を購入したのですが、読みやすく・読み進めやすくという感じですぐに知識を吸収することができました。日本のマンガ文化は素晴らしいですね。
宣伝
私も技術書典7に出典いたします！サークル場所は「お23C」
私はAWS Amplify Predictionsを使ってお手軽にAI/MLを開発するというテーマで執筆しております！朝からしばらく立ってますのでお越しください！
実は今回、私も漫画を描きたかったのでiPadとApple Pencilを購入したのです。
でも漫画で執筆できませんでした。。。本当に漫画をかける人尊敬します。
