react-native開発用IDEのDECOを使ってみた

react-native開発用IDEのDECOを使ってみた

みなさんこんにちは、個別指導塾コミット塾長、AWESOME開発担当の船津です。

react-nativeをはじめてみたものの、ES6の書き方とかわからない、Stateってなんや、コンポーネント多すぎてわからんちんな方におすすめのIDEがあります。

オープンソフトで無料のIDE「DECO」です。

サイトはこちら

componentはこちらで管理されているようですね。

使い方のビデオはこちら

早速使ってみた

今回の目標は最低限のコードで最低限の機能を試すことです。スタイルは基本的にいじりません。

まずは新規プロジェクトを作成します。

react-native開発用IDEのDECOを使ってみた
このまま一旦デスクトップなどに保存してから、
⌘+B でプロジェクトをビルドして動かしてみます。

react-native開発用IDEのDECOを使ってみた

特に何事も無くビルド出来た模様… 表示が無いです。

シミュレーターを起動してみます。
今回はiphone6を選択します。

react-native開発用IDEのDECOを使ってみた

 

それではDECOの独自機能のコンポーネントの追加をしてみましょう。
一番簡単そうなTextInputをドラッグアンドドロップで挿入してみます。

react-native開発用IDEのDECOを使ってみた
こんな画面になりました。

react-native開発用IDEのDECOを使ってみた

 

TextInputをアレンジしてみよう

以下のように編集してアプリっぽくしてみましょう。

 class Project extends Component {
  constructor(props){
    super(props)
    this.state ={
      text: null
    }
  }
  render() {
    return (
    <View style={styles.container}>
      <Text>
        {this.state.text}
      </Text>
      <TextInput style={{ height: 30, width: 100, borderWidth: 1, borderColor: "rgba(0,0,0,0.5)", }} placeholder={'Type here'} placeholderTextColor={"rgba(198,198,204,1)"} onChangeText={(text) => {this.setState({text})}}
        onSubmitEditing={() => {this.setState({text: ''})}}
        value={(this.state && this.state.text) || ''}
      /> 
    </View>
    );
  }
}

名前を打つと画面に表示されるようになりました。

react-native開発用IDEのDECOを使ってみた

 

スイッチを追加してみた

同じようにドラッグしてスイッチを挿入します。
これだけでは味気ないので、もう少し遊んでみましょう。

renderの直下に以下を追加します

  render() {
    if(this.state.switchValue == true) {
      switchValue = <Text>Your Switch is On!</Text>
    }
    else{
      switchValue = <Text>Your Switch is Off!</Text>
    }

Viewの好きなところに以下を挿入します。

   {switchValue}

<Text>などで囲わないようにして下さいね。

以下のように画面上にスイッチが表示され、切り替えるとメッセージも変化するようになったはずです。

react-native開発用IDEのDECOを使ってみた

 

他にもあるよ

全部は確認できてはいないですが、
toggle buttonなど、DECOオリジナルのコンポーネントも存在し、導入してみるとnpm installが自動でスタートする親切ぶりでした。
ただ、実はエラーで動かなかったので、そのあたりについては次回レポートします!

Instagram Feed

Load More

Instagram

専務取締役

funatsukeisuke

WEBと教育を組み合わせて何かおもしろいことをやってやろうと画策しています。AWESOMEでは開発を担当、個別指導塾コミットでは塾長と2足の草鞋を履きながら日々勉強しています。

他の投稿を見る →