ネオキャリアグループ開発者ブログ

ネオキャリアグループの技術者による開発ブログ

ES6対応! JSのドキュメント生成ツール 【ESDoc】~ 導入編 ~

こんにちはエンジニアの松崎です。
ある日、JavaScriptのコメントルールを調査している際に見つけた
便利なツールをご紹介します!

f:id:daiki-matsuzaki:20170331114830p:plain

ESDocとは

JS(ES6)向けのAPIドキュメントツールです。
JSのドキュメントツールと言えば
JavaDocのJavaScript版JSDocというツールが多く使われています、
JavaDocとは、JavaのソースコードからHTML形式のAPI仕様書を生成できるツールです。

ESDocを導入するメリット

  • ES6 ( ECMAScript 2015 ) に対応している
  • 見やすいドキュメントを自動で生成できる
  • タグ書き方はJSDocのタグと同じ

ES6 ( ECMAScript 2015 ) に対応している

現在、ES6( ECMAScript 2015 )というJavaScriptの仕様が多く使われていますが
例えば、JSDocでコメントを書こうと思えば、
ES6 -> ES5 にトランスパイル(ソースからソースへのコンパイル)した後、ES5のコードにコメントを記述する必要があります。
ESDocではES6のコードに直接書くことができるため、全ブラウザがES6に対応し移行しても書き直す必要がありません。

見やすいドキュメントを自動で生成できる

特徴的な機能だけでも、以下の機能が提供されています。

  • マニュアルの統合
  • カバレッジ
  • Lint
  • 静的解析
  • テストコードの統合
  • 組み込み検索

この機能の詳細については次回の使用編で説明します。

タグ書き方はJSDocのタグと同じ

ESDocのタグの書き方は

/**
 * this is MyClass.
 */
export default class MyClass {
  /**
   * @param {number} a - this is a value.
   * @param {number} b - this is a value.
   * @return {number} result of the sum value.
   */
  sum(a, b){
    return a + b;
  }
}

このような形でJSDocと全く同じです。
※ESDocはJSDocのすべてのタグをサポートしているわけではないそうです。

今回実際に行った導入

早速ですがESDocを導入していきます。
導入に当たってnodeやnpm等の環境を整えるところから始めます。
(すでにnpmのインストールが済んでいる方は飛ばしてみてください)

ndenvのインストール

まずは ndenv (node.js のバージョン管理ツール)を導入します。

$ git clone https://github.com/riywo/ndenv ~/.ndenv
$ echo 'export PATH="$HOME/.ndenv/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(ndenv init -)"' >> ~/.bash_profile
$ exec $SHELL -l

以上を実行したら、次に今回使いたいnodeのインストールを行います。

node,npmのインストール

$ ndenv install --list

使用したいnodeのバージョンを見つけてください。
見つかれば以下を実行します。

$ ndenv install v7.7.2  # 導入したいバージョンを指定します。
$ ndenv rehash

確認を行います。

$ ndenv versions # 今までにインストールしたnodeのバージョンを表示します。
 v7.7.2

以上が表示さればインストール完了です。
実際に使用するにはグローバルとローカルでnodeを切り替えて使用します。

グローバルの場合

$ ndenv global v7.7.2 

ローカルの場合

$ ndenv local v7.7.2   #今回はこちら

localでは.node-versionというファイルが生成されます。
コマンドを打ち込んだディレクトリに移動するだけでバージョンが切り替わります。
プロジェクトごとに別バージョンのnode.jsを使用する場合はlocalで使用します。
(今回はlocalを使用しています!) 再度バージョンを表示します!

$ ndenv versions 
* v7.7.2

現在使用しているバージョンにアスタリスクがつきます。

最後にバージョンを確認します!

$ node -v
 v7.7.2
$ npm -v
 4.1.2

確認ができればnodeとnpmのインストールは完了です。

ここでnpmと言うツールが導入されましたが
npm とは Node Package Manager の略で
Node.js 用に作られたパッケージモジュールを一括で管理できるツールです。
npmで出来ること

  • JavaScript(Node.js)のパッケージやモジュールのインストール、アップデート、共有
  • npmレジストリに登録された様々な外部ライブラリやパッケージのインストール

package.jsonの作成

