ここで作るアプリケーションは次のようなものです。
・複数の画像登録ができる仕組みのもので画像を1枚ずつ表示させることができる。
・「前」「次」ボタンで前後の画像に移動できる。
・画像表示から4秒経過すると自動で次の画像になる。
・登録された最後の画像にまで行くと、その次は最初に戻る。
まずは画像を1枚だけ表示してみましょう。
フォトビューアー
解説
| class photoViewer { | photoViewerというクラスを作ります。 |
| init() { | initializeの略名でinitというメソッドを作ります。 |
| const rootElm = document.getElementById(‘photoViewer’); | 親要素のid、photoViewerを取得し、変数rootElmに代入します。 |
| const frameElm = rootElm.querySelector(‘.frame’); | そのrootElmを親として、frameクラスが指定されている要素を取得し変数frameElmに代入します。 |
| const image = ‘https://fakeimg.pl/250×150/81DAF5’; | 外部サービス（http::fakeimg.pl/）を使ってダミー画像を取得します。 |
| frameElm.innerHTML = ` <div class =”currenImage”> <img src=”${image}” /> `; | テンプレートリテラルを使ってimgとそれを囲むdivを文字列で作成します。それをframeElmのinnerHTMLに代入します。 |
| new photoViewer().init(); | newでインスタンス化したオブジェクトに対して、そのあとすぐにinitメソッドを呼び出しています。このような短縮させた書き方もできます。 |
この本から引用、参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。
わからないことはプロフェッショナルから学ぶのが一番
キャリアアップに必要なスキルを取得しよう。
オンラインで受講ができるスクールですので、全国どこからでも。
