概要 Nuxt.jsは今最も「イケてる」とされるWEB開発フレームワークです。ポストRailsという文脈で語られることも多いようです。巷でNuxtについての記事も増えていますね。 しかし、ネット上のNuxtの記事では、Nuxtを始める上で前提となる前提知識の存在が省略されているように思います。Nuxt.jsはVue.jsの発展形(=Nuxtを触る人はVueの経験があるという前提)なので当然なのですが。 本記事では、これからWEB開発者を目指す人を対象に、 ・Nuxtを習得するには何が必要か? ・そのための勉強方法 を紹介します。 解像度を高めた言い方をすると、**「Nuxtの公式ドキュメントを理解できる」「自分で簡単なNuxtのエラーや問題を解決できる」程度の実力を身に付けることで、「メンバーとしてチーム開発に参加できる」**をゴール設定に置きます。 自己紹介 NuxtとFirebaseを
フレームワークはもはや流行りとか言うよりもひとつふたつは使っていて当たりまえ…みたいな雰囲気を感じる今日この頃ですが、受託制作で普通のWebサイトを作っていると普段の仕事では早々使う機会がないんじゃないかと思います。(僕だけですかね…?) Webサービスやゲームのように非同期で通信する要素があるわけでもなく、DBもなくページ内の物量も普通…そんな普通のコーポレートサイトやLPなんかを作るのにフレームワークはややオーバースペックに感じます。 ついでにクライアントから「ちょっとならHTML触れるから自分で更新します」と言われた日には開発環境の導入自体のハードルが高く、そもそもhtmlじゃないフレームワークの導入なんて出来ません。 今回はそんな風に「別に使わなくても仕事は出来るしなぁ」と腰が重かった自分が、自身のポートフォリオサイトをNuxtに作り変えてみた感想を書いていきます。 Nuxt.js
きっかけ 「JavaScriptのイベントをたくさん見られるサイト」というWebサイトをNuxt.jsで作成した際に、明朝のWebフォントを使ったのですが、どうせ静的サイトで使う文字が決まっているわけだから容量を軽くできないかな、と思ったのがきっかけです。 フォント/形式/ツールの選定 前提として、日本語のWebフォントは控えめに言ってクソ重いので、使わないに越したことはありません。どうしても使いたいのであれば、できる限り容量を減らすよう努力する必要があります。 一番手っ取り早いのはお金を払ってFONTPLUSやTypeSquareなどのサービスを使うことです。たいていのサービスでは動的にサブセットを生成してくれるので、容量を抑えられます。最近ではGoogle Fontsにも日本語のWebフォントがあるので、こちらも有力な選択肢になるかもしれません。@font-faceのunicode-r
module.exports = { build: { postcss: { preset: { autoprefixer: { grid: true, }, }, }, } } かんたん🍟 ただし、Grid でマージンをコントロールするプロパティの gap に関しては、ポリフィルを適用することができません。 なので、悲しいけれど、これは捨てるという感じですね、IEでは。。 20180515 追記 とか嘆きましたが、なんと autoprefixer v8.5 から、 gap に対応してくれるようになりました* これで、gap のIE用のポリフィルも自動で実装できるようになりました!!いい時代!!! 参考 autoprefixer の Grid 対応に関しては @tonkotsuboy_com さんが、詳細を丁寧に解説してくださっています。 AutoprefixerがパワーアップしてCSS
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く