package.jsonとはパッケージの依存関係を記したJSONファイルです。
package.jsonで出来ること

  • ファイルにプロジェクト毎に必要なパッケージの名前とバージョンを記述すれば、npmが勝手に必要な(依存しているという)パッケージをインストールされます。
  • インストールしたパッケージが依存しているパッケージや、さらにそれが依存しているパッケージも自動でインストールされます。
  • チームで開発している場合にも、Git上に上げて共通の環境の作成や復元が簡単になります。

今回はpackage.jsonでパッケージを管理します。 まずはプロジェクトフォルダのルートで

$ npm init

と入力してください。
これでpackage.jsonファイルが生成されます。
途中対話式で設定ファイルを設定できますが
設定しない場合は、基本的にすべてEnterでいいと思います。

ESDocの導入

ここからESDocの導入になります。
先ほどインストールしたnpmでESDocをインストールします。
package.jsonの置いているディレクトリで入力します。

$ npm install -D esdoc
$ npm install

ESDocは開発で使用するため
-D オプションでpackage.jsonの devDependencies に記録します。
依存関係のパッケージもインストールするため npm install も行います。

.esdoc.jsonファイル

esdocの設定ファイルになります。
以下のコマンドを入力してください

$ echo '{"source": "./src", "destination": "./doc"}' > .esdoc.json

このコマンドで.esdoc.jsonファイルを生成し設定を記録しています。

  • "source" ではesdocで対象になるディレクトリを指定します。
  • "destination" では生成されるhtmlファイルを書き出すディレクトリを指定します。

次にpackage.json内にscriptを記述します。

{
  "scripts": {
    "esdoc": "esdoc; open esdoc/index.html"
  },
  "devDependencies": {    # ここは先ほど生成された箇所です。
    "esdoc": "^0.5.2"
  }
}

次に

$ npm run esdoc

を実行します。 これで先ほど設定したesdocが実行され、さらに生成されたhtmlをブラウザで開くことができます。

今回は導入までを行いました。 次回はESDocの使い方について書いていこうと思います!

参考サイト

esdoc.org

github.com

弊社について

ネオキャリアでは、エンジニアの募集を行っています。
ぜひ!募集記事をチェックしていただけると嬉しいです!(*>ω<)b

www.wantedly.com

www.wantedly.com

見習いエンジニアの挑戦道!~自己紹介編~

 

Hello World! 

 

はじめまして、

17新卒の平野です。

 

入社して間もない私ですが、読んでいただいている人に

少しでも会社の情報などを発信していけたらと、

ブログを更新していきますのでよろしくお願いします。

 

 

  

自己紹介

 

改めまして 平野です。

花粉症・猫アレルギー(猫は大好きです!)

その他もろもろで マスク生活な私ですが、

ここでは、簡単に自己紹介をさせていただきます。

 

基本データ

 

誕生日:12月24日

出身地:さいたま市

 

好きなこと

 

・スマートフォン ゲームアプリ

・野球、スキー...(スポーツ全般)

・釣り  and more...

 

インドア・アウトドアどちらも大好きです。

 

大学で学んできたこと

 

・UX (=User Experience)

・Ad Technology について研究・学会発表をしていました。

 (生意気に全部英語で書いてみました。なんか強そうですよね。)

 

こんな感じで、自己紹介は終わらせていただきます。

 

私とネオキャリア

 

さて、ここからは私がネオキャリアで体験してきたことを

入社前(インターンシップ)と入社後に分けて紹介させていただきます。

 

入社前(インターンシップ)

 

私はこれまでに3回、ネオキャリアの短期インターンシップにお世話になりました。

 

WINTER INTERNSHIP -GUSH- (2日間)

「極限まで思考し続けることで、脳から汗が噴出する2日間のビジネスバトルフィールド」

 

2015年冬。このインターンがネオキャリアとの最初の出会いでした。

 

ネオキャリアの4年間を2日間に凝縮したコンテンツで、

文字通り、朝から晩まで脳から汗が出るほど考え込みました。

  

SPRING INTERNSHIP -DIVE-(1ヶ月)

最初、冬のインターンに参加した私はなめていました。

「冬同様、それなりに結果をだすか...」と。

(これから訪れる過酷な1ヶ月を彼はまだ知らなかったのです...)

 

