前回の記事の解説
出題したタスクはこちら
タスク①画面上に表示文言を追加する
〜商品一覧ページの商品価格に「（税込）」を追記しよう〜
上記タスクにおいて、考える手順としてはMVCフレームワークにおいて、まず処理の流れを掴むこと。ただし今回のタスクに関してはデータを取得する必要もロジックを変える必要もないため、ControllerとViewのどの部分に処理が走っているか確認し、必要な部分に処理を追加する必要がある。
手がかりとなるのはURLである。
HTTPリクエストから、Controllerのどのアクションを呼び出す(FWによってはroutingを経由する)か、決めているためURLを確認する。
商品一覧ページに関しては「products/list」というpathのためproductionControllerファイルを検索する。
開いたファイル内で「products/list」というワード検索をするとfunction indexに処理が走っていることがわかる。
アノテーション部分を見ると@Template("Product/list.twig")が対象のviewファイルであることが分かる。
この辺はフレームワーク事によって異なるが、viewの文言を追記するようなタスクは
URLからController→アクション→viewファイルという流れで、見た目を表示しているファイルを特定する。
次に対象の「list.twig」を検索し、対象のファイル(eccube/src/Eccube/Resource/template/default/Product/list.twig)を開くと、まずすべきことは実際にこのファイルに処理が走っているかどうかを確認する。
プログラミング初心者にありがちなミスとして、記述方法について色々悩んでいたら、そもそもその部分に処理が通っていなかった！
みたいなことがよくあるので、なにか処理を追記する際は確実に、表示出来るタグ
<p>TEST</p>
やデバックの記述をして、まずは表示確認してから実装に入るといい。
（↑TESTという文字が表示されているので、products/listにアクセスするとlist.twigに処理が通っていることが確認出来た）
処理が走っていることを確認出来たら次は、追記すべき箇所の確認をする
該当箇所を素早く探すテクニックとしてChromeのデベロッパーツールを使う方法を知らない方は是非覚えていただきたい。
products/litsを表示している状態で、「（税込）」を表示したい料金の箇所を確認すると
class="price02-default"
というclassで表示していることが分かる。
この「price02-default」をlist.twigファイルの中で検索してみると
155行目辺りに対象の記述があることが分かる。
このendifの外に「（税込）」を追記することでタスク①は完了
以上、タスク①の解説となる。
大量のコードからいかに、早く正確に該当箇所を見つけるか、実務では大切になってくる。
アプリケーションの設計を掴むことや、検索の仕方を掴むことで、これぐらいのタスクはすぐにこなせることになると思います。