技術者ブログ – Reactの紹介

技術者ブログと題して社員が日ごろ取り組んでいる学習内容を紹介します。
今回はWEBデザインをテーマにしている第0ユニットです。
本記事では、第0ユニットが注目している「React」についてご紹介をします。

Reactとは?

Facebook社が開発したWebサイト上のUIパーツを構築するためのJavaScriptライブラリです。React.jsやReact.JSと呼ばれることもあります。よくAngularJSやjQueryと比較されますが、React自体はフレームワークでなく、あくまでもUIを構築するだけのライブラリです。

投稿者もこの記事を書く上で、調べるまで前者の人間でした。
実際、第0ユニットで利用しているMonaca上で、フレームワークを使用したテンプレートを作成する際、ReactやAngularJSが選べるため、わりと勘違いすることが多いかもしれないです。

Reactは、開発元の「Facebook」をはじめ、「Instagram」はもちろん、「Yahoo!」「Netflix」など、世界中で数多く採用されているみたいです。

特徴

・宣言的なView
・コンポーネントベース

宣言的なView

Reactは、Webアプリの各部分のView(見た目)を、「こういう表示にしたい」と宣言的に記述できます。
記述について触れましたが、ReactのViewの記述にはJSXという構文を使用します※1。
JSXは、HTMLとほぼ同じ構文で記述でき、JavaScriptの処理も組み合わせた記述も可能です。JSXを使うことで、HTMLのようにシンプルでわかりやすい宣言的なコードが書けます。
JSXの書き方について、投稿者の所感では、人によっては違和感を拭うのに時間がかかるかもしれないです。
※1…Reactを使う際にJSXを必ず使わなくてはいけないわけではないようです。

コンポーネントベース

Reactでは、WebアプリのUIをコンポーネントと呼ばれる部品に分割して管理します。コンポーネントは、単独で機能する再利用可能な部品です。大規模なJavaScriptコードも部品化させることで保守性を高め、既存のReactコンポーネントを再利用することで、開発工数を減らすことができます。

さて、ここまでの特徴のイメージを持ってもらうために、サンプルコード(中身部分)を用意しました。

JSXの書き方として、文字列以外の値(数字、boolean、変数など)を HTML タグの属性に代入する際には {} を使う特徴があります。※2
※2…他にも沢山特徴はありますが、今回は割愛させて頂きます。

例として、37行目を見ると{this.onInput}と書かれていることが確認できるかと思います。
ここでは、onInput(<input> 要素の値が変更)の際に、定義しているonInputを呼び出し、setStateによってnameの状態をイベントから取得した際の値で変更しています。
このようにコンポーネント(この例ではテキストボックス)毎に分割してWebアプリのUIを作っていきます。

  1. import React, { Component } from 'react';
  2. export default class Todo extends Component {
  3.     constructor(props) {
  4.         super(props);
  5.         this.state = {
  6.           todos: [],
  7.           name: ''
  8.         };
  9.       }
  10.       //テキストフィールドに入力された値を name として state に保存
  11.       onInput = (e) => {
  12.         this.setState({
  13.           name: e.target.value
  14.         });
  15.       }
  16.       //登録ボタン処理
  17.       addTodo = () => {
  18.         const { todos, name } = this.state;
  19.         this.setState({
  20.           todos: [...todos, name]
  21.         });
  22.       }
  23.       //削除ボタン処理
  24.       removeTodo = (index) => {
  25.         const { todos, name } = this.state;
  26.         this.setState({
  27.           todos: [...todos.slice(0, index), ...todos.slice(index + 1)]
  28.         });
  29.       }
  30.       render() {
  31.         const { todos } = this.state;
  32.         
  33.         return (<div>
  34.         超簡易版ToDoりすと<br/>
  35.           <input type="text" onInput={this.onInput} />
  36.           <button onClick={this.addTodo} >登録</button>
  37.           <ul>
  38.             {todos.map((todo, index) => <li key={index}>
  39.                 {todo}
  40.           <button onClick={() => { this.removeTodo(index) }}> 削除</button>
  41.             </li>)}
  42.           </ul>
  43.         </div>);
  44.       }
  45. }


上記ソースコードを環境整えた後にブラウザで表示してみました。
テキスト入力欄にデータを入れて、登録ボタンを押すと
画面上のリストが更新されたのが確認できます。
このように、データをどのように配置するかを定義しておくだけで、データの変更を検知し、自動的に表示を更新する。といった点もReactならではの特徴です。