「夏」「冬」の集大成でもある「春」のインターンは、

今までの机上の空論ではなく、

実際にチームでビジネスを創出し利益を生み出すという未経験のものでした。 

(最終的には、就活イベントを開催し利益を生み出しました。)

 

最終日は、1ヶ月の成果を社長に向けてプレゼンをするという

とても緊張する場でしたが、メンバーやお客さんに恵まれ、

チームで優勝することができました。

(その後、チームで学生団体を立ち上げ就活イベントを開催していました。)

 

今思い返しても、この1ヶ月はとても大変でした。

 

エンジニアインターンシップ(1日)

こちらは、今まで紹介してきた総合職向けのインターンではなく

エンジニア向けのインターンシップです。

 

「はじめてのWeb」ということで、初歩的なことから優しく教えていただきました!

インターンで学んだことは今でも、時々読み返しています。

 

 

以上が 私がインターンを通して ”ネオキャリア” を体験したことでした。

 

 

各インターンについての説明はこちらをご覧ください。

(エンジニアのインターンは見つかりませんでした...!申し訳ありあません...)

shinsotsu-watch.com

(どこかに私が写っていることは内緒です。)

 

 

入社後

 

現在、私はネオキャリアグループのエンジニアとして働いております!

(散々、総合職向けのインターンのお話をしてきましたが...)

 

これからは、入社後に体験したイベントをご紹介したいところですが、

入社して間もない私なので、直近のお話をしようかと思います。

 

ネオキャリアグループの2017新卒

4月3日に行われた入社式で晴れてネオキャリアグループの社員になれたわけですが、

総合職含め、なんと… 330名弱の同期がいます!

 

 圧巻ですよね...。もちろん、私もこの中にいます!

 

 

事業部の上半期総会

詳細は割愛させていただきますが、

振り返りと今後に向けてのお話を聞きました。

 

その後は、 会場が「浅草花やしき」ということで

食事をしたり、童心に戻りアトラクションに乗ったりと楽しんでいました。

f:id:ryuji1224:20170428160355j:plain

  

 

以上、私がこれまでにネオキャリアで体験してきたことです。 

 

 

終わりに

 

なぜ、私がファーストキャリアをネオキャリアに決めたのか。

それは ”成長したい” からです。

ネオキャリアには ”成長できる” 環境が整っています。

 

すこし訂正します。

”成長しなければいけない” 環境が整っているのです。

 

研修中は多くのことをインプットし、自分のものにしていく。

そして、少しでもアウトプットの機会を増やせるよう頑張っていきます。

 

 

今回はこの辺で終わらせていただきます。

 

 

弊社について

弊社ではエンジニアの募集を行っております。
ぜひ募集記事をチェックして頂けると嬉しいです!


www.wantedly.com


www.wantedly.com

新卒見習いエンジニアぐっちです。

 

こんにちは!ネオキャリア開発部2017年新卒のぐっちです!

 入社してまだ間もないですが、新卒紹介ということでブログを

書かせていただきます!

 

開発に関する知識などは、まだ人に語れるほど持ち合わせていないので、

今回は、

 

1、今までの僕のエンジニアとしての歩み

2、ネオキャリアの研修について

 

上記二つについてお話させていただきます(๑╹ω╹๑ )

 

エンジニアとしての歩み

きっかけ

 元々僕は、大学では建築学を専攻していました。

なのですが、建築に対して全く興味が持てませんでした(笑)

 

設計図を書いていても何も心踊らず、

ただただ無心で、建物の絵を描き続けるということをしていました。

 

「これが将来の仕事になるのか〜」

ということを考えたら絶望感しかありませんでした(笑)

 

そんな中で、あるインターンに参加させていただいた際に、

プログラミングに触らしていただける機会がありました。

 

そのときに今まで自分が何気無く触っていたアプリやソフトウェアを

自分が一から作ってるんだ!というわくわくした気持ちと、

 

その裏で、様々なロジックが動いて、一つの製品として成り立っているという

ことを知り、

 

元々、ものづくりと物事を論理的に考えることが好きだった僕は、

プログラミングってすっごく楽しい!!

と感じたのが、エンジニア人生の第一歩目でした。

f:id:kabutomusi8:20170427021258j:plain

 

