未経験からエンジニアがキャリア初期に、任されるあろう３つのタスクを出題してみる

はじめに

もくもく会を主催したり、未経験からエンジニアを目指す方と関わる機会が多く、どんな記事なら読んでみたいか、聞いてみたところ、「実務としてエンジニアがどのように仕事しているのか想像出来ない」、とか「いつもどんな仕事をしているか教えてほしい」という声をいただくので、この記事を書くことにした。

私が感じた実務とのギャップについて

私は未経験から転職を目指している際、カレンダー上で日々のカロリー計算ができるアプリケーションを作成した。未経験からの転職にしては、それなりに機能も考えて実装したが、やはり実務とのギャップは存在した。

①実務で動いている案件は規模が大きく、全体像を掴むことが難しい。人が書いたコードを適切に読めることはプログラムが書けることと同じぐらい大事！！！！

②案件のキックオフから参画できるようなことは稀で、他人の書いた既存コードの中に自分のコードを書き加えていくことが圧倒的に多い。すでに完成されているプロダクトの修正などが、最初に任されるタスクとなる。

③動けばいいというものではなく、保守性や拡張性を考慮したコードを然るべきところに書いていく必要がある。

ざっとこんなところである。

上記は、書籍や動画を見ること、自分でアプリを作っただけでは体験することが出来ないため、当然であるが、多くの未経験エンジニアの悩みとなり、「何から手を付けていいかわからない、何がわからないのかすら、分からない」といった心情に陥る原因の一つではないかと感じている。そこで今回は実務で存在するようなECサイト(EC-CUBE)を題材にした、機能修正・カスタマイズのタスクを、実際に考えていくことで、実務タスクとのギャップを埋める手がかりにしてもらえれば嬉しい。対象者はポートフォリオを一度作り終えて、これから転職活動をする方や、転職活動を終えたばかりの方、会社に入ったばかりの方などを想定している。最初は何が何だか分からないと思うが、現場に入って皆経験することだと思うので、環境構築をして、タスクにトライしてみてほしい。

題材について

https://www.ec-cube.net/
題材として選んだのはEC-CUBE４である。
日本で恐らくECのパッケージとしては一番ポピュラーなもので、システム受託の会社にいる方は一度は耳にしたことはあるのではないだろうか。オープンソースであり、中のコードも比較的読みやすく、責務の分離もしっかりしているので、「コードを読む」トレーニングとしても最適である。昨今の社会情勢から、ECサイトの需要が高まっており、これから、使用される案件も増えるのではないかと思っている。使用されている技術は以下の通り。

言語　 PHP
FW　　 Symfony
ORM Doctrine
テンプレートエンジン　Twig

聞き慣れない技術が並んでいるかもしれないが、今回の題材のタスクは極力、使用技術に依存しないで、MVCフレームワークと、なにか一つプログラミング言語を学んでいる人であれば、読み進められる内容にしたので、是非Rubyを学んでいた方なども、このまま読み勧めてもらいたい。ちなみにSymfonyは海外で人気の高いフレームワークでLaravelは内部的にSymfonyを用いていることもあり、Laravelとの互換性の高い技術である。

環境構築について

https://amidaike.hatenablog.com/entry/2018/12/04/022239
macの方を想定し、こちらの記事を読み勧めていくと、ecのユーザー画面と管理画面を表示することができるはず。windowsの方はxamppで環境を作ったあと、上記の記事でソースをダウンロードしてくるところから、勧めていただければ問題ない。
環境構築で詰まった場合はツイッターでも質問を受けています。
画面が表示出来た方は軽くサイトを回ってみて、通販サイトとしてのイメージが付いたら、次に進んでほしい。

タスクに入る前に

EC-CUBEではカスタマイズ方法が独自に用意されておりCustomize/のディレクトリの下にコードを追加していき既存コードは極力編集しないことがお作法であるが、今回はEC-CUBEについて詳しくなるというより、一般的なカスタマイズ案件を想定しているので、処理の走っているコードを編集していく形式で問題ない。（customize/に実装してもOK）

作業しやすくするため、git管理することを推奨している。

また、デバックをしやすくするために.envの６〜７行目を

APP_ENV=dev
APP_DEBUG=1

に変更する。
またデバックの際はphpファイルではlog_info('hoge')でログ出力。
twigファイルの中で、変数の中身を見たい場合などは　　{{ dump('hoge') }} とすることで、ブラウザに中身を表示することが出来る。

テーブル構成など、確認したい方はこちら。
http://ec4.umebius.com/

確認できた方はタスクに進んでみましょう。

タスク①画面上に表示文言を追加する

〜商品一覧ページの商品価格に「（税込）」を追記しよう〜
購入画面のトップページから、キーワード検索を空欄の状態でクリックすると商品一覧ページ(/eccube/products/list)に遷移することが出来るので下記のように仕様変更する。
左が修正前、右が（税込み）の修正後

タスク②　DBに保存されたデータを取得し、画面上に表示しよう

〜商品一覧ページに「商品説明」項目を追加表示しよう〜

管理画面にログインし、商品管理→商品一覧→彩のジェラートCUBEを選ぶと
/eccube/eccubeadmin/product/product/1/edit
にアクセスしている状態となる。（下記画像）

管理画面をスクロールすると、「商品説明」という項目がある。
こちらの項目に関しては顧客ページの商品一覧(/eccube/products/list)には仕様上、表示されていない。
。

タスク①同様に購入画面のトップページから、キーワード検索を空欄の状態でクリックすると商品一覧ページに遷移することが出来るので下記のように仕様変更する。

左が修正前、右が「商品説明」の追記後

③DBから取得するデータの検索条件をカスタマイズをしよう

〜検索ボックスの検索条件に「商品説明」の文言を追加しよう〜

EC-CUBEの標準機能に検索機能があり、「ジェラート」と検索すると商品名にジェラートを含む商品の検索をすることが出来ます。

こちらの機能に関して、顧客から仕様変更の依頼があったことを想定し、②で追加した「商品説明」を追加してみましょう。

試しに「冬でも食べたい」と検索すると、カスタマイズ前だと、検索結果「該当商品商品無し」となります。

こちらで商品が検索対象となるように修正します。

左が修正前、右が検索対象に「商品説明」を追加する修正後

各タスクのヒント

①URLから表示しているviewファイルを特定し、表示箇所に追記する。
②商品情報のデータを取得しているControllerを特定し、表示方法を考える
③検索が実行されているfunctionを特定する。条件を追加する際のSQL文を考える。

解説記事は別記事にします。

質問等あればtwitterでも受け付けています。
処理の追い方や解説は別で行うので、一度トライしてみてください。