JavaScript

JavaScriptでウィンドウサイズを固定する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでウィンドウサイズを固定する方法について現役エンジニアが解説しています。ウィンドウサイズとは、ブラウザの画面の幅と高さです。WebページなどのJavaScriptから受動的に起動されたカスタムのウィンドウは固定することができます。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　調査手法：インターネット調査

JavaScriptでウィンドウサイズを固定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

今回は、JavaScriptに関する内容だね！

どういう内容でしょうか？

JavaScriptでウィンドウサイズを固定する方法について詳しく説明していくね！

お願いします！

ウィンドウサイズとは

ブラウザに表示されてあるWebページの幅や高さではありません。ウィンドウサイズは、ブラウザの画面の幅と高さです。これらは、window.innerWidthプロパティと、window.innerHeightプロパティに格納されています。

ブラウザに表示されてあるWebサイトの幅と高さは、document.documentElement.clientWidthプロパティと、document.documentElement.clientHeightプロパティに格納されてあります。

[PR] コーディングで副業する方法とは

ウィンドウサイズを固定する方法

かつては、特には制約はありませんでした。ゆえに、ブラウザのウィンドウサイズを固定することが可能でしたが、セキュリティホール（脆弱性）を攻撃されて、悪戯や不正行為に利用されやすくなっていました。

したがって、近年のブラウザでは、ユーザーが、自発的に起動した初回のブラウザの画面については、ウィンドウサイズの固定はできなくなっています。その代わりに、ブラウザが読み込んだWebページなどのJavaScriptから受動的に起動されたカスタムのウィンドウは、クライアントサイドからの制御が可能になっています。

なお、新しいウィンドウをミリセカンドまで、制御することも可能です。

実際に書いてみよう

以下に、サンプルコードも掲載しています。新規に起動されたウィンドウが、画面の幅や高さに変動が加わった際に、幅300px、高さ300pxに戻す処理にかけられます。

JavaScript

window.open("javascript:window.addEventListener('resize', function (e) {window.resizeTo(300, 300); }, false);", "Good Luck.", "top=368, left=624, width=300, height=300");

動作結果

※CodePenに掲載している該当のコードは、コメントアウトにしています。
※ポップアップブロックが表示されたら、許可を選択する必要があります。
※セキュリティ対策や技術の都合にて、廃止される可能性があります。

確認方法

1. Firefoxにて、CodePenを開きます

2. CodePenのコード作成の「JS」のタブに先程のJavaScriptコードを貼り付けます。

3. 新しいタブが開かれたら、試してみましょう。

まとめ

「javascript:」は、セキュリティ対策や技術の都合に巻き込まれやすくなります。

また、ユーザーの画面全体を制御の対象とする処理は、広域かつ多大なる影響を及ぼす可能性が高いです。

筆者プロフィール

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

内容分かりやすくて良かったです！

ゆかりちゃんも分からないことがあったら質問してね！

分かりました。ありがとうございます！

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

CDNからjQueryファイルを読み込む方法【初心者向け】

JavaScriptのライブラリであるjQueryでファイルを読み込む方法を解説しています。 CDNでの読み込みでバージョン指定や最新版の使用など手軽に行...

JavaScript

JavaScriptでfor文を使ってループ処理する方法【初心者向け】｜現役エンジニアが解説

JavaScriptについてプログラミング初心者向けに紹介した記事です。今回は、JavaScriptでfor文を使ってループ処理する方法について解説します。 ...

JavaScript

JavaScriptでpromiseメソッドを活用する使い方【初心者向け】

JavaScriptでpromiseを活用する使い方のをサンプルプログラムを交えて解説します。非同期処理を行う際に便利なメソッドなので、ぜひ使い方を覚え...

JavaScript

JavaScriptのクラスのsuperの使い方を現役エンジニアが解説【初心者向け】

JavaScriptのクラスのsuperの使い方について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。また、入門向けの...

JavaScript

JavaScriptでbeforeunloadイベントを使ってページ移動前にアラートを表示する方法を現役エンジ

JavaScriptでbeforeunloadイベントを使ってページ移動前にアラートを表示する方法について、TechAcademyのメンター（現役エンジニア）が...

JavaScript

HTML5/CSS3を学んだ後にJavaScriptを学習するべき5つの理由

本記事は、EdTech.jp（エドテックドットジェーピー）から転載した記事になります。元記事はこちら。最近、私は、自分のオンラインコ...

JavaScript

あわせてよく読まれている記事

HTML5/CSS3を学んだ後にJavaScriptを学習するべき5つの理由

