Javascriptのrequireとimport/exportの違いを整理します

いままでなんとなく使っていたけど、主に自分のために整理します。

他のブログでもまとめられているんですが、以下のような違いがあります。

require構文

• もともとはファイルモジュール読込機能に乏しかったJSに対して、CommonJSが仕様策定した。
• その後Node.jsがCommonJSの仕様をゴリッと拡張し、これが有名になり、これがCommonJSと言われるようになった。
• なのでNode.js ならそのまま使用できる。
• ブラウザで実行するなら、Babel, Webpackなどによるトランスパイルが必要。
• module.exports (省略して exports ) が全オブジェクト間で共有される。

import/export文

• ES2015で取り込まれた仕様
• 実行するなら、Babel, Webpackなどによるトランスパイルが必要。

require 構文の例

sub.js

exports.test = function(){
  console.log('sub') 
}

sub2.js

module.exports = function(){
  console.log('sub2')
}

main.js(呼び出し側)

const sub = require('./sub')
sub.test()

const sub2 = require('./sub2')
sub2()

import/export文の例

book.js

export default 'default book';
export const book1 = 'Programing C';
export const book2 = 'Programing Java';

import Book, from './book'; //defaultが読み込まれる
import { book1, book2 } from './Book';

どっちを使うべき？

基本的にはES2015で定義されたimport/export を使うべきだと思います。

ただしNode.jsのコードで既存のコードの多くが require構文で記述される場合は、統一感の観点で合わせるもの良いと思います。

余談

JavaScriptはブラウザで動かすにはてっとり早く、またクライアントサイド/サーバサイド両方を書けるかなり柔軟な言語である一方、これらのモジュール読み込み手法が混在してしまっているのは、歴史の長さゆえの負債だなぁと感じます。

いまからJavaScriptをイチから学ぶ人って、何がなんだかわからなくなると思うんですよね。そういう意味では、比較的まだ歴史の浅い言語から習得するのもアリかなと思いました(とは言え新しすぎると淘汰されるので、いいバランスを探すとGoとか..?)

paiza で遊んでみました。採用する側からみた所感。

長らく更新できていなかったので、この三連休で時間があったので久々の投稿です。 今年に１００本ブログ書くと言っていたのに全然かけていないので、ぼちぼち再開していきたいです。

今回は、エンジニア転職サイトのpaizaのスキルチェックで遊んでみた感想です。

paizaとは

エンジニア向けの転職マッチングサイトで、コーディング問題を説いて己のスキルが判定され、 そのスキルが高ければおいオファーが来るというのが売り、のサービス(と解釈しています)。

paiza.jp

採用する側にとっては、求職者がどういうコードを書いているのかが分かるので、それをもとに判断できる、 というメリットを推しています。

問題の性質、レベル感

問題に関しては、お題が与えられてコードを提出し、そのコードを提出先のサーバで実行して テストケースを全て通過すれば合格という仕様で、 AtCoder などで開催される競技プログラミングの仕様と似ています。

実際に解いてみたら、Sランク問題を２問やって１問はテストはパスできたけど時間制限超過で100点ならず、２問目はめでたく時間内に正解できました。

スーパープログラマ！！(笑)

問題の難易度としてはAtCoderで出題される問題よりもかなり優しく、ものすごくざっくり言うと、paizaのSランク問題が AtCoderのRegular Contestの２問目よりもちょっとやさしい、ぐらいの印象です。

求人にどう活きるのか

さてこのスキルチェックを経て、募集する側が求職者のスキルを判定する上で、どのような情報が得られるのでしょうか。 例えば求職者がpaizaのSランクやAランクになっていたら、何ができると判断できるのでしょうか。

判断できそうなことと, できなさそうなことを挙げてみます。

ある程度(最低限)確認できそうスキル

• 問題分(仕様)を読んでそれなりのスピードでなんとなく把握できる

  制限時間内にコードを書くために、問題分を読んで仕様をすぐに理解しないといけません。コーディング問題と現実の仕様は複雑度が全然違いますが、まあ小難しい文章から仕様(文意)をつかむことはできると思っても良さそうです。