エンジニアになるために

 そのインターンをきっかけにして、僕はエンジニアになることを決めました。

しかし、全くの知識0なので、とりあえず何か学ばなければいけない。

 

 

 そのときは、アプリ開発にすごい興味があったので、iOSアプリを勉強しました。

言語はSwiftで、

 

初めは、変数に値を代入して出力

Hello World!

から始まり、

 

様々なコンポーネントを使って、アプリっぽいことができたり(当たり前ですが。)

意味のわからないエラーで二日間とまったりと

 

初心者が経験する楽しくもイライラする時を過ごし、

 

 

三ヶ月後にはなんとかアプリを一つ作るところまでできました。

まあほんと残念なアプリなんですけどね。笑

 

ちなみにAppleStoreに公開はしてません。笑

 

f:id:kabutomusi8:20170427021623j:plain

 

そしてそのあとはWebサイトも作ってみたいなと思い、

HTML,CSS,Ruby,Ruby on Railsを勉強しました。

 

railsでは、pryを乱用しながらエラーと戦ってました。

 

Swiftは、railsのpryのようなことを、ワンクリックでできたので、

めんどくさかったです。笑

 

そして、自分が読んだ本と他人が読んだ本を交換できる

CtoCのWebサービスを作りことができた上に、

 今回はWebサイトをしっかりとサーバー上に公開することができました!

 

 

初めてちゃんとしたものを作って公開したので、本当に嬉しかったです!!!

今はもうサーバー止めてなくなってしまったんですけどね。笑

f:id:kabutomusi8:20170427021426p:plain

 

 

そして、今!

ご縁があってネオキャリアのエンジニアとしてただいま研修を受けさせてもらってます!

 

ネオキャリアの研修について

 内定者研修

内定をいただいた後には、まず入社する前に内定者研修として、

新卒のメンバー5人で、

「位置情報を使ったアプリを作る」という課題が渡されました!

 

僕はもっぱら開発よりのことをさせてもらって、

 

まずRuby on Railsで初めてAPIを作ったり、

そのあとで、SwiftでiOS開発したり、

途中で自分のAPIが残念なので、

結局、GoogleのFirebase使ったりと本当に自由にやらせてもらってました。笑

 

 

すごく楽しかったです!!!

 

そして、この研修で思ったのが、プログラミングは開発しているときが、一番知識の吸収力が高く、定着もしやすいと思います!

 

もしも、プログラミングを始めようかなと思っている人がいたら、

本を読んだり話を聞くだけじゃなく、

実際にコードを書いてください!そして自分の作りたいものを作ってみてください!

 

そうすれば、その楽しさゆえ知識も頭にたくさん入ってきます!!

 

 

そして、この研修のおかげで同期のみんなとすごく仲良くなれたと思ってます!

ぶつかり合うこともあったけど、それだけ本音で言い合える関係になれたことは

本当に良かったと思います!

 

現在

今は新卒研修として以下のことをやってます!

 1、TOEIC800点を目指すための勉強

 2、開発に関する様々なInput(本や講義)

 3、テストコードの書き方の練習

 4、チーム開発

 

ざっくりとそれぞれを解説しようかなと思います!

 

1、TOEIC800点を目指す勉強

なぜ800点なのかというところなんですけど、これはエンジニア界隈では、有名な

Q&Aサイトでstack overflowというサイトがあるんですが、

ここに投稿、回答、閲覧できるのが約800点だと言われています。

他にも、ライブラリやAPIのドキュメントなんかは英語で書かれていることが多いので、

エンジニアとして英語は必須のスキルなんです!

 

2、開発に関する様々なInput

これは、言わずもがなですが、

エンジニアとは勉強し続けなければならない職業です。

新しい技術が次々と出てくるので、常に勉強する姿勢というのが大切です。

経験が浅い僕は、基礎知識自体も全然足りていないので、実践に入る前にしっかりと知識を蓄え、そして常に勉強する姿勢を維持できるように

今は、無限に与えられる課題図書をひたすら読み続けています!

 

3、テストコードの書き方の練習

入社した当初はテストコードなんているの?

なんて思っていた僕ですが、 テストはものすごく重要です。

これをしっかり行っていないと、バグによって開発者のライフスタイルは、