本記事は、EdTech.jp（エドテックドットジェーピー）から転載した記事になります。元記事はこちら。最近、私は、自分のオンラインコース（UdemyのBuild Responsive Real World Websites with HTML5 and CSS3）の受講生から次のような質問を受けることが増えてきました。私はUdemyのあなたのHTMLとCSSのコースを修了しました。私はWebエンジニアとしてさらに進歩したいと思っています。私に今後の方向性を教えてもらえますか？あなたの素晴らしいコースを受講した後、私は何を学ぶべきでしょうか？私はフロントエンド開発を続けるべきですか、それともバックエンドに移行すべきしょうか？どんな助言でも大歓迎です。これらの質問は本当に優れた重要なものですので、話をして考えることに時間を費やす価値があります。 Webエンジニアになるには、あなたが学習したいことを明確にして、それに時間を費やすことが重要です。あなたが達成したい目標についての計画です。こうした計画がなければ、あなたは多くの貴重な時間を失い、そしておそらく挫折してしまうでしょう。それは避けましょう。これらの質問を分析するために、まずHTML5/CSS3/JavaScriptの共通点を考えてみましょう。その次に、Web開発の基礎を習得したばかりの方にとって、JavaScriptが完璧な言語である5つの理由を紹介します。準備はできましたか？それでは進めましょう！フロントエンドとバックエンドのWeb開発シンプルに言うと、あなたがWebサイト上で見たりやりとりするものは、すべてフロントエンドです。例として、テキスト、画像、ボタン、フォームなどをイメージするといいでしょう。しかしWebサイト上には、スライダー、ポップアップウィンドウ、地図、アニメーションなどの動的要素も含まれています。ユーザーが見ることができるものは、フロントエンドの一部であるといえます。フロントエンドの基盤は、HTML5/CSS3/JavaScriptの3つの技術に基づいています。HTML/CSS/JavaScriptでコードを書いている開発者は、「フロントエンドエンジニア」と呼ばれています。あなたがインターネットからWebサイトやWebアプリケーションを読み込むたびに、ブラウザが表示するコードを彼らは書いているのです。つまり、フロントエンドコードを書くということは、ブラウザのためのコードを書くことといえます。これはおそらく分かりやすい表現だと思います。もちろん、フロントエンドに加えて、バックエンドもあります。Webサイトのバックエンドは、サーバー、アプリケーション、データベースで構成されています。これらは、すべてのデータが格納され、Webアプリケーションのロジックが実行される場所です。多くの場合、バックエンドは、最初にフロントエンドを可能にしているものです。PHP/Ruby on Rails/Python/Java/Node.js（これはJavaScriptを使用しますが、後で詳しく説明します。）などの技術は、WebサイトやWebアプリケーションのバックエンドをプログラムするために使用されます。最後に、いわゆる「フルスタックWebエンジニア」とは、フロントエンドとバックエンドの両方の技術を使って、完全なアプリケーションや複雑なWebサイトを書くことができる、スーパーヒーローのようなエンジニアのことです。しかし今日では、さまざまな技術、ライブラリ、フレームワークがWeb開発において登場しているため、本当に優秀なフルスタックWebエンジニアになることは、ますます難しくなりつつあります。さて、以上は簡単な概要でした。これらの用語を正しく定義しておくことは本当に重要です。というのも、あなたがWeb開発に関する情報を読むときによく目にするからです。また、あなたはいずれどちらの学習に時間（およびお金）を費やすか選択する必要があります。 JavaScriptが次の唯一のステップです HTML5/CSS3/JavaScriptはすべてフロントエンドのWeb技術であることを見たので、JavaScriptを学習することがあなたの次のステップになることは論理的に考えて妥当ですね？なぜなら、JavaScriptはあなたがフロントエンドのWebエンジニアになるために必要だからです。あなたがフロントエンドについて学習している最中であるとしたら、JavaScriptを学習することはその仕上げになります。しかし、理由は他にもあります。これはJavaScriptに今すぐ進むべき最大の理由ではありません。今日ではWeb開発に多くの技術があり、初心者には選択肢が多すぎます。その選択は難しいのです。Web開発の世界では、新しい優れた技術、フレームワーク、ライブラリが常に登場しています。多くの受講生はこのことに混乱し学習を完全に諦めてしまいます。何千人もの受講生は次のような状況に至っています。フロントエンドとバックエンドのどちらに焦点を当てるべきだろう？ Reactが本当に人気が高いと聞いた。だから私はそれを学ぼう。Reactは素晴らしいフロントエンドのフレームワークだという情報を読んだので、これを始めてみようか？それとも、AngularJSが良いだろうか？しかし、バージョン2はバージョン1と全く異なっているようだ。何だが混乱してきた。私はバックエンドの方が好きだと思う。… だからPHPを学ぶべきでは？PHPは簡単らしい。でも、今ではもう誰もPHPを使用していないようだ？むしろ、クールなスタートアップはどこもRuby on Railsを使用しているようだ。他には何があるだろう？Python？Java？Node.js？結局のところ、Web開発は私に向いていないかもしれない… そして、この状況はさらに続くでしょう。簡単ではないことが明らかです。しかしそうである必要はありません。なぜなら、JavaScriptが究極の答えだからです。JavaScriptを学ぶとしたら、あなたは今日、そして将来のために備えができることになります。その理由について見てみましょう。 [PR] コーディングで副業する方法とは理由1：JavaScriptはWebサイトやWebアプリに動きを与えます JavaScriptを使うと本当にすばらしいものを作ることができます。だから、世界中の大手企業がWebサイト上でJavaScriptを使用してユーザーのエクスペリエンスを向上していることも不思議ではありません。例として、ドラッグ＆ドロップなどの多くのユーザーインタラクションを伴うリアルタイムのWebアプリケーションは、本格的なデスクトップアプリの機能性を備えていることを考えてみましょう。あるいは巧みな効果やアニメーションの伴う美しいデザインのLP（ランディングページ）を考えるのもいいでしょう。具体例を4つご紹介します。 AirBnB 検索のインターフェースは完全にJavaScriptで動いています。 Googleスプレッドシートスプレッドシートのアプリケーション全体がJavaScriptで書かれたものです。 Blu Homes JavaScriptの効果やインタラクションを数多く含む美しいウェブサイトです。（ページ全体をスクロールしてメニューをクリックしてみることをおすすめします）。 St. Louis Browns JavaScriptが使われている豪華なWebサイトです。さて、これらは本当に発展的な例ですが、JavaScriptがいかに強力であるか、いかに重要な言語であるかを示すには十分であると思います。実際に、JavaScriptは「インターネットの共通言語」と呼ぶことができるでしょう。世界のWebサイトの99％がフロントエンドでJavaScriptを使用していると言っても過言ではありません。つまり、JavaScriptを学習することは単なる選択肢ではなく、必須です。しかし、このことはJavaScriptはフロントエンド以外でも使用できるという事実を考慮していません。理由2にそれを示します。理由2：JavaScriptはバックエンドでも使用できます私の意見では、これがJavaScriptを学ぶべき最大の理由です。 JavaScriptはブラウザ（フロントエンド）だけでなく、サーバー上でも使用できるため、バックエンド開発にも効果的に使用できます。これは、JavaScriptをサーバー上で実行するための軽量な開発環境であるNode.jsを使用して行います。 Node.jsはJavaScriptをサーバーに導入することにより、この言語に新しい可能性をもたらしました。だから、JavaScriptを使用すれば、あなたは効率的にフルスタックエンジニアのスーパーヒーローになることが可能です。Node.jsを実際に使用するためにはいくつかのことを学習する必要がありますが、全く新しい言語を学ぶよりも簡単です。世界最大の企業の中には、高速でモダンなNode.jsをすでに使用しているところもあります。たとえば、Netflix、Uber、PayPal、LinkedInなどの企業です。これらの企業はすべて、バックエンドでJavaScriptを使用しています。要するに、あなたのWeb開発のキャリアに最も効果を発揮するのは、他のどの言語よりもJavaScriptであるといえます。理由3：JavaScriptは始めるのが簡単ですあなたがJavaScriptでコーディングを開始する場合、1分以内に開始できます。これは冗談ではありません。JavaScriptは何もインストールする必要がなく、複雑な実行環境も、セットアップも、設定も、コードのコンパイルも、何も必要ないからです。他の多くのプログラミング言語では、これらのうちのいくつかは必要となりますが、JavaScriptではそうではありません。あなたが必要なのはすでに持っているブラウザだけです。テキストエディタを使用して、最初のアプリケーションの作成を開始します。しかし実際に始めることは、ブラウザで開発者ツールを開いて、コンソールに向かい、コードの入力を開始するだけです。これは本当に簡単ですが、同時に強力でもあります。理由4：JavaScriptエンジニアは需要が高く、報酬も高い近年、JavaScriptとそのコミュニティは成熟し、JavaScriptは確立した言語となり、真剣に受け止められています。今ではあなたもご存じのように、世界中のすべての大手ハイテク企業はJavaScriptを多く使用しています。そのため、JavaScriptエンジニアの需要は急上昇し、もちろん、最優良企業はIT業界で最高のエンジニアを引き付けようとしています。競争が激化すれば、最高の才能を持つ人を獲得するためにこれらの企業が提供する給料も増加します。求人ポータルサイトのgoorooによると、米国のJavaScriptエンジニアの平均給与は約95,000ドル（2015年9月時点）です。理由5：JavaScriptはインターネットの未来です JavaScriptはとどまるところを知りません。実際、私はJavaScriptこそインターネットの未来だと考えます。また、JavaScriptは発展の最終形ではありません。いわゆるシングルページWebアプリケーションの登場によって、React/AngularJS/Emberなどの多くの人気のあるJavaScriptフレームワークが開発されました。これらはすべてJavaScriptに基づいて構築されているため、JavaScriptを最初に（そして十分に）学ぶ必要があります。だから、現在のすべてのハイテク企業がアプリケーションにJavaScriptを利用しているという事実とともに、これらのフレームワークが世界中を支配しつつあるという事実を考えてみてください。これは、非常に迅速にJavaScriptを世界で最も人気のある言語にしている理由です。実際にはそれ以前からそうであったと主張する人もいるかもしれませんが。さらに役立つ情報としては、JavaScriptには競争相手になる言語がいないということです。フロントエンドWeb開発の標準的なプログラミング言語として代替言語になるものは、世界中のどこにも存在しません。もっとも、これは将来的にも他の代替言語が存在しないという意味ではありません。しかし、今日のJavaScriptはその優位性と普及率において無敵であるというのが、私の見解です。結論：JavaScriptを学ぶこと以上が、あなたが次にJavaScriptの学習に挑戦するべき最も重要な5つの理由です。これほど説得力のある言語は、世界中に他にありません。しかし、JavaScriptを学ぶのは簡単ではありません。コーディングは決して簡単ではありません。正直に言って、コーディングが簡単だと言う人は誰も、真実を伝えていません。しかしそれは、あなたや他の誰かがコーディングを学ぶことができないということを意味してはいません。もちろんJavaScriptのコーディング方法を学ぶことはできますが、正しい方法で学ばなければなりません。また、TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。JavaScriptを使ってリッチなWebサービスを作りたい方はぜひご覧ください。実践でも役立つJavaScriptのスキルを磨きたい人におすすめです。