• 実装したいロジックがどのような手段であれそれなりのスピードでなんとなく実装できる。手が動く。

　制限時間にそれほど余裕ないため、実装したい処理が思いついても、それを早く実装しないと制限時間内に完了できません。なのでコードの品質、可読性はともかく、やりたい処理をある程度の速度で書くことができると思って良さそうです。

この問題を解いたからといって判断できないスキル

• コードの品質、可読性

　短時間でテストを通過すればよいコードを書くだけなので、リーダブルコードにあるようなきれいなコードは提出されませんし、その心構えがあるかどうかも判断できません。

• 設計に関する考え方

　単一の問題を解くだけなので、ある程度の規模のコードをどうやって抽象化して設計するか, その考え方などは判断できません。

• 問題を解くためのアルゴリズム選択能力

　残念ながら競技プログラミングほどの難度も問題ではないので、アルゴリズム選択に関する能力は計れません。

• コーディングに付随するのりしろ的な関連能力

　開発に絡んでくるデータベース、ネットワーク、セキュリティに関する理解、バージョン管理ツールやコマンドの操作はどれぐらいの経験があるのかなどは当然わかりません。

• テストに関する考え方

　テストなんてないので判断できません。

• 人となり、社風にあうか

　当然わかりません。

..などど書き出すと枚挙に暇がありませんが、要するになんとなく把握できるで上げたところ以外は結局のところ会ってみるしか判断でき無いと思いました。 実際提出したコードベースに会話できるのが売りと言っていましたが、提出するコードは動けばいいだけの汚いコードなので、これだと会話しづらいかなと思いました。

私も採用の面接をする側になることもあるのですが、聞きたいのは、判断できないスキルの方に書いてあることだったりします。

色々不足点を書いてしまいましたが、コーディングスキルを判定するという発想はとてもおもしろいので、この問題の方式以外で客観的にスキルを判定できる方法があれば、 もっと良いなと思った次第です。

Auth0でSafariからのログインができなかったときの対応

Auth0を使用したログインでハマったのでメモっておきます。

構成

フロントエンドはNuxt.jsを使用しており、認証はAuthModuleを使っています。 認証はAuth0のUniversal loginの使っており、Auth0の認証ダイアログが開かれて、そこで認証されたらフロントエンドにcallbackされるという作りです。

経緯と対策

開発中はChromeで動作確認していたのですが、Safariで疎通すると、Universal Loginの認証後のcallbackページで止まってしまう現象が発生しました。

状況を調べてみると、どうやらうまくCookieが書き込めていない感じでした。その他認証に関するエラーログは一切出力されず。

いろいろ調べてみるとSafariは3rd party cookie を防ぐからクロスオリジンのドメインじゃだめ、という説明を見かけました。

auth0.com

そこでとりあえずAuth0のドメインをカスタムドメインにして再度疎通したのですが、症状は変わらず。

更に調べてみると、以下の記事が見つかり、callbackのURLにスラッシュつけてcallback -> 'callback/' にしたら動きました。。

community.auth0.com

これはエラーログも出ないのでこれはハマるでしょ、、思ったのでここに記録しておきます。

Firebase Meetup #13 セッションの内容と所感

それほど今はFirebaseを使い込んでいたり、これから使うような予定はないのですが、情報収集目的で以下のイベントに参加しました。

firebase-community.connpass.com

以下聞いたセッションのメモと所感です。

firebaseでWebアプリを作る際のTips

途中参加のため、聞けず。

FirebaseNotification,RemoteConfigでユーザセグメントごとにプッシュ通知を実装する

FirebaseNotificationつかってプッシュ通知を送る方法の紹介。 使用したサービスは以下の通り。 - Notification(FCM) - RemoteConfig - User Property

元々の実装では、ユーザ全員にPush通知を送ってしまう作りになっていたので、負荷が高い。 負荷の軽減のために、ユーザセグメント毎にPush通知を送る。

アプリ起動時に、RemoteConfigに自身のグループNoを登録する仕組みを実現したとのこと。

所感

