こんにちは、柴田（@shibe97）です。 突然ですが本日、microCMSブログのソースコードをオープンソース化いたしました！ リポジトリはこちら。 https://github.com/microcmsio/microcms-blog 経緯microCMSを利用したJamstack構成のWebサイトはここ1年でだいぶ広まりつつあります。 しかし、Jamstack構成のサイトは一覧画面 / 詳細画面を作成するのは非常に簡単ですが、そこから先を実装しようとすると途端に難易度が上がります。 ネット上にはまだまだ知見は少なく、実案件で投入できるほどの実力を持つエンジニアはそう多くはないという印象です。 そこで、実稼働しているmicroCMSブログのソースコードが参考になるのではということで、今回オープンソース化に踏み切りました。 microCMSブログはデータソースとしてmicroCMS、フロ

本連載では、Webページのユーザーインタフェース（UI）フレームワーク「Vue.js」と、Vue.jsを利用してWebページを作成できるフレームワーク「Nuxt.js」の活用方法を、サンプルとともに紹介します。前回は、Nuxt.jsの非同期データ機能について説明しました。今回は、Nuxt.jsを利用して作成したWebページをインターネット上に公開する方法を紹介します。 はじめに Nuxt.jsは、Webページのユーザーインタフェース（UI）フレームワークであるVue.jsに、Webページの作成に必要なUI以外の追加機能をまとめて提供するフレームワークです。 Nuxt.jsでは、作成したWebページをインターネット上に公開するための機能が提供されています。この機能を利用すると、Node.jsが実行できないWebサーバー向けに静的ファイルを生成できます。また、Node.jsが実行できるWebサ

Vue.js、Nuxt JSを学習するときにやったこと以前「WebデザイナーのためのVue.js事始め」という記事でVue.jsについて触れたのですが、それから今まで、どんな手順で勉強してきたのかを紹介してみます。途中ReactやGatsbyを取り入れたりもしていたのですが、結局 .vueファイルでの単一ファイルコンポーネントが楽だなーと思い、今はVue.jsに全振り中です。これから勉強してみたい方の参考になれば幸いです。 Web デザイナーのための Vue.js 事始め 1. Vue.js 公式 Web サイトを確認まずはVue.js の公式 Web サイトを確認。日本語にも対応しています。ここで基本的な使い方、文法、何ができるのかなどをざっくり学習しました。 サンプルコードがある箇所は実際にCodePenを使ってコードを記述し、動作確認します。公式は今後何度も繰り返しチェックすることに

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

ここ数年で、「デザインシステム」はウェブ開発やデザインのコミュニティでとても人気の話題になりました。そして「コンポーネント」として定義される一連のデザイン成果物を開発・メンテナンスするために、StyleguidistやStorybookといったツールが多くのプロジェクトで一般的に使われています。このプロセスはデザインシステムという概念の一部として、コンポーネント駆動開発（Component Driven Development）と定義することができるでしょう。 さて、コンポーネント駆動開発にまつわる資料のほとんどは、ReactやVue、Angularといった、フロントエンドのビューのためのメジャーなライブラリを利用することについてのものです。しかしもっとトラディショナルな技術スタックの場合はどうすればいいでしょう？ 例えば私たちスタンダードデザインユニットでは、静的なHTMLとCSSのアセ