JavaScript

サイズ指定に役立つ！CSSでcalc( )を使う方法【初心者向け】

CSSで書くcalcファンクションの使い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。要素の水平や垂直のセンタリング、可変的な幅の指定や均等に要素を配置したい場合にもcalcファンクションを使えます。異なる単位で複雑な計算も簡単に指定できます。レイアウトやサイズ指定を楽に行うことができるので、少し応用的な使い方ですが、覚えておくと便利でしょう。目次ウィンドウサイズとはウィンドウサイズを固定する方法実際に書いてみようまとめ筆者プロフィールそもそもCSSの記述方法がわからない場合は、 CSSの書き方について解説した記事を読むとさらに理解が深まります。大石ゆかり CSSで3等分にした要素の幅を設定するにはどうしたらいいですか？田島悠介いろいろ方法があるけどcalcファンクションを使えば簡単だよ。大石ゆかり calc？CSSで計算ができるんですか？田島悠介その通り！たとえば全体の幅から3等分した要素を作りたいならwidth: calc(100% / 3)のように指定できるよ。大石ゆかりへぇー。わかりやすいですね。田島悠介そうなんだ。まずはどういった記述の仕方をするか見てみよう。大石ゆかりはい！ calcファンクションとは CSSのcalcファンクションとは、レイアウトやサイズ指定に計算式を使えるようにしてくれるファンクションです。通常だと100pxや3emのようにレイアウトやサイズを指定しますが、calcファンクションを用いることで、100px + 50pxや、3em – 1em のように四則演算を使えるようになります。たとえば、縦横150pxの要素をブラウザの表示領域で中央に配置するには以下のように記述できます。 width: calc(100vw / 2 - 150px / 2); height: calc(100vh / 2 - 150px / 2); このように指定すれば、中央位置（50vw, 50vh）から150pxの要素の端から中心までの距離（150px / 2）だけずらした位置を求めて中央にセンタリングできます。 calcファンクションを使うメリット異なる単位で計算することができる計算が明白になる calc()は結果の値ではない異なる単位で計算することができる CSSのcalcファンクションは、異なる単位の値で計算式を作成できます。異なる単位で計算できれば、相対的な長さの単位（%、em、vwなど）と絶対的な長さの単位（pxやptなど）を組み合わせて、要素をセンタリングするなどの指定が簡単に記述できます。 %、em、pxなどいろいろな単位を組み合わせた計算が可能です。たとえば、表示領域全体から固定幅 80pxの要素の残りの幅を calc(100% – 80px) のように計算式で求められます。このように、固定幅の要素と幅が可変する要素を並べたいときに便利です。計算が明白になる calcファンクションを使うと、値が何を意味しているかが分かりやすくなります。たとえば3等分の幅にしたい場合、「width: 33.333333333%;」と指定するよりも「width: calc(100% / 3);」としたほうが、3等分の幅にしたいことが明白にわかります。固定された値を指定するよりもわかりやすく、3分割や7分割などの割り切れない値も設定できます。 calc()は結果の値ではない calcファンクションの計算結果は固定されているわけではなく、ブラウザの幅などに合わせてリアルタイムに計算されます。たとえば「height: calc(100vh – 50px);」と指定すれば、ブラウザの表示領域に合わせて常に高さが表示領域の半分より50pxだけ少なくなるように調整されます。 [PR] コーディングで副業する方法とはcalcファンクションの書き方 calcファンクションはCSSで値の代わりとして計算式を指定できます。 widthやheight、font-sizeなど値が指定できるところなら使えます。構文プロパティ（widthなど）: calc(式) 四則演算が使用できる指定する式では四則演算の演算子（+、-、*、/）が使えます。前後に空白が必要加算（+）と減算（-）では演算子の前後に半角スペースを空ける必要があります。除算（/）や乗算（*）では演算子の前後に半角スペースを入れなくても計算式が認識されますが、慣習として四則演算の演算子の前後には半角スペースを入れます。 ※演算子の前後に半角スペースを入れないと、加算や減算ではなく正の値や負の値として認識されます。詳しくは公式ドキュメント「calc() – CSS: カスケーディングスタイルシート | MDN」をご覧ください。 calcが利用できる場所 calcファンクションは、長さ（<length>）、周波数（<frequency>）、角度（<angle>）、時間（<time>）、数量（<number>）、整数値（<integer>）の値を設定する場所に対して使用できます。入れ子が可能 calcファンクションは入れ子にできます。入れ子にすると計算式の優先順位を決める、単なる括弧( )として扱われます。 calcファンクションの実装例実際にcalcファンクションを使った実装例を見てみましょう。ルートに基づいたサイズ指定要素を3等分の幅にする左右のセンタリング上下の中央配置ヒーローヘッダーの高さ調整ルートに基づいたサイズ指定 calcファンクションを使えば、フォントのサイズを相対的に指定できます。たとえば、calcファンクションでルート（最上位の要素。html要素）のフォントサイズより5px大きいサイズを指定しておけば、ルートのフォントサイズが変更されたら一緒に変わるようにできます。スマートフォンとPCなどでフォントサイズを一括して変更したいときに便利です。ソースコード「text_plus」クラスの要素のフォントサイズをルートのフォントサイズの1.5倍になるようにcalcファンクションで計算します。ルート（html要素）のフォントサイズが変更されたら、「text_plus」クラスの要素のサイズも変更されます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8">

CSS

JavaScriptとは何なのか！初心者向けに徹底解説