自分はアプリでPush通知を実装したことがないので詳細はわからないですが、それほど高い難度でなく実装可能な印象を受けました。

Firebase Test Labの紹介

Firebase Test Labとは？会場内で使っている人は少ない.. 私も知らなかった..

• UIテスト実行基盤
• Googleが管理しているAndroid実機を利用してテストできるサービス

apkファイルをアップロードして、テストしたい機種とOSバージョンを指定したら、テスト実行してくれるとのこと。

Roboテスト - テストがなくても、ボタンなどを自動で認識して、ガチャガチャテストしてくれる。

所感

Firebase Test Lab知りませんでした。これがあればわざわざ端末借りてテストみたいなことを省けるので便利。登壇者はDeNA所属の方でしたので、そのくらい大規模なサービスでは必須なんだろうなと感じました。 直近ではアプリ開発要件はないのですが、Web画面もRoboテストしてもらえたら良いのになぁと感じます。

Outside of Stack Trace

• Firebase Crashlityicsのテーマ

アプリがクラッシュした時にそのクラッシュレポートを収集して見やすくしてくれる機能。

• Analyticsと統合したクラッシュレポートが取れるのが良い。
• アプリの画面遷移経路、時刻などの情報を元にレポートが取れる。
• クラッシュ時に収集したい情報をカスタムキーとして収集できる。

所感

これも知りませんでした。アプリでなくNuxtなどWebベースでも似たようなログ収集が適用できるか知りたいところです。

2プロジェクトでAuthentication UserをSyncさせる 〜LINEログインを使ったカスタムログインでやる編〜

FIrebase認証がテーマ(Firebase Auth)

• LINEには標準で対応していない。のでカスタム認証を使用する必要がある。
• GoogleIDとかだとフェデレーションプロパイだなので、SDKが上手いことやってくれる。
• カスタム認証だと、認証部分の仕組みを一部自分で実装する必要がある。

所感

カスタム認証はちょっと面倒な印象を受けました。なのでLINE認証は辛そう.. 認証はAuth0を採用したことありますが、認証単体で見るとAuth0の方が多機能そうな印象を受けました。その他の機能も統合されているのがFirebaseの良いところなので 単純に認証だけでもちろん良し悪しは決めれないですが。

Firestore における CQRS の可能性

CQRS ... コマンドクエリ分離 FIresotreでチャットルームのデータモデリングを実装したケースのテーマ

• コマンドとクエリを分離することで、書き込みの構造と読み込みの構造を分離することで、複雑性を下げる。
• コマンドはWrite Onlyスキーマは RDBライクな構成となる。
• クエリはRead Only. データに冗長性があってもよく、非正規でも良い。
• データの繊維は コマンド -> クエリ の一方向のみで、逆は許可しない。
• 上記のようにすることで、一見データ構造は複雑になったように見えるが、Writeする側、Readする側それぞれからはアクセスしやすい。

所感

コマンドとクエリの分離をスキーマをどう定義するかの事例が見れて勉強になりました。CQRSの考え方は普段あまり意識したことなかったので、データモデルを設計する際に選択肢の１つとして覚えておきたいと思いました。

全体の感想

FirebaseについてはCloud FunctionとかDynamic Linkとか, Realtime Databaseぐらいしか知りませんでしたが、思っていたより "すげー便利そう"な機能を多く知ることができました。 普段の開発ではバックエンドはRuby on RailsとかNodeJS + MySQL を選びがちなんですが、Cloud Functionでサーバサイド側をどこまでさくっと実装できるかが気になるところです。 アプリ開発はそれほどメインではないのですが、Nuxtなどのウェブベースでどこまで使えるか調査してみたいと思います。

SECCON CTF Beginners 初参加したのでその記録と、使ってよかったツール、コマンドのメモ

SECCON CTF Beginners

前回の マイクリハッカソン に参加したメンバーと、SCCON 2019 Beginner に参加しました。

2018.seccon.jp

以下その概要と結果です。

チーム人数 3名：（うち自分含む2名初参加）

結果 ６６６チーム中 ２００位ぐらい （上位1/3ぐらい）

解けた問題

