導入からアプリケーション開発まで体系的に動画で学ぶ」の学習を進めながら書いた記事になります。Vue.jsに関する記事の一覧はこちらからご覧いただけます。新しい技術にはいつもワクワクします。僕の場合、触ってみてかじっても突き詰めていくことがあまりないので、浅い知識で終わってしまいます。仕事で色々な提案をしていく上で博学な部分はどうしても必要となってくると考えているので、まずは最低限触ってみるということはとても大事にしています。導入からアプリケーション開発まで体系的に動画で学ぶ』という講座を購入して学習を進めたいと思います。巷では「jQueryに替わる...」とか言われていたりしますが、実際にはどうなのか手を動かして触ってみたいと思います。Vue.js以外にも基本的なWebスキルを動画で受講することができます。年に何回かセールがあるので、その時にまとめて購入するのがおすすめです。内容としてはこんな感じらしいです。JSを使うメリットがわかるようになります。JSによるアプリ制作の一連の流れを理解できるようになります。プログラミング関連記事検索APIを用いたリアルタイムサーチ開発を通して、実践的な開発ができるようになります。JSの基本的な使い方を速習パートにより短時間で理解できるようになります。JSとBitcoin価格取得APIと連携した実践的な開発ができるようになります。JSの詳細な機能についても理解できるようになります。学習環境としては、テキストエディタで自分で作っても大丈夫なように解説はされるようですが、講座の中ではjsFiddleを使うとのこと。CodePen的な感じでリアルタイムで書いたコードをすぐに実行できるようなサービスですね。僕もjsFiddleのアカウントを作って(無料だし)、そちらでとりあえずコードを書いていこうと思います。個人的にはいつも使っているPhpStormを使ってコードを書くほうが慣れているんですが、そちらの設定などの確認も必要なので、まずは進めるというためにもjsFiddleを使ってみようと思います。ちなみにですが、講座の講師によって話すスピードやテンションなど変わってくるので、僕は講師に合わせてビデオ速度を調整して受講するようにしています。この講座の場合は、1.25x〜1.5xくらいのスピードで聞きながら手を動かす(そしてブログにまとめる)という感じでやっています。Vue.jsの基本的な使い方Vue.jsがReact.jsやAngular.jsなどよりもよく使われる大きな理由の1つとして、手軽に試すことができるということ。公式サイトのガイドページにも記載があるのですが、CDNでソースを読み込んでしまえば簡単に利用することができます。src="https://cdn.jsdelivr.net/npm/vue"></script>と</body>の上くらいに記述すればすぐに使うことができるとのこと。ガイドにはこう書いてありますが、講座の中ではマイナーであろうともバージョンアップしている場合、挙動が一貫しない可能性があるので、講座では2.5.16という動画撮影時のバージョンで進めて欲しいとのこと。このような流れでCDNコードを手に入れています。Vue.jsサイトの検索窓で「インストール」と検索してページに進むこちらのページで#CDNという項目からscriptコードを取得する。src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>と、バージョンを修正します。本番で公開する場合にはvue.jsからvue.min.jsに変更することによって、デバッグ機能を持たせず高速化(圧縮済みファイル)させることができるとのこと。読み込む(ダウンロードしてきてディレクトリに配置してセットする形)NPM(npmパッケージ管理でインストールする)ちゃんと理解してプロジェクトを進めるようになれば、開発環境を整えることにもなると思うの、NPMでインストールすることにはなると思われます。Vue.js以外にも基本的なWebスキルを動画で受講することができます。年に何回かセールがあるので、その時にまとめて購入するのがおすすめです。まとめ今回ははじめですので、ガイダンスや講座を進める上で必要な環境などを紹介しました。今後も順を追って学習を進めていき、ブログにまとめる(アウトプット)することによって自身の理解も深められればと思います。お客様の声オレインデザインにご依頼いただいたお客様(個人・法人含む)からの声を紹介しています。岐阜を中心にWeb制作全般のお仕事をしているフリーランスです。趣味はサッカー・F1観戦。英国プレミアリーグ、マンチェスターユナイテッドを長年愛しています。英国滞在歴2年、日常英会話くらいは大丈夫です。20ヶ国以上列車で単独周遊してきました。WordPress大好きです。Meetup共同オーガナイザー・CoderDojo岐阜チャンピオンなどの活動もしています。Sear...関連記事Vue.js[Vue.js]いろいろなディレクティブを触ってコンポーネントの基本を学ぶ今回は、前回触ってみたv-bind以外のディレクティブを触ってみます。晃司2019年1月21日Vue.js[Vue.js]ディレクティブとは今回はディレクティブというものを学習していきます。晃司2019年1月18日Vue.js[Vue.js]TODOアプリの開発〜Vueインスタンスとルートテンプレートの作...Vue.jsを利用して、TODOアプリの開発をしてみます。タス...引き続き、TODOアプリの作成を進めて行きましょう。晃司2019年1月23日この投稿へのトラックバックトラックバックはありません。Meetupの活動に協力しています。公式サイトはこちら岐阜市を拠点に活動しているフリーランスWeb制作者です。WordPressを得意としています。Meetupについて岐阜市を中心に毎月1回WordPressを使っている方向けのコミュニティを開催しています。初心者の方(これから勉強したい方も!)もどんどん参加していただいています。