ふんばりフロントエンジニアのブログ

新米フロントエンジニアのふんばっている日々と備忘録です。

イラレの個人的注意点をまとめてみた

 

さて、しばらくコードの話をしていたので今回はイラレについてお話しようと思います!

私は業務でデザイナーさんから送っていただくデザインを元にコーディングすることが多いのですが、その場合フォトショかイラレかのどちらかをいただきます。

その中でもイラレの方がなんとなーく迷うことがありそうなので備忘録がてら書いていこうとおもいます。

 

ダイレクト選択ツールで選択しようとしたら背景が持ってかれる...

直感的に使うとなると陥りやすいやつですね。

こちらはかなりシンプルで背景レイヤーにロックをかけるだけで解決できます。

また背景レイヤーだけでなく、選択したくないレイヤーや動かしたくないレイヤーにはあらかじめロックをかけておくといいかもですね。

クリッピングパスがかけられているレイヤーを余白なしで書き出したい!

普通にクリッピングパスがかけられているレイヤーを選択して書き出そうとすると、そのクリッピングがかけられている元のレイヤーのコンテンツは含まれませんが、元のレイヤー分の幅・高さで書き出されてしまうので余白が生まれてしまいます。

その際には、アートボードツールを使うと綺麗に書き出すことができます。

まずダイレクト選択ツールでクリッピングマスクがかけられているレイヤーを選択します。

そしてアートボードツール(mac:shift+O)に切り替え、そのレイヤーをもう一度クリックするとその選択したレイヤーでアートボードが作られます。

アートボードができたらあとは「書き出し」から「スクリーン用に書き出し」で書き出したいアートボードを選択して書き出せばOKです。

 

簡単な内容でしたが備忘録として残しておきます...

React.jsの環境をnpmで作ろう!APIからデータを取得する方法も実践!

 

今回は先延ばしにしていたReact.jsを使うための環境構築、そしてAPIからデータを取得して利用する方法についてご紹介していきたいと思います。

いや〜propsの理解についても苦労しましたが、何と言っても環境構築が一番手間取りましたね...

最近ではDockerなどを使って仮想環境を作成することもあるのですが、どうもその辺りが苦手でして(汗

とは言え、React.jsの場合はnpmで「create-react-app」というコマンドがあるので、それを知ってさえいれば苦労はしなさそうですが...

ということで今回はnpmで一からReactを利用できるようにするまで、そしてタスクランナーの設定までご紹介したいと思います!

さて、Reactの環境を作るために必要なものはなんなのでしょう?

純粋にReactのコードを動かすためなら必要なものは以下の二つです。

npm install react
npm install react-dom

これはreactとreact-domのパッケージを追加するためのコマンドですね。
しかし、これだけではReactのコードを記述することができてもjsxの記法しておりませんので、前回そして前々回に私が作成したようなrender()の中にHTML
を書くような記法は取ることができず、あくまでjsのネイティブ的な書き方をするしかありません。
でも、どうせなら可読性の高いjsxの記法をしたいですよね???(強制)
ということで、今回初めてjsの依存関係を整理してくれる「browserify」を使ってみました。

gulp.task('browserify', function() {
  browserify('./src/index.js', { debug: false })
    .transform(babelify,{presets: ['es2015', 'react']})
    .bundle()
    .on("error", function (err) { console.log("Error : " + err.message); })
    .pipe(source('bundle.js'))
    .pipe(gulp.dest('./dist'))
});

私はタスクランナーとしてGulpを使っているのですが、browserifyのタスク指定は上記の通りです。
最終的にindex.jsというコンポーネントをbrowserifyするのですが、このindex.jsは一般的にいちばん親のコンポーネントであるApp.jsのさらに親のコンポーネント
つまり関係性を表すとすれば↓のようになりますね。

index.js
 -App.js
  -Componet1.js

んー、ちょっと具体例がわかりにくいですかね...
本来であればApp.jsでbrowserifyをかけてもいいのですが、なんとなくスッキリしているのが好きなのでindex.jsというさらにラッパーなjsを作成しているような感じです。
ちょっとわかりづらそうなので一部コードを載せてみたいと思います。
index.js

import React from 'react'
import ReactDOM from 'react-dom'
import App from './component/App'

ReactDOM.render(
  <App />, document.getElementById('content')
);

Componet.js

mport React from 'react'
import {render} from 'react-dom'

class Question extends React.Component {

  render(){
    if(this.props.count > 0){
      return(
        <div  id="questions" className="questions">
        <button onClick={this.props.countHandler}>push</button>
        <p>{this.props.count}</p>
        {this.props.question.map((data,index)=>{
          if(index === this.props.count){
            return(
              <div key={`Q${index+1}`} id={`q${index+1}`} className="inner">
                <p key={index}>{data.text}</p>
                <img key={`imgQ${index+1}`} src={`../img/q0${index+1}.jpg`} />
                <div className="question">
                  <button className={data.question[0].type} onClick={this.props.answerCountHandler}>{data.question[0].text}</button>
                  <button className={data.question[1].type} onClick={this.props.answerCountHandler}>{data.question[1].text}</button>
              </div>
              </div>
            )
          }
          })
        }
        </div>
      )
    }
    else {
      return (null);
    }
  }
}

export default Question;

App.js

import React from 'react'
import {render} from 'react-dom'
import Question from './question'
import Start from './start'
import Result from './result'

class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      count: 0,
      questions: [],
      results: [],
      countType: [],
      userAnswers: [],
      done: false,
      type: '',
      hasError: false,
      isLoading: false,
    }
  }

//----------関数定義 st----------//

  componentDidMount() {
    this.fetchQuestionData('../data/data.json');
    this.fetchResultData('../data/result.json');
  }

  fetchQuestionData(url) {
  this.setState({ isLoading: true });
  fetch(url)
    .then((response) => {
      if (!response.ok) {
        throw Error(response.statusText);
      }
      this.setState({ isLoading: false });
      return response;
    })
    .then((response) => response.json())
    .then((data) => this.setState({ questions: data }))
    .catch(() => this.setState({ hasErrored: true }));
  }

  fetchResultData(url) {
  this.setState({ isLoading: true });
  fetch(url)
    .then((response) => {
      if (!response.ok) {
        throw Error(response.statusText);
      }
      this.setState({ isLoading: false });
      return response;
    })
    .then((response) => response.json())
    .then((data) => this.setState({ results: data }))
    .catch(() => this.setState({ hasErrored: true }));
  }

//----------関数定義 en----------//


  render() {
    if (this.state.hasError) {
      return <p>error</p>;
    }
    if (this.state.isLoading) {
      return <p>loading . . . </p>;
    }
        return (
        <div className="App">
          <Start count = {this.state.count} countHandler = {this.countHandler.bind(this)}/>

          <Result count = {this.state.count} result = {this.state.results} />

          <Question
           count = {this.state.count}
           question = {this.state.questions}
           countHandler = {this.countHandler.bind(this)}
           answerCountHandler = {this.answerCountHandler.bind(this)}
           />
        </div>
      );
    }
  }

export default App

かなり長くなってしまいましたが関係ないところは一応省きました。
コードの中身はとりあえず追わないでもらって、今みて欲しいところはimportとexportです。
見てもらえればわかると思うのですが、上記の中でindex.js以外は全てそのクラス自体をexportしています。
そしてApp.jsではComponet.jsのクラス「Question」をimportし、index.jsではそのApp.jsをimportしてReactDOMで最終的にimportしてきたApp.jsをrenderしています。
ぶっちゃけindex.jsを作る必要はあまりないのですが、実行クラスを完結にすることでなんとなくスッキリしますよね。
そして最終的にはこのindex.jsをbrowserifyすることで各コンポーネントとの依存関係を解決しています。
いやーbrowserify便利ですね。
さて、Reactの環境を作るのに必要な要点はこのreactのパッケージ、そしてコンポーネントごとに分けるならbrowserifyが必要なのですが、もちろん他にもインストールするべきパッケージは多々あります。
こちらのpackage.jsonをnpm installすればReactの環境は作れると思いますので、ぜひ試してみてください!

{
  "name": "npmreact",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "watchify -t babelify ./app.js -o ./build.js",
    "start": "browser-sync start --server --files='./*.html, ./*.js'"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.3",
    "browser-sync": "^2.24.5",
    "browserify": "^16.2.2",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^5.0.0",
    "gulp-babel": "^7.0.1",
    "gulp-sass": "^4.0.1",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-uglify": "^3.0.0",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "vinyl-source-stream": "^2.0.0"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babelify": "^8.0.0",
    "watchify": "^3.11.0"
  }
}

さて、Reactの環境構築についてはこのあたりにして、最後にAPIからデータをとって利用する方法についてご紹介します。
今回作成したのはgithubにあるAPIを叩いて、配列のnameだけをリストにしたものです。
codepen.io
ここで重要なのはやはりfetchですね。

Appクラス~~~
  componentDidMount() {
    this.fetchData('https://api.github.com/users/mismith0227/repos')
  }

  fetchData(url) {
    fetch(url)
      .then((response) => response.json())
    .then((responseData) => {
      this.setState({
        data: responseData,
      })
    })
  }

ここではfetchDataというメソッドを定義して、引数にAPIのurlを指定するようにしています。
ComponetDidMount()というのはReactのライフサイクルに関わるメソッドなのですが、これに関してはググってみてください。
さて、肝心のfetchですがデータの取り方や渡し方は普通のjsと同じですのでMDNでfetchを調べてみるといいと思います。
ただ普通とは違うのが最後の「setState()」ですね。
これで空配列のstate「data」にAPI で取得したものをセットしています。
これによってstateとしてAPIのデータを利用できるので、あとは前回と同じです。(map関数に関しては次の機会でお話したいと思います...)
このようにして、APIで叩いた結果をReactで利用できるようになるんですね。
実際に実行できるようになるまでは時間が少しかかってしまいましたが、コード自体はシンプルなのでぜひ上記コードにあるgitのAPIで試してみてください!

さて、今回はReactの環境構築とAPIを叩いてデータを利用する方法を見ていきました。
環境構築を一から行うのはやや骨が折れると思いますが、冒頭でもお話したようにcreate-react-appという便利なコマンドがあるようなので、今ならそこまで時間がかからないのかもしれませんね。
またAPIも簡単に利用できるのでReactでできることの幅も一気に広がると思います。
参考になるかはわかりませんが、私が作成したものを煮るなり焼くなりして動きを掴んでもらえればと思います...
では次回は「Reactでの注意点やmap関数について」をお送りしよう(変わるかも...)と思いますので次回もよろしくお願いいたします!

個人的難敵「props」とは?stateとの関連も含めてオレオレ解説

さて前回はReactの概要的なところから最終的にはstateを使ったカウントアッププログラムまでを説明しました。

前回のような単純なプログラムであればstateだけでも確かにいけるのですが、それではまだReactの恩恵に預かっているとは言えないよう。

今回ご紹介するのは主に「props」について!

私はこのpropsというものがよくわからなすぎて悶絶していたこともあり、Reactの中で一番の難敵?と思っています...

「stateとpropsとは?」という記事がよくありますが、前回も言ったように学び始める際にはこの二つは「分離して考えた方が良さそう」というのが個人的な見解です。

前回はstateを使ってカウントアッププログラムを作成してみましたので、今回もわかりやすいようにこのプログラムを踏襲してpropsについてご紹介したいと思います。
codepen.io

今回作成したものは前回作成したカウントアッププログラムと実行結果を同じもの。

そして前回作成したものはこちらです。↓
codepen.io


こちらではCountクラスのstate「count」をそのままCountクラスのrenderメソッドで描画しています。

しかし、今回作成したものでCountクラスのstate「count」を描画しているクラスはCountではなく「CountNumber」というクラス。

(余談ですがReactではクラスを定義する際に最初の文字が大文字でないと怒られるので注意です...パスカルケース?って言うようですよ...

そして今回作成したものと前回作成したもので違う点がクラス以外にもう一つ。

それが「Count」クラスの中にある「constructor」の「props」。

ここでようやくpropsが出てきましたね〜

propsはproperties(プロパティ)の意味のようで、そのクラスがもつプロパティと考えて良さそう。

しかしこれとstateの違いが最初はわからなかった...(今も曖昧ですが)

ですが先ほども言ったようにstateとpropsを一度分離してみるとわかりやすかったです!

前回作成したものはstateだけで動いてしますが、今回作成したものはpropsも使って動いています。

この二つでの違いはズバリ「新しいクラスに値を渡すかどうか」でしょう。

今回はCountクラスで定義したcountというstateをCountNumberというクラスに渡しています。

この時に重要なのがpropsでpropsを使うことで、自身のもつstateを子に渡すことができます。

そしてpropsを利用してstateを渡すお作法がこちら。

constructor(props) {
  super(props)
  this.state = {
  count: 0

}

前回のものをみるとわかりますが、constructor( )とprops( )の引数に(props)が与えられています。

これは正直わからないのでpropsを使って値を渡すために必要なお作法だと覚えておきましょう。

これを使うことで、子のクラスに自身のstateを渡すことができるのですが、渡し方と受け取り方にもあるお作法が。

渡し方のお作法

<CountNumber count = {this.state.count} />

受け取り方のお作法

<p> {this.props.count}  </p>

こちらが渡し方と受け取り方のお作法になります。

私がこのようなクラス作ってプロパティ作ってクラスメソッドを...というような言語に慣れていなかったため困惑したのだと思いますが、よくよく考えるとstateとpropsの違いは上記のお作法で完結しているのではないでしょうか?

自身のクラスの状態を表すプロパティであるstateは「this.state」で参照することができるので自クラスのメソッドであるrenderで渡すには自身(this)のstateを参照し、適当な変数に入れて子クラス(他のコンポーネント)に値を渡すことができるわけですね。

少し混乱すると思いますが、このように複数のコンポーネントを管理する場合はまずメインのコンポーネントを作成した後に他のコンポーネントの骨組みを作ってしまった方がわかりやすい気がします。

今回の場合はただカウントアップしていく「数字」のみを表示するコンポーネント「CountNumber」を作って、その後にメインコンポーネントである「 Count」でCount自身のstateをCountNumberに渡すようにしています。

そして前回抜けていた関数を実行する場合にもあるお作法があります。

<button onClick={this.countUp.bind(this)}>push!</button>

Reactではこのように現在のHTMLではあまりよしとされていない「onclick」を使ってイベントを設定することができます。

ここで関数を設定するお作法は「{this.countUp.bind(this}」というもの。

CountクラスではクラスメソッドとしてCountUpというものを定義していますが、これをrenderメソッド内で参照するにはstateと同じようにthisが必須。

しかし、ここで重要なのは「bind」です。

動かしてみるとわかりますが、このbindがないとこのプログラムは動きません。

これもよくわかっていないのですが、bindとはそもそもbind(オブジェクト)のようにあるオブジェクトに関数を紐づけて新しい関数を作成するというもの。

thisについてはまだまだ勉強中ですので詳しいことはお話できませんが、ここで言えば自身のクラスにこのクラスメソッドを紐づけている、ということで良さそうです。

このbindを与えることで関数が実行できるようになるのでこれも覚えておきましょう。

そして関数を渡す場合のお作法もほぼstateを渡すような場合と同じです。

渡し方のお作法〜関数編〜

<CountNumber countUp = {this.countUp.bind(this)} />

受け取り方のお作法〜関数編〜

<button onClick={this.props.countUp} >push! </button>

こちらもpropsを通じて受け渡しをすることができるんですね。

この例でもわかるように、とにかくpropsはstateやメソッドなどクラスで定義されているものを受け渡しするためのもの、と考えていいです。

stateは自身の状態を定義するだけのものなのでここがpropsと違いますね。

さて、propsとstateの違い、また関数の実行の仕方についてオレオレ解説していきましたがいかがでしたでしょうか?

Reactを触っていく中でも感じましたがやはり「触ってみることが大事」ということをひしひしと感じましたね。

一通りReactの概要やお作法に関しては解説したつもりなので、次回はReactをnpmで環境構築をする場合、少し発展?してAPIからデータを取得して利用する、といったことについてお話していきたいと思います!

「初心者と学ぶReact.js!」入門チックなことを書いてみよう

今回は何かと話題のFacebook謹製jsライブラリ「React.js」について学習した記録を書き綴ろうと思います。

Angular、Vue、Reactの御三家みたいなところはありますが、なんとなく名前がかっこいいのとFacebook製というところに惹かれ一週間前からちびちび学習してみた、というのが学習のきっかけですね〜

ということで学習してみたはいいものの、これまた意外と難しい...

チュートリアルが優しい!」ということでも有名なようですが、自分の理解力のなさが露呈してしまいましたねえ... (意外と同じようなかた多いのではないだろうか(希望)

さて、そんなことはさておきましてなんやかんやでReactで一通りの使い方や考え方を自分なりに掴んだつもりでおりますので今回書いてみようと思った始末でございます。

では早速、Reactとはどのような仕組みなのかをオレオレ解説でいってみよーと思います。

Reactの仕組みをオレオレ解説

Reactとは先ほどもいったように、Facebook謹製のjsライブラリです。

よく言われているのが「MVW」のV、つまりView部分を担っているのがReact。

そしてReactの考え方で重要なのは「Component(コンポーネント)」です。

このComponentは直訳で「構成要素・成分」などの意味がありますが、まさに役割としては意味の通りで「構成要素」と考えてもらっていいと思います。

まあjsを使用する中で「コンポーネント化」というのは聞き馴染みのある方も多いのではないでしょうか?

処理ごとにjsを分けて最終的に一つのjsにまとめて読み込む、というアレですね。

これはscssやphpのテンプレート化でも使われている考え方ですし、これからは「コンポーネント化することが主流となる」とも言われています。

少し脱線しましたが、要するにコンポーネントは構成要素で部品です。

このコンポーネントを最終的に組み合わせて一つのアプリケーションを作ることがReactの考え方で、それぞれをコンポーネントとして分けることでそれぞれの保守性を高めている、と考えて大丈夫そう。

少し文字が多くなってしまったので、ここで例をみてみたいと思います。

codepen.io

こちらは簡単なサンプルです。

こちらのサンプルはcodepenで作っていますが、ちょっと設定に戸惑ったのでメモ。

1.settingsからjsを「Babel」にする。

2.「Add External Scripts/Pens」からcdnのURLを読み込むか、「Quick-add」からReactを選ぶ

基本設定はこれで終わりますし、あとはコードを書くだけなので、よかったら試してみてください。

一番時間がかかったReactをnpmで使う場合も今度の機会に...

さて今回のサンプルですが、二つのクラス「Hello」と「World」を作り、それを「HelloWorld」というクラスでまとめて、最後にHelloWorldクラスをidがrootの場所に配置する、というもの。

Reactの記法はバージョンによってコロコロ変わっているようですが最新のドキュメントではこちらの記法が推奨されているよう。

クラスを作る方法は、「class クラス名前 extends React.Component」でいけます。

そしてこのクラスはほぼコンポーネントと考えて良さそう。

厳密に言うと違うようですがそんな感じの理解でいいでしょう(適当)

そしてクラスにはある重要なメソッドが含まれています。

それが「render」というメソッド。

このrenderについては正直あまり考えなくていいと思うのですが、どうやらHTML要素を生成するためのもののようです。

このrenderを使わないとどうにもなりませんし、renderで返すものが一つもないとえらーになります。

つまりコンポーネントを作成するにはrenderが必要で、renderで返すものがないとComponentは作成できない、ということですね。

さて、ここまではなんとなーく理解ができるような気がします。

しかし私を悩ませたよくわからないもの二つが↓から登場するのです...

codepen.io

こちらはボタンを押すとカウントが上がるというシンプルなアプリケーションです。

基礎を学ぶには一番いいのかな?と個人的に思いましたね。

そして私がよくわからなかったものは上記に出てくる「state」と「props」です。

正直、上記の例ではstateだけで動かせてしまうので最初のうちはpropsについて深く考えない方が得策な気がしましたね。

さて、まず攻略したいがのこのstateというもので、これは直訳すれば「状態」という意味を持ちます。

今回で言えばCountクラスの中の「state:状態」としてcountというプロパティを持っている、と言えます。

そしてReactの特徴なのが、このstateによって描画(render)されるものが変わっていくということ!

拙い例ではありますが、カウントがどんどん上がっていくのがいい例ですね。

ではこのstateをどのようにして更新していくのか?

それはsteStateというメソッドを使うことで実現することができます。

実はReactではstateを「this.state.count += 1」のように更新することはできません。

その代わりにsetStateというメソッドを使ってしっかりstateの値を変えることを明記する必要があるんですね。

setStateの使い方は上記の通りで「setState( { state名:変数や値 } )」とするのが作法です。

今回の例では最初に変数countを定義し、その変数を+1したのちにsetStateするという流れになっています。

この考え方は重要なので覚えておくといいですよ!きっと!!笑

そして今回定義している関数「countUp」なのですが普通のjsとは少し書き方が違いますよね。

これも作法なのでとりあえずは何も考えないでこのように書いてみてください。

さてここまでで、「class」「render」「state」について知ることができました。

次はいよいよpropsなのですが、propsはちょっと長くなるかもなのでとりあえず今日なこの辺で終わりにしようと思います...

初心者で拙い解説ではありますが、少しでもお役に立てればよいなあ...

診断コンテンツ作成するには?作るためのメソッドを紹介!

 

本日業務で診断コンテンツを作成することがありましたのでそれの備忘録をご紹介しようと思います。

本日作成したのは以下のような診断コンテンツです。

  • 結果は最終的に4つのタイプに分かれる
  • 二択の質問に回答して結果に導く
  • 問題数は全部で5個

まあシンプルな診断コンテンツですよね。

ABCD4つのタイプがあったとして、各タイプに関する質問をしてその質問を二択のうちから回答を選んだら、回答ボタンに紐づいているタイプをカウントしていくような流れとなっています。

例を出すとするなら「A」タイプに紐づいている「a」の回答をしたら「A」をカウントしていくようなイメージです。

では前置きは置いといてサンプルを見てみましょう。

codepen.io

今回サンプルとして出しているのはご覧の通り、5個の質問で現れる選択肢を選ぶことでどのタイプか、というのを判定するもの。

今回はちょっとめんどくささもあったので紐づいているタイプを選択肢に書いちゃってます(笑)

なので手っ取り早く動作を確認するにはひたすら同じアルファベットの選択肢を選ぶことでちゃんとそのタイプのアルファベットが表示されるか、ということを見ていけば大丈夫なはず。

ちなみにずっと左側押していると、受け取る値は「R,R,S,A,I」となるので一番数の多いRタイプになりますね。

このコンテンツの仕組みは「配列」が重要です。

このコンテンツで使用している配列は全部で3つ。

 

①userAnswers…選択肢のボタンに紐づいている「クラス」をjsで取得し、そのクラスの値をユーザーの回答として保持する配列。

②countType…各タイプが配列の中に何回出てくるかをまとめた配列。

③counts…各タイプの数「count」とタイプを識別するkey「type」の連想配列

 

まあ、2と3はまとめられる感じもしますが勉強のため、ということで…

さて、この配列たちの役割はこんなところなのですが見てもらえれば分かる通りuserAnswersに入った値からそれぞれの値の中でどの値が一番多いのかを判定し、多い値のものをsort関数でインデックス0番に持っていき、そのtypeを返すという流れになっています。

仕組みに関しては以上のような形なので細かい処理は割愛して、今回「なるほど!」となった処理「Array.filter」について見ていきたいと思います。

Array.filter

Array.filterは配列の値をフィルタリングする関数です。

使い方はコードの中にもありますが下の通り。

配列.filter((変数)=>変数の処理)

この類の関数はforEachとかfor...inとかでも見かけますね。

引数の変数に配列の値が入り、その変数を使って値を一個ずつ処理できる、というものです。

phpでは配列の重複をカウントできるメソッドがあるようですがjsではそのようなメソッドがなかったので今回はfilterを使ってそれぞれの値の数を計算しています。

はじめて使いましたが配列を使う上ではかなり重宝しそうな予感…

 

さて今回は初めて診断コンテンツを作成しましたが、配列の重要性を改めて感じましたね…

正直配列は食わず嫌いしていましたが使ってみるとやっぱり便利!

jsでも簡単に配列を操作できる関数は結構多いのでもっと勉強していきたいですね〜

canvas続編!「Three.js」を使ってみたらさらに楽しすぎたお話。

 

さて、この前はHTML5の新要素「canvas」についていかに楽しいか、ということについて熱弁(そうでもない)しました。

しかし私、まだ「canvas」の楽しさの真髄に気づいていなかったんです。

ということでそんな楽しさの真髄を教えてくれた「Three.js」について今回はお話しようと思います。

 

Three.jsってなんぞ?

さて、Three.jsというのはどのようなものなのでしょう。

jsがついている時点で「ライブラリだろな」と思うかもしれませんが、まさにその通り。

Three.jsは「簡単に」今年大流行間違いなしの「3D」を作成できてしまうライブラリなんです。

どれくらい簡単かというと〜〜〜

codepen.io

このくらい簡単!

ちょっとコメントアウトが多いかもしれませんが一応コンストラクタなり、仕組みなりを書いてあるのでよかったら読んでみてください...

ではThree.jsの基本となる仕組みを見ていきたいと思います。

Three.jsで基本となる仕組みは次の5つ。

canvas

...canvasは名前の通りキャンバスで、描画する領域を取得するために必要なものです。

②scene

...sceneとは3D空間のこと。この3D空間に後述のMeshなどを入れ、3Dコンテンツを作ります。

③camera

...cameraは名前の通りカメラ。どの位置からsceneを見るか、ということを決めるためのものです。

④Mesh

...3Dコンテンツの中でもオブジェクトとなるのがこのMesh。先ほどのpenで言えば赤い丸はこのMeshで作られています。

Meshは「geometry(ジオメトリ:形状)」と「material(マテリアル:素材)」で構成され、それぞれプロパティをカスタマイズできる。

⑤renderer

...rendererもその名の通り、レンダリングをするもの。

レンダリングとは、

データ記述言語やデータ構造で記述された抽象的で高次の情報から、コンピュータのプログラムを用いて画像・映像・音声などを生成すること

 と書いてありますね。

このレンダリングをすることによって3Dコンテンツが可視化されるわけです。要するに一番上位の存在というわけですね。

さて、基本となる仕組みはこの5つでそれぞれpen内に自分なりの解釈をコメントアウトにて載せております。

コメントアウトを除けばコード量はかなり少ないですし、仕組みを想像できればスッと理解できる代物です。(と言いつつ結構曖昧...) 

イメージ的にはjsのDOM操作したりする感じと似てる?ような気がしますね。

さて、先ほどのpenでも3Dっぽさはありましたがさらに3D要素を加えたのがこちらになります。

codepen.io

ああ、まさに3D...

こちらもコメントアウト満載で申し訳ないのですが、一応解釈を記載しています。

このように、Meshをカスタマイズして自分なりの3Dオブジェクトを作成できますし3D感満載の奥行きがある動きも実装することができます。

また、Tweenなどのアニメーションライブラリと組み合わせることでかなり大胆な3Dコンテンツを作成できるようなのでチビチビ作っているサイトのファーストビューに使えたらなあ...と画策しております。

かなり取っつきやすいライブラリだと思いますし、公式ページにはどんなものかな〜と分かるようなサンプルもたくさんあります!

是非一度お試しあれ!

 

今更ながらcanvas使ってみたら楽しすぎて一日があっという間に過ぎた話

 

ふんばりフロントエンジニアの私ですが、やはりなぜフロントエンジニアが良かったかと言えば「目に見える!」からだと思っております。

実を言うと新卒で入った会社はゴリゴリのバックエンドで、研修の最中でも「見た目のことなんか二の次じゃ」感はあったんですよね。

しかし!「人は見た目が8割」とも言いますし、見た目はかなり重要な役割を担っていると思います。

そして今回はそんな「見た目」に重視した、コードを書けばすぐに反映されるとてもた楽しかった「canvas」について書いていきたいと思います。

 

canvasってなんぞ?

canvasってなんぞ?」

という方はおそらく少ないとは思いますが、一応MDNからの引用を…

HTML5 で導入された <canvas> HTML 要素は、JavaScript によるスクリプティングによって図形などを描画するために使用します。例えば、グラフを描く、写真を合成する、アニメーションを作成する、動画のリアルタイム加工やレンダリングに用いる事が出来ます。

うむ、わからない。

これだけ見て分かる人はきっと触ったことのある方でしょう。

ともあれ、「JavaScript」と一緒に使うHTML要素であることは分かりますよね。

では、簡単にcanvasの例をご紹介していきたいと思います。

codepen.io

 はい、これが「ザ・シンプル」なcanvasの使い方です。

canvasとは、jsを見ても分かるようにまずcanvasの置いてあるDOM要素を取得し、そこからコンテクスト(描画範囲)を取得することがまず第一。

今回の例で言えば変数「ctx」がcanvasのキャンバス(描画範囲)となっているわけです。

あとはその描画範囲で、どのような図形を描画するのか、どのような色で塗るのか

、ということを決めてしまえばこのような図形を描くことができるようになります。

「え、こんな図形ならcssでやれよ…」

まあ私もそう思います…

しかし、canvasが楽しいのはここから!

canvasのコンテキストは自由にカスタマイズすることができます。

そのため、HTML上にカスタマイズできて自由に消したり書いたりできる画用紙を用紙された気分になってしまいました…

ここで私、なんとなく私は画面いっぱいに埋め尽くしたいなあ…という謎の欲望が。

ということで作ってみたのがこんな感じのもの。

codepen.io

(練習用のものだったので余計なものも入っています、すみません…)

作ったものは上部のcreateボタンを押すと、ランダムで違う場所に違うサイズ、違う色の四角形を100個出す、というもの。

個人的にはcanvasというよりランダムにカラーコードを作る、という方法が「ああっ!」となりましたね。

意外と配色がいい感じにばらけてくれているので「今回の配色いいな…」とか「もう一回押すか迷うな…」というような感じで一人楽しんでおりました。

とまあ、こんな感じで自由に図形を書いたり文字を書いたりできるcanvasなのですが、ここで私「ずっと気になっていたjsライブラリ」があることを思い出したのです。

そのライブラリこそ…「Three.js」!

名前がシンプルでカッコいいですよねえ~

まあ皆さん知っていると思うのですが、業務で使うことは私の場合全くなかったので触れてこなかったんです…

せっかく暇だしcanvasやったし!ということで、今回はThree.jsにも挑戦してみたのですがそっちの方が長くなりそうなのでまた今度…