解けた問題

• Web 2/5問
• Pwnable 0/4問
• Reversing 1/4問
• Crypto 1/4問
• Misc 2/4問

ほとんどWarmupレベルの問題しか解けてないという.. でも初参加で全く手が出ないという状況ではなかったので、良いレベル感だったかなと思いました。

Sliding Puzzleぐらいは解けばよかったかなと後から思いました（全部の問題みていない）

あったら便利だなと言うツール

WriteUpはwarmupレベルの問題しか解けなかったので、ここでは書きませんが、 もし次回参加するときの備忘の意味を兼ねて、調査で使用した/便利だったコマンドをメモしておきます。

インストール方法もググったら出てくると思うので、ここでは省略します。

nmap

おなじみポートスキャンコマンド。サーバのどこのポートが空いているかを教えてくれます。 CTFではとりあえずこれを打つということが多々ありました。

$ nmap 153.120.129.xxx

Nmap scan report for 153.120.129.xxx
Host is up (0.022s latency).
Not shown: 996 closed ports
PORT      STATE    SERVICE
22/tcp    open     ssh
9100/tcp  filtered jetdirect
10000/tcp open     snet-sensor-mgmt
20000/tcp open     dnp

cURL

HTTPリクエストを送ることができるコマンド。 リクエストヘッダやボディを事由に入れれるので、スクリプトを入れたPOSTなどで試行錯誤するときなど、 あらゆる箇所で使用されます。

binwalk

今回始めて知りました。 バイナリファイルを引数に与えてやれば、内部がどういうファイルなのかを判定してくれます。 画像と圧縮データなど、複数の要素が合成されてる場合でも見分けることができます。

githubja.com

$ binwalk e35860e49ca3fa367e456207ebc9ff2f_containers                                                                                                             ~

DECIMAL       HEXADECIMAL     DESCRIPTION
--------------------------------------------------------------------------------
16            0x10            PNG image, 128 x 128, 8-bit/color RGBA, non-interlaced
107           0x6B            Zlib compressed data, compressed
738           0x2E2           PNG image, 128 x 128, 8-bit/color RGBA, non-interlaced
829           0x33D           Zlib compressed data, compressed

foremost

こちらも初めて知りました。 こちらもバイナリデータのデータ構造を元に、中身を判定してくれて、さらにこちらは抽出までやってくれます。 qiita.com

od

バイナリのダンプを表示してくれます。 私は以下のコマンドで１６進ダンプを見ることが多かったです。

$ od  -Ax -tx1z file.bin 
000000 7f 45 4c 46 02 01 01 00 00 00 00 00 00 00 00 00  >.ELF............<
000010 03 00 3e 00 01 00 00 00 f0 4d 00 00 00 00 00 00  >..>......M......<
000020 40 00 00 00 00 00 00 00 60 dc 02 00 00 00 00 00  >@.......`.......<
000030 00 00 00 00 40 00 38 00 09 00 40 00 1c 00 1b 00  >....@.8...@.....<
000040 06 00 00 00 05 00 00 00 40 00 00 00 00 00 00 00  >........@.......<
 ... 

objdump

いろいろな使い方ができますが、今回はバイナリ実行ファイルを機械語に逆アセンブルして確認するために使いました。

$ objdump -S -d seccompare
  400630:       c6 45 d0 63             movb   $0x63,-0x30(%rbp)
  400634:       c6 45 d1 74             movb   $0x74,-0x2f(%rbp)
  400638:       c6 45 d2 66             movb   $0x66,-0x2e(%rbp)
  40063c:       c6 45 d3 34             movb   $0x34,-0x2d(%rbp)
  400640:       c6 45 d4 62             movb   $0x62,-0x2c(%rbp)
  400644:       c6 45 d5 7b             movb   $0x7b,-0x2b(%rbp)
  ...

ここから先のバイナリを読むのに慣れておらず、これ以上の解析は苦戦しました.. もっとBinary力を身に着けないと、warmup以降の問題を解くのは難しいのかなぁと思いました。

Binary Hacks ―ハッカー秘伝のテクニック100選