シアトルコンサルティング サービス開発ブログ

シアトルコンサルティング株式会社プロダクトソリューション事業部の開発ブログです

シアトルコンサルティング新卒採用サイトをリリース！

シアトルコンサルティング Webサービス事業部

こんにちは iijmyaです。

今月11月1日に、弊社シアトルコンサルティングの新卒採用サイトをリリースしました！

新卒採用サイトイメージ画像

4月に新卒エンジニアとしてシアトルに入社した私は、今回の新卒採用サイトが初めて任せていただいたプロジェクトでした。

サイトの企画やデザインから始まり、実装、テスト、リリースまで、一連のフェーズに入社1年目のうちに携わることが出来たのは、とても良い経験だったと思います。
なかでも、新卒で入社した私にとって、実装面では初めて使うような技術もあり、エンジニアとして得るものが多かったと思います。


そこで、今回は当サイトを実装するにあたって用いた技術を簡単にご紹介します。

1．主な使用技術

今回、開発に使用した主な技術は以下の3つです。

  • HTMLを生成するための「Jade」
  • CSSを生成するための「Stylus」
  • JavaScriptを生成するための「CoffeeScript」
■ Jade

HTMLの生成にJadeを用いることで、閉じタグなどの余分なコードが削減したり、インデントによる可読性向上や、ページ共通部分のコンポーネント化が可能になるなどのメリットが挙げられます。

//- layout.jade
div.body_inner
        include header
        block content
        include footer


■ Stylus

CSSの生成にはStylusを用いることで、値の参照が出来たり、ネスト記法により、要素に対するスタイルの影響範囲を限定しやすくなるメリットがあります。

//- style.styl
$fixedWidth = 980px

div.main
	width: 100%
	min-width: $fixedWidth

…

		&.other
			div.copyright
				padding-left: 5px
				margin-bottom: 15px
				div.logo
					padding: 0
					img 
						width: 50px
						height: @width


■ CoffeeScript

JavaScriptの生成にはCoffeeScriptを用いることによって、文末のセミコロンやvarのつけ忘れによる予期せぬ動作の回避や、コード量の削減といったメリットがあります。

class Slide
…

	constructor: (option)->
		@lists = $('.slide')
		@listsLength =@lists.length
		
		@lists.eq(@index).css("z-index", 10)
		setInterval(@slide, INTERVAL)


2．その他の使用技術

■ Grunt.js

タスクの自動化ツールであるGrunt.jsを用いて、.coffeeなどのファイルの変更を感知し、リアルタイムでコンパイルすることが可能になるため、JadeからHTML、StylusからCSS、CoffeeScriptからJavaScriptへのコンパイルを意識せずにコードを書くことが出来ました。

また、JavaScriptの圧縮ライブラリであるUglifyJSを使用して、JavaScriptのminify処理も行っています。minify処理を行うことでファイルの容量を削減し、Webページの表示の高速化が期待できるようになります。

■ Media Queries

今回、モバイルでの閲覧比率が高くなることを予想して、CSSのMedia Queriesを用いてモバイル用のUIにも対応しました。

//- layout.jade
meta(name="viewport", content="width=device-width")

//- style.styl
$fixedMobileWidth = 480px

@media screen and (max-width: 700px)
	body
		div.body_inner
			width: $fixedMobileWidth
			background-color: #fff
	header.mobile_header
		display: block !important


■ nib

Stylusのライブラリであるnibを用いることで、ベンダープレフィックスが自動で付いたり、clearfixを簡略化することが出来ました。

//- style.styl
@import 'nib'
header.mobile_header
	…
		&.title
			a
				width: 150px
				height: 75px
				background: url("/fresh/image/exam.png") no-repeat
				background-size: cover

//- style.css
header.mobile_header div.title a {
  width: 150px;
  height: 75px;
  background: url("/fresh/image/exam.png") no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
}



簡単ではありますが、今回のプロジェクトで使用した技術についてざっとご紹介いたしました！
今後も、自社開発プロジェクトについてご紹介していきたいと思います。