2018年現在でもJava開発をしていると、Antすら使っていないEclipseプロジェクトにそこそこの頻度で出くわします。Eclipseの自動コンパイルが通ればOKであり、ビルドはExcel手順書をもとに手動で行われ、依存関係ライブラリはもちろんlibフォルダに各種jarファイルが放り込んであります。Eclipse上以外ではどう動かせば分かる人がいないため、コマンドラインからビルドなどを行うことは叶わず、CI化なんて夢のまた夢です。 そんなJava開発から脱却したい人向けのJava開発のモダン化ガイドです。 基本的にJava 8以降での開発を想定しています。 OpenJDK/OracleJDK上での開発を想定しています。 Android開発の場合は一部適用できない可能性あり。 英語のIDE、ツール等は積極的に使用します。 英語嫌いだとモダン化は難しい。 Java開発全般を前提としているた

フロントエンドエンジニア / バックエンドエンジニア / DevOpsエンジニア@poly_soft この画像を見てティン！と来たので訳してみました。 以下はModern Frontend Developer in 2018の日本語訳です。 Modern Frontend Developer in 2018 この記事を始める前に、まず私のことと、このロードマップについてお伝えします。 私は過去5年間フルスタックエンジニアとして働いていて、そして現在はtajawalで、様々な役割を持つリードエンジニアとして働いています。 単に趣味だからというだけではなく、他の開発者の技術力を保つためにトレンドについていくことも私の責任のひとつです。 初心者が(そして経験者が)トレンドに付いていこうとして混乱する様を私はよく見かけます。 私は2017年、多くの友人に、キャリアを積むために何を学ぶべきかについて

2018年8月11日に新しいメジャーバージョンとなるVue CLI 3.0がリリースされました。Vue CLI 3では、公式にTypeScriptをサポートし、 TypeScriptを利用するプロジェクトの生成に対応しました。これにより、TypeScriptでVueを気軽に試せるようになったということで、今回ちょっとどんなものか試してみることにしました。試した中でポイントとなりそうな部分をまとめてみたので紹介します。なお、私は普段はAngularでTypeScriptを書いているため、TypeScriptのクラス構文を使った説明になっています（クラス構文を使わなくても、TypeScriptでvue.jsを書くことはできます）。 目次 はじめに – Vue CLI + TypeScript TypeScript + Vue サンプル Vue CLIでTypeScriptプロジェクトを生成する

みなさんは普段Node.jsをどのように使っていますか？ サーバーサイドで動くJavaScriptであるNode.jsは、Socket.IOと連携してリアルタイムなウェブコンテンツを作ったり、webpackやgulpのようなフロントエンドエンジニアのツールとして使われたりとさまざまな場面で活用されています。 Node.jsで大規模な開発をする場合、TypeScriptを採用して開発の生産効率性・保守性を上げるのもオススメです。WebStormやVisual Studio Codeを使えばコード補完が効くためプログラミングの効率が劇的に向上し、TypeScriptの静的型付けによってコンパイル時型チェックが行われるので安全性が増します。Node.jsを使って中・大規模なシステムを構築するときはTypeScriptを検討するといいでしょう。 今回はNode.jsをTypeScriptで記述する

はじめまして。7月から業務委託として、FiNCのサーバーサイドエンジニアを担当している@yhirano55です。最近、来年3月に開催予定のRails Developers Meetup 2019の準備を始めました（次回は3トラック同時で進行する予定です）。 本記事では、Railsエンジニア向けに npm initから始める、TypeScript対応の Reactボイラープレートの作り方を紹介します。チームや組織で共通するボイラープレートがあると、SPA（Single Page Application）を量産する際に生産性が爆速になるのですが、ちょうど最近、Reactボイラープレートを作る機会を得まして、その過程で得られた試行錯誤を記事としてまとめてみました。 モチベーション Ruby on Railsを通してフロントエンドの実装をしていると、各種設定は、webpackerを使って簡単（暗黙

webサービスのUXを向上させるために、表示速度は非常に大切です。 しかしながら、noteはリリース当初からフロントエンドの実行速度が遅い=表示が遅いという構造的な問題を抱えており、継続率や離脱率など重要指標に悪影響を及ぼすリスクが強くありました。 noteチームはnoteを本格的なメディアプラットフォームへ成長させるスピードを加速していきます。それを踏まえ、手遅れになる前に技術的な負債を解消し、最新のベストプラクティスに沿ったフレームワークに移行することで、高性能なサービスを提供する基盤を作っていくという決断をしました。 本ポストでは、移行プロジェクトの技術的背景や移行手順を説明します。また、途中成果のデモをUPしているのでご紹介します。 技術的な背景noteの現在のフロントエンドはAngular.js 1系で構築されたSPAです。Angular 1系はかなり複雑なUIでも簡単に構築でき