本稿は、Coding Dojoのブログ記事を、Coding Dojo Blogより了解を得て日本語翻訳し掲載した記事になります。なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。また、JavaScriptとは何かを解説した動画もあります。テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。目次 JavaScriptとは JavaScriptの利用シーン JavaScriptの強みなぜJavaScriptは不可欠なのか学習方法 JavaScriptとは多くの人は知らないことですが、私たちはみんなJavaScriptのヘビーユーザーで、1日に何十回も使っています。デスクトップのコンピューター、携帯電話から、スマートテレビ、最新モデルの車に至るまで、ほぼ全てのデバイスにJavaScriptが相当使われています。私たちがウェブ検索をしたりコンピュータに囲まれた生活を送る上で、役立っています。このようにJavaScriptはあらゆる場所に浸透していますが、あなたはそれでもまだ「JavaScriptとは結局何なのだろう？」と疑問に思うかもしれません。なお、JavaScriptはJavaとは全く別の言語です。 JavaScriptはプログラミング言語であり、ユーザー側のWebブラウザと、Webサイトまたはウェブサービスの相互間のやりとりを、円滑にするために使われています。実質的に、私たちがブラウジングで体験できることのすべては、ブラウザの中で使われているJavaScriptの処理によるものです。 Webサイトの外観のデザインや使い心地から、Netflixのサイトに表示される映画の題名のようなサイト内の情報表示に至るまで、JavaScriptが使われています。 [PR] コーディングで副業する方法とはJavaScriptの実行される一般的な場面 JavaScriptは、Webページを構成する全てのオブジェクトを操作できるため、魔法のようなことを実行できます。しかしながら、JavaScriptの実行される一般的な場面はあまりにも多いため、多くの人は、JavaScriptが隠れて使われていることにすら気づかないのです。 JavaScriptの実行される一般的な場面としては例えば次のようなものがあります。：ユーザーが適切な形式でメールアドレスをフォームに入力したかどうかをチェックする。 Google.comのページをロードするとき、テキストカーソルを検索ボックスに自動で出現させる。 Webページ全体をリロードしなくても、一部分だけロードすることを可能とするので、例えば映画のWebサイトで、次回のシリーズのリスト表示の部分だけロードしたいときなどに役立つ。最も単純なレベルでは、JavaScriptのコードは、ブラウザがWebページにアクセスしたときにダウンロードされます。ページのロードが完了して画面上に表示されると、JavaScriptのコードが実行されて、次に実行するべき動作がもしあればブラウザに指示します。テキストカーソルを検索ボックスに表示するなどの動作がすぐに実行されない場合、JavaScriptのコードはアイドリング状態になり、特定の「イベント」の発生を待つことになります。「イベント」が発生した時点で、JavaScriptのコードが発動され、動作を実行します。例として、登録用のフォームでパスワード欄に入力しているときには、JavaScriptはユーザーがパスワード欄に文字を入力し始める瞬間を待っています。Webサイトがパスワードに使える有効文字として認めていない文字を、ユーザーが入力しようとする場合には、JavaScriptのコードはすぐにこの問題に気づいて、パスワード欄に小さな警告メッセージをポップアップで表示して、ユーザーに知らせます。 RubyとJavaScriptの違いとはについて現役のエンジニアが回答した記事も合わせてチェックしてみてください。 JavaScriptの強み玄人のユーザーは、考えたり気づいたりしているかもしれませんが、パスワード欄に有効な文字が入力されたときの認証プロセスは、サーバー(：Webサイトのリモートホストとなるコンピュータ)によっても処理できるはずです。ここにJavaScriptのテクノロジーの基本的な強みがあります。つまりJavaScriptは、ユーザーの使っているデバイス上で、即時にタスクを処理することができるのです。通常の場合のように、Webサイトとサーバーで情報の送受信をするときに必要な時差はかかりません。なぜJavaScriptは不可欠なテクノロジーなのか？ JavaScriptをWebサイトに導入するとそのサイトを運営している企業にとって強力なツールとなるということに加えて、JavaScriptはテクノロジーとしていかに不可欠なものであるかを、理解することが重要です。この2つは、現在だけではなくて将来的にも重要な点になるでしょう。 JavaScriptとそのコーディングの始め方と使い方をしっかりと理解しておくことは、Webの技術や開発に興味のある人にとって最も重要なスキルです。 Node.js 近年、JavaScriptの技術を応用した数々のテクノロジーが出現しています。 Node.jsは、これらのテクノロジーの中で最も普及しているもので、GoogleのV8 JavaScriptエンジンを使って構築されたサーバーサイドのJavaScriptのライブラリです。Node.jsは強力なテクノロジーであるため、ここ数年で、Netflix、PayPal、Uberなど数多くの有名企業が自社の古いテクノロジーをNode.jsに変えているのです。 Node.jsの興味深いところは、これまでとは異なるJavaScriptの実行を可能とする点です。 Node.jsによって、JavaScriptはユーザーのコンピュータ上でのやりとりを処理するというよりも、サーバーサイドで全てのタスクを処理するための中心的な言語として機能するようになっています。 JavaScriptの世界的な人気現在、JavaScriptが世界中のデベロッパーの間で最も人気のあるプログラミング言語の1つであることは、大企業や有名なサービスでJavaScriptが広く利用されている事実だけではなくて、実質的にあらゆるサインとして示されています。 StackOverflowの報告 — エンジニア向けに仕事に関するアンケートを実施し、「2016年のデベロッパー報告」としてリリースしました。その報告によると、フルスタックエンジニア(：クライアントサイドとサーバーサイドの両方に従事している開発者)の85％は、仕事でJavaScriptを使っていると回答しています。人気テクノロジーのランキングで1位のJavaScriptの人気度は、2位のSQLより25％も高いものでした。Node.jsのようなサーバーサイドのテクノロジーが発展したことで、JavaScriptはバックエンドのエンジニアの間でも、1位の人気を博しています。 StackOverflowの担当編集者によると、｢JavaScriptは地球上で最も広く使われているプログラミング言語です。｣とのことです。画像：開発タイプごとに最も人気のあるテクノロジーのランキング「stackoverflow Developer Survey Results 2016」より JavaScriptの学習方法 JavaScriptの人気の高さとパワーに興味を持って学習を深めたいと思っている人向けには、数多くのサイトやリソースがあります。 JavaScriptを少しかじることから学習をスタートできるでしょう。以下に、今すぐJavaScriptを学べるいくつかのサイトをご紹介します。 JavaScript.com Interactive Tutorial — 今すぐJavaScriptのコードを書き始めることができるような、シンプルでわかりやすい講座が提供されています。 Eloquent JavaScript Online Book — もしあなたが、学校のテストで詰め込み型の勉強を楽しめるタイプであったり、ページを読み進めながら順序立てられた章の情報を消化することが好きだとしたら、このオンラインの書籍が向いています。JavaScriptを操作するために必要な全ての基礎を教えてくれます。 CodinGame.com — この教育アプリは数多くの言語学習をユーザーに提供していますが、JavaScriptもその1つです。JavaScriptのコードを、ゲームの中の小さなプログラムを作りながら学ぶことができます。モンスターを倒したり、主人公を危険な洞穴でナビゲートする場面で、あなたの書いたコードの結果を見ることができます。 Mozilla Developer Network JavaScript Guide — 使う情報を目の前に広げておきたい、あるいは正に必要としているトピックについての情報を得たい人は、このMDNのJavaScriptガイドを活用しておけば、まず間違いないでしょう。 CodeSchool JavaScript Roadtrip — 洗練されていてゲーム的な要素もある、双方向型の講座です。JavaScriptの基礎の習得をメインとしながら、重要テーマについての短いビデオ講座も、学習が進む中でいくつか提供されています。以上、JavaScriptについて詳しく説明しました。入門向けのJavaScriptの学習サイトも紹介しているので、合わせてご覧ください。人事・研修担当の方は、JavaScript/jQuery研修も提供しているので、ぜひご覧ください。 TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

JavaScript

【2016年の完全保存版！】フリーで使えるjQueryのプラグイン30選

本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。本記事は、Doru Ciobanu氏によって投稿されました。 jQueryはまだ必要でしょうか？リリースから約10年が経過した現在、jQueryは、最も普及しているJavaScriptライブラリです。10年前のブラウザのエコシステムにおいては、HTMLのDOM操作の複雑さを最小限に抑えるために開発されたブラウザ同士の戦争が繰り広げられていました。こうした状況で登場したjQueryはクロスブラウザを実現できたため、数多くのエンジニアを混乱から救ったのです。基本的にjQueryは、粗悪なネイティブAPIに代わる新しいAPIを開発し、ネイティブAPIでサポートされていない機能を実装し、バグのあるネイティブ機能の複製からバグのない機能を作成しました。 JavaScriptコミュニティの中には、ブラウザ間の不規則性に対処できるjQueryのメリットは非常に誇張されており、実際にはquerySelectors( )メソッドの実装があるためにjQueryは人気を得ているのだと主張する声もあります。現在のブラウザのエコシステムは10年前ほど複雑ではありません。一部のブラウザにおいてはHTML5のいくつかのAPIに非対応であることもありますが、以前ほど問題となることはありません。Chromeで何も問題がなければ、FirefoxやEdgeにおいても上手くいくでしょう。 jQueryは生産性と効率性を向上することができる、きちんと整理されてドキュメント化された、数多くのプラグインを提供しています。以下に、無料の素晴らしいjQueryプラグインのリストを挙げています。ぜひ使ってみてください。 1. Freewall FreewallはクロスブラウザなjQueryの豪華なプラグインであり、CSS3のアニメーション効果を伴うグリッドレイアウトを構築することができます。フレキシブルレイアウト、画像を使ったレイアウト、ネスト構造のグリッドレイアウト、Pinterestのようなレイアウトなど、どのようなレイアウトを構築するとしてもFreewallは、デスクトップとモバイル両方において動的なグリッドレイアウトを構築できるオールインワンのプラグインです。旧IE8を含むほとんどのブラウザをサポートしていて、汎用性の高いツールです。 2. multiscroll.js multiScroll.jsは、Webサイトに多方向スクロールを追加するのに役立つ優れたプラグインです。2つの垂直方向のレイアウトまたはパネルを備えた、マルチスクローリングなWebサイトの構築を容易にします。 UXを損うことなく、最初のページでユーザーの注目を集めることが図られています。すべてのモダンブラウザで完全に機能し、従来のブラウザでも上手く機能します。言うまでもなくこのプラグインはモバイルフレンドリーです。 [PR] コーディングで副業する方法とは3. rowGrid.js Googleの画像検索の表示のように、画像をすっきりとディスプレイすることができるプラグインです。親要素に合わせて、他の要素は行方向にまっすぐに並ぶように自動的に最適化されます。このとき全体的なバランスが取れるように、要素間の余白は調整され、要素のサイズは縮小されます。ただし同じ高さの要素を使わなければ、プラグインは正しく機能しません。 4. Slidebars Slidebarsは、プッシュメニュー（クリックすると開くメニュー）やサイドバーなど、canvas要素以外の要素をWebサイトに追加するのに役立つjQueryプラグインです。バージョン2は、マークアップを完全に書き直して改良され、canvas要素以外の要素を無制限に使用できるようになりました。 5. pagePiling.js シングルページのWebサイトを構築するときに最適なプラグインの1つです。スクロールのイベント発生時に、インターフェースは複数のページで構成されているように動作し、ユーザーに印象的なエクスペリエンスを提供できるでしょう。ナビゲーションの方向、スクロールの速度、アニメーションは自由にカスタマイズ可能です。カスタマイズに関してはこのプラグインの可能性は計り知れません。また完全にレスポンシブデザイン対応であるため、すべての画面上で正しく動作します。IE8を含めてほとんどのブラウザに対応しています。 6. Animsition Animationはページ間の自然な遷移を実現することで、楽しいユーザーエクスペリエンスを提供することが主な目的です。軽量なプラグインであり、ページ遷移に伴うスムーズで美しいCSSアニメーションを作成できます。標準的なフェード、フェードアップ、フェードダウン、回転、フリップx / y、ズームを含む60以上のさまざまな効果を表現できます。Animationは必須のプラグインです。 7. ZooMove マウスオーバーのイベント発生によって拡大される画像は、私は個人的には好きではありませんが、実装する必要がある場合にはZooMoveを使います。この洗練されたプラグインはスムーズで使いやすいです（添付したGIF画像だけでは十分に良さをお伝えできません）。 8. Rippleria Rippleriaは、Googleのマテリアルデザインからインスピレーションを受けた、軽量のjQueryプラグインです。クリック・タップのイベント発生によって波紋の効果が発動することで、ユーザーの視覚的なエクスペリエンスを高めます。 button要素、アイコン、div要素、image要素などのDOM要素に応用することができます。実装とカスタマイズは簡単です。 9. Flickity Flickityほど詳細なドキュメンテーションを備えたjQueryはありません。ドキュメンテーションは正確、詳細、論理的に構造化されているので、Flickityの開発者はドキュメンテーションの最高賞を受けるにふさわしいでしょう。製品自体も美しく目の保養です。最も優れたカルーセルプラグインの1つです。タッチフレンドリー、レスポンシブデザイン、フリック操作対応のイメージギャラリーを実装できるプラグインです。個人利用の範囲では無料ですが、商用利用には有料のライセンス契約が必要です。 10. Unslider Unsliderは、Webサイトにスライダを設定するときには最も速く最も簡単なプラグインです。小型ですが柔軟です。オプション、設定、メソッド、コールバックイベントなどを通して自由に変更できます。 11. Lightcase.js Lightcaseはライトボックスのための素晴らしいプラグインです。まだjQuery 3では動作しませんが、開発者は新しいリリースを計画中です。レスポンシブなCSS3アニメーションのライトボックスを作成するための素晴らしいツールです。 scrollTop、scrollRight、scrollLeft、scrollVertical、scrollHorizontal、scrollBottom、fade、fadeinline、elasticなどのメソッドによって、CSS3のアニメーションを表現できます。また、div、image、iframe、videoなどのDOM要素、text、Flashをサポートしています。 12. PhotoSwipe PhotoSwipeは、JavaScriptの画像ギャラリーを実装できる私のお気に入りのプラグインです。指で広げる（ズーム）、ピンチ（閉じる）、縦方向にスワイプ（閉じる）、横方向にスワイプ（切り替え）などのタッチジェスチャーをサポートしています。またシングルタップジェスチャーとダブルタップジェスチャーは、カスタマイズ可能です。他の多くの画像ギャラリーのプラグインと異なり、ナビゲーションフレンドリーな構築が可能です。またキーボードコントロールもサポートしています。HTML5による全画面表示モードによって、ユーザーにイマーシブな体験を提供できます。ページ読み込みが完了するまで、ギャラリーに使われているJavaScriptの読み込みを遅らせるよう設定できるので、プラグインがページの読み込みを遅らせることもありません。また、「ギャラリーを開くボタン」によって、プラグインのみ読み込みを開始することもできます。PhotoSwipeは、レスポンシブデザインの画像を詳細に保存することにも優れています。画像は最大サイズで表示され、表示領域が画像よりも小さい場合には拡大できます。これらの機能を合計しても約14 KBの容量であり、開発ツールキットとして必須のプラグインです。 13. Strip Stripは、Webサイトにエレガントなライトボックスを追加することができる柔軟なプラグインです。滑らかでスマートです。大きな画面においてはページを部分的に覆うだけなので、UIの要素、テキスト、その他のレイアウト部分を表示する余裕が確保されていて、インタラクションの邪魔になることもありません。小さな画面においては一般的なライトボックスとして機能します。このプラグインは使いやすく、調整するために数多くの設定が用意されています。 14. Turntable.js あなたの製品を紹介することができるショーケースのプラグインは数多くあり、玉石混交です。動的でイマーシブな体験を通してユーザーに製品を紹介したい場合、特に実体のある3次元世界の製品を販売しようという場合には、Turntable.jsが良いでしょう。最初に私がこのプラグインを試したときには、360°の全角度からこれほど滑らかなビューを作成できることに驚きました。従来のWebスライダーのスイートパッケージ製品、jQueryのスライダーや画像ビューアなどと比較すると、Turntableは革命的なプラグインです。このプラグインの最大の売りは、ナビゲーションアイコンを使わずに済むことであり、タッチスクリーン上でマウスや指を使って画像を回転・フリップすることができます。インストールは簡単で、クリーンなコードです。 15. Vide.js あなたのWebサイトの背景に動画を追加するための最も簡単な方法は、Vide.jsです。すべてのモダンブラウザでサポートされているため、プロジェクトで素晴らしい外観をデザインするのに役立つでしょう。動画のプラグインに通常期待される設定は備わっているので、あなたが必要とする外観を得ることができるでしょう。 16. Trianglify 背景で動画を再生したくはないものの、普通の画像や背景だけでは退屈だと思う場合には、Trianglifyが良い選択です。独自のアルゴリズムにより三角形のパタンを生成します。分散、セルのサイズ、色は指定できます。急ぎの場合にはTriangle Generatorを使うこともできます。パタンは、canvas要素、svg要素、png形式などにレンダリングできます。またレンダリングの実装をオリジナルに作成することもできます。 17. LazeeMenu Webページのメインメニューをシンプルにしたいのに、メニューツリーが巨大である場合には、追加のサイドバーメニューを使用すれば、使いやすさと完全性のバランスを図ることができます。 LazeeMenuは、順序付けされていないネスト構造のリンクを、複数の階層構造で構成されるナビゲーションメニューに変換します。少しの調整であなたのニーズに合わせたカスタマイズが可能です。 18. Web-ticker 開発したアプリの新しいバージョンを公開したときには、あなたは誇りと達成感を感じるでしょうか？こうしたニュースは世界と共有するべきです。Web-tickerの開発者は、使い始めるときに役立つ手順についてのガイドを提供しています。 Web-tickerには多くの設定が備わっているため、あなたの望む外観のデザインに合わせて微調整することができます。事例として、ニュース、告知、販売などに利用されています。また画像を配置することもできますが、ユーザーを動画で悪酔いさせたくなければ、この機能は使わないことを強くおすすめします。 19. Inputmask UXにおいては詳細が重要であるともいえます。無効な日付形式を入力したときに、フォームに再入力を求められる場面を経験したことはありますか？こうしたことは非常に面倒なので、私はフォームを実装するときには必ずInputmaskを使っています。あらかじめ定義されたフォーマットを保証することでユーザーの入力をサポートできます。日付、数字、電話番号などに使用できます。Inputmuskは軽量なプラグインですが役に立ちます。使いやすく、柔軟性があり、数多くのオプションがあります。また、動的データマスク、正規表現のマスク、オルタネーターマスクなどをサポートしています。 20. jquery.email-autocomplete.js また電子メールアドレスのドメイン部分を自動入力するための単純なプラグインが必要な場合は、jquery.email-autocomplete.jsが最適です。あらかじめ定義済みの電子メールのドメインリストに基づいて、対応するドメインをプラグインが提案してくれます。ユーザーは、タブキーまたは右矢印キーを押すか、提案をクリックすれば、ドメインの残りの部分は自動的にプラグインが埋めます。このプラグインはモバイル環境でも機能します。 21. tinyDatePicker 小さく、速く、拡張性と柔軟性の高い、日付時刻のプラグインとしてはtinyDatePickerがおすすめです。多くの機能が組み込まれていて容量は約5KBです。カレンダー、アジェンダ、予約システムなどがこのプラグインが非常に役立つ場面です。Bootstrapなどの他のフレームワークと統合することもできます。 22. ReadRemaining.js 「光陰矢の如し」ということわざがあります。20のブラウザのタブが同時に開かれ、スマートフォンに多くの通知が表示され、情報が流れ続ける現代においては、ますます読むための時間が少なくなっています。 ReadRemaining.jsは時間を魔法のように止めることができるわけではありませんが、ユーザーにWeb上の記事を読み始めてからの経過時間を知らせることができます。このプラグインはさり気なく、コンテンツを読む邪魔となることはありません。 23. Tooltipster Tooltipsterのツールチップとは、ユーザーのアクションに反応して表示されるテキストラベルのことです。ツールチップは悪用されない限り、アプリのUXを良い方向に強化してくれます。 Tooltipsterは拡張可能なjQueryプラグインであり、ツールチップで豊富な機能を実現するのに役立ちます。誰にとってもシンプルで万能なプラグインです。 24. TableExport.js 簡単に実装できるjQueryプラグインです。たった1行のコードだけで、HTMLのtable要素を素早く動的に、Excelのスプレッドシート、コンマで区切られた値、通常のテキスト、テキスト形式のファイル（.txt）などに変換します。とてもシンプルです。 25. Addel Addelは、form要素を念頭に設計された、HTML要素の動的な追加・削除をUIに実装するための軽量なjQueryプラグインです。このプラグインは直感的で柔軟性があり、動的なフォームを作成するときには時間の節約になります。 26. Chart.js Chart.jsは統計データを表示するのに最適なプラグインです。データの表示には、8つの図表のデフォルト設定を利用できます。拡張性を備えた図表を表現することができます。データを変更時には、遷移アニメーションを実装できます。すべてのモダンブラウザにおいてレンダリングのパフォーマンスも優れています。積極的に開発が続けられているプラグラインであり、定期的に新機能が追加されています。もはや退屈な図表となることはありません。 27. jQuery Flip-Quote テキストに躍動感を持たせるには最高のプラグインです。 Flip-Quoteはドキュメント内のテキスト引用符から引用を作成し、スクロール時に画面に表示されると、引用を表示しながら反転します。ドキュメントの引用元もハイライト表示できます。もはや退屈な引用符となることはありません。 28. Sharetastic あなたのWebサイト、アプリ、製品へのトラフィックを増やしたい場合には、ソーシャルメディアにおける存在感を維持することが不可欠です。Sharetasticはシェアボタンを表示するときに役に立ちます。完全にカスタマイズが可能で、3つのビルトインテーマが組み込まれていて、とても使いやすいプラグインです。 29. HideSeek HideSeekは、あなたが探して求めてきた検索用プラグインかもしれません。検索モジュールとしては最高のインタラクティビティが実現されています。検索された用語をハイライト表示したり、検索結果間にナビゲーションを表示したり、要素を無視したり、アクセント記号付きの文字を無視したり、見出しのあるリストをサポートすることもできます。 30. Timedropper Timedropperは楽しい外観のプラグインです。カスタマイズに優れていて、4つのスタイルオプション：プライマリー色・テキスト色・背景色・ボーダー色と、6つの機能（自動スイッチ・時刻表示形式・フォーマット・アニメーション・マウスホイール・現在時刻の自動取得）があります。 Timedropperと似たもっと多機能のプラグインも他にいくつかありますが、Timedropperは滑らかで直感的で動作を正確に実現できます。また、Timedropperの開発者による他のプラグインとしてはDatedropperがあり、8つのスタイルオプションと8つの機能オプションを備えているため、あなたが必要とする外観を正確に構築できます。おわりに TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。JavaScriptを使ってリッチなWebサービスを作りたい方はぜひご覧ください。現役エンジニアがパーソナルメンターとして受講生に1人ずつ付き、マンツーマンのメンタリングで学習をサポートし、フロントエンドの技術をマスターすることが可能です。

JavaScript

JavaScriptでオセロゲームを作成する方法を現役エンジニアが解説【初心者向け】

JavaScriptでオセロゲームを作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。目次ウィンドウサイズとはウィンドウサイズを固定する方法実際に書いてみようまとめ筆者プロフィールそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptでオセロゲームを作成する方法について詳しく説明していくね！大石ゆかりえっ？オセロゲームを作るなんて、難しそうですね、、、田島悠介大丈夫！1つ1つの処理を丁寧に解説するから、一緒に頑張ろう。大石ゆかりはい！よろしくお願いします！はじめに対象読者本記事は、JavaScriptを学習中であり、変数や関数などひととおりの基礎知識を学習した初心者の方向けに書いています。本記事が難しすぎると感じた場合や、JavaScriptの基礎を学習してから挑戦したい場合には、以下で紹介しているサイトなどを用いて学習してみましょう！入門向けのJavaScriptを学習できるサイト本記事の目的本記事の目的は、JavaScriptを用いたオセロゲームの実装を通して、以下のようなスキルを習得・向上させることです。設計から実装までの、エンジニアの思考プロセスを体験するゲームロジックに基づいたプログラム実装を通して、論理的思考能力を鍛えるオセロゲームの実現に必要な様々な処理を学び、JavaScriptという言語の仕様をより深く理解する上記の目的を達成するために、本記事は読者のみなさんが実際に手を動かしながら学べるハンズオン形式をとっています。解説に沿ってコードを書きながら、プログラミングに親しんでいきましょう！注意点本記事では、オセロゲームを0から実装するために必要な解説のすべてを記載しているため、記事の分量が多くなっています。一気に最後まで進めようとせずに、ご自身のペースで学習を進めることを推奨します。本記事では章ごとに所要時間の目安を記載しているので、学習の区切りを決める参考にしてください。オセロゲームのルールに基づいて設計をしよう 🕛目安時間：1時間ゲームに限らず、いかなる実装においても設計は非常に重要です。機能要件を満たしつつも、できるだけシンプルでメンテナンスしやすい設計を考えるのもエンジニアの醍醐味の1つです。「その設計、自分ならどうするかな？」ということを考えながら読み進めてみてください。オセロゲームのルールを確認しようオセロゲームを実装する上での機能要件は、一言でいうと「オセロゲームのルールに従って盤面の状態が変えられる」ということです。まずは前提条件となるオセロゲームのルールを確認していきます。オセロゲームのルール盤は8×8マスを利用する初期状態で真ん中の4マスに白黒の石を交互に配置する先攻を黒とし、黒⇨白⇨黒…の順番で石を置いていく石を置ける場所は、下記の条件を満たしている置くマスに他の石がないこと置くマスの上下左右、斜め1マスの場所に相手の石があること置いた石、相手の石があった方向の延長上に自身の石があること石を置ける条件を満たせない場合は、パスをして相手の番になるすべてのマスに石が置かれた時点でゲーム終了（「空きがあるが、白黒どちらも置けない」状況は今回は考えないことにする）ゲーム終了時点で石の数が多い方が勝ちとなる以上がオセロゲームのルール概要です。ルール以外の要件を定めようゲームのルールのほか、今回の実装では以下の条件を適用することとします。自動でパスする機能は実装せず、「パス」ボタンを設置する「現在どちらの手番であるか」を表示するゲーム終了後、白黒それぞれの石の数と勝敗を表示するゲームの初期化機能は実装しない石が裏返るなどのアニメーションは実装しない CPUとの対戦機能は実装しない jQueryなどのフレームワークは使用しない画像は用いないそれでは、要件を確認したところで実際の設計に移りましょう。要件に沿って実装設計をしてみよう同じルールや条件でも、それをどのように実装に落とし込むかはエンジニア次第です。実装設計では、いかに無駄なくすべての要件を満たした実装ができるかを考え尽くします。それでは、紙やプレゼンスライドなどに、大まかな処理の流れを考えて書いてみてください。想定されるケースを洗い出し、そのケースに応じてどう処理を分岐するかを矢印で表してみましょう。本記事の執筆者は、以下のように流れを作成しました。上図のように場合分けをしつつ、プログラムのフローを書き出すことで、コードに落とし込む際に整理がしやすくなります。もちろん上記のフロー図が唯一の正解ということではなく、他にもいろいろなパターンの表現方法が考えられます。想定されるケース・条件を網羅し、かつ無駄のない流れで設計できると、「良いフロー図」と呼ぶことができます。本セクションは以上です。休憩・復習などをして、ご自身のペースで次のセクションへ進んでください。 [PR] コーディングで副業する方法とは開発環境を整えよう 🕛目安時間：30分今回の開発に必要な環境は以下の通りです。コードエディタ（図解ではVisual Studio Codeを使用します） Webブラウザ（Google Chrome推奨）コードエディタを用意しようコードエディタは普段使い慣れているもので構いませんが、解説に用いるVisual Studio Codeを導入したい方は、以下の記事を参考にセットアップしてください。 Visual Studio Code（VSCode）とは？インストールや使い方も現役エンジニアが解説 Webブラウザの環境を整備しよう主要なWebブラウザには、コードの構造を確認したり、エラーを発見したりするための開発者用ツールが備えられています。本記事では、実務現場の多くで使われているGoogle Chromeを用いて開発を進めていきます。開発者ツールの使い方をまだ学習していない方は、次のセクションに進む前に以下の記事に目を通しておいてください。 Chromeの開発者ツールを使ってJavaScriptのデバッグを行う方法を現役エンジニアが解説【初心者向け】盤面と石をブラウザ上に表示しよう 🕛目安時間：1時間30分このセクションでは、オセロゲームに必要な盤および石を表示するための実装を行います。本格的にHTML / CSS / JavaScriptのコードが登場するので、要点を1つ1つ理解しながらコーディングをしていきましょう。必要なフォルダとファイルを作成しようまずはプロジェクトのルートとなるフォルダを1つ、PCの任意の場所に作成してください。（例ではオセロゲームの一般的な英語名であるreversiというフォルダ名にしました）フォルダ内には、以下の3つのファイルを作成してください。 index.html style.css main.js 下図のような構成にできていればOKです。 HTMLをコーディングしよういよいよコーディング作業に入ります！今回はサンプルコードに従って、index.htmlの中身を記述してみましょう。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>オセロゲーム</title> <link rel="stylesheet" href="style.css"> </head> <body>  <div id="stage" class="stage"></div>  <div id="square-template" class="square"> <div class="stone"></div>

JavaScript

JavaScriptとデータベースの操作を現役エンジニアが解説【初心者向け】

Webサイトを作っていると、様々な情報を保存したい場合がありますよね。ニックネームや文章、写真などを保存して表示すれば、様々な機能を実現できます。例えばコメントや投稿をして表示すれば、SNSのようなWebサイトを作ることができるでしょう。本記事では、JavaScriptを使ってサーバにデータを保存する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。また、入門向けのJavaScriptを学習できるサイトも紹介しているので、あわせてご覧ください。目次ウィンドウサイズとはウィンドウサイズを固定する方法実際に書いてみようまとめ筆者プロフィールそもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。田島悠介今回は、JavaScriptに関する内容だね！大石ゆかりどういう内容でしょうか？田島悠介 JavaScriptとデータベースの操作方法について詳しく説明していくね！大石ゆかりお願いします！ JavaScriptでデータを保存する方法プログラミング言語JavaScriptでデータを保存する方法はいくつかあります。代表的な手法を3つ、それぞれの特徴をまとめました。手法用途例データ保存先注意点ローカルストレージユーザー入力履歴 Webブラウザ保存先がサーバではないデータベース掲示板・SNS・ログインデータベースサーバサーバサイドJavaScript BaaS クラウド掲示板・SNS・ログインクラウドサーバクラウドサービスを利用それでは詳しく見ていきましょう。ローカルストレージ JavaScriptでデータを保存する一番簡単な方法がローカルストレージです。 setItemでデータを保存し、getItemでデータを取り出します。 localStorage.setItem("username", myData.name); const value = localStorage.getItem("username"); See the Pen Local Storage JS by TAKAYOSHI (@lspuwbkv) on CodePen. 詳しい使い方は、こちらの記事やこちらの記事でも解説していますので、ぜひご覧ください。ローカルストレージでは、データが保存されるのはブラウザ内で、サーバではありません。例えばユーザーが入力した名前などを保存しておくことができます。しかし、他のユーザーに保存した情報を公開することはできません。掲示板やSNS、問い合わせフォームなど、「アップロード」はできないのです。アップロードの仕組みを作るには、サーバにデータを保存する必要があります。 [PR] コーディングで副業する方法とはデータベースサーバとバックエンドデータを保存するサーバで、まず思い浮かべるのが、データベースサーバです。 Oracle、MySQL、SQLiteなど様々な種類のデータベースサーバがあります。旧来から、様々なWebサービスのバックエンドでデータを保存するために使われています。ですが一般的なJavaScript、Webブラウザで動作する「フロントエンド」では、データベースサーバに接続できません。 Webブラウザは「http」や「https」という方式で、Webサーバとの接続だけできます。データベースサーバと接続するための方式は、セキュリティ上許されていないのです。データベースサーバと接続できるのは「バックエンド」のみ。つまりPerlやPHPやRubyやJavaやPythonなど、サーバで動くプログラムだけです。そのため、旧来は「サーバ/クライアント構成」という仕組みを作るのが一般的でした。サーバにPHPなどでプログラムをし、HTTPを使ってデータを受け取ります。そして、そのデータをデータベースサーバに保存するのです。すると、表示するHTMLを作るときに、データベースに保存した情報を使えますね。誰かが投稿した文章や写真を使ってHTMLを作れば、掲示板やSNSになるでしょう。つまり、データベースサーバにデータを保存するには、3つの言語を使う必要があったのです。 JavaScriptなどのクライアント言語、PHPなどのサーバ言語、MySQLなどのデータベース言語。少しレベルが高いですね。「NodeJS」バックエンドJavaScript そんな中、2009年にNodeJSが登場し、JavaScript技術が大きく発展します。 NodeJSを使うと、JavaScriptでバックエンドを作ることができます。つまり、JavaScriptでデータベースサーバに接続できるのです。 JavaScriptは、Webブラウザ上で動作するプログラミング言語として生まれました。そのため、できることはブラウザに許可されていることに制限されてしまいます。そこで登場したのがNodeJSです。 NodeJSとは、JavaScriptをブラウザの外で動かすための実行環境です。 WindowsやMac、LinuxなどのOSにインストールして使います。文法はJavaScriptですが、従来のブラウザ上で動くJavaScriptとは全く違う概念です。そこで、NodeJSをサーバにインストールし、バックエンドを作るために使われます。バックエンド/フロントエンドの境目なくプログラミングできます。また、必要な言語も1つ減り、少し敷居が低くなりました。「BaaS」バックエンド as a サービスしかしながら、サーバにデータを保存するためにはバックエンドを作る必要があります。 NodeJSやデータベースのを用意したり、まだまだ気軽ではありません。フロントエンドで簡単にサーバにデータを保存したい、そんな悩みを解決するのが、「BaaS」バースという種類のクラウドサービスです。クラウドとは「インターネット越しに」「設定運用の手間なく」「後払い従量課金で」サービス化することです。何をクラウド化したものかを、 aaS （as a Service）という言葉で表しています。ソフトウェアのクラウドがSaaS (Software as a Service)、プラットフォームのクラウドがPaaS（Platform as a Service）です。そして、バックエンドをクラウド化したものがBaaS（Backend as a Service）です。データ保存やログイン、プッシュ通知といったバックエンド特有の機能を提供するクラウドサービスです。クラウドなので「インターネット越しに」「設定運用の手間なく」「後払い従量課金で」使えるのです。 Amazon AWSや Google Firebase、Microsoft Azureなど様々なクラウド事業者のBaaSがあります。ユーザー登録してログインすれば、JavaScriptからAPIを使って簡単に使えます。豊富なマニュアルやサンプル、安価な料金や無料利用枠も魅力ですね。まとめいかがだったでしょうか。 JavaScriptからデータを保存する3つの方法をご紹介しました。作りたいものやレベルにあった、一番良い方法を選んでみてください。データの保存ができると、高度なWebサービスを作ることができますね。ぜひチャレンジしてみてください！大石ゆかり内容が分かりやすくて良かったです！田島悠介ゆかりちゃんも分からないことがあったら質問してね！大石ゆかり分かりました。ありがとうございます！ JavaScriptを学習中の方へこれで解説は終了です、お疲れさまでした。つまずかず「効率的に」学びたい副業や転職後の「現場で使える」知識やスキルを身につけたいプログラミングを学習していて、このように思ったことはありませんか？テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

JavaScript

記事を検索

ニュース

インタビュー

テクノロジー

キャリア

お問い合わせ

JavaScriptでウィンドウサイズを固定する方法を現役エンジニアが解説【初心者向け】

目次

ウィンドウサイズとは

ウィンドウサイズを固定する方法