はじめに はじめまして。Qiitaの公開投稿は初めてになります。satoruと申します。 今回の記事では、Webエンジニアになりたいけれど未経験だからとにかくポートフォリオをつくらないといけないよなということでtodoSNSというWebサービスを作った（作っている）際の実装内容やそれまでに思ったことを個人的なアウトプットとして述べていこうと思います。 （[email protected] pass:testtest or Google認証では入れます） 流れとしては、自己紹介、実装にかかるまでの準備（利用技術や設計）、実装のはじめからおわり、開発中に思ったこと、まとめで書き連ねていきます。 ※未熟ながら書いているため、指摘箇所等あればコメントいただけると助かります。 自己紹介 大学で情報系の学部を卒業し、SIer会社に就職して約１年半で退職し、紹介で建築事務所の社内SEとしてGSuiteの運用・管

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 概要 こんにちは、アジアクエスト株式会社でフロントエンドエンジニア(以下、FE)をやっています、かめぽんです。 最近、VueもNuxtも勢いすごくないですか？？ すごいですよね？！？！ そんでもって、FirebaseやAWSを使ったサーバーレスアーキテクチャのアプリケーションも増えてきていますね！ だけど、「覚えること多くてよくわからん！けど、なんか動かしてみたい！」 と、思う方もいると思うのでぜひこの記事を参考にしていただけたらと思います。 サーバーレスSPAの構築方法はたくさんありますが、まずは手軽にモダンフロントエンド周りの知見を

JSフレームワーク「Vue.js」を習得するためにやったことをここにまとめます。2019年現在、最優先で取り組んでいるテーマです。随時更新中！！ ※2020/01/07追記：vuex-persistedstateでローカルストレージにデータを保存 Vue.js基本 三大フレームワーク比較とHello world そもそもJSフレームとは何か？どんなことができるのか？三大フレームワークと言われるReact、Angularなどと比較した結果、Vue.jsを最初にやってみることにした。 ※参考：三大フレームワークとかSPAとか仮想DOMとかわかりにくかったのでHellow Vue.jsしてみた！ イベント（v-on）、分岐（v-show、v-if）、ループ（v-for） イベント設定の「v-on」、条件分岐の「v-show」と「v-if」、ループの「v-for」でどんなことができるのか実際にやっ

株式会社キテレツのカイトさんによるNuxt.jsのセッション。 WockerというWordPressのローカル開発ツールを提供されているようです。 モダンなウェブ開発の用語解説 JAMstackはモダンなウェブ開発アーキテクチャ。 headlessCMSはフロントエンドがないバックエンドのみのCMS。GUIでコンテンツ管理をしたいときにはheadlessCMSが役立つ。 WordPressはREST APIがありAPI開発が不要。開発の自由dも高くプラグインも多いので使いやすい。 Nuxt.jsは、Vue.jsのフレームワーク。Vue.jsにプリセットと規約が追加されたもの。家に例えると集合住宅、マンションのようなものです。 レンダリングモードが先tなく可能でSSR、SPA、静的生成が選べ、環境や用途に応じて利用ができます。 WordPressとNuxt.jsを利用すると、PHPを触らずに

Local by Flywheel（ローカルバイフライホイール）とは、簡単にWorpdressサイトを構築できる、ローカル環境構築ツールである。 プログラムのコードが書けない人や、コマンドを理解できない人でも簡単にインストールすることができ、複数のWordpressサイトをボタンクリックだけで、自身のPCに構築することができる。 手軽にテスト環境を構築したい人や、初めてWordpressサイトを構築する人など、初心者には特にこのLocal by Flywheelを使ってローカル環境を作ることをオススメする。 また、私たちバズ部は12年で400社以上のメディア支援を行い、 立ち上げから10ヶ月で14.6億円の売上を産んだ不動産メディア8ヶ月で月間140万PVを実現したアプリメディアなど大きな成果を挙げ続けている。 各サイトの成功要因をインタビューしているので、 あなたのサイトに役立てて欲しい

まずは作ったサイトを貼っておきます。 https://wp-nuxt-for-netlify.netlify.com/ いかがですか？現在住んでいるオーストラリアのADSLな爆遅回線でも、爆速です。 WordPress は heteml のレンタルサーバーですよ？ 感動しすぎたので、徒然なるままに〜。 ざっくり構成 WordPress側 リニューアル中の家族ブログ（ https://nishida.lol ） Heteml レンタルサーバー（月額 2000円） Heteml で無料SSL WP REST API でGET APIだけ利用 https://v2.wp-api.org/ フロント側 Nuxt Nuxt.js 1.0.0 nuxt generate で静的ファイル生成 netlify にホスティング https://www.netlify.com/ GitHub 上で nuxt