本記事はVue meetup #5で発表させていただいた「Nuxt.js本格導入で遠回りしないためのTips」のスライド発表の内容をQiita向けの記事としてまとめ、内容を一部追加したものです。これからNuxt.jsを本格的に使ってみようという方の助力になれば幸いです。 本記事では、そこそこな規模の本格的なアプリケーションにNuxt.jsを導入する場合に多くの方が直面するであろう問題や、知っていると助かりそうなことを紹介します。 Tips 1. ドキュメントを読もう 本格的なウェブアプリケーションをNuxt.jsで作ろうとしているならば、VueとNuxtのドキュメントを先にしっかり読みましょう。VueやNuxtは使い始めるのに多くのことを知る必要がなく、少しずつ利用の幅を拡げていけます。これはVueやNuxtの良いところです。しかし、本格的なウェブアプリケーションを構築する場合、結局のとこ

先週、弊社が運営する３Dモデル検索ウェブサービス「heymesh」をリニューアルしました！4/10にサービスをリリースしてから初の大きなリニューアルになります。 今回リニューアルした内容の一つに今までVue.jsで書かれていたheymeshをNuxtに対応させるという要件があったのですが、本記事はVueで書かれたサイトをNuxt対応させる途中でハマったポイントと、どのように解決したのかについて自分用のメモもかねてまとめました。 本題から少し外れるため詳細は割愛しますが、Nuxt対応するに至った経緯としてはOGPやSEO対策しやすくするという要求があったためです。 ハマりポイント１：S3ホスティングが使えない heymeshの最初のリリースの際にはVue.jsで実装されていました。そのため、インフラ側はスタンダードにS3とCloudfrontでWebホスティングする手法を採用していました。

2018 年に入ってからは Vue.js / Nuxt.js を採用した Web サイト開発に携わっています。ログイン機能がある Web サイトで、データは API サーバーを叩いて取得するという構成。最近のフロントエンド開発は、感覚としてはアプリ開発ですね。 Vue.js に加えて Nuxt.js を採用したのは SSR（Server Side Rendering）をしたいという理由に尽きます。SSR することによるメリットは、以下となります： Facebook や Twitter が OGP タグを正しく評価してくれる 検索エンジンがサイトを正しく評価してくれる 副産物として、ログインユーザー情報が描画されて返るため、クライアント側で描画されるまでの空白状態がユーザーに見えない この記事ではそんな Vue.js / Nuxt.js を採用した Web 開発で得た知見を紹介していきます。

Wantedlyは、運命のチームや仕事に出会えたり、人脈を広げ、ビジネスの情報収集に使えるビジネスSNSです。

はじめまして。DMM.comラボ エンターテインメント本部イベント開発部の上井（ウワイ）と申します。 インフラからフロントエンドまで幅広く担当しております。 今回は、業務で利用しているNuxt.jsとFirebaseを使って、SPA×SSR×PWA×サーバーレスのWebアプリケーションを構築する方法をご紹介いたします。

背景 postd.cc という記事がちょっと前にありました。 github.com Roadmap to becoming a web developer in 2018って最近のWeb技術のまとめみたいなもんもよく引き合いに出されます。 このまとめの中にフロントエンドのものありますが、これはフロントエンド技術自体のロードマップです。 これらの技術すべてに精通していればいいのかと言われるとそんな必要は全く無くて。 でも現場によって実際 フロントエンドエンジニアに求められているものはそれ以外にもたくさんあるんですよね。 会社によってマジでJavascriptプログラミングしかやらない人も、マークアップする人、デザインを作ってそれをCSSに落とす人、本当に一口にフロントエンドエンジニアと言っても幅広すぎ。 担当範囲が広すぎるフロントエンドエンジニアに関していろんな会社が募集してると思うんですが

2018.05.22We are JavaScripters!でWordPressのフロントエンドをGatsbyにした話をLTしてきたblogltgatsbywordpress 5/21（月）のWe Are JavaScripters!でWordPressのフロントエンドにGatsbyを採用した話をしてきました。 前回のRoppongi.js#2でGatsby + Netlifyの爆速開発をLTしてきたのですが、その続編の話になります。 > スライドスライド https://speakerdeck.com/mottox2/wordpress-gatsby > モチベーションモチベーション 内製出来る体制がありフロントエンドエンジニアがWordPressを担当していると前提の元でのお話です。 エンジニアの工数が割けない状態であればWordPress単体で使い続けるのがいいと思います。 簡単に