今回はReactについて紹介しました。
次回の第0ユニットの技術者ブログもお楽しみに!

社内勉強会:要件定義について2

前回の勉強会の様子 – 要件定義について

今回の勉強会記事を担当する第0ユニットの「xig」です。

前回は「要件定義」をテーマとして勉強会が開催されました。
今回はその内容を基に後日実施した勉強会の様子の紹介です。

勉強会の流れは、以下の通りです。

①前回「要件定義」を振り返り

②ヒアリング内容を整理するため、業務フローの作成

③振り返り、まとめ


今回の勉強会では、前回勉強会のヒアリング内容を基に、
•要求をかみ砕き、細分化することで実装すべきか内容を洗い出す
•必要な機能、性能などを書き起こす
ということを実施しました。

ヒアリング内容を整理するため、業務フローの作成にチャレンジしていきます。

業務フローとは?

特定の業務に対する作業の流れを示すフロー図のことを指します。. 業務の始まりから終わりまでの間に、誰(どの部署)が何をやるのか、その時に利用するシステムは何か。
そして、その作業順番を図にすることで、それぞれのつながりを示し、業務プロセスを可視化するための図です。

ということで、業務の内容や課題を共有していきます。

こちらが業務フローを実際に作成している様子です。
ホワイトボードに内容を書いていき、
それに対して意見を交えながら業務の流れをまとめました。

業務フローを作成する人は場面ごとに交代で実施しました。
ここでは、サービスに登録するためのお店情報を
どうやって編集するかを整理しようとしているところです。

まとめ

今回の勉強会では業務フローを作成することで、
業務の内容や課題を整理しました。
突然ですが、皆さんは

「QRコードの読み込みをPayPayみたいにピッと支払いをするイメージで」
と聞いてどんなイメージをするでしょうか?

この一言を基に内容を整理した際、
「QRをお店が読むのか、利用者が読むのか」
が結局のところ分からなく、再度確認をする場面がありました。