強制的に、明石家さんま状態になります(不眠不休)

しかも全然笑えません。

 

逆にテストをしっかり行えば、

バグは出にくくなり、たとえ出たとしても修正しやすい

コードになっているので、バグの発見がしやすいです。

 

もちろんテストをしてもバグは0にはなりませんし、一概に

修正しやすいコードになるとも言えないのですが、

やらなかったら本当に大変なことになります。笑

 

なので僕らもしっかりとテストコードについて勉強しています!

 

4、チーム開発

最後はチーム開発です。

今回は社内で利用する図書管理システムを作っております。

スクラムというアジャイル開発手法を使いながらプロジェクト

を進めていて、

ここでは、実践を通してスクラム、要件定義、プログラミングetcを学んでいます!

実践に入れられた時に困らないように鍛えているわけです!!

 

長くなりましたが、以上が僕らのやっている研修です!

 

少しでも面白そうだなと思ったら是非、下のリンクからチェックしてみてください!

以上ぐっちでした!

 

弊社について

弊社ではエンジニアの募集を行っております。
ぜひ募集記事をチェックして頂けると嬉しいです!


www.wantedly.com


www.wantedly.com

 

 

 

 

新人ようたの冒険:コーディング規約チェックツールでプルリク村に平穏を取り戻す編

こんにちは!こんばんは!
16新卒のよう太です。

最近、某タラレバ娘を見るたび恐怖感に襲われます。

今回は RailsBestPractices についてまとめてみました。
FactoryGirlは一回休みです( ー`дー´)

f:id:Yoko_Takaki:20170228123109j:plain

続きを読む

EditorConfigでコーディングルールの統一

こんにちはエンジニアの松崎です。
早速ですが皆さんチーム内で同じエディターを使われていますか?

  • SublimeText
  • Atom
  • Vim
  • IntelliJ IDEA

その他様々なエディターをチーム内でバラバラに使用していることが多いと思います。
またエディターだけでなく
「htmlのインデントはタブで( +・`ω・)b」
「cssのインデントはスペースで( ・`ω・´)」
のようにそれぞれの自分ルールが存在していて、新しく入った人は間違えるだけで怒られることも… ( ̄ー ̄;

続きを読む

Bitbucket Pipelinesでとりあえずユニットテストを動かす

元ネタはこちらです。

Bitbucket pilelinesって?

Atlassian製のCIツールです。 BitbucketへのアクションをトリガーとしてDockerコンテナ上でタスクを実行してくれます。 当然ながらBitbucketをリポジトリとして利用していないと意味ないです。

元々の悩み

  • Bitbucketでプルリク送ったけど、これテスト通ってんの?とかいちいち確認したくない
  • developにマージしてから確認だとプルリク閉じちゃっている場合あるし、そもそもテスト通ってからプルリク送れや( ゚д゚ )とか荒ぶることになってしまう。

やりたいこと

タイトルの通り、Bitbucket Pilelines使ってbranchへpushした時にユニットテストを動かしてしまおう作戦

問題

  • push単位だとジョブが割と頻繁に動作してしまう → とりあえずpipelinesは今の所タダだし良いか( ´∀`)

設定

Bitbucket Pipelinesを開始するには、まず以下の手順で有効にする必要があります。

リポジトリの設定 > PIPELINESのSettings > Enable Pipelinesをクリック

これで有効になるので、プロジェクトのルートにbitbucket-pipelines.ymlを設置することでタスクを実行させることが出来ます。

続きを読む

新人よう太の冒険: FactoryGirlとティータイム編

こんにちは、こんばんは!
16新卒のよう太です。

先日、マッチングアプリを起動したら、リストに知り合いがいてびびりました。

さて、今回は 「もっと!FactoryGirlをテーマに、

  • 連番のデータ
  • リアルなダミーデータ
  • 関連モデルのテストデータ

以上3種類のテストデータをモリモリ作っていこうと思います。

f:id:Yoko_Takaki:20170130115810j:plain

FactoryGirlの導入方法や、基本的な使い方に関しては
こちらの記事を見ていただけると嬉しいです⊱ฅ•ω•ฅ⊰

新人よう太の冒険: FactoryGirlとの出会い ~序章~

続きを読む