kubernetes初心者がKnative Lambda Runtime触ってみた（Kubernetes Novice Tokyo #13 発表資料）

開発Divのeciです。 今年はVue Fes Japanが秋にあることですし、周りがみんな「vue,vue」言い始めたので、Vue.jsを触ってみました。 調べていくとNuxt.jsというフレームワークがよさげですので、今回はこれのチュートリアルを元に拡張していこうと思います。 Nuxt.jsにはスターターテンプレートが用意されていますが、今回は「スクラッチから始める」の方を参考にしていきます。 インストール - Nuxt.js ただ、このままですと味気ないですので、ログイン認証まで作っていきます。 では、行きましょう！ まずは、Helloページ表示まで ディレクトリを作成 $ mkdir hello $ cd hello package.jsonの作成 helloディレクトリ直下にpackage.jsonを作ります。 { "name": "hello", "scripts": { "d

Vue.jsとReact.jsを習得するために、どのように学んでいけばよいのか、次に何を学べばよいのか、その指針となるロードマップを紹介します。 【追記】 Angularのロードマップを追加しました。 基礎知識（HTML, CSS, JavaScript）、制作者として必要なスキル（Git, HTTPSプロトコル, Terminalなど）をはじめ、Vue.jsとReact.jsで何を学ばなければならないのかが、まとめられています。 拡大画像: Vueのロードマップ

上記の他に以下のような規則も必要に応じて設けると良いでしょう。 接頭辞（プレフィックス）を必要に応じて付ける（例：is-xxxx） 単語は略語を使用しない（NG例：cnt, hdg, tbl） 参考 変数名の命名規則/＊＊ケースの使い分け 命名方法 命名規則が決まればそれに則って命名すれば良いのですが、どういう単語を使えば良いのか指標がほしいところです。 英単語がすぐ出てこないような時はネーミング辞書 Codicを使ってみると良いです。命名の参考としては良いツールだと思います。 目的や内容によっては汎用的に使える英単語も存在します。例えば、レイアウト用の要素としてcontainer, row, col。ジャンル・業界別の要素としてabout, results,productsなど。 レイアウト用のclass名や汎用class名に関してはいろんなCSSフレームワークのコードを見て研究すること

vue-cliのwebpackテンプレートをベースにしてます。 https://github.com/vuejs-templates/webpack/tree/develop/template srcディレクトリ以下は構成をいじっていますが、ルートディレクトリは基本的に webpackテンプレートのままです。 Root:: ├─build ├─config ├─dist ├─static ├─test ├─src │ ├─assets │ ├─components │ │ ├─mixin │ │ ├─partial │ │ │ ├─modal │ │ │ └─plugin │ │ └─pages │ │ ├─member │ │ ├─register │ │ └─.....(etc) │ ├─lib │ │ ├─lang │ │ │ ├─en │ │ │ ├─ja │ │ │ ├─ch │

みなさまどうもこんにちは。 続きまして少し高度なCSS文法について勉強していきましょう。 当サイトのCSS入門編で紹介したセレクタの記述方法は要素を直に指定するのみでした。こんな感じですね。 p { color: red; } p.test { color: blue; } p#test { color: aqua; } セレクタ指定の方法は色々な記述方法がありますが、まず『◯◯要素の中にいる◯◯要素に対してCSSデザインを反映させる』方法を紹介します。 記述方法はとても簡単でいずれかの要素を記述した後に半角スペースを空けてさらに要素を記述すればOKです。以下のような感じですね。 p span { color: red; } 上記の場合はp要素の中にいるspan要素のみデザインを反映させることができます。HTML要素で考えると以下のような感じです。 <p><span>ここはデザイン反映され

CSSはスタイルシート言語です。 プログラミング言語のように記述的(imperative)ではなく、宣言的(declarativ）な言語です。 では良いCSSとはどのようなものでしょうか
？ それはプログラミング言語で良いコード、クリーンコードと言われるものと同じではないかと思います。 クリーンコードは、単純で直接的です。 クリーンコードは、うまく書かれた散文のようにも読めます。 -グラディ・ブーチ CSSはセレクタの命名とその記述方法によってのみ制御されるものです。 その制御はクリーンコードのように「うまく書かれた散文」を目指すべきです。 CSSの原則と設計 CSSはHTMLの見た目を制御する宣言が書かれた文書です。 そしてその設計にはHTMLも含まれるべきです。 CSSの仕組みは単純です。 要素を選択し、定義されたスタイル宣言を適応して見た目を変える。 原則も１つしかありません。CSS