実際の業務でも今回の勉強会の内容を生かして
整理することでクライアントとの認識齟齬をなくしていき、
クライアントとのレビューに臨んでいきたいですね。(´ºωº`)

それでは、次回の勉強会の記事をお楽しみに!

社員紹介(23-2)

閲覧いただきありがとうございます。
2度目の社員紹介になります、「xig」です。
前回の記事はコチラです。

前回、様々な趣味があると冒頭に書かせていただきました。
今回は食べ歩きの趣味にフォーカスを当てて、最近食べた美味しいものを紹介させていただこうと思います!

熱々!
焦がしニンニクのスープ×極厚肉ラーメン

1品目に紹介するのは、
静岡県袋井市のIC付近にある麺屋はやたろうで食べた
その名も「厚肉」。
画像ではわかりにくいのですが、
思っているより2.5倍はチャーシューが厚いこちらのラーメン。
なのに、口に入れた一瞬で溶けるそれはまさに角煮のような感覚でした!
(食べた瞬間思わず笑ってしまいましたw)

また、焦がしニンニクが効いたスープは、なめらかだけどパンチのある濃さで、ラーメンを熱々に保ってくれるため、最後の一杯まで楽しむことができました!

禁断の組み合わせ!鰻と牡蠣のカバうな丼!

2品目に紹介するのは、静岡県の浜松市舘山寺にあるうなぎ・和食処 松の家で食べた
元祖牡蠣カバうな丼」(冬限定)です。
メニューを見た瞬間目を疑いましたが、ホントに名前通りの物が出てきましたw
あっさり寄りのタレは、クリーミーな牡蠣と相性が抜群で、
鰻のカリッとした触感が食欲をより一層引き立てます。
食べても飽きが来ないので、値段に目をつむれば無限に食べれちゃうかもです!
ちなみに、このお店は某グルメ系ドラマでも紹介されており、
著名人のサインもいくつか店舗に飾ってありました。
(腹が…減った…)

今回は以上になります。
次回の社員紹介もお楽しみにして頂けると幸いです!

身だしなみ研修- 2022年度

こんにちは!第0ユニットの「xig」です。

今回は、2022年5月25日(水) に参加したダンデライオンズの身だしなみ研修についての記事です。今年の研修も去年に引き続き、Brilliant Impressionの森内様に講師をしていただきました。

この場をお借りしてお礼申し上げます。

研修内容は「マナーに関する座学」→「オーダーメイドのスーツ作成」という流れで行われました。

マナーに関する座学

こちらでは、男性の身だしなみ、女性の身だしなみについて国際標準を基に学びました。

男性はキャリア・職位があがると共に服装の自由度が減る点、

女性は逆に服装の自由度があがる反面、品格が求められ、NGパターンが増える

というルールを知り、スーツやネクタイ、靴やシャツの着こなし等について教えて頂きました。本ブログでは折角なので、男性目線で個人的に興味を持った点を2つほど紹介させてください

【1.ネクタイの柄】

自分は仕事やお祝いの席ではいつもストライプ柄のネクタイを使っていました。しかし、本研修を通して特にお祝いの席ではストライプ柄はNGだということを知り、ショックを隠せませんでした。ネクタイの柄でもそれぞれに意味があり、例えば

・無地は品格と正統感があり、誠実さを伝えることができる

・ストライプ柄は攻めのイメージが強く、士気を高めるスピーチや演説に有効

など、TPOに応じて使い分けるのが重要ということを学びました。

【2.シャツについて】

ビジネス用のシャツとして流通しているボタンダウンのシャツですが、カジュアルな印象を与えてしまうため、冠婚葬祭など厳格な場では着用するのは良くないということを本研修を通して知ることができました。

また、仕事をする上で、初対面の人と面談などでやり取りする際も、ボタンダウンシャツは控えた方が良いということで、次から気を付けていきたいと思います。

講座の様子

オーダーメイドのスーツ作成

座学研修の後に、KASHIYAMA名古屋栄店様にて、研修参加者全員のオーダメイドースーツを作っていただきました。座学で抑えた要点を基に、カジュアルになりすぎないように、スーツの生地から形まであらゆるものを真剣に選びました。採寸の際も、冗談を交えながら店員の方と出来上がるスーツについてイメージを膨らませていき、とても素敵なひと時でした。

採寸の合間の様子

まとめ

今回の研修を通して、ビジネスだけでなく幅広い場面での身だしなみについて学ぶことができました。今後もし、ビジネスや日常生活で特別な場面と遭遇した場合、今日の研修のことを思い出して活かせていけたらと思います。また、本日作成したオーダーメイドスーツの仕上がりも楽しみです!

今回の記事は以上になります。
次回以降の記事もお楽しみに!

社員紹介(23)

ご覧いただきありがとうございます。
はじめまして、この度社員紹介を務めます「xig」です。

肩書

新卒で前の会社に4年務め、
転職という形でダンデライオンズに入社しました。現在は第0ユニットに所属しています。

経歴

地元は静岡ですが、愛知の工業大学へ進学をきっかけに愛知県に引っ越しました。
家族や周りに機械(アプリケーション)に強い人がいなく、強い危機感を持ったのと、
自分もまた情報弱者だったので、
そんな人に近い目線で寄り添えるような人になりたいと思い、この業界に足を踏み込みました。

現在の業務

アプリ開発の基盤となるフレームワークの開発チームに在籍しています。
フレームワークを使っていただいているアプリ開発者様のご要望にお応えするべく、
不具合改修、機能改善対応などを仕様書作成からテストまで
一通り行っています。
勤務形態はテレワークがメインですが、
チームメンバー全員とても親身にしていただいているので、
とてもありがたいことなのですが、コミュニケーションには特に困ってないです。

自己PR

趣味は、ゲーム全般、食べ歩き、トレカ、お風呂、マイナー映画鑑賞等色々あるのですが、
最近は特撮が自分の中では熱いです。

特撮と言っても戦隊ヒーロー、ウルトラマン、仮面ライダー…etc
がありますが、
自分は特に仮面ライダーが大好きで、毎週日曜日の朝が楽しみだったりします。
そんな仮面ライダーですが、自分の高校生時代に放送されていて、
仮面ライダーを見始めるきっかけとなった、
「仮面ライダーオーズ」が、
今年3月に本編後の話が映画公開されます!
さらに合わせて「仮面ライダー展」がこれもまた今年3月に愛知県の金山で開催!
ということで、
今からドキドキわくわくなのです!
余談:去年末に公開された「ゴーカイジャー」や、
「ウルトラマンティガ」の後継作品など、最近の特撮界隈はあの時青春時代を送っていたヲタを全力でターゲットにしていますよねw

今回は以上になります。
次回の社員紹介もお楽しみにして頂けると幸いです!