WordPressからFirebase＋Nuxt.jsのHeadless CMSに完全移行するまでの記録 ①導入・技術選定 前置き 2019年4月現在、このブログはWordPressで開発・運用していますが、 それに伴って生じている様々な問題を解決するために、脱WordPressすることを決めました。 主な理由は４つ。 ①サイトの速度が明らかに遅いため、Lighthouseなどのスコアが上がらないのがSEO・利便性の両面で不利。jQueryやPHP・サーバー応答速度といったボトルネックは、WordPressを使っている限り解消することができない ②NetlifyやFirebaseなどの無料で使えるサービスが充実してきている中、レンタルサーバーを使っているのはコスパも悪い ③今後のことを考えると、記事データはMySQLではなくJSON形式の方がバックアップしやすく安全 ④Vue.js、CSS

こんにちは、フロントエンドエンジニアのライダーです。 今回は「Nuxt de Portfolio」連載のチャプター1となります。 Nuxtとは？ Nuxt は、平たくいうと 2017年以降、爆発的に人気のでた、 WebサイトやWebサービスの開発に使われる、 Vue によるフロントエンド開発環境を束ねた、 コンポーネント志向のフレームワーク です。 公式ドキュメントは日本語に翻訳されたものが公開されていますので、一度目を通してみてください。 Nuxt ドキュメント：https://ja.nuxtjs.org/ Vue ドキュメント：https://jp.vuejs.org/v2/guide/ 実際に動かしてみる npx create-nuxt-app my-portfolio-sample このコマンドが、Nuxt プロジェクトの環境構築コマンドです。 これを実行してしばらくするといくつか

ICS MEDIAは2019年4月にリニューアルしました。シンプルでモダンなデザインへと見栄えは変わり、フロントエンドの最新技術によって爆速なサイトへと生まれ変わっています。 技術的におもしろいポイントは、WordPressワード・プレスを廃止したことです。 この記事では、オウンドメディアとしてWordPressをやめた理由、代用技術の選定で苦労したことを紹介します。 リニューアル前後の違い リニューアルによってどのくらい改善したか、定量的な結果を紹介します。ウェブサイトの性能を示す指標としてLighthouse（Google ChromeのデベロッパーツールのAuditsタブ）というツールがあります。 Lighthouseの採点で、リニューアル前は80点ほどだったのが、ほぼ満点のスコアをたたき出せるようになりました。SEOやアクセシビリティの点数も満点です。 動画でもご覧ください。リニュ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 先日、Togetter社長の@yositosiさんとひょんなことからお友達になり「なんかFirebase使って面白いことやろうよ」という話になったので一緒に面白いことをやりました。 この記事は、 Firebaseを使うと何ができるのか Nuxt.js/Vue.jsとFirebaseの勘所 Firestoreでの複雑なクエリ処理にどう対応するか などのトピックを中心に紹介していければと思っています。 なんとかPay Togetterの社長の@yositosiさんからFirebaseを使ったアプリ構築の話を頂きお手伝いさせていただいた、エイ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? まだサーバーで消耗してるの？Firebase（サーバーレス）とNuxt.js（Vue系）ならWebアプリ運営は最強でしょ！？ この記事は、 サーバー費用をなるべくかけたくないけどショボいのはNO Firebaseの活用法をあまり理解していない Nuxt/Vueを使ってアプリ作ってみたい（Next/Reactと悩んでたり） アプリ構想はあるけどアイデアの落とし込みスピードが遅くて毎回挫折する という人向けに、「こんな感じで構築すれば効率良く開発できそうよ」というのを、勉強になった記事や技術的トピック・躓いた点なども合わせて紹介させていただ