DIYやクッキングするようにサイトを作ろう
ポートフォリオレシピ（フロントエンド初級編）
SPA/Vue.js/API/WordPress

ポートフォリオサイトやブログをペラ１サイト(SPA:シングルページアプリケーション)でブラッシュアップしよう！

静的ページにjQueryを導入して動くサイトは作ったものの、もう少しスタイリッシュにアピールできる技術を増やしたい方、今重宝されているSPA（シングルページアプリケーション）やフレームワークに触れて新しい技術の習得に役立てよう！ コピペでサイトをメンテナンスしているディレクター、デザイナー陣も歓迎のフロントエンド初級編の勉強会です。

講座概要のポイント

当日は癒し系のほっこり可愛い動物たちを眺めながら講座を進めていきます。

サラダ付きカレーを作る要領で、旬の技術をライブコーディングで紹介しますので、慣れない方にも堅苦しくありません！

work 1：API導入

天気やツイッター、インスタなどのSNS、地図などのデータやサービスをサイトに持ってこれるアレです。大変便利ですよね！ 今回の講座では天気のAPIを取得して、取得した天気によってサイトの背景色やアニメーションを変えていきます。ポイントアドバイスが盛り込まれていくので効率的に学べます。

work 2：Vue.js、SPA

jQueryの次に導入しやすいのがVue.js。 同じようなフレームワークだけどインタラクティブなページや、状態管理がしやすいのでメンテナンスが楽になります。 Vue.jsならではの決まりがありますが、最近のフレームワークの中でも一番学習コストが低いのでフレームワークを覚え始める方にも最適です。 今回はWordPressにいれたコンテンツデータ（HTMLなど）をVue.jsで表示するのに使っていきます。 SPAで作られた構造になってますので、独学で習得している方も、初学者の方も考え方や決まりを押さえましょう！

勉強会の内容

• 最先端のWeb技術を使ったサイト事例や開発フレームワーク、ライブラリのトレンドを紹介
• 旬の技術をまるっとライブコーディングで進めていきます。お料理になぞらえて楽しく紹介するので、苦手意識のある方でも楽しく学べます。
• 講義で行ったライブコーディングのサンプルコードと手順など内容がまとめられた資料を配布しますので、後からじっくり眺められます。
• 先生は経験豊富なフロントアンドエンジニアですが、初心者にも寄り添って丁寧に説明してくださいます。
• みんなで楽しくもくもく会。LT登壇者も募集します！

こんな方におすすめ

• HTMLの基礎を学んだ経験がある方から参加可能です。興味があればOK!

• 旬のWebポートフォリオをお手軽に作りたい。でもWebコーディングには自信がない。

• 新しい技術が好きな初学者。男女、年齢関係なくどなたでも歓迎です。

• PCスクールや職業訓練校に通っていて、就職に有利な作品集をまとめたい。

• Web、アプリ業界への就職・転職に関心がある、業界未経験者(アプリ開発未経験の方も歓迎）

登壇者

波多野有希
UXデザイナー/開発ディレクター

映像作りに興味を持ったことをきっかけに、デジタル上で表現する技術を拡張。スマートフォンの利用率が急激に上がり始めた2010年ごろよりスマートフォンサイト制作に携わり、サービスサイト、インターネット広告、ASPの制作に取り組む。

タイムスケジュール

　　

勉強会	19:00～20:15（18:45開場） 参加費 3,000円 ・最先端のWebを使ったサイトを紹介 ・ライブコーディング実演 ・サンプル教材のご紹介 ・小規模勉強会 ・参加者からの質問にどんどんお答えします。 ・PCは必須ではありません。お持ちになる方は個人の無線環境をご用意されることをオススメします。
もくもく会・交流会	20:20～21:00 参加費 無料　参加自由 ・楽しく、みんなで開発しましょう。ポートフォリオ開発に関して講師がアドバイスをします。
会場	株式会社クリーク･アンド･リバー社　麹町制作ルーム 〒102-0082 東京都千代田区一番町8番地　住友不動産一番町ビル５F
持ち物	もくもく会に参加される方は一緒に開発ができればと思いますので、ノートPCをお持ちください。
お問い合わせ	株式会社クリーク･アンド･リバー社 デジタル･コミュニケーション･グループ リクルーティング・セクション　担当村上 Email：cr_training@hq.cri.co.jp

---

フロントエンド初級講座　体験レポート

こんにちは！ 波多野先生の初級フロントエンド講座を受けさせて頂いた初学者tanabeが、今回の講座をレポートいたします。

波多野先生は、音楽系のweb会社で映像制作やサイト更新をはじめ、webサイトの開発、サービスのディレクションなど、現在も様々なITサービスのクリエイションをされている、熱く面白いIT女子です。

tanabeはかなり初心者なのですが、少人数制の波多野先生の講座を受けた折、初心者にも丁寧に寄り添って熱い講義をしていただき、とても為になりました。 「それではターメリックライスを作ります」など、サイト制作を料理に見立て、あまり肩肘貼らなくてもいいようなユニークな進め方で、楽しく講座が進むことが初心者tanabeのお気に入りのポイントでした。

学校出たての方にも、自分で勉強してるけど効率的に学びたい方にも簡単すぎず、難しすぎず丁度良いレベルの、おすすめのフロントエンド講座です。 そして女性の方も気後れすることなく気軽にご参加いただける回です。

それでは、講座のポイントまとめです。

point 1:API

難しそうな想像をしていましたが、比較的簡単な２点のAPIをサクッと取得。 Google Fontsや現在のお天気。Google FontsってそういえばAPIだったんだ！と思いました。 天気のAPIを取得しますが、天気ごとに変わるアニメーションのjsをいじるのでJavaScriptの１ポイントレッスン的な要素もあります。 考え方やもう少しレベルの高いAPIの説明もありますが、一連の流れを通してAPI取得に慣れていきます。

point 2:Vue.js、SPA

WordPressでvue.jsやSPAの考え方、ポイントを学んでいきます。 Vue.jsならではの記述の決まりやSPAのためのコードの書き方が学べます。そしてWordPressで進めていきますので、WordPressでのSPA、vue.jsのカスタマイズが実務で求められた際の良い経験となるでしょう！ なんの為にこのコードを、そしてこの順番で行うか解説しながら進めてくれるので効率的に基本を押さえておきたい方、詳しくなくてもどんなものか一度通して確認したい方にもおすすめです。 講座でさらっと流す部分はフォローアップの資料がつくので、復習の時にラクです。

以上が簡単ではありますが、前回のレポートでした！ ぜひ各々の技術補填に役立ててください。