今年参加した勉強会、カンファレンス、イベント等々をふりかえってみた

こんにちは。@akase244 です。このエントリは イノベーター・ジャパン Advent Calendar 2017 11日目の記事です。

思い返すと今年もいろんな勉強会に参加したので、去年と同様にふりかえりネタでいってみようかと思います。

※事前にお断りしておきますが、私がふりかえり系の記事を書くとどうしても「長くなりがち」になってしまいます。本当に申し訳ありません。でも、最後までお付き合いいただけると非常に嬉しいです。

f:id:akase244:20171204175020j:plain

続きを読む

カイゼン(仮

f:id:Mamy1326:20171129222214j:plain

@mamy1326です。外の空気はすっかり冬の匂いですね。北国育ちとしては、雪が恋しい季節到来です。

この記事はイノベーター・ジャパンAdvent Calendar 2017の10日目の記事です。

ところで僕が働く環境は、

  • 業務改善や情報共有
  • 暗黙知の共有知化

と言った、いわゆる「改善タスク」 [^1] をチーム、会社組織として奨励していて、個人間に留まらず、さまざまな評価にも繋がります。

とても理想的な環境ですし、みんな本質を理解して運用していて、モチベーション高く仕事してます。

そんな環境にきて5ヶ月。 改善タスクについて、良いなあと思うところをイチメンバーとして振り返ります。

カイゼンできる理由

誰一人として、現状に満足していません。 カイゼンするために、こんなことをしています。

続きを読む

Reactでマークダウンエディタをシャッとつくる

こんにちは。イノベーター・ジャパン(以下、IJ)のエンジニアのbmfです。

この記事はイノベーター・ジャパンAdvent Calendar 2017の8日目の記事です。 f:id:bmf-dev:20171204132119p:plain

せっかくのアドベントカレンダーですが、あえて趣味に走りたいと思います。

準備

ビルド環境のセットアップが面倒なので、今回はFacebook公式のcreate-react-appというツールを使います。

npm install -g create-react-app

md-editorというアプリ名で環境を用意することにします。

create-react-app md-editor

次に、今回使うライブラリのインストールをしておきます。

cd ./md-editor

npm install --save marked

npm install

最後にサーバーを起動したら準備OKです。 npm start

実装

STEP1

実装に入る前に今回使用しない不要なファイルを削除しておきましょう。

  • App.css
  • App.test.js
  • logo.svg

src/index.js`src/App.jsで上記ファイルをインポートしている部分を削除しておきます。

それからsrc/App.jsのほうはreturn文の中身を空にしておきましょう。(ビルド時にreturn文が空で怒られますが一旦無視します。)

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

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

src/App.js

import React, {Component} from 'react';

class App extends Component {
  render() {
    return ();
  }
}

export default App;

STEP2

src以下にMarkdown.jsというファイルを作成します。 このファイルにはマークダウンのコンポーネントを実装していきます。

src/Markdown.js

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import marked from 'marked';

class Markdown extends Component {
  constructor(props) {
    super(props);
    this.state = {
      html: ''
    };

    this.updateMarkdown = this.updateMarkdown.bind(this);
  }

  updateMarkdown(event) {
    this.setState({
      html: marked(event.target.value)
    });
  }

  render() {
    const html = this.state.html;

    return (<div>
      <h1>Markdown Input</h1>
      <textarea onChange={this.updateMarkdown}></textarea>
      <h1>Markdown Output</h1>
      <div dangerouslySetInnerHTML={{
          __html: html
        }}></div>
    </div>);
  }
}

export default Markdown;

ほんの数行です。 これだけとりあえずマークダウンとして機能します。 ほぼ生のJSですね。 React特有なのはJSXくらいでしょうか。

STEP3

最後にMardown.jsApp.js内でインポートしましょう。

import React, {Component} from 'react';
import Markdown from './Markdown';

class App extends Component {
  render() {
    return (<Markdown/>);
  }
}

export default App;

動作確認

f:id:bmf-dev:20171204130049g:plain

ソースコードをハイライトしたい時にはisagalaev/highlight.js - githubを使ってmarkedをカスタマイズするといい感じになります。

参考

リポジトリ

ソースコードはbmf-san/til/javascript/md-editor/ - githubに置いてあります。

所感

Reactは素のJSに近い形でコーディングできるので、フレームワークに知識がロックインされづらいので好きです。

コードの説明はほとんど省きましたが、モダンなJSの話 by @bmf_sanの記事を見て頂れば大体わかるのではないかと思います。

当社ではVue.jsは使っていますが、Reactはまだ実案件で使っていません。

これを期にReactを使う機会が生まれればいいなぁ(願望)

明日9日目の担当は、今月入社されたばかりのHiroshi Satoさんです!

コンテナの中身を見てみよう

こんにちは、hanhan1978です。この記事はイノベーター・ジャパンAdvent Calendar 2017の6日目の記事です。

コンテナ仮想化が話題ですが、そもそもコンテナって何なのか気になりませんか?
自分は、抽象化された技術をそのまま見過ごして使い続けるのがすごく苦手で、夜も眠れなくなってしまいます...。

というわけで、今回はDockerのコンテナを中身を見てみることで、コンテナについての理解を深めましょう。

続きを読む

PHPカンファレンスDockerトークの再演してきました

こんにちは。 @hanhan1978 です。

先ごろ行われたPHPカンファレンス2017にて、イノベーター・ジャパンから4名のエンジニアが参加&登壇しておりました。

私自身は、Docker関連の発表をさせて頂き、近年のコンテナ開発の盛り上がりからか満員御礼+サテライト会場という感じに聴講していただけました。
自分自身では、大満足で完全燃焼した気持ちだったのですが...

当日、別の時間帯でDocker関連のトークをされていた@kunitさん @_nishigoriさんは、一部のネタを発表する前にタイムオーバーとなってしまったとか...

そこで、こんな提案から....

こんな感じに...

再演するという運びになりました。
再演 ~ PHPCon Dockerコマぶち抜きイベント - connpass

f:id:hanhan1978:20171130143951p:plain

@kashiokaさん、すいませんすいません....

続きを読む

AtomからVSCodeにPHPの開発環境を移行する

f:id:hacktk:20171201120952p:plain

こんにちは。 @hacktk です。この記事はイノベーター・ジャパンAdvent Calendar 2017の3日目の記事です。
以前 Atom IDEでPHPの開発環境をつくる というエントリを書きましたが、先日 Visual Studio Code (以下VSCode)に開発環境を移行しましたので、今回はその様子を書きます。